แถบระบบ Android

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

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

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

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

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

  • ทำให้แถบระบบโปร่งใสและจัดวางแอปแบบเต็มหน้าจอ ดำเนินการต่อ UI ใต้แถบเพื่อมอบประสบการณ์การรับชมแบบไร้ขอบ

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

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

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

ฟีเจอร์แบบไร้ขอบช่วยให้ Android วาด UI ใต้แถบระบบสำหรับ ประสบการณ์ที่สมจริงยิ่งขึ้น เราขอแนะนำให้คุณใช้แบบ EDGE-to-edge เนื่องจากการทำให้ฟิลด์ ความโปร่งใสในแถบนำทางเป็นคำขอทั่วไปจากผู้ใช้ (อ่านเกี่ยวกับวิธี รองรับแบบ EDGE-to-EDGE)

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

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

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

แถบสถานะ

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

วันที่
ภาพที่ 3: บริเวณของแถบสถานะที่ไฮไลต์อยู่ด้านบนของแถบแอปด้านบน

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

วันที่
ภาพที่ 4: แถบสถานะในธีมสว่างและธีมมืด

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

วันที่
รูปที่ 5: แถบโปร่งใสโดยใช้ ฟีเจอร์แบบไร้ขอบ เหมาะสำหรับการให้เนื้อหาโดดเด่น โดยใช้พื้นที่หน้าจอมากที่สุด


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

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

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

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

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

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

หากตั้งค่าสีพื้นหลังด้วยตนเอง คุณจะเลือกสถานะสไตล์หรือไม่ก็ได้ ปรับเนื้อหาเป็นสีสว่างหรือมืดเพื่อคอนทราสต์ที่เหมาะสมที่สุด

หน้าจอรอยบากและแถบสถานะ

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

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

วันที่
รูปที่ 8: ตัวอย่างหน้าจอรอยบาก

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

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

ผู้ใช้สามารถเลือกจากการกำหนดค่าต่างๆ ของแถบนำทาง รวมถึงท่าทางสัมผัส การนำทาง (แนะนำ) และการนำทางแบบสามปุ่ม

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

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

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

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

อ่านเกี่ยวกับการใช้การนำทางด้วยท่าทางสัมผัส

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

การนำทางแบบ 3 ปุ่ม

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

วันที่
ภาพที่ 10: แถบนำทางแบบ 3 ปุ่ม

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

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

วันที่
ภาพที่ 11: แถบนำทางแบบ 2 ปุ่ม

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

ตัวอย่างต่อไปนี้แสดงวิธีใช้งานรูปแบบการนำทาง

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

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

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

    วันที่
    รูปที่ 12: การปรับสีแบบไดนามิก
  • โหมดของปุ่ม: ระบบจะใช้ลายเส้นโปร่งแสงที่อยู่หลังระบบ แถบ (สำหรับ API ระดับ 29 ขึ้นไป) หรือแถบระบบแบบโปร่งใส (สำหรับระดับ API 28 หรือต่ำกว่า)

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

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

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

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

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

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

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