แถบสถานะ แถบคำอธิบาย และแถบนำทางคือแถบระบบ โดยจะแสดงข้อมูลสำคัญ เช่น ระดับแบตเตอรี่ เวลา และการแจ้งเตือน รวมถึงช่วยให้คุณโต้ตอบกับอุปกรณ์ได้โดยตรงจากทุกที่
คำนึงถึงการมีอยู่และความโดดเด่นของแถบระบบเสมอ ไม่ว่าคุณจะออกแบบเลย์เอาต์ วิธีการป้อนข้อมูล หรือความสามารถอื่นๆ ของอุปกรณ์
ทักษะ Android
ดูใน GitHubเพิ่มการรองรับการแสดงผลแบบไร้ขอบ
android skills add edge-to-edge
สรุปประเด็นสำคัญ
รวมแถบระบบไว้ในเลย์เอาต์สำหรับหน้าจอขนาดต่างๆ และรูปแบบของอุปกรณ์ คำนึงถึงโซนปลอดภัยของ UI, การโต้ตอบกับระบบ, วิธีการป้อนข้อมูล, หน้าจอรอยบาก, แถบสถานะ, แถบคำอธิบายภาพ, แถบนำทาง และความสามารถอื่นๆ ของอุปกรณ์
ทำให้แถบสถานะและแถบนำทางของระบบโปร่งใสหรือโปร่งแสง และวาดเนื้อหาด้านหลังแถบเหล่านี้เพื่อให้แสดงผลแบบไร้ขอบ
ใช้
WindowInsetsเพื่อจัดการการบุกรุกแถบระบบอย่างเหมาะสมและตรวจสอบว่าเนื้อหาไม่ถูกบดบังในเลย์เอาต์แบบปรับอัตโนมัติใช้เลย์เอาต์ Canonical ซึ่งใช้พื้นที่หน้าจออย่างมีประสิทธิภาพ
แถบสถานะ
แถบสถานะมีไอคอนการแจ้งเตือนและไอคอนระบบ ผู้ใช้โต้ตอบกับแถบสถานะโดยการดึงลงเพื่อเข้าถึงหน้าต่างแจ้งเตือน รูปแบบแถบสถานะอาจโปร่งใสหรือโปร่งแสงก็ได้
ไอคอนในแถบสถานะ
ไอคอนแถบสถานะอาจปรากฏแตกต่างกันไปตามบริบท ช่วงเวลาของวัน ค่ากำหนดหรือธีมที่ผู้ใช้ตั้งค่าไว้ และพารามิเตอร์อื่นๆ ดูข้อมูลเพิ่มเติมได้ที่ไอคอนแถบระบบ
เมื่อมีการแจ้งเตือน ไอคอนมักจะปรากฏในแถบสถานะ ซึ่งจะส่งสัญญาณให้ผู้ใช้ทราบว่ามีบางอย่างให้ดูในแถบแจ้งเตือน ซึ่งอาจเป็นไอคอนแอปหรือสัญลักษณ์ที่แสดงถึงช่อง ดูการออกแบบการแจ้งเตือน
ตั้งค่ารูปแบบแถบสถานะ
ทำให้แถบสถานะโปร่งใสหรือโปร่งแสงเพื่อให้เนื้อหาแอปครอบคลุมทั้งหน้าจอ จากนั้นตั้งค่ารูปแบบของไอคอนแถบระบบเพื่อให้ไอคอนมีคอนทราสต์ที่เหมาะสม
ระบบจะบังคับใช้การแสดงผลแบบไร้ขอบใน Android 15 ซึ่งทำให้แถบสถานะโปร่งใสโดยค่าเริ่มต้น เรียกใช้ enableEdgeToEdge() เพื่อให้มีความเข้ากันได้แบบย้อนหลัง
ในรูปภาพด้านซ้ายต่อไปนี้ แถบสถานะจะโปร่งใสและพื้นหลังสีเขียวของ TopAppBar จะแสดงอยู่ด้านหลังแถบสถานะ
แถบสถานะแบบโปร่งใสเหมาะอย่างยิ่งเมื่อ UI ไม่ปรากฏใต้แถบสถานะหรือรูปภาพที่วาดใต้แถบสถานะ แถบสถานะแบบโปร่งแสงเหมาะอย่างยิ่งเมื่อ UI เลื่อนอยู่ใต้แถบสถานะ ดูข้อมูลเพิ่มเติมเกี่ยวกับการป้องกันการไล่ระดับสีได้ที่การออกแบบจากขอบถึงขอบ
การนำทาง
Android ช่วยให้ผู้ใช้ควบคุมการนำทางได้โดยใช้ตัวควบคุมย้อนกลับ หน้าแรก และภาพรวม ดังนี้
- ปุ่มย้อนกลับจะนำคุณกลับไปยังมุมมองก่อนหน้า
- หน้าแรกจะเปลี่ยนจากแอปเป็นหน้าจอหลักของอุปกรณ์
- ภาพรวมจะแสดงแอปที่ใช้งานอยู่และแอปที่ยังไม่ได้ปิดเมื่อเร็วๆ นี้
ผู้ใช้สามารถเลือกการกำหนดค่าการนำทางได้หลากหลายรูปแบบ ซึ่งรวมถึงการนำทางด้วยท่าทางสัมผัสและการนำทางแบบปรับอัตโนมัติ พิจารณาการนําทางหลายประเภทเพื่อมอบประสบการณ์การใช้งานที่ดีที่สุดแก่ผู้ใช้
การไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส
การไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสจะไม่ใช้ปุ่มสำหรับย้อนกลับ หน้าแรก และภาพรวม แต่จะแสดงแฮนเดิลท่าทางสัมผัสเดียวเพื่อแสดงความสามารถในการใช้งาน ผู้ใช้จะโต้ตอบโดยการปัดจากขอบด้านซ้ายหรือขวาของหน้าจอเพื่อย้อนกลับ และปัดขึ้นจากด้านล่างเพื่อไปที่หน้าแรก การปัดขึ้นค้างไว้จะเปิดภาพรวม
การไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสเป็นรูปแบบการไปยังส่วนต่างๆ ที่ปรับขนาดได้มากขึ้นสำหรับการออกแบบในอุปกรณ์เคลื่อนที่และหน้าจอขนาดใหญ่ หากต้องการมอบประสบการณ์การใช้งานที่ดีที่สุดแก่ผู้ใช้ ให้พิจารณาการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสโดยทำดังนี้
- รองรับเนื้อหาแบบไร้ขอบ
- หลีกเลี่ยงการเพิ่มการโต้ตอบหรือเป้าหมายการสัมผัสใต้ส่วนแทรกการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส
ดูข้อมูลเพิ่มเติมได้ที่เพิ่มการรองรับการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส
การนำทางแบบปรับอัตโนมัติ
รูปแบบการนำทางที่พบบ่อยอีกรูปแบบหนึ่งใน Android คือการสลับไปมาระหว่างแถบนำทางและแถบนำทาง ทั้งนี้ขึ้นอยู่กับคลาสขนาดหน้าต่างของจอแสดงผล คอมโพเนนต์การนำทางแบบปรับเปลี่ยนได้ใน Jetpack Compose จะจัดการอุปกรณ์หลายรูปแบบและป้องกันไม่ให้แถบระบบรบกวนเลย์เอาต์ของคอมโพเนนต์การนำทาง
ในเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์ ให้พิจารณาว่าแถบระบบอาจทำงานหรือมีสไตล์แตกต่างกันไปในบริบทต่างๆ เช่น ขนาดหน้าต่างแบบกะทัดรัดหรือแบบขยาย หรือท่าทางพับที่แตกต่างกัน
ดูข้อมูลเพิ่มเติมได้ที่สร้างการนำทางแบบปรับเปลี่ยนได้
ไอคอนการนำทาง
ไอคอนการนำทางอาจปรากฏแตกต่างกันไปตามค่ากำหนดหรือธีมที่ผู้ใช้ตั้งค่าไว้ ดูข้อมูลเพิ่มเติมได้ที่ไอคอนแถบระบบ
ตั้งค่ารูปแบบการนำทาง
Android จะจัดการการป้องกันภาพของอินเทอร์เฟซผู้ใช้ในโหมดการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสและในโหมดปุ่ม ระบบจะใช้การปรับสีแบบไดนามิก ซึ่งเนื้อหาของแถบระบบจะเปลี่ยนสีตามเนื้อหาที่อยู่เบื้องหลัง
โหมดการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส
หลังจากกำหนดเป้าหมายเป็น Android 15 หรือเรียกใช้ enableEdgeToEdge ใน Activity ระบบจะวาดแถบนำทางด้วยท่าทางสัมผัสแบบโปร่งใสและใช้การปรับสีแบบไดนามิก ในตัวอย่างต่อไปนี้ แฮนเดิลในแถบการนำทางจะเปลี่ยนเป็นสีเข้มหากวางไว้เหนือเนื้อหาสีอ่อน และในทางกลับกัน
เราขอแนะนำให้ใช้แถบการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสแบบโปร่งใสเสมอ
ควรทำ
สิ่งที่ไม่ควรทำ
โหมดปุ่ม
หลังจากกำหนดเป้าหมายเป็น Android 15 หรือเรียกใช้ enableEdgeToEdge ใน Activity ระบบจะใช้เลเยอร์โปร่งแสงด้านหลังแถบนำทางแบบปุ่ม ซึ่งคุณสามารถนำออกได้โดยตั้งค่า Window.setNavigationBarContrastEnforced() เป็นเท็จ
ใช้แถบนำทางแบบ 3 ปุ่มที่โปร่งใสเมื่อมีแถบแอปด้านล่างหรือแถบนำทางของแอปด้านล่าง หรือเมื่อ UI ไม่เลื่อนไปใต้แถบนำทางแบบ 3 ปุ่ม หากต้องการใช้แถบการนำทางแบบโปร่งใส ให้ตั้งค่า Window.setNavigationBarContrastEnforced() เป็นเท็จและเพิ่มระยะห่างจากขอบด้านล่างของแถบแอปเพื่อวาดใต้แถบการนำทางของระบบ ดังที่เห็นในรูปที่ 7, 8 และ 9 ดูข้อมูลเพิ่มเติมได้ที่การปกป้องแถบระบบ
ใช้แถบนำทางแบบ 3 ปุ่มโปร่งแสงสำหรับการเลื่อนเนื้อหา ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อควรพิจารณาสำหรับแถบการนำทางแบบโปร่งแสงได้ที่การออกแบบแบบไร้ขอบ
แป้นพิมพ์และการไปยังส่วนต่างๆ
การนำทางแต่ละประเภทจะตอบสนองต่อแป้นพิมพ์บนหน้าจออย่างเหมาะสมเพื่อให้ผู้ใช้ดำเนินการต่างๆ ได้ เช่น ปิดหรือเปลี่ยนประเภทแป้นพิมพ์ หากต้องการให้การเปลี่ยนผ่านเป็นไปอย่างราบรื่นซึ่งจะซิงค์การเปลี่ยนผ่านของแอปกับแป้นพิมพ์ที่เลื่อนขึ้นและลงจากด้านล่างของหน้าจอ ให้ใช้ WindowInsetsAnimationCompat
เลย์เอาต์
เลย์เอาต์ที่ปรับเปลี่ยนตามพื้นที่จะเพิ่มประสิทธิภาพพื้นที่แสดงผลที่มีอยู่ โดยจะจัดระเบียบ UI ของแอปด้วยการย้ายเนื้อหาไปยังแผงรองหรือแผงระดับที่ 3
เมื่อออกแบบเลย์เอาต์ที่ปรับเปลี่ยนได้ ให้พิจารณาวิธีที่แถบระบบโต้ตอบกับเนื้อหาของคุณ ใช้ WindowInsets เพื่อให้แน่ใจว่า UI ของคุณจะไม่ถูกบดบังโดยแถบระบบบนจอแสดงผล เช่น หน้าจอขนาดใหญ่ อุปกรณ์แบบพับได้ และหน้าต่างแอปในโหมดหลายหน้าต่างและโหมดหน้าต่างเดสก์ท็อป
เมื่อแอปแสดงแบบไร้ขอบ ให้ตรวจสอบว่าเนื้อหาและตัวควบคุมไม่ถูกบดบังโดย UI ของระบบ เช่น หากแถบนำทางปิดบังปุ่ม ผู้ใช้อาจคลิกปุ่มไม่ได้
ดูข้อมูลเพิ่มเติมได้ที่เลย์เอาต์มาตรฐาน
หน้าจอรอยบาก
หน้าจอรอยบากคือพื้นที่ในอุปกรณ์บางรุ่นที่ขยายเข้าไปในพื้นผิวจอแสดงผลเพื่อให้มีพื้นที่สำหรับเซ็นเซอร์ด้านหน้า หน้าจอรอยบากอาจแตกต่างกันไป ตามผู้ผลิต พิจารณาว่าหน้าจอรอยบากจะโต้ตอบกับเนื้อหา การวางแนว และการแสดงผลแบบไร้ขอบอย่างไร
โหมดใหญ่พิเศษ
คุณสามารถซ่อนแถบระบบเมื่อต้องการประสบการณ์การใช้งานแบบเต็มหน้าจอ เช่น เมื่อผู้ใช้กำลังดูภาพยนตร์ ผู้ใช้ควรยังคงแตะเพื่อแสดงแถบระบบและไปยังส่วนต่างๆ หรือโต้ตอบกับตัวควบคุมระบบได้ ดูข้อมูลเพิ่มเติมได้ที่เนื้อหาที่สมจริงและซ่อนแถบระบบสำหรับโหมดใหญ่พิเศษ