แถบระบบ Android

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

คุณควรคำนึงถึงความโดดเด่นของแถบระบบ ไม่ว่าจะเป็นการออกแบบ 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 เพื่อให้การเปลี่ยนแอปเป็นไปอย่างราบรื่นและซิงค์กับแป้นพิมพ์ที่เลื่อนขึ้นและลงจากด้านล่างของหน้าจอ

หน้าจอรอยบาก

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

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

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