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

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

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

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

ตั้งค่ารูปแบบแถบสถานะ
ทำให้แถบสถานะโปร่งใสหรือทึบแสงเพื่อให้เนื้อหาแอปแสดงเต็มหน้าจอ จากนั้นตั้งค่าสไตล์ของไอคอนแถบระบบเพื่อให้ไอคอนมีความคมชัดที่เหมาะสม
Android 15 บังคับใช้การแสดงผลแบบไร้ขอบ ซึ่งทำให้แถบสถานะโปร่งใสโดยค่าเริ่มต้น เรียกใช้ enableEdgeToEdge()
เพื่อให้มีความเข้ากันได้แบบย้อนหลัง
ในรูปภาพด้านซ้าย แถบสถานะจะโปร่งใสและพื้นหลังสีเขียวของ TopAppBar
จะวาดอยู่หลังแถบสถานะ

แถบสถานะแบบโปร่งใสเหมาะสําหรับกรณีที่ UI ไม่ปรากฏใต้แถบสถานะหรือมีภาพวาดอยู่ใต้แถบสถานะ แถบสถานะแบบโปร่งแสงเหมาะสําหรับกรณีที่ UI เลื่อนอยู่ใต้แถบสถานะ ดูข้อมูลเพิ่มเติมเกี่ยวกับการป้องกันแบบไล่ระดับสีได้ที่การออกแบบแบบเต็มหน้าจอ

แถบนำทาง
Android ช่วยให้ผู้ใช้ควบคุมการไปยังส่วนต่างๆ โดยใช้การควบคุม "ย้อนกลับ" "หน้าแรก" และ "ภาพรวม" ดังนี้
- ปุ่มย้อนกลับจะกลับไปที่มุมมองก่อนหน้าโดยตรง
- Home จะออกจากแอปและไปยังหน้าจอหลักของอุปกรณ์
- ภาพรวมจะแสดงแอปที่ใช้งานอยู่และแอปล่าสุดที่ยังไม่ได้ปิด
ผู้ใช้สามารถเลือกการกำหนดค่าแถบนำทางได้หลายแบบ ซึ่งรวมถึงการนำทางด้วยท่าทางสัมผัส (แนะนำ) และการนำทางแบบ 3 ปุ่ม พิจารณาการนำทางหลายประเภทเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีที่สุด
การนำทางด้วยท่าทางสัมผัส
เราขอแนะนำให้คุณใช้การไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส เว้นแต่ผู้ใช้จะเลือกไม่ใช้ในการตั้งค่า การนำทางด้วยท่าทางสัมผัสจะไม่ใช้ปุ่มสำหรับย้อนกลับ หน้าแรก และภาพรวม แต่จะใช้แฮนเดิลท่าทางสัมผัสเดียวแทน ผู้ใช้โต้ตอบด้วยการปัดจากขอบด้านซ้ายหรือขวาของหน้าจอเพื่อย้อนกลับ และปัดขึ้นจากด้านล่างเพื่อไปที่หน้าแรก การปัดขึ้นค้างไว้จะเป็นการเปิดภาพรวม
การไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสเป็นรูปแบบการนำทางที่ปรับขนาดได้มากขึ้นสำหรับการออกแบบในอุปกรณ์เคลื่อนที่และหน้าจอขนาดใหญ่ โปรดคำนึงถึงการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสเพื่อมอบประสบการณ์การใช้งานที่ดีที่สุดโดยทำดังนี้
- การรองรับเนื้อหาแบบเต็มหน้าจอ
- หลีกเลี่ยงการเพิ่มการโต้ตอบหรือเป้าหมายการแตะในส่วนที่แทรกของการนำทางด้วยท่าทางสัมผัส
ดูข้อมูลเพิ่มเติมได้ที่เพิ่มการรองรับการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส

การไปยังส่วนต่างๆ แบบ 3 ปุ่ม
การนำทางแบบ 3 ปุ่มจะมีปุ่มกลับ ปุ่มหน้าแรก และปุ่มภาพรวม

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

ไอคอนแถบนำทาง
ไอคอนแถบนําทางยังอาจปรากฏแตกต่างกันไปโดยขึ้นอยู่กับค่ากําหนดหรือธีมที่ผู้ใช้ตั้งไว้ ดูข้อมูลเพิ่มเติมได้ที่ไอคอนแถบระบบ
ตั้งค่าสไตล์แถบนำทาง
Android จะจัดการการป้องกันภาพอินเทอร์เฟซผู้ใช้ในโหมดการนำทางด้วยท่าทางสัมผัสและในโหมดปุ่ม ระบบจะใช้การปรับสีแบบไดนามิก ซึ่งเนื้อหาของแถบระบบจะเปลี่ยนสีตามเนื้อหาที่อยู่เบื้องหลัง
โหมดการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส
หลังจากกำหนดเป้าหมายเป็น Android 15 หรือเรียกใช้ enableEdgeToEdge
ใน Activity
แล้ว ระบบจะวาดแถบนำทางด้วยท่าทางสัมผัสแบบโปร่งใสและใช้การปรับสีแบบไดนามิก ในตัวอย่างที่ตามมา แฮนเดิลในแถบนําทางจะเปลี่ยนเป็นสีเข้มหากวางไว้เหนือเนื้อหาสีอ่อน และในทางกลับกัน

เราขอแนะนำให้ใช้แถบนําทางด้วยท่าทางสัมผัสแบบโปร่งใสเสมอ

ควรทำ

ไม่ควรทำ
โหมดปุ่ม
หลังจากกำหนดเป้าหมายเป็น Android 15 หรือเรียกใช้ enableEdgeToEdge
ใน Activity
แล้ว ระบบจะใช้หน้าจอโปร่งแสงด้านหลังแถบการนำทางแบบปุ่ม ซึ่งคุณนำออกได้โดยการตั้งค่า Window.setNavigationBarContrastEnforced()
เป็นเท็จ

เราขอแนะนําให้ใช้แถบนําทางแบบ 3 ปุ่มที่โปร่งใสเมื่อมีแถบแอปด้านล่างหรือแถบนําทางแอปด้านล่าง หรือเมื่อ UI ไม่เลื่อนอยู่ใต้แถบนําทางแบบ 3 ปุ่ม หากต้องการแถบนําทางแบบโปร่งใส ให้ตั้งค่า Window.setNavigationBarContrastEnforced()
เป็น "เท็จ" และเพิ่มระยะห่างแถบแอปด้านล่างเพื่อวาดใต้แถบนําทางของระบบ ดังที่แสดงในรูปที่ 7, 8 และ 9 ดูข้อมูลเพิ่มเติมได้ที่การป้องกันแถบระบบ
ใช้ปุ่มนำทางแบบ 3 ปุ่มที่โปร่งแสงเพื่อเลื่อนเนื้อหา ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อควรพิจารณาของแถบนำทางแบบโปร่งแสงได้ที่
แป้นพิมพ์และการนำทาง

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

โหมดใหญ่พิเศษ

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