การออกแบบแบบไร้ขอบ

แอปแบบขอบจรดขอบจะใช้ประโยชน์จากทั้งหน้าจอโดยการวาด UI ไว้ใต้แถบระบบ

รูปที่ 1 ซ้าย แอปที่ไม่ใช่แบบขอบจรดขอบ ขวา แอปที่เป็นแบบขอบจรดขอบ

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

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

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

ฟีเจอร์แบบขอบจรดขอบช่วยให้คุณวาด UI ไว้ใต้แถบระบบเพื่อประสบการณ์ที่สมจริง

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

โปรดทราบระยะขอบประเภทต่อไปนี้เมื่อออกแบบกรณีการใช้งานแบบขอบจรดขอบ

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

ข้อควรพิจารณาเกี่ยวกับแถบสถานะ

ดูคำแนะนำการออกแบบแถบระบบพื้นฐานได้ที่ แถบระบบของ Android ส่วนต่อไปนี้จะกล่าวถึงข้อควรพิจารณาเพิ่มเติมเกี่ยวกับแถบสถานะ

เนื้อหาที่เลื่อนได้

แถบแอปด้านบนควรยุบขณะเลื่อน ดูวิธียุบ Material 3 TopAppBar ใน Material 3 แถบแอปด้านบนขนาดเล็กสามารถยุบให้มีความสูงเท่ากับแถบสถานะหรือเลื่อนออกนอกหน้าจอได้ แถบแอปด้านบนขนาดกลางและขนาดใหญ่สามารถยุบให้เป็นแถบแอปขนาดเล็กลงได้ ดูคำแนะนำของ Material

ควรทำ

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

ควรทำ

เพิ่มการไล่ระดับสีพื้นหลังที่เข้ากันหากแถบแอปด้านบนขนาดเล็กไม่ติดอยู่

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

  • ใช้การปกป้องอัตโนมัติของ Material 3 TopAppBar เมื่อ เลื่อน, หากมี
  • สร้าง Composables การไล่ระดับสีที่กำหนดเองหรือใช้ GradientProtection สำหรับ Views ดูข้อมูลเพิ่มเติมเกี่ยวกับการดำเนินการนี้ใน Compose ได้ที่ การปกป้องแถบระบบ
รูปที่ 3 แอปที่มีการไฮไลต์ระยะขอบของท่าทางสัมผัสเป็นสีเขียว

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

ไม่ควรทำ

มีการปกป้องการไล่ระดับสีที่ไม่ตรงกับพื้นหลังของแต่ละบานหน้าต่าง

ควรทำ

มีการปกป้องการไล่ระดับสีที่ตรงกับพื้นหลังของแต่ละบานหน้าต่าง

ในทำนองเดียวกัน ลิ้นชักการนำทางก็ควรมีการปกป้องแยกต่างหากจากส่วนอื่นๆ ของแอปด้วย

รูปที่ 4 แถบสถานะโปร่งแสงสำหรับลิ้นชักการนำทาง รูปภาพนี้แสดงการปกป้องแถบสถานะสำหรับลิ้นชักการนำทาง แต่ไม่ใช่สำหรับแอป

อย่าซ้อนการปกป้องแถบสถานะ เช่น ใช้ทั้งการปกป้องในตัวของ Material 3 TopAppBar และการปกป้องที่กำหนดเอง

ดูคำแนะนำการออกแบบแถบนำทางพื้นฐานได้ที่ แถบระบบของ Android ส่วนต่อไปนี้มีข้อควรพิจารณาเพิ่มเติมเกี่ยวกับแถบนำทาง

เนื้อหาที่เลื่อนได้

แถบแอปด้านล่างควรยุบขณะเลื่อน

ควรทำ

เพิ่ม Scrim ของแถบระบบสำหรับการนำทางแบบ 3 ปุ่มเมื่อแถบแอปด้านล่างเคลื่อนออกไป

ควรทำ

ทำให้การไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสโปร่งใสและอย่าเพิ่ม Scrim เพิ่มเติม

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

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

ควรทำ

เพิ่มระยะขอบให้กับ UI ที่สำคัญโดยใช้ระยะขอบของคัตเอาท์ดิสเพลย์

ไม่ควรทำ

วาง UI ที่สำคัญไว้ที่ขอบของหน้าจอ

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

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

ตรวจสอบว่าภาพสไลด์แนวนอนวาดเข้าไปในหน้าจอรอยบาก

รูปที่ 6 จอแสดงผลแนวนอนแบบขอบจรดขอบ ซึ่งภาพสไลด์จะเลื่อนผ่านหน้าจอรอยบาก

อ่านเกี่ยวกับวิธีรองรับคัตเอาท์ดิสเพลย์ใน Compose และ Views

คำแนะนำอื่นๆ

โดยทั่วไป พื้นหลังและเส้นแบ่งควรวาดแบบขอบจรดขอบด้วย ขณะที่เนื้อหา เช่น ข้อความและปุ่มควรมีการเพิ่มระยะขอบเพื่อหลีกเลี่ยง UI ของระบบและองค์ประกอบฮาร์ดแวร์