ลิ้นชักการนำทางเป็นองค์ประกอบสำคัญในแอป TV เนื่องจากทำให้ผู้ใช้ เพื่อเข้าถึงปลายทางและฟีเจอร์ต่างๆ ลิ้นชักการนำทางคือ กระดูกสันหลังของสถาปัตยกรรมข้อมูลแอป ซึ่งมีความชัดเจนและใช้งานง่าย วิธีไปยังส่วนต่างๆ ของแอป
ซึ่งตรงข้ามกับลิ้นชักการนำทางบนอุปกรณ์เคลื่อนที่ ลิ้นชักการนำทางเปิดอยู่ ทีวีจะมีสถานะทั้งขยายและยุบให้ผู้ใช้เห็น
แหล่งข้อมูล
| ประเภท | ลิงก์ | สถานะ |
|---|---|---|
| การออกแบบ | แหล่งที่มาของการออกแบบ (Figma) | ใช้งานได้ |
| การใช้งาน |
Jetpack Compose (navigationDrawer)
Jetpack Compose (ModalnavigationDrawer) |
ใช้งานได้ |
ไฮไลต์
- ปลายทางเรียงลำดับตามความสำคัญของผู้ใช้ โดยมี ปลายทางแรกและปลายทางที่เกี่ยวข้องซึ่งจัดกลุ่มไว้ด้วยกัน
- ต้องใช้แถบการนำทางสำหรับทั้งการนำทางแบบมาตรฐานและการนำทางแบบโมดัล ลิ้นชักเมื่อยุบไว้
เวอร์ชัน
รูปแบบลิ้นชักการนำทางมี 2 ประเภทดังนี้
- ลิ้นชักการนำทางมาตรฐาน — ขยายเป็น สร้างพื้นที่เพิ่มเติมสำหรับการนำทาง โดยดันเนื้อหาในหน้าออกไป
- ลิ้นชักการนำทางแบบคำสั่ง — ปรากฏเป็น วางซ้อนด้านบนเนื้อหาของแอปด้วย Scrim ที่จะช่วย ทำให้อ่านง่ายขึ้นเมื่อขยายลิ้นชัก
ลิ้นชักการนำทางมาตรฐาน
กายวิภาคศาสตร์
- ส่วนด้านบน: แสดงโลโก้แอป ทำหน้าที่เป็นปุ่มเพื่อ สลับโปรไฟล์หรือเพื่อทริกเกอร์การดำเนินการค้นหา ในสถานะยุบ มีเพียงไอคอนเท่านั้นที่ยังคงมองเห็นได้ในคอนเทนเนอร์ด้านบน
- รายการการนำทาง: แต่ละรายการในฟีเจอร์รางนำทาง ชุดค่าผสมของไอคอนและข้อความ โดยที่แสดงเฉพาะไอคอน อยู่ในสถานะยุบ
- แถบนำทาง: แถบนำทางคือคอลัมน์ แสดงปลายทางของแอป 3-7 รายการซึ่งทำหน้าที่เป็นเมนูหลัก แต่ละจุดหมาย มีป้ายกำกับข้อความและไอคอนไม่บังคับ พร้อมตัวเลือกเมนูการจัดกลุ่ม เพื่อบริบทที่ดียิ่งขึ้น
- ส่วนล่าง: มีปุ่มการทำงานได้ 1-3 ปุ่ม ซึ่งมักเหมาะกับหน้าเว็บ เช่น การตั้งค่า ความช่วยเหลือ หรือโปรไฟล์
ลักษณะการทำงาน
- การขยายลิ้นชักการนำทาง: เมื่อขยายการนำทางมาตรฐาน ลิ้นชักก็ดันเนื้อหาของหน้าเว็บ ทำให้มีพื้นที่สำหรับ สำหรับการนำทาง
- การอัปเดตการนำทาง: การย้ายจากรายการการนำทางหนึ่งไปยังอีกรายการ ระบบจะอัปเดตปลายทางใหม่โดยอัตโนมัติ
ลิ้นชักการนำทางแบบโมดัล
กายวิภาคศาสตร์
- ส่วนด้านบน: แสดงโลโก้แอป ทำหน้าที่เป็นปุ่มสำหรับเปลี่ยน โปรไฟล์หรือเพื่อทริกเกอร์การดำเนินการค้นหา ในสถานะยุบ เฉพาะส่วน จะยังคงปรากฏในคอนเทนเนอร์ด้านบน
- รายการการนำทาง: แต่ละรายการในฟีเจอร์รางนำทาง ชุดค่าผสมของไอคอนและข้อความ โดยที่แสดงเฉพาะไอคอนใน สถานะยุบ
- ระบบนำทาง: คอลัมน์ที่ แสดงปลายทางของแอป 3-7 รายการ โดยทำหน้าที่เป็นเมนูหลัก ชิ้น ปลายทางจะมีป้ายกำกับข้อความและไอคอนที่ไม่บังคับ การจัดกลุ่มรายการในเมนู เพื่อให้บริบทมากขึ้น
- Scrim: เพื่อให้อ่านข้อความในรายการการนำทางได้ง่ายขึ้น
- ส่วนล่าง: มีปุ่มการทำงานได้ 1-3 ปุ่ม ซึ่งมักเหมาะกับหน้าเว็บ เช่น การตั้งค่า ความช่วยเหลือ หรือโปรไฟล์
ลักษณะการทำงาน
- การขยายลิ้นชัก: ปรากฏเป็นโฆษณาซ้อนทับบน ด้านบนเนื้อหาของแอป ด้วย scrim ที่ช่วยให้อ่านง่ายขึ้น เมื่อขยายลิ้นชัก
- การอัปเดตการนำทาง: เกิดขึ้นเมื่อผู้ใช้ เลือกรายการนำทาง
สคริม (Scrim)
สำหรับลิ้นชักการนำทางแบบโมดัล หน้าจอจะมี scrim อยู่ด้านหลัง ช่วยให้มั่นใจได้ว่าเนื้อหาในลิ้นชักอ่านได้ง่าย คุณสามารถ ใช้พื้นผิวไล่ระดับสีหรือทึบแสงด้านหลังลิ้นชักการนำทางเพื่อสร้าง รูปแบบต่างๆ ของ UI
Scrim แบบไล่ระดับสี
Scrim แบบทึบ
ข้อกำหนด
การใช้งาน
สัญญาณบอกสถานะใช้งานอยู่
สัญญาณบอกสถานะที่ใช้งานอยู่คือสัญลักษณ์ภาพที่ไฮไลต์ปลายทางของลิ้นชักการนำทางที่แสดงอยู่ ตัวบ่งชี้มักจะแสดงด้วยรูปร่างพื้นหลังที่ดูแตกต่างจากรายการอื่นๆ ในลิ้นชัก สัญญาณบอกสถานะที่ทำงานอยู่ช่วยให้ผู้ใช้ทราบว่าตนอยู่ที่ใดในแอปและปลายทางกำลังเรียกดูข้อมูลใดอยู่ ตรวจสอบว่าสัญญาณบอกสถานะที่ใช้งานอยู่สามารถมองเห็นได้ชัดเจนและแตกต่างจากรายการอื่นๆ ในลิ้นชักการนำทางได้ง่ายขึ้น
ตัวแบ่ง (ไม่บังคับ)
คุณสามารถใช้เส้นแบ่งเพื่อแบ่งกลุ่มจุดหมายภายในลิ้นชักการนำทางเพื่อให้จัดระเบียบได้ดีขึ้น แต่ควรใช้งานให้น้อยด้วยเพราะตัวแบ่งมากเกินไปอาจสร้างสัญญาณรบกวนสายตาและทำให้ผู้ใช้มีสติปัญญาเพิ่มขึ้นโดยไม่จำเป็น
ป้าย
ป้ายเป็นตัวบ่งชี้ภาพที่สามารถเพิ่มลงในรายการนำทางเพื่อให้ ข้อมูลเพิ่มเติม เช่น เราอาจใช้ป้ายเพื่อ ระบุจำนวนภาพยนตร์ใหม่ที่พร้อมให้บริการในแอปสตรีมมิง ใช้ ป้ายเท่าที่จำเป็นและเมื่อจำเป็นเท่านั้น เนื่องจากสามารถทำได้ ทำให้ UI ดูยุ่งเหยิงและรกตา เมื่อใช้ป้าย ให้ตรวจสอบว่า มีความชัดเจนและเข้าใจง่าย และไม่ต้อง รบกวนความสามารถในการไปยังส่วนต่างๆ ของแอปของผู้ใช้
ขยายป้ายแล้ว
ยุบป้ายแล้ว
ป้ายกำกับ
ป้ายกำกับในลิ้นชักการนำทางควรชัดเจนและกระชับเพื่อให้ ทำให้อ่านง่ายขึ้น
ข้อควรระวัง
ไม่ควรทำ
ไม่ควรทำ
ไม่ควรทำ
ลิ้นชักการนำทางเป็นองค์ประกอบพื้นฐานที่แสดง และควรใช้เพื่อแสดงข้อมูลหลัก 5-6 ชั้นเท่านั้น ปลายทางการนำทาง
ควรทำ
