แถบระบบ Android

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

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

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

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

• ทำให้แถบสถานะและแถบนำทางโปร่งใสหรือกึ่งโปร่งใส และ วาดเนื้อหาด้านหลังแถบเหล่านี้เพื่อให้แสดงแบบขอบจรดขอบ

• ใช้เลย์เอาต์มาตรฐานที่ใช้พื้นที่หน้าจออย่างมีประสิทธิภาพ

แถบสถานะ

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

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

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

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

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

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

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

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

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

การนำทาง

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

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

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

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

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

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

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

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

การนำทางแบบปรับอัตโนมัติ

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

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

ไอคอนการนำทาง

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

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

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

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

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

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

โหมดปุ่ม

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

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

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

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

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

เลย์เอาต์

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

ดูข้อมูลเพิ่มเติมได้ที่เลย์เอาต์ Canonical

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

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

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

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