รูปทรง

รูปทรงช่วยเน้นความสำคัญขององค์ประกอบหน้าจอบางส่วนเมื่อเทียบกับองค์ประกอบอื่นๆ

คำแนะนำโดยย่อ (TL;DR):

  • ใช้มุมที่โค้งมนมากขึ้น (รัศมีของมุมสูงขึ้น) สำหรับการกระทำและองค์ประกอบหลัก
  • ใช้มุมที่โค้งมนและรูปที่น้อยกว่า (รัศมีของมุมด้านล่าง) สำหรับองค์ประกอบที่เน้นต่ำ

ค่ารัศมีของมุม

Android สำหรับรถยนต์ให้ชุดค่ารัศมีมุมโดยเน้นความสำคัญขององค์ประกอบหน้าจอต่างๆ เมื่อเทียบกับองค์ประกอบอื่นๆ

ค่ารัศมีของมุม
R0 R1 R2 R3 R4
0dp 4dp 8dp 16dp เต็มรูปแบบ

การใช้การปัดเศษเพื่อเน้น

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

ตัวอย่างของรัศมีมุมทั้ง 4 ระดับ
ตัวอย่างรัศมีมุม 4 ระดับ ตั้งแต่ต่ำสุด (0dp = สี่เหลี่ยมจัตุรัส) ถึงสูงสุด (เป็นวงกลม)

0dp - เกณฑ์พื้นฐาน

ใช้มุม 0dp (สี่เหลี่ยมจัตุรัส) สำหรับองค์ประกอบพื้นฐานที่ไม่จำเป็นต้องมีการเน้นเป็นพิเศษ โครงสร้างเลย์เอาต์พื้นฐาน เช่น แถบเครื่องมือหรือรายการควรใช้มุม 0dp รูปภาพควรมีมุม 0dp เช่นกัน เว้นแต่จะมีการมาสก์ด้วยคอนเทนเนอร์ทรงกลม (เช่น การ์ด) หรืออยู่ในสถานะที่เลือกไว้

ตัวอย่างมุมสี่เหลี่ยมจัตุรัส
ปกอัลบั้มในตารางกริดด้านขวาไม่จำเป็นต้องเน้นเป็นพิเศษซึ่งกันและกันหรือเทียบกับองค์ประกอบอื่นๆ ที่แสดง ดังนั้นจึงมีมุม 0dp (รายละเอียดแสดงอยู่ด้านซ้าย)

8dp — ความสำคัญต่ำ

8dp คือรัศมีมุมเริ่มต้นสำหรับรูปทรงกลม ใช้รูปร่างนี้เพื่อระบุองค์ประกอบอินเทอร์แอกทีฟที่เน้นระดับต่ำ เช่น การ์ดและคอนเทนเนอร์

ตัวอย่าง 8dp ที่เน้นต่ำ
การ์ดการแจ้งเตือนที่แสดงที่นี่ใช้รัศมีของมุม 8dp เริ่มต้น (แสดงทางด้านซ้าย) ซึ่งเน้นน้อยกว่าปุ่มการทำงานบนการ์ด (ตามที่แสดงทางด้านขวา) ซึ่งสำคัญกว่า

16dp — การเน้นปานกลาง

ใช้รัศมีของมุม 16dp สำหรับคอมโพเนนต์ที่เน้นระดับปานกลาง ซึ่งรวมถึงองค์ประกอบแบบอินเทอร์แอกทีฟและคอมโพเนนต์ที่ขยายได้

ตัวอย่างมุมปานกลาง 16dp
ในที่นี้ รัศมีของมุม 16dp ใช้เพื่อเน้นปานกลางสําหรับ Bottom Sheet ซึ่งมีความสำคัญมากกว่าเนื้อหาปัจจุบันบนหน้าจอชั่วคราว

เป็นวงกลม — การเน้นสูง

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

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