หน้านี้ได้รับการแปลโดย Cloud Translation API

แถบระบบ Android

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

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

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

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

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

แถบสถานะ

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

ไอคอนในแถบสถานะ

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

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

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

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

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

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

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

ในรูปภาพด้านซ้ายต่อไปนี้ แถบสถานะจะโปร่งใสและพื้นหลังสีเขียวของ TopAppBar จะอยู่ด้านหลังแถบสถานะ

**รูปที่ 5** ขยายภาพให้เต็มขอบเพื่อเพิ่มคุณภาพเนื้อหา ห้าม มีแถบระบบแบบทึบแสง

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

**รูปที่ 6** แอปแบบขอบจรดขอบที่มีการป้องกันการไล่ระดับสีแบบ 2 โทนซึ่งครอบคลุม 2 บานหน้าต่างด้านหลังแถบสถานะของระบบ

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

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

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

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

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

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

ดูข้อมูลเพิ่มเติมได้ที่เพิ่มการรองรับการนำทางด้วยท่าทางสัมผัส

**รูปที่ 7** แถบนำทางแฮนเดิลท่าทางสัมผัส

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

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

ไอคอนแถบนำทาง

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

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

โหมดการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส

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

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

ควรทำ

ทำให้แถบการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสโปร่งใส

ไม่ควรทำ

เพิ่มพื้นหลังลงในแถบนำทางด้วยท่าทางสัมผัส

โหมดปุ่ม

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

**รูปที่ 11** การปรับสีแบบไดนามิกพร้อมฉากกั้นโปร่งใส

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

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

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

**รูปที่ 12** แป้นพิมพ์บนหน้าจอพร้อมแถบนำทาง

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

คัตเอาท์ดิสเพลย์

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

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

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

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