ลิ้นชักการนำทาง

ลิ้นชักการนำทางเป็นองค์ประกอบสำคัญในแอป TV เนื่องจากทำให้ผู้ใช้ เพื่อเข้าถึงปลายทางและฟีเจอร์ต่างๆ ลิ้นชักการนำทางคือ กระดูกสันหลังของสถาปัตยกรรมข้อมูลแอป ซึ่งมีความชัดเจนและใช้งานง่าย วิธีไปยังส่วนต่างๆ ของแอป

ซึ่งตรงข้ามกับลิ้นชักการนำทางบนอุปกรณ์เคลื่อนที่ ลิ้นชักการนำทางเปิดอยู่ ทีวีจะมีสถานะทั้งขยายและยุบให้ผู้ใช้เห็น

แหล่งข้อมูล

ประเภท	ลิงก์	สถานะ
การออกแบบ	แหล่งที่มาของการออกแบบ (Figma)	ใช้งานได้
การใช้งาน	Jetpack Compose (navigationDrawer) Jetpack Compose (ModalnavigationDrawer)	ใช้งานได้

ไฮไลต์

• ปลายทางเรียงลำดับตามความสำคัญของผู้ใช้ โดยมี ปลายทางแรกและปลายทางที่เกี่ยวข้องซึ่งจัดกลุ่มไว้ด้วยกัน
• ต้องใช้แถบการนำทางสำหรับทั้งการนำทางแบบมาตรฐานและการนำทางแบบโมดัล ลิ้นชักเมื่อยุบไว้

เวอร์ชัน

รูปแบบลิ้นชักการนำทางมี 2 ประเภทดังนี้

1. ลิ้นชักการนำทางมาตรฐาน — ขยายเป็น สร้างพื้นที่เพิ่มเติมสำหรับการนำทาง โดยดันเนื้อหาในหน้าออกไป
2. ลิ้นชักการนำทางแบบคำสั่ง — ปรากฏเป็น วางซ้อนด้านบนเนื้อหาของแอปด้วย Scrim ที่จะช่วย ทำให้อ่านง่ายขึ้นเมื่อขยายลิ้นชัก

ลิ้นชักการนำทางมาตรฐาน

กายวิภาคศาสตร์

1. ส่วนด้านบน: แสดงโลโก้แอป ทำหน้าที่เป็นปุ่มเพื่อ สลับโปรไฟล์หรือเพื่อทริกเกอร์การดำเนินการค้นหา ในสถานะยุบ มีเพียงไอคอนเท่านั้นที่ยังคงมองเห็นได้ในคอนเทนเนอร์ด้านบน
2. รายการการนำทาง: แต่ละรายการในฟีเจอร์รางนำทาง ชุดค่าผสมของไอคอนและข้อความ โดยที่แสดงเฉพาะไอคอน อยู่ในสถานะยุบ
3. แถบนำทาง: แถบนำทางคือคอลัมน์ แสดงปลายทางของแอป 3-7 รายการซึ่งทำหน้าที่เป็นเมนูหลัก แต่ละจุดหมาย มีป้ายกำกับข้อความและไอคอนไม่บังคับ พร้อมตัวเลือกเมนูการจัดกลุ่ม เพื่อบริบทที่ดียิ่งขึ้น
4. ส่วนล่าง: มีปุ่มการทำงานได้ 1-3 ปุ่ม ซึ่งมักเหมาะกับหน้าเว็บ เช่น การตั้งค่า ความช่วยเหลือ หรือโปรไฟล์

ลักษณะการทำงาน

• การขยายลิ้นชักการนำทาง: เมื่อขยายการนำทางมาตรฐาน ลิ้นชักก็ดันเนื้อหาของหน้าเว็บ ทำให้มีพื้นที่สำหรับ สำหรับการนำทาง
• การอัปเดตการนำทาง: การย้ายจากรายการการนำทางหนึ่งไปยังอีกรายการ ระบบจะอัปเดตปลายทางใหม่โดยอัตโนมัติ

ลิ้นชักการนำทางแบบโมดัล

กายวิภาคศาสตร์

1. ส่วนด้านบน: แสดงโลโก้แอป ทำหน้าที่เป็นปุ่มสำหรับเปลี่ยน โปรไฟล์หรือเพื่อทริกเกอร์การดำเนินการค้นหา ในสถานะยุบ เฉพาะส่วน จะยังคงปรากฏในคอนเทนเนอร์ด้านบน
2. รายการการนำทาง: แต่ละรายการในฟีเจอร์รางนำทาง ชุดค่าผสมของไอคอนและข้อความ โดยที่แสดงเฉพาะไอคอนใน สถานะยุบ
3. ระบบนำทาง: คอลัมน์ที่ แสดงปลายทางของแอป 3-7 รายการ โดยทำหน้าที่เป็นเมนูหลัก ชิ้น ปลายทางจะมีป้ายกำกับข้อความและไอคอนที่ไม่บังคับ การจัดกลุ่มรายการในเมนู เพื่อให้บริบทมากขึ้น
4. Scrim: เพื่อให้อ่านข้อความในรายการการนำทางได้ง่ายขึ้น
5. ส่วนล่าง: มีปุ่มการทำงานได้ 1-3 ปุ่ม ซึ่งมักเหมาะกับหน้าเว็บ เช่น การตั้งค่า ความช่วยเหลือ หรือโปรไฟล์

ลักษณะการทำงาน

• การขยายลิ้นชัก: ปรากฏเป็นโฆษณาซ้อนทับบน ด้านบนเนื้อหาของแอป ด้วย scrim ที่ช่วยให้อ่านง่ายขึ้น เมื่อขยายลิ้นชัก
• การอัปเดตการนำทาง: เกิดขึ้นเมื่อผู้ใช้ เลือกรายการนำทาง

สคริม (Scrim)

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

ข้อกำหนด

การใช้งาน

ป้าย

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

ป้ายกำกับ

ป้ายกำกับในลิ้นชักการนำทางควรชัดเจนและกระชับเพื่อให้ ทำให้อ่านง่ายขึ้น

ลิ้นชักการนำทางเป็นองค์ประกอบพื้นฐานที่แสดง และควรใช้เพื่อแสดงข้อมูลหลัก 5-6 ชั้นเท่านั้น ปลายทางการนำทาง