มุ่งเน้นที่ประสบการณ์การใช้งานระบบ ประสบการณ์การใช้แอป และฟีเจอร์เพิ่มเติมเพื่อออกแบบประสบการณ์การอ้างอิงภาพบุคคล
การออกแบบข้อมูลอ้างอิงแนวตั้งจะตรึงอยู่กับหน้าจอหลักและมีองค์ประกอบ UI ของระบบถาวรต่อไปนี้
หน้าจอหลัก
หน้าจอหลักเป็นจุดเริ่มต้นที่เป็นทุกอย่างสำหรับคนขับ โดยเข้าถึงตัวควบคุมทั้งหมดได้อย่างง่ายดาย ฟีเจอร์นี้ตอบโจทย์ความต้องการของผู้ขับขี่ส่วนใหญ่ ผู้ขับขี่จึงมีสมาธิกับการเดินทางบนถนนแทนการสลับไปมาระหว่างแอป
ได้โดยไม่ต้องออกจากหน้าจอนี้ ผู้ขับสามารถเข้าถึงสิ่งต่อไปนี้
- แถบสถานะที่ด้านบนมีตัวควบคุมด่วนและตัวเลือกโปรไฟล์
- เลเยอร์ฐานในส่วนเนื้อหาของหน้าจอ ซึ่งมักเรียกใช้แอปการนำทาง
- แถบควบคุมและแถบนำทางที่ด้านล่าง
![มุมมองหน้าจอหลัก](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/home-screen.png?authuser=19&hl=th)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/home-screen.png?authuser=19&hl=th)
แถบควบคุม
แถบควบคุมใช้ตัวควบคุมสื่อ (วิดีโอและเพลง) พอดแคสต์ บลูทูธ วิทยุ และสายที่สนทนาอยู่
สำหรับแอปสื่อและโทรศัพท์ แถบควบคุมจะอยู่เหนือแถบนำทางที่ครึ่งล่างของหน้าจอ ตัวควบคุมจะเปลี่ยนจากสื่อเป็นการโทรที่ทำงานอยู่ เมื่อผู้ใช้รับสายเรียกเข้า
การควบคุมสื่อ
การควบคุมสื่อช่วยให้คุณเล่น หยุดชั่วคราว กรอกลับ และกรอไปข้างหน้าได้ และยังให้ผู้ใช้ทำเครื่องหมายรายการโปรดและเข้าถึงการควบคุมที่กำหนดเองเพิ่มเติมได้ด้วย (หากมี)
![การควบคุมสื่อแบบมาตรฐาน](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/media-controls-1.png?authuser=19&hl=th)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/media-controls-1.png?authuser=19&hl=th)
![ตัวควบคุมสื่อแบบขยาย](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/media-controls-2.png?authuser=19&hl=th)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/media-controls-2.png?authuser=19&hl=th)
การควบคุมการโทรที่ใช้งานอยู่
ส่วนควบคุมของโทรศัพท์ช่วยให้คุณปิดเสียงลำโพง เปลี่ยนไปใช้บลูทูธ และยกเลิกการโทรได้
แถบสถานะ
แถบสถานะจะปรากฏที่ด้านบนของหน้าจอ และแสดงตัวเลือกโปรไฟล์ การควบคุมอย่างรวดเร็ว รวมถึงข้อมูลเวลาและสภาพอากาศ
- การควบคุมอย่างรวดเร็ว
- บลูทูธ: สถานะของบลูทูธ
- การเชื่อมต่อ: Wi-Fi, เครือข่ายมือถือ และฮอตสปอต
- จอแสดงผลความสว่าง: อนุญาตให้ผู้ใช้ปรับระดับความสว่างของหน้าจอ
- นาฬิกา: จอแสดงผลเวลาปัจจุบันแบบดิจิทัล
- ข้อมูลสภาพอากาศ: แสดงอุณหภูมิภายนอก
- ตัวเลือกโปรไฟล์: แสดงโปรไฟล์ผู้ใช้ที่ใช้งานอยู่ในปัจจุบัน และอนุญาตให้ผู้ใช้เลือกโปรไฟล์อื่นได้หากต้องการ
องค์ประกอบของแถบสถานะจะปรากฏในลำดับเดียวกันสำหรับรถที่ใช้พวงมาลัยซ้ายและขวามือ
ผู้ใช้สลับการเปิดหรือปิดการแสดงสภาพอากาศได้ในการตั้งค่า
ดูแนวทางปฏิบัติแนะนำและคำแนะนำเกี่ยวกับการปรับแต่งแถบสถานะได้ที่แนวทางปฏิบัติแนะนำสำหรับแถบสถานะ
การควบคุมด่วน
ตัวควบคุมด่วนบนแถบสถานะช่วยให้เข้าถึงบลูทูธ การเชื่อมต่อ และความสว่างของจอแสดงผลได้อย่างง่ายดาย
![การควบคุมบลูทูธ](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-1.png?authuser=19&hl=th)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-1.png?authuser=19&hl=th)
![การควบคุมการเชื่อมต่อ](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-2.png?authuser=19&hl=th)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-2.png?authuser=19&hl=th)
![แสดงการตั้งค่า](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-3.png?authuser=19&hl=th)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-3.png?authuser=19&hl=th)
ตัวเลือกโปรไฟล์
ตัวเลือกโปรไฟล์บนแถบสถานะช่วยให้เลือกโปรไฟล์ได้อย่างรวดเร็ว และเข้าถึงการตั้งค่าโปรไฟล์ด้วยทางลัด
![ตัวเลือกโปรไฟล์ที่มีเมนูโปรไฟล์](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/profile-selector.png?authuser=19&hl=th)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/profile-selector.png?authuser=19&hl=th)
แนวทางปฏิบัติแนะนำสำหรับแถบสถานะ
แนวทางปฏิบัติแนะนำสำหรับนักพัฒนาแอป
- ใช้ความโปร่งใสเพื่อไม่ให้บดบังเนื้อหาแอป: หากแอปอยู่ในตำแหน่งที่อยู่หลังแถบสถานะบางส่วน แทนที่จะแสดงอยู่ใต้แถบสถานะ นักพัฒนาแอปควรปล่อยแถบสถานะไว้แบบโปร่งใส
- ใช้สีอย่างมีกลยุทธ์: หากแอปอยู่ใต้แถบสถานะทั้งหมด นักพัฒนาแอปควรเลือกสีสำหรับแถบสถานะ
แถบนำทางของระบบ
แถบนำทางของระบบโฮสต์ตัวควบคุมตัวเปิดแอป ผู้ช่วยดิจิทัล ศูนย์การแจ้งเตือน และการควบคุมเพื่อความสบาย
แถบนำทางที่ด้านล่างของหน้าจอจะแสดงตัวควบคุมต่อไปนี้
- อุณหภูมิห้องโดยสาร: อุณหภูมิในรถ
- ตัวเปิดแอป: แอปที่ผู้ขับขี่ใช้ได้
- ผู้ช่วยดิจิทัล: สิทธิ์เข้าถึงผู้ช่วยดิจิทัลที่เลือก เช่น Google Assistant
- ศูนย์การแจ้งเตือน: การเข้าถึงศูนย์การแจ้งเตือน
- การควบคุมอุณหภูมิ: การเข้าถึงระบบปรับอากาศในยานพาหนะ
ดูคำแนะนำเกี่ยวกับการปรับแต่งแถบนำทางของระบบได้ที่การปรับแต่งแถบนำทางของระบบ
ตัวเปิดแอป
ตัวเปิดแอปจะปรากฏในพื้นที่หลักของแอปในมุมมองตารางของตัวเปิดแอปมาตรฐาน แอปเรียงลำดับจาก ก ถึง ฮ ผู้ใช้สามารถจัดเรียง แอปใหม่ได้ตามต้องการ
![ตัวเปิดแอป](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/app-launcher.png?authuser=19&hl=th)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/app-launcher.png?authuser=19&hl=th)
ผู้ช่วยดิจิทัล
เมื่อแตะ พื้นที่นี้จะเรียกใช้ผู้ช่วยดิจิทัลที่ใช้งานอยู่สำหรับการสื่อสารด้วยเสียง
ศูนย์การแจ้งเตือน
ศูนย์การแจ้งเตือนจะนำผู้ใช้ไปยังข้อความแจ้งเตือนที่บันทึกไว้ทั้งหมด ทั้งที่อ่านแล้วและยังไม่อ่าน
![ศูนย์การแจ้งเตือน](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/notification-center.png?authuser=19&hl=th)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/notification-center.png?authuser=19&hl=th)
การควบคุมอุณหภูมิ
ไอคอนระบบปรับอากาศช่วยให้เข้าถึงระบบปรับอากาศของรถได้ง่ายๆ
![ระบบควบคุมอุณหภูมิเพิ่มเติม](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/climate-controls.png?authuser=19&hl=th)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/climate-controls.png?authuser=19&hl=th)
ฟีเจอร์เพิ่มเติม
ฟีเจอร์เพิ่มเติมในการออกแบบข้อมูลอ้างอิงแนวตั้งที่ใช้กับทั้งประสบการณ์ของระบบและประสบการณ์การใช้งานแอปนั้นรวมถึงเลเยอร์เสียงและธีมต่างๆ
เลเยอร์เสียง
เลเยอร์เสียงเป็นเลเยอร์โปร่งใสที่อยู่เหนือเลเยอร์ทั้งหมดและเหนือ แถบควบคุมและแถบนำทางของระบบ
โดยสามารถเรียกใช้ผู้ช่วยดิจิทัลทุกประเภทที่ผสานรวมอยู่ในระบบ เช่น Google Assistant
ธีม
มี 2 ธีมให้เลือกตามสภาพแสง
![ธีมมืด](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/dark-theme.png?authuser=19&hl=th)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/dark-theme.png?authuser=19&hl=th)
![ธีมสว่าง](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/light-theme.png?authuser=19&hl=th)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/light-theme.png?authuser=19&hl=th)
ใช้ธีมมืดสำหรับสภาพแสงน้อยหรือตอนกลางคืนเพื่อลดแสงสะท้อน ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลโดยย่อยามค่ำคืน
ใช้ธีมสว่างเพื่อช่วยให้คนขับและผู้โดยสารเห็นหน้าจอรถในจุดที่โดนแสงแดดโดยตรง การนำทางของระบบจะยังคงเป็นสีดำเพื่อให้กลมกลืนกับฮาร์ดแวร์