แถบแท็บและการนำทางด้านล่าง: กฎการออกแบบที่ยังคงอยู่
วิธีการออกแบบแถบแท็บและการนำทางด้านล่างบน iOS และ Android: จุดหมายปลายทาง 3 ถึง 5 แห่ง ไม่ใช่การดำเนินการนำทาง ป้ายกำกับ ป้ายสถานะ การมองเห็น และสถานะแอกทีฟแบบเคลื่อนไหว
หลัก Takeaway
ใช้แถบแท็บหรือการนำทางด้านล่างสำหรับจุดหมายระดับบนสุดสามถึงห้าแห่ง ไม่ใช่สำหรับการดำเนินการ มอบไอคอนและป้ายกำกับให้กับทุกแท็บ ทำให้แถบมองเห็นได้เมื่อผู้คนย้ายไปมาระหว่างส่วนต่างๆ หลีกเลี่ยงไม่ให้แท็บ "เพิ่มเติม" ล้นในส่วนที่คุณสามารถทำได้ และใช้ป้ายสถานะเท่าที่จำเป็น สร้างภาพเคลื่อนไหวในสถานะที่ใช้งานอยู่อย่างละเอียด เพื่อให้ผู้คนเห็นว่าตนอยู่ที่ไหน
สิ่งที่แพลตฟอร์มพูด
Material Design 3 กล่าวว่าแถบนำทางช่วยให้เข้าถึงจุดหมายปลายทางได้สามถึงห้าแห่ง โดยแต่ละแห่งมีไอคอนและป้ายกำกับ และปลายทางหนึ่งแห่งจะเปิดใช้งานอยู่เสมอ หลักเกณฑ์ของ Apple ระบุว่าให้ใช้แถบแท็บในการนำทาง ไม่ใช่เพื่อดำเนินการใดๆ เพื่อให้มองเห็นได้ในขณะที่ผู้คนย้ายไปมาระหว่างส่วนต่างๆ (ยกเว้นในกรณีที่มีการใช้โมดอลปิดอยู่) และเพื่อหลีกเลี่ยงไม่ให้แท็บล้น
การเลือกแท็บ
แท็บแสดงถึงโครงสร้างของแอป:
- เลือกส่วนที่ผู้คนใช้บ่อยที่สุด ไม่ใช่ทุกส่วนที่คุณมี
- ใช้คำนามสำหรับจุดหมายปลายทาง ("ห้องสมุด") ไม่ใช่คำกริยาสำหรับการกระทำ ("อัปโหลด")
- ใส่การดำเนินการบนหน้าจอ ในแถบเครื่องมือหรือปุ่มการทำงานแบบลอย
- หากคุณต้องการมากกว่าห้ารายการ ให้พิจารณาโครงสร้างของคุณใหม่ก่อนที่จะเพิ่มแท็บ "เพิ่มเติม"
ฉลากและตราสัญลักษณ์
แท็บเฉพาะไอคอนช่วยประหยัดพื้นที่แต่บังคับให้ผู้คนเดา ป้ายกำกับทำให้การนำทางชัดเจนขึ้น โดยเฉพาะไอคอนที่ไม่ค่อยมีคนใช้ ป้ายควรส่งสัญญาณถึงบางสิ่งที่ผู้คนจำเป็นต้องดำเนินการ ตราสัญลักษณ์ที่ปรากฏอยู่เสมอจะหยุดสังเกต
รักษาสถานะต่อแท็บ
Apple ตั้งข้อสังเกตว่าแถบแท็บอนุญาตให้ผู้คนสลับส่วนต่างๆ ในขณะที่ยังคงสถานะการนำทางปัจจุบันไว้ภายในแต่ละส่วน การกลับมาที่แท็บควรแสดงจุดที่พวกเขาค้างไว้ ไม่ใช่รีเซ็ตไปที่ด้านบน
การเคลื่อนไหว
การเปลี่ยนแปลงเล็กน้อยบนตัวบ่งชี้ที่ใช้งานอยู่ เช่น เม็ดยาที่เลื่อนหรือไอคอนที่เต็ม ช่วยให้ผู้คนติดตามว่าพวกเขาอยู่ที่ไหน รักษาความเร็วไว้ไม่เกิน 250 มิลลิวินาที หลีกเลี่ยงการเด้งทุกไอคอนทุกครั้งที่แตะ และลดความซับซ้อนลงเมื่อเปิดการลดการเคลื่อนไหว
คีย์ Principles ที่ต้องจำ
- จุดหมายปลายทางระดับบนสุดสามถึงห้าแห่ง
- การนำทาง ไม่ใช่การกระทำ
- ไอคอนพร้อมป้ายกำกับสำหรับทุกแท็บ
- ทำให้มองเห็นได้และรักษาสถานะของแต่ละแท็บ
- การเคลื่อนไหวในสภาวะแอคทีฟที่ละเอียดอ่อนและรวดเร็ว
คำถามที่พบบ่อย
แหล่งที่มา
- Navigation bar guidelines — Material Design3
- Tab bars — แนวทางอินเทอร์เฟซของมนุษย์ของ Apple