Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
รูปแบบ UXอ่าน 6 นาที·Updated ตุลาคม 2026·โดยทีม ExodeUI

แถบแท็บและการนำทางด้านล่าง: กฎการออกแบบที่ยังคงอยู่

วิธีการออกแบบแถบแท็บและการนำทางด้านล่างบน iOS และ Android: จุดหมายปลายทาง 3 ถึง 5 แห่ง ไม่ใช่การดำเนินการนำทาง ป้ายกำกับ ป้ายสถานะ การมองเห็น และสถานะแอกทีฟแบบเคลื่อนไหว

สรุปโดยตรงและคำจำกัดความ

หลัก Takeaway

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

สิ่งที่แพลตฟอร์มพูด

Material Design 3 กล่าวว่าแถบนำทางช่วยให้เข้าถึงจุดหมายปลายทางได้สามถึงห้าแห่ง โดยแต่ละแห่งมีไอคอนและป้ายกำกับ และปลายทางหนึ่งแห่งจะเปิดใช้งานอยู่เสมอ หลักเกณฑ์ของ Apple ระบุว่าให้ใช้แถบแท็บในการนำทาง ไม่ใช่เพื่อดำเนินการใดๆ เพื่อให้มองเห็นได้ในขณะที่ผู้คนย้ายไปมาระหว่างส่วนต่างๆ (ยกเว้นในกรณีที่มีการใช้โมดอลปิดอยู่) และเพื่อหลีกเลี่ยงไม่ให้แท็บล้น

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

การเลือกแท็บ

แท็บแสดงถึงโครงสร้างของแอป:

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

ฉลากและตราสัญลักษณ์

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

รักษาสถานะต่อแท็บ

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

การเคลื่อนไหว

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

คีย์ Principles ที่ต้องจำ

  • จุดหมายปลายทางระดับบนสุดสามถึงห้าแห่ง
  • การนำทาง ไม่ใช่การกระทำ
  • ไอคอนพร้อมป้ายกำกับสำหรับทุกแท็บ
  • ทำให้มองเห็นได้และรักษาสถานะของแต่ละแท็บ
  • การเคลื่อนไหวในสภาวะแอคทีฟที่ละเอียดอ่อนและรวดเร็ว

คำถามที่พบบ่อย

แหล่งที่มา

  1. Navigation bar guidelines — Material Design3
  2. Tab bars — แนวทางอินเทอร์เฟซของมนุษย์ของ Apple

คำแนะนำและตัวอย่างที่เกี่ยวข้อง

แถบแท็บแบบเคลื่อนไหวที่คุณปรับเปลี่ยนได้

เปิดแถบแท็บแบบโต้ตอบและส่วนประกอบการนำทางฟรี และเปลี่ยนการเคลื่อนไหวใน ExodeUI

เรียกดูส่วนประกอบสด
ลองฟรี