สรุป

ทําความเข้าใจเทมเพลตเลย์เอาต์การเขียนและเลย์เอาต์การออกแบบตัวอย่างเพื่อออกแบบและสร้างหน้าจอแอปที่ไม่ซ้ำกัน

แอปส่วนใหญ่ใช้เลย์เอาต์แบบเลื่อนหรือไม่เลื่อน ซึ่งประกอบด้วยองค์ประกอบต่อไปนี้

  • ข้อความเวลา: เนื่องจากอุปกรณ์เป็นนาฬิกา เราจึงขอแนะนำให้แสดงข้อความเวลาแม้อยู่ในเส้นทางการใช้งานแอป (ไม่บังคับ แต่แนะนำ)
  • ชื่อหน้า: บอกเส้นทางและช่วยเตือนผู้ใช้ว่าอยู่ตรงไหนในเส้นทาง (ไม่บังคับ แต่แนะนํา)
  • ตัวบ่งชี้การเลื่อน: ใช้ได้เฉพาะกับเลย์เอาต์แบบเลื่อน บ่งบอกว่ามีเนื้อหาเพิ่มเติมด้านล่างครึ่งหน้าล่างของหน้าจอ
  • ปุ่มดำเนินการ: แนะนำให้วางไว้ที่ด้านล่างเพื่อยืนยัน สรุป หรือดำเนินการต่อในเส้นทางของผู้ใช้

ส่วนเลย์เอาต์แอป

ส่วนบนสุด

ส่วนด้านบนมีตัวเลือกข้อความเวลา ปุ่มแบบกะทัดรัด และชื่อที่ทำหน้าที่เป็นเครื่องมือค้นหาเส้นทางและการนำทางที่ชัดเจน โดยคุณเลือกหรือไม่เลือกก็ได้

ปุ่มแบบกะทัดรัดใช้ได้ในกรณีพิเศษที่หน้าเว็บยาวมาก และปุ่มค้นหาหรือปุ่มดำเนินการจะช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของรายการได้โดยไม่ต้องเลื่อนไปจนสุดด้านล่าง

ส่วนกลาง

ส่วนตรงกลางอาจมีองค์ประกอบการเขียน (แบบไม่เต็มหน้าจอ) หรือคอมโพเนนต์ที่กำหนดเองรายการใดก็ได้ ส่วนนี้อาจมีส่วนหัวเพิ่มเติมเพื่อจัดกลุ่มเนื้อหาและแถบเลื่อน

คอมโพเนนต์ทั้งหมดในส่วนเนื้อหาตรงกลางควรเป็นแบบปรับเปลี่ยนตามอุปกรณ์ โดยให้เต็มความกว้างที่มีจนถึงส่วนต่างเปอร์เซ็นต์ เลย์เอาต์การเลื่อนทั้งหมดจะมีลักษณะการทํางานของคอลัมน์แบบ Lazy ซึ่งจะแสดงคอมโพเนนต์ที่ปรับขนาดและค่อยๆ เลือนออกจากหน้าจอ

ส่วนด้านล่าง

ส่วนด้านล่างมีที่ว่างสำหรับปุ่มการดําเนินการหลักและรอง หรือจะปล่อยว่างไว้ก็ได้หากเป็นจุดสิ้นสุดของเส้นทาง

เราขอแนะนำให้ใช้ปุ่มที่แนบไปกับขอบของรายการท้ายๆ เนื่องจากใช้พื้นที่อย่างจำกัดและเสริมให้เข้ากับหน้าจอกลม

อาจมีการดำเนินการมากกว่า 1 รายการ ซึ่งอาจปรากฏในกองปุ่มหรือกลุ่มปุ่มที่มี 2 ไอคอน

การดูแอปแบบไม่เลื่อน

มีชื่อ
ไม่มีชื่อ

มีชื่อและไม่มีส่วนด้านล่าง
ไม่มีชื่อหรือส่วนด้านล่าง

การเลื่อนดูมุมมองแอป

มีชื่อ
ไม่มีชื่อ

มีชื่อและไม่มีส่วนด้านล่าง
ไม่มีชื่อหรือส่วนด้านล่าง