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

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

รูปที่ 1 ทางซ้าย แอปที่ไม่แสดงแบบขอบจรดขอบ ทางขวา แอปที่แสดงผลแบบไร้ขอบ

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

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

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

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

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

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

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

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

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

เนื้อหาแบบเลื่อน

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

ควรทำ

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

ควรทำ

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

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

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

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

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

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

ควรทำ

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

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

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

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

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

เนื้อหาแบบเลื่อน

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

ควรทำ

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

ควรทำ

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

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

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

ควรทำ

แทรก UI ที่สำคัญโดยใช้ส่วนที่เว้นไว้ของหน้าจอรอยบาก

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

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

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

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

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

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

อ่านวิธีรองรับหน้าจอรอยบากใน Compose และ Views

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

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