แถบระบบ Android

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

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

android skills add edge-to-edge

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

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

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

• ใช้ WindowInsets เพื่อจัดการการรบกวนของแถบระบบอย่างเหมาะสมและตรวจสอบว่าเนื้อหา ไม่ถูกบดบังในเลย์เอาต์ที่ปรับเปลี่ยนได้

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

แถบสถานะ

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

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

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

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

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

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

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

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

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

การนำทาง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

check_circle

ควรทำ

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

cancel

สิ่งที่ไม่ควรทำ

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

โหมดปุ่ม

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

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

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

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

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

เลย์เอาต์

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

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

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

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

หน้าจอรอยบาก

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

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

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