Android Auto จะวางเนื้อหาทั้งหมดบนพื้นหลังสีดำเพื่อสร้างประสบการณ์การใช้งานที่สอดคล้องกันยิ่งขึ้นด้วยสีที่คล้ายกันในธีมกลางวันและกลางคืน
พื้นหลังสีดำมักจะได้ผลดีที่สุดภายในรถยนต์ เนื่องจากผู้ผลิตรถยนต์มักใช้สีและวัสดุสีเข้มสำหรับการตกแต่งภายในรถ แผงหน้าปัด และ UI
ข้อมูลโดยย่อ
- ใช้พื้นหลังสีดำเพื่อรองรับทั้งการขับขี่ในเวลากลางวันและกลางคืน
- รักษาอัตราส่วนคอนทราสต์ระหว่างพื้นหลังกับไอคอนหรือข้อความอย่างน้อย 4.5:1
- ใช้สีให้น้อยและตั้งใจ
- แสดงระดับความสูงโดยใช้เฉดสีเทา
- ใช้ความโปร่งใสและความทึบแสงเพื่อเป็นแนวทางในการโฟกัสของภาพ
พาเลตและการไล่ระดับสี
ธีมมืดสำหรับ Android Auto ใช้ชุดสีโทนสีเทา คุณควรปิดความเข้มของสีที่เพิ่มเข้ามาใน UI ให้เหมือนกับสีที่เข้มกว่าในชุดสี Material Design
ชุดโทนสีเทาของ Android Auto
เมื่อใช้ชุดสีโทนสีเทาของ Android Auto คุณจะสามารถใส่สีให้กับองค์ประกอบทั้งหมด รวมถึงข้อความและไอคอน
จานสีนี้ถูกออกแบบมาเพื่อ:
- แสดงลำดับชั้นขององค์ประกอบ UI แต่ละรายการด้วยช่วงเฉดสีที่ให้ไว้
- จัดการกรณีการใช้งาน UI ธีมมืดทั้งหมด
ใน Android Auto ระบบจะให้ความรู้สึกถึงความลึกโดยใช้เฉดสีเทา เฉดสีแต่ละสีแสดงถึงระดับการยกที่แตกต่างกัน โดยคอมโพเนนต์ที่มีเฉดสีเข้ม (เช่น คอมโพเนนต์รายการ) จะมีระดับการยกน้อยกว่าคอมโพเนนต์ที่มีเฉดสีอ่อน (เช่น ปุ่มการทำงานแบบลอย)
องค์ประกอบทั้งหมดจะปรากฏบนพื้นหลังสีดำที่แท้จริงโดยที่มองไม่เห็นเงา ชุดสีโทนสีเทาของ Android Auto ประกอบด้วยสีเทาที่หลากหลายเพื่อให้ความแตกต่างระหว่างคอมโพเนนต์เหล่านี้เพียงพอ โดยจะค่อยๆ มีความคืบหน้าไปแบบค่อยเป็นค่อยไปมากกว่าชุดสีพื้นฐานของดีไซน์ Material เนื่องจากเฉดสีของ Material ที่ต่ำกว่าสีเทา 900 นั้นสว่างเกินไปสำหรับบริบทของรถยนต์
สีเฉพาะจุด
นอกเหนือจากชุดโทนสีเทาของ Android Auto แล้ว คุณสามารถใช้สีเฉพาะจุดเท่าที่จำเป็นเพื่อวัตถุประสงค์ต่างๆ เช่น การดึงจุดโฟกัสของผู้ใช้
ตอนนี้ Android Auto มีสีเฉพาะจุดอย่างเป็นทางการ 1 สี ซึ่งก็คือเฉดสีน้ำเงินในไลบรารีการสนับสนุนว่า "เครื่องหมายเน้นเสียงรถยนต์" สีน้ำเงินนี้เพิ่มความอิ่มตัวและความสดใสจากสีน้ำเงินของ Google มาตรฐานเพื่อให้มองเห็นบนพื้นที่มืดของ UI ได้ดีขึ้น
แผนภูมิความทึบแสง
โมเดลเชิงพื้นที่ของดีไซน์ Material ใช้ระดับความทึบแสงที่แตกต่างกันเพื่อถ่ายทอดความรู้สึกใน UI หากต้องการใช้งานอย่างมีประสิทธิภาพ ให้เลือกระดับความทึบแสงตามกรณีการใช้งานของคุณ
ค่าความทึบแสง
กรณีการใช้งานที่พบบ่อยที่สุดสำหรับพื้นผิวสีเข้มกึ่งโปร่งใสคือ Scrim (หรือที่เรียกว่า "โฆษณาซ้อนทับ")
ค่าความทึบแสงสีขาว
ค่าสีขาวแบบกึ่งโปร่งใสมักจะใช้กับข้อความส่วนใหญ่ โดยเฉพาะเมื่อพื้นหลังเป็นสี แทนที่จะใช้สีเทาทึบ
โปรดดูตัวอย่างวิธีใช้ความทึบแสงในสคริปต์และลำดับชั้นของข้อความได้ที่คำแนะนำและตัวอย่าง
คอนทราสต์
คอนทราสต์ของสีที่เหมาะสมจะช่วยให้ผู้ขับขี่ตีความข้อมูลและตัดสินใจได้อย่างรวดเร็ว
ต้องมีคอนทราสต์ของภาพขั้นต่ำระหว่างพื้นหน้า (ข้อความหรือไอคอน) และพื้นหลัง (สี ปกอัลบั้ม ฯลฯ) เพื่อให้อ่านได้ง่ายในขณะขับรถ สีของแอปต้องเป็นไปตามข้อกําหนดคอนทราสต์ของข้อความปกติระดับ AA ของ WCAG 2.0 ซึ่งระบุอัตราส่วนคอนทราสต์ที่ 4.5:1) ใช้เครื่องมือตรวจสอบคอนทราสต์ เช่น WebAIM Color Constant Checker เพื่อให้แน่ใจว่าหน้าจอของคุณเป็นไปตามข้อกำหนดด้านคอนทราสต์
โปรดดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีใช้อัตราส่วนคอนทราสต์กับองค์ประกอบ UI ที่เฉพาะเจาะจงที่หัวข้อหลักเกณฑ์สำหรับการออกแบบสำหรับการขับรถ
สิ่งที่ควรทำ
ไอคอนเหล่านี้เป็นไปตามคําแนะนําเกี่ยวกับอัตราส่วนคอนทราสต์ของสี และจะอ่านออกได้อย่างชัดเจนเมื่ออยู่บนพื้นหลัง
สิ่งที่ไม่ควรทำ
ไอคอนเหล่านี้ไม่เป็นไปตามคําแนะนําเกี่ยวกับอัตราส่วนคอนทราสต์ของสี และแยกความแตกต่างจากพื้นหลังได้ยากคำแนะนำและตัวอย่าง
UI แบบมืดสำหรับ Android Auto ดูสะอาดตาและเรียบง่าย ใช้สีน้อยที่สุด นอกเหนือจากการใช้สี โทน และค่าความทึบแสงที่เหมาะสมสำหรับองค์ประกอบ UI แล้ว (ดูชุดสีและการไล่ระดับสี) การใช้สีและความทึบแสงที่แตกต่างกันทุกครั้งควรมีจุดประสงค์
ส่วนนี้จะให้คำแนะนำและตัวอย่างในการใช้ความต่างของความทึบแสงและสีเพื่อให้บรรลุเป้าหมายต่างๆ ได้แก่
- การบดบังพื้นหลัง
- รักษาความสม่ำเสมอ
- สร้างมุมมองต้นไม้ที่ดึงความสนใจของผู้ใช้ไปยังการกระทำหลัก
- การแยกความแตกต่างระหว่างรายการ
พื้นหลังเบลอด้วยลายเส้น
ใช้ Scrims (การวางซ้อน) แบบเต็มหน้าจอเพื่อปกปิดพื้นหลังเมื่อเนื้อหาที่มีความสำคัญสูงปรากฏขึ้นที่เบื้องหน้า เช่น กล่องโต้ตอบที่กำหนดให้ผู้ใช้ดำเนินการ Scrim แบบบางส่วนใช้เพื่อดึงดูดความสนใจไปยังการเปลี่ยนองค์ประกอบต่างๆ เช่น การเข้าสู่การแจ้งเตือน
รักษาความสอดคล้องของสี
สีเป็นสัญลักษณ์ที่มีประสิทธิภาพในการเน้นย้ำการเชื่อมโยงระหว่างองค์ประกอบหลักในเส้นทางของผู้ใช้ เช่น องค์ประกอบที่เกี่ยวข้องกับการนำทางทั้งหมดเป็นสีเขียว ความต่อเนื่องของสีดังกล่าวช่วยให้หน่วยความจำและการจดจำว่าองค์ประกอบ UI ใดเชื่อมโยงอยู่และเกี่ยวข้องกันอย่างไร ซึ่งคุณสามารถใช้เพื่อสร้างประสบการณ์ที่สอดคล้องกันจากหน้าจอหนึ่งไปอีกหน้าจอหนึ่ง
สิ่งที่ควรทำ
รักษาความต่อเนื่องของภาพโดยใช้สีเดียวกันสำหรับรายการในมุมมองต่างๆ เช่น สีเขียวที่ใช้สำหรับมุมมองการนำทางแบบเลี้ยวต่อเลี้ยวเหล่านี้
สิ่งที่ควรทำ
ใช้สีเพื่อเชื่อมโยงองค์ประกอบและฟังก์ชันที่เกี่ยวข้องกัน เช่น CTA วางสายสีแดง
สิ่งที่ควรทำ
ใช้สีที่โดดเด่นของปกอัลบั้มหรือสีที่แอปกำหนดบนองค์ประกอบที่เกี่ยวข้องเพื่อให้ภาพโดดเด่นตลอดเวลา วงกลมรอบปุ่มหยุดชั่วคราวจะเน้นด้วยสีเขียว Spotify
สิ่งที่ไม่ควรทำ
อย่าใช้สีที่ต่างกันเพื่อแยกความแตกต่างขององค์ประกอบที่ซ้ำกันโดยพลการภายในหน้าจอเดียว โปรดระมัดระวังในการใช้สีที่ไม่ช่วยเพิ่มมูลค่า เช่นเดียวกับกรณีที่มีกรอบสีเหล่านี้อยู่รอบๆ การ์ดข้อมูลสรุป ซึ่งจะเหมือนกับสีของไอคอนแอปการสร้างลำดับชั้นของภาพ
คุณสามารถสร้างลำดับชั้นของภาพที่สอดคล้องกันและแข็งแกร่งได้โดยการระบายสีข้อความโดยใช้ช่วงของสีขาวที่ทึบแสง ค่าความทึบแสงที่ 88%, 72% และ 56% สำหรับข้อความสีขาวมีความคมชัดเพียงพอตามข้อกำหนดของการช่วยเหลือพิเศษ ขณะเดียวกันก็สร้างสภาพแวดล้อมในการอ่านที่สบายตาบนพื้นหลังสีเข้ม ใช้ความทึบแสง 96% กับข้อความสีขาวทั้งหมดสำหรับโหมดกลางคืน
สิ่งที่ควรทำ
ใช้ค่าความทึบแสงและค่าคอนทราสต์ที่ต่างกันเพื่อรักษาระดับการมองเห็น
สิ่งที่ไม่ควรทำ
อย่าใช้ค่าความทึบแสงหรือความคมชัดเต็มตัวมากเกินไปโดยการนำไปใช้กับองค์ประกอบต่างๆ มากเกินไป จำเป็นต้องใช้ความแตกต่างของค่าความทึบแสงเพื่อแยกความแตกต่างของข้อมูลหลักและข้อมูลรอง