แถบสถานะและแถบนำทางรวมกันเรียกว่าแถบระบบ จะแสดงข้อมูลสำคัญ เช่น ระดับแบตเตอรี่ เวลา และ การแจ้งเตือน และช่วยให้คุณโต้ตอบกับอุปกรณ์ได้โดยตรงจากทุกที่
คุณจึงต้องคำนึงถึงความโดดเด่นของแถบระบบ ไม่ว่าคุณจะ การออกแบบ UI สำหรับการโต้ตอบกับระบบปฏิบัติการ Android, วิธีการป้อนข้อมูล หรืออื่นๆ ความสามารถของอุปกรณ์ จัดวางแถบระบบไว้ที่ด้านบนของเลเยอร์ส่วนใหญ่เพื่อให้แถบระบบ เทียบกับคำนั้น
สรุปประเด็นสำคัญ
รวมแถบระบบไว้ในงานออกแบบของคุณเพื่อรองรับโซนความปลอดภัยของ UI, ระบบ การโต้ตอบ วิธีการป้อนข้อมูล หน้าจอรอยบาก และความสามารถอื่นๆ ของอุปกรณ์ วางแท่งระบบไว้ที่ชั้นบนสุดเพื่อให้แน่ใจว่าระบบจะพิจารณาแถบดังกล่าว
สิ่งที่ควรทำ: ทำให้แถบระบบโปร่งใสและจัดเลย์เอาต์แอปแบบเต็มหน้าจอ ดำเนินการต่อ UI ใต้แถบเพื่อมอบประสบการณ์การรับชมแบบไร้ขอบ
หากไม่สามารถกำหนดให้แถบทั้ง 2 แถบโปร่งใสได้ โปรดตรวจสอบว่ามีสีของแถบดังกล่าว เป็นสีเดียวกับส่วนเนื้อหาของแอป เช่น จับคู่รายการด้านล่าง สีของแถบนำทางร่วมกับสีแถบท่าทางสัมผัสและแถบสถานะด้านบน ตามสีของเนื้อหา
วันที่ 
ภาพที่ 2: ตรวจสอบว่าสีแถบระบบตรงกับสีเนื้อหาของแอป หลีกเลี่ยงการเพิ่มท่าทางสัมผัสการแตะหรือเป้าหมายการลากในส่วนใส่ท่าทางสัมผัส เหล่านี้ ความขัดแย้งกับการนำทางจากขอบสู่ขอบและการนำทางด้วยท่าทางสัมผัส
วันที่ 
ภาพที่ 3: แทรกท่าทางสัมผัสของระบบ หลีกเลี่ยงการวางการแตะ เป้าหมายภายใต้พื้นที่เหล่านี้
วาดเนื้อหาไว้ด้านหลังแถบระบบ
ฟีเจอร์แบบไร้ขอบช่วยให้ Android วาด UI ใต้แถบระบบสำหรับ ประสบการณ์ที่สมจริงยิ่งขึ้น เราขอแนะนำให้คุณใช้แบบ EDGE-to-edge เนื่องจากการทำให้ฟิลด์ ความโปร่งใสในแถบนำทางเป็นคำขอทั่วไปจากผู้ใช้ (อ่านเกี่ยวกับวิธี รองรับแบบ EDGE-to-EDGE)
แอปสามารถแก้ไขเนื้อหาที่ซ้อนทับกันโดยใช้การตอบสนองต่อองค์ประกอบต่างๆ คำอธิบายส่วนที่แทรก ปริมาณเนื้อหาของแอป ที่จะต้องได้รับเพื่อหลีกเลี่ยงไม่ให้เกิดการทับซ้อนกับ ใน UI ของระบบปฏิบัติการ Android เช่น แถบนำทางหรือแถบสถานะ หรือ คุณลักษณะของอุปกรณ์ เช่น หน้าจอรอยบาก
โปรดระวังองค์ประกอบประเภทต่างๆ ต่อไปนี้เมื่อออกแบบสำหรับการใช้งานแบบไร้ขอบ กรณี:
- ส่วนแถบระบบมีผลกับ UI ที่ทั้งแตะได้และไม่ควร ถูกบดบังด้วยแถบระบบ
- องค์ประกอบท่าทางสัมผัสของระบบใช้กับพื้นที่ที่มีการนำทางด้วยท่าทางสัมผัสซึ่งระบบใช้ ที่มีความสำคัญเหนือแอปของคุณ
แถบสถานะ
สำหรับ Android แถบสถานะจะมีไอคอนการแจ้งเตือนและไอคอนระบบ ผู้ใช้โต้ตอบกับแถบสถานะได้ด้วยการดึงแถบลงเพื่อเข้าถึงการแจ้งเตือน เฉดสี
แถบสถานะอาจปรากฏแตกต่างกันไปตามบริบท ช่วงเวลาของวัน ค่ากำหนดหรือธีมที่ผู้ใช้ตั้งไว้ รวมถึงพารามิเตอร์อื่นๆ คุณยังสามารถตั้งค่า ลักษณะของแถบสถานะดังตัวอย่างต่อไปนี้
ตรวจสอบว่าเนื้อหาแอปครอบคลุมทั้งหน้าจอแล้วในขณะนี้ ต้องระบุ ใช้แถบระบบแบบโปร่งใสซึ่งมีเนื้อหาแบบขอบต่อขอบดังที่แสดงใน ดังตัวอย่างต่อไปนี้
เมื่อมีการแจ้งเตือนมาถึง ไอคอนมักจะปรากฏในแถบสถานะ ช่วงเวลานี้ เพื่อบอกผู้ใช้ว่ามีอะไรบางอย่างให้ดูในลิ้นชักการแจ้งเตือน ซึ่งอาจเป็นไอคอนหรือสัญลักษณ์ของแอปเพื่อแสดงถึงช่อง โปรดดู การออกแบบการแจ้งเตือน
ตั้งค่ารูปแบบของแถบสถานะ
จัดรูปแบบพื้นหลังของแถบสถานะให้เป็นส่วนหนึ่งของธีมแอป ด้วยสีที่กำหนดเอง หรือรูปแบบ พร้อมด้วยการตั้งค่าความโปร่งใสและความทึบแสง
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
หากตั้งค่าสีพื้นหลังด้วยตนเอง คุณจะเลือกสถานะสไตล์หรือไม่ก็ได้ ปรับเนื้อหาเป็นสีสว่างหรือมืดเพื่อคอนทราสต์ที่เหมาะสมที่สุด
หน้าจอรอยบากและแถบสถานะ
หน้าจอรอยบากคือบริเวณที่อุปกรณ์บางรุ่นขยายออกไปยังจอแสดงผล พื้นผิวเพื่อเพิ่มพื้นที่ว่างสำหรับเซ็นเซอร์ด้านหน้า อาจส่งผลต่อรูปลักษณ์ แถบสถานะ หน้าจอรอยบากอาจแตกต่างกันไปตามผู้ผลิต
อ่านวิธีรองรับหน้าจอรอยบาก
แถบนำทาง
Android ช่วยให้ผู้ใช้ควบคุมการนำทางโดยใช้ตัวควบคุมย้อนกลับ หน้าแรก และการควบคุมภาพรวมได้ดังนี้
- ย้อนกลับจะย้อนกลับไปยังมุมมองก่อนหน้าโดยตรง
- หน้าแรกจะเปลี่ยนออกจากแอปและไปยังหน้าจอหลักของอุปกรณ์
- ภาพรวมแสดงให้เห็นว่าแอปเปิดอยู่และเปิดเมื่อเร็วๆ นี้
ผู้ใช้สามารถเลือกจากการกำหนดค่าต่างๆ ของแถบนำทาง รวมถึงท่าทางสัมผัส การนำทาง (แนะนำ) และการนำทางแบบสามปุ่ม
การนำทางด้วยท่าทางสัมผัส
ขอแนะนำให้ใช้การนำทางด้วยท่าทางสัมผัสซึ่งเปิดตัวใน Android 10 (API ระดับ 29) ประเภทการนำทาง แม้ว่าคุณจะไม่สามารถลบล้างค่ากำหนดของผู้ใช้ได้ ท่าทางสัมผัส การนำทางไม่ได้ใช้ปุ่มสำหรับย้อนกลับ หน้าแรก และภาพรวม แต่จะแสดง แฮนเดิลเดียวที่ราคาไม่แพง ผู้ใช้โต้ตอบด้วยการเลื่อนจากซ้าย หรือ ขอบด้านขวาของหน้าจอเพื่อย้อนกลับและไปข้างหน้าและขึ้นจากด้านล่างเพื่อไป หน้าแรก การเลื่อนขึ้นค้างไว้จะเป็นการเปิดภาพรวม
การนำทางด้วยท่าทางสัมผัส เป็นรูปแบบการนำทางที่ปรับขนาดได้มากขึ้น สำหรับการออกแบบโดยใช้ บนอุปกรณ์เคลื่อนที่และหน้าจอที่ใหญ่กว่า หากต้องการมอบประสบการณ์ที่ดีที่สุด ให้คำนึงถึง การนำทางโดยใช้ท่าทางสัมผัสตาม:
- การรองรับเนื้อหาแบบขอบต่อขอบ
- หลีกเลี่ยงการเพิ่มการโต้ตอบหรือเป้าหมายการสัมผัสในส่วนแทรกการนำทางด้วยท่าทางสัมผัส
อ่านเกี่ยวกับการใช้การนำทางด้วยท่าทางสัมผัส
การนำทางแบบ 3 ปุ่ม
การนำทางแบบ 3 ปุ่มมี 3 ปุ่มสำหรับกลับ หน้าแรก และภาพรวม
แถบนำทางรูปแบบอื่นๆ
อาจมีการกำหนดค่าแถบนำทางอื่นๆ โดยขึ้นอยู่กับเวอร์ชัน Android และอุปกรณ์ของแถบนำทาง พร้อมใช้งานสำหรับผู้ใช้ของคุณ ตัวอย่างเช่น การนำทางแบบ 2 ปุ่มจะให้ สำหรับปุ่มหน้าแรกและย้อนกลับ
ตั้งค่ารูปแบบการนำทาง
ตัวอย่างต่อไปนี้แสดงวิธีใช้งานรูปแบบการนำทาง
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android จัดการการปกป้องภาพทั้งหมดของอินเทอร์เฟซผู้ใช้ด้วยท่าทางสัมผัส หรือในโหมดปุ่มต่างๆ
โหมดการนำทางด้วยท่าทางสัมผัส: ระบบจะใช้การปรับสีแบบไดนามิกใน ซึ่งเนื้อหาของแถบระบบเปลี่ยนสีตามเนื้อหา อยู่เบื้องหลัง ในตัวอย่างต่อไปนี้ แฮนเดิลในแถบนำทาง จะเปลี่ยนเป็นสีเข้มหากวางทับบนเนื้อหาสีอ่อน และในทางกลับกัน
วันที่ 
รูปที่ 13: การปรับสีแบบไดนามิก โหมดของปุ่ม: ระบบจะใช้ลายเส้นโปร่งแสงที่อยู่หลังระบบ แถบ (สำหรับ API ระดับ 29 ขึ้นไป) หรือแถบระบบแบบโปร่งใส (สำหรับระดับ API 28 หรือต่ำกว่า)
วันที่ 
รูปที่ 14: การปรับสีแบบไดนามิก ซึ่งมีแถบระบบ เปลี่ยนสีตามเนื้อหาเบื้องหลัง
แป้นพิมพ์และการนำทาง
การนำทางแต่ละประเภทจะตอบสนองต่อแป้นพิมพ์บนหน้าจออย่างเหมาะสมต่อ
ทำให้ผู้ใช้ดำเนินการต่างๆ เช่น ปิดหรือแม้แต่เปลี่ยน
ประเภทแป้นพิมพ์ เพื่อให้การเปลี่ยนแป้นพิมพ์เป็นไปอย่างราบรื่น
ที่ซิงค์ข้อมูลการเปลี่ยนของแอปกับการเลื่อนแป้นพิมพ์
ขึ้นและลงจากด้านล่างของหน้าจอ ให้ใช้
WindowInsetsAnimationCompat
โหมดใหญ่พิเศษ
คุณจะซ่อนแถบระบบเมื่อต้องการประสบการณ์แบบเต็มหน้าจอได้ เช่น เมื่อผู้ใช้กำลังดูภาพยนตร์ ผู้ใช้ยังคงสามารถแตะเพื่อ แสดงแถบระบบและ UI เพื่อที่จะนำทางหรือโต้ตอบกับการควบคุมระบบ เรียนรู้เพิ่มเติมเกี่ยวกับการออกแบบโหมดเต็มหน้าจอ หรืออ่านเกี่ยวกับวิธี ซ่อนแถบระบบสำหรับโหมดใหญ่พิเศษ