การจัดรูปแบบตัวอักษรช่วยกำหนดลำดับชั้นและฟังก์ชันของ UI การเลือกใช้การพิมพ์ยังมีผลต่อการอ่านออกเขียนได้อย่างมาก ซึ่งเป็นข้อควรพิจารณาที่สำคัญในการขับรถ
คำแนะนำโดยย่อ (TL:DR):
- ใช้การแสดงผล เนื้อความ และข้อความย่อยจากสเกลการพิมพ์ของ Android Automotive OS
- ขนาดข้อความเนื้อหาขั้นต่ำคือ 24dp สงวนขนาดข้อความย่อยไว้สำหรับข้อมูลที่ไม่สำคัญ
- ใช้ตารางกริด 4-dp เพื่อจัดวาง
- ใช้แอตทริบิวต์รูปแบบเพื่อสร้างเอฟเฟกต์ (ลำดับชั้นการสนับสนุน การเน้นความสนใจ)
- ใช้แบบอักษรน้ำหนักปานกลางแต่พอควร และหลีกเลี่ยงการใช้ตัวหนา
การอ้างอิงขนาดและตารางกริด
ใช้สเกลการพิมพ์และตารางกริดการจัดเรียงของ Android Automotive OS เพื่อให้ข้อความที่แสดง เนื้อหา และข้อความย่อยมีความสอดคล้องกันและมองเห็นได้หลายระดับ
มาตราส่วนการพิมพ์ของ Android Automotive OS
สเกลดังกล่าวจะแสดงแบบอักษร ขนาดแบบอักษร และความสูงของบรรทัดสำหรับข้อความเริ่มต้นทั้ง 9 ระดับของข้อความที่แสดง ข้อความเนื้อหา และข้อความย่อยที่ใช้ใน Android Automotive OS ขนาดประเภทขั้นต่ำสำหรับ Android Automotive OS คือ 24dp ขนาดที่ต่ำกว่า 24dp จะอ่านได้ง่ายและควรใช้อย่างจำกัดในบริบทแบบอัตโนมัติ ขนาดข้อความย่อยจะสงวนไว้ให้สำหรับข้อมูลที่ไม่สำคัญหรือลำดับสาม เช่น เนื้อหาในแถบสถานะ

การจัดเรียงตารางกริดและการอ้างอิงเกณฑ์พื้นฐาน
การรักษาขนาดและจังหวะแนวตั้งตามตารางกริด 4dp ช่วยให้มีความสม่ำเสมอและลำดับชั้นของภาพ

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

ตัวอย่าง

ข. เนื้อความ 2
ค. เนื้อความ 1

ข. เนื้อความ 1
ค. เนื้อความ 1

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

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