แถบระบบ Android

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

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

รูปที่ 1: รูปภาพด้านหลังแถบระบบ

สรุปประเด็นสำคัญ

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

• ทำให้สถานะของระบบและแถบนําทางโปร่งใสหรือโปร่งแสง และวาดเนื้อหาไว้ด้านหลังแถบเหล่านี้ให้เต็มหน้าจอ

• หลีกเลี่ยงการเพิ่มท่าทางสัมผัสหรือเป้าหมายการลากในส่วนที่แทรกของท่าทางสัมผัส เนื่องจากจะขัดแย้งกับการนําทางแบบเต็มหน้าจอและแบบใช้ท่าทางสัมผัส

  

  รูปที่ 2: ส่วนที่แทรกของท่าทางสัมผัสของระบบ หลีกเลี่ยงการวางเป้าหมายการแตะใต้บริเวณเหล่านี้

  หมายเหตุ: แถบระบบและการนำทางอาจแตกต่างกันไปตามผู้ผลิตอุปกรณ์ อุปกรณ์รุ่นเก่าอาจมีปุ่มนำทางแบบฮาร์ดแวร์แทนปุ่มแบบซอฟต์แวร์

วาดเนื้อหาไว้ด้านหลังแถบระบบ

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

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

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

โปรดคำนึงถึงประเภทของส่วนตัดต่อไปนี้เมื่อออกแบบสำหรับกรณีการใช้งานแบบขอบต่อขอบ

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

แถบสถานะ

ใน Android แถบสถานะจะมีไอคอนการแจ้งเตือนและไอคอนระบบ ผู้ใช้โต้ตอบกับแถบสถานะโดยการดึงลงเพื่อเข้าถึงหน้าต่างแจ้งเตือน

รูปที่ 3: ภูมิภาคแถบสถานะที่ไฮไลต์ไว้ด้านบนแถบแอปด้านบน

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

รูปที่ 4: ไอคอนในแถบสถานะในธีมสว่างและธีมมืด

ตรวจสอบว่าเนื้อหาแอปครอบคลุมทั้งหน้าจอ แถบสถานะและแถบนําทางต้องโปร่งใสหรือโปร่งแสงโดยมีเนื้อหาเต็มหน้าจอดังที่แสดงในตัวอย่างต่อไปนี้

รูปที่ 5: แอปแบบเต็มหน้าจอที่มีแถบระบบแบบโปร่งใสเหมาะอย่างยิ่งในการนำเสนอเนื้อหาของคุณโดยใช้พื้นที่หน้าจอมากที่สุด

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

รูปที่ 6: ใช้พื้นที่เต็มหน้าจอเพื่อเพิ่มประสิทธิภาพเนื้อหา ไม่มีแถบระบบทึบ

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

รูปที่ 7: ไอคอนการแจ้งเตือนในแถบสถานะ

ตั้งค่ารูปแบบแถบสถานะ

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

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

แสดงส่วนที่ถูกตัดออกและแถบสถานะ

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

อ่านวิธีรองรับหน้าจอรอยบาก

รูปที่ 8: ตัวอย่างส่วนเว้าของจอแสดงผล

แถบนำทาง

Android ช่วยให้ผู้ใช้ควบคุมการไปยังส่วนต่างๆ โดยใช้การควบคุม "ย้อนกลับ" "หน้าแรก" และ "ภาพรวม" ดังนี้

• ปุ่มย้อนกลับจะกลับไปที่มุมมองก่อนหน้าโดยตรง
• Home จะออกจากแอปและไปยังหน้าจอหลักของอุปกรณ์
• ภาพรวมจะแสดงแอปที่เปิดอยู่และเพิ่งเปิด

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

การนำทางด้วยท่าทางสัมผัส

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

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

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

อ่านข้อมูลเกี่ยวกับการใช้การไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส

รูปที่ 9: แถบนำทางของแฮนเดิลท่าทางสัมผัส

การไปยังส่วนต่างๆ แบบ 3 ปุ่ม

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

รูปที่ 10: แถบนําทางแบบ 3 ปุ่ม

รูปแบบแถบนำทางอื่นๆ

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

รูปที่ 11: แถบนำทางแบบ 2 ปุ่ม

ตั้งค่ารูปแบบการนําทาง

ตรวจสอบว่าแถบนำทางโปร่งใสหรือโปร่งแสงในทุกเวอร์ชันโดยเรียกใช้ enableEdgeToEdge()

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

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

Android จะจัดการการปกป้องภาพอินเทอร์เฟซผู้ใช้ในโหมดการนำทางด้วยท่าทางสัมผัสและในโหมดปุ่ม

• โหมดการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส: ระบบจะใช้การปรับสีแบบไดนามิก ซึ่งเนื้อหาของแถบระบบจะเปลี่ยนสีตามเนื้อหาที่อยู่เบื้องหลัง ในตัวอย่างต่อไปนี้ แฮนเดิลในแถบนําทางจะเปลี่ยนเป็นสีเข้มหากวางไว้เหนือเนื้อหาสีอ่อน และในทางกลับกัน

  

  รูปที่ 12: การปรับสีแบบไดนามิก

• โหมดปุ่ม: ระบบจะใช้ม่านโปร่งแสงด้านหลังแถบนำทางแบบปุ่ม ซึ่งสามารถนําออกได้โดยการตั้งค่า Window.setNavigationBarContrastEnforced() เป็น false

  

  รูปที่ 13: การปรับสีแบบไดนามิก ซึ่งแถบระบบจะเปลี่ยนสีตามเนื้อหาที่อยู่เบื้องหลัง

แป้นพิมพ์และการนำทาง

รูปที่ 14: แป้นพิมพ์บนหน้าจอที่มีแถบนําทาง

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

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

รูปที่ 15: โหมดสมจริงที่แสดงประสบการณ์แบบเต็มหน้าจอในอุปกรณ์เคลื่อนที่ที่วางแนวนอน

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