編輯導語：HMI即人機交互，而汽車HMI設計則是涉及了汽車和人兩方的交互體驗設計，在進行汽車HMI設計中，設計師需要考慮如何提升人機的交互體驗，引導用戶順利地完成交互任務。那麼，汽車HMI有哪些特點？具體應該如何開發？本文作者梳理了車載系統的首頁框架、狀态欄等方面，一起來看一下。

一、前言

入行做車載HMI已有多年，接下來我會給大家安排HMI設計知識相關的文章，輸出這類文章的初衷就是想讓更多的人能夠了解這個賽道。

近幾年行業的興起，專業知識的稀缺我們都可以觀察到，這也是導緻這個行業設計人員比較缺失的重要因素，因為門檻相對較高，所以大多數設計師們還在卷C端、B端領域。如果你想進入這個賽道了解車載HMI知識的話，那就盡請期待一下吧。

車載屏幕的首頁承載了相對比較重要的内容，那他的設計方案也是很多種類的，每一個車廠的産品部門對産品的定義也有所不同，側重點也會有所差異化。

産品和體驗部門需要進行對市場分析，用戶調研等，去了解直接用戶的心聲，而不是自以為是覺得哪些功能重要就做那些，或者看别的車廠有什麼我們就做什麼，這類的做法是不可取的，因此前期的調研工作不能少。

二、HMI首頁框架

首頁是一個門面，在設計方面肯定是S級别的任務，什麼功能需要呈現在首頁上面，需要經過前期調研報告結論來定義，最終确認首頁的方案。下面羅列出市場上主流的一些首頁設計方案，分析一下首頁有什麼内容

1. 特斯拉

我們來分析一下特斯拉Model 3/Y的首頁。特斯拉的設計比較獨特，中控的整個屏幕呈分區顯示，因為Model 3/Y取消掉儀表盤，取而代之的是占用中控左側1/3區域作為車況信息區、智能可視化（注：道路和車模的實況圖）、包括前後儲物箱充電口，并且集成了後置攝像頭、語音指令、充電設置甚至手動雨刮器的入口。

上方區域在行駛狀态下會變成時速表、車速、檔位、自動駕駛狀态、剩餘續航等， 顯示Autopilot自動輔助駕駛狀态的位置會轉換成對車輛的快速控制：如前備箱與後備箱的解鎖，這樣的界面操作設計讓人感覺更加便捷。

右側2/3區域則作為車機系統頁面，将使用頻率較高的導航作為主界面，地圖導航是最常用的功能，即使不導航，常規顯示的地圖信息也可以極大增加駕駛員的安心感，頂部的狀态欄基本都可以進行點擊操作

2. 小鵬

小鵬汽車P7将儀表屏和中控屏連接起來，做了一個貫穿式的設計，小鵬 P7 也是地圖導航為默認背景，中控屏幕采用卡片化設計，界面主要分左中右三個部分，主次分明，從左至右依次為：導航欄（小程序、音樂、車輛設置、空調、泊車輔助、電話、設置）。

和蔚來 ES6 不一樣之處就在于小鵬 P7 的常用卡是放在中控左側欄，常用的功能卡片有：智能助手、導航、音樂、電話、消息中心；顯示區（地圖、導航信息、狀态欄）在顯示區；其他的内容點開後會以彈窗的方式，展現在地圖之上，用完一個就關掉，操作非常的便捷。使用小鵬語音助手、觸控基本可以滿足駕駛需要的功能操作，設計簡潔，信息布局合理。

語音助手，小鵬P7的語音交互體驗反應速度還是比較快的，可以實現全場景語音交互設計，詞庫豐富，識别率也不錯，據統計正确率達到百分之80%以上，喚醒詞為“你好小P”一次喚醒20秒内免喚醒，可以語音輸入目的地，迅速搜錯結果，語音交互設計非常友好，用戶體驗非常的人性化智能化。

導航卡片 右側導航主頁，主要的功能有搜索、附近信息、附近搜、裡程信息、道路狀況、充電站、道路名稱、交通信息；卡片左下角有音量控制、視圖切換、設置按鈕可以調節導航音量，2D/3D地圖視角切換，導航設置；音樂卡主要功能切歌上一首、下一首、暫停播放， 快速操作點擊；電話卡是進入電話界面，需要連接藍牙獲取通訊錄才能使用。

小鵬 G3 和 P5 中控是豎屏的，據統計HMI中控豎屏的使用體驗會優于橫屏，我們看一下屏幕操作的熱區可以發現，豎屏操作會比橫屏會好一些，以手臂為中心畫圓，豎屏的寬度是要小于長屏的，因此右手操作到的内容我覺得還是豎屏更加舒适，但是豎屏也有一個缺點，下方區域的内容是需要低頭去查看。

和P7中控設計還是有差異的，P7是功能卡片 地圖組合，而小鵬 G3 和 P5 中控首頁是應用圖标 地圖組合形式，我想這是為了能夠讓用戶使用更多功能的原因吧，從左到右依次是語音形象、導航、音樂、電話、倒車影像、設置、應用，從操作區域來看，将常用的功能都集中于最佳觸控區域，比如導航、音樂、電話等，導航頁面中的按鈕也都居于左側區域便于點擊使用。

3. 蔚來

蔚來 ES6 也沿用将導航作為主界面和Model 3不同之處，首頁增加了兩個卡片，靠近主駕駛是常用的音樂卡片，右側則是其餘卡片切換的一個狀況，卡片類型有：車輛信息、車胎壓信息、天氣、時間等卡片。

蔚來首頁導航中，新增組隊出行功能，和朋友一起去自駕遊或者約飯，可以開啟組隊功能，開啟了之後可以在地圖上面看到朋友的實時位置，該功能可在車機及手機App端使用。通過點擊中控屏左側的“組隊出行”按鈕，用戶可創建一支新隊伍并邀請好友加入，或輸入口令加入一支現有隊伍。開啟組隊出行模式後，在線成員之間可實時共享位置，并在車内進行語音聊天，語音聊天支持對講模式和聊天模式。

雖然現在還有很多用戶不習慣用語音交互，但是駕駛過程中最好使用語音交互，這樣還是會比較安全的，喊出HI NOMI，它就會做出反應，可以滿足駕駛時需要操作的問題，比如Hi NOMI幫我打開空調，它特别的智能可以根據你的聲音來識别你的位置，假如你坐在前排打開的就是前排空調，支持三區域的語音喚醒，同時支持連續的語音輸入，輸入上一個指令之後，20s之内還可以連續輸入指令讓它去執行，有測過1分鐘之内可以連續輸入20條指令。

4. 理想ONE

理想ONE中控采用的是橫屏布局，它的主界面采用卡片式的功能頁面設計，理想 ONE 中控屏左側顯示的時間、音樂、此外，點擊時鐘區域，可以手動喚出該車的語音助手“理想同學”，方便車主之外的人使用語音功能。以及左下方5個快捷鍵（home、車輛設置、導航、音樂、360°）。

右側是各個常用功能的卡片區域，我們很多項目的主頁也是采用這種卡片式設計，各個常用功能以卡片的形式橫向排布，卡片的排列順序也可以通過長按拖動來自行調整。理想ONE功能卡片初始順序從左到右分别是：導航、音樂、自動泊車，右滑第二屏顯示的是：收音機、網絡電台、車輛的保養情況以及胎壓監測、藍牙電話、設置、行車記錄儀、全屏後視、幫助、供電管理、以及天氣。

語音助手：

喚醒理想ONE的語音助手有三種途徑：

1. 通過喊出“理想同學”語音喚醒；
2. 通過點擊中控屏上的時鐘喚醒；
3. 通過按下方向盤上的語音鍵喚醒。

可以通過一些語音快捷指令可以實現：打開導航、增大音量、打開勿擾模式、地圖導航（導航到上海浦東國際機場T2航站樓）、車輛控制（打開前車窗、打開座椅通風）、電話（打電話給周傑倫）、音樂（播放七裡香、收藏音樂、下一首歌）、收音機（我要聽xxx電台、換一個）、車況查詢（目前胎壓是多少，什麼時候需要保養）、天氣查詢（今天溫度多少度、有雨嗎？）等，駐車時和理想同學對話說出“聽說車裡有恐龍”，會出現驚喜哦，他是一款小遊戲，通過人的聲音來控制小恐龍跳躍，這個可是哄娃神器。

導航卡片，地圖是經常使用的功能之一，所以需要靠近左駕駛位置，因此需要放置在第一張大卡片上，理想ONE内置的地圖是高德地圖，可以聯網支持賬号登陸，登錄後可以同步車輛信息等，可以實現習慣的遷移。

在主界面的導航功能卡片上，底部的兩個按鈕分别是去公司和回家快捷鍵圖标，初次點擊這兩個按鈕，需要設置默認公司和家庭地址，設置完畢後，再次點擊就即刻導航，不用繁瑣輸入地址信息，比語音還更加便捷，語音還需要喚醒說出地址信息，而導航卡上面的快捷按鈕點擊之後就可以立即導航。

理想車載在多媒體方面，音樂采用的是QQ音樂接口。以目前的多數人用車習慣來看，車機中的視頻應用使用頻率并不高，而收音機、音樂等則是幾乎上車就用的，可能正是出于這一原因，在中控屏中并未加入視頻應用，而是将其布置在了副駕娛樂屏中。

5. 比亞迪

漢這款車型，他是可以支持橫豎屏的切換的，屏幕可旋轉，他的首頁是以卡片形式 應用程序為組合的，在首頁的左上角是語音助手和語音提示語，中間部位做了天氣☁️展示，右上角則為本地音樂；下方的功能卡片是酷狗音樂、高德導航、喜馬拉雅，下面還有切換的内容，還有一些第三方的應用等；下方有幾個功能性的按鈕，控制車輛類的，包含空調功能了開關狀态、吹風模式、前後除霜的一個功能；最底部的是導航欄，有一個小亮點就是可以通過點擊導航欄第四個按鈕，可将屏幕進行旋轉。

6. 岚圖

東風旗下的這款岚圖汽車，今年也拿下 國際的IF大獎和國内2021年軒轅獎，他整體首頁的一個設計風格還是以卡片形式為主，首頁可滑動來切換主要功能的卡片，左側語言形象可以幫助你在駕駛過程中完成一些任務。

在副駕駛位置還多了一塊娛樂屏幕，這一塊的設計和其他不一樣，為什麼會說不一樣呢，因為副駕駛的人沒有駕駛汽車的任務，所以首先在交互層面上和中控就會有所區别對于娛樂屏幕的定義當然就是娛樂為前提，裡面的功能也是以音樂、電台、視頻為主。

7. 五菱星辰

五菱星辰這款車是2021年9月推出的一款車，他的首頁展現形式也是卡片，Ling OS系統首頁的卡片是根據不同車型分為多種，不同車型首頁功能卡片也會有所差異，下面我講解一下他全部的八大類功能卡片，分别是：語言虛拟形象、導航、音樂、電台、空調、電話、手機互聯、道路提示，功能卡片下面并附加可操作的按鈕。

8. 威馬

威馬汽車他現在系統分為了兩種，老款車型的首頁相對這個市場上來說比較特殊，為啥這麼說呢，他的設計方案類似于Apple Watch 的首頁，将功能圖标 全部按照大小不一的圓形來排布的，導航中、還有播放音樂，設計方案也是一個大圓形帶着一些小圓形，比如音樂小圓形中就包含金曲排行、電子、流行、排行榜單等，而導航就是以地址信息為主，依次排列

對于中控首頁的思考：

根據前面分析的車型，我們羅列出了現在市場上比較典型的首頁框架内容，當然也有獨特的首頁設計就威瑪的設計風格，和上面上大多車載系統都不一樣，這樣大家記住他的印象也就更加深刻，我是記住了。

市面上大多數首頁都是以卡片為主，對于車載系統而言，顯而易見卡片式設計有兩大好處，其一：學習成本降至最低，其二：增大接觸的面積讓駕駛時誤觸率也降到最低，給到用戶最直觀的體驗就是簡單易用，因此這個方案各大廠商利用率較高。還有一部分産品将導航放在首頁，因為導航功能是常用的，使用率也是排在前列，像小鵬P7和蔚來汽車就是将卡片和導航相結合，我覺得還是不錯的。

首頁功能方面：

在首頁功能卡片上導航、音樂、電台首當其沖，因為這些都是最常使用的功能，第一屏基本上就是這些内容，當然首頁還支持滑動切換，将其餘功能放置在之後的卡片上，比如電話、車輛信息、天氣等等…當然還有一些其他的第三方應用。

其他的一些想法：

現在對于私人定制化的場景也有去研究，我們可以根據個人的喜好、不同的需求、不同的場景，首頁的設計是會發生變化的，這樣的做法有好有壞，好處就是增加了很多場景化的内容，可以根據不同時間段的需求，變更自己想要的功能，壞處就是學習成本較高，需要進行編輯每一個模式下的功能，滿足于自定義的需求，但是這個往往不能保證用戶在路上能夠安全行駛的标準，如果将這些功能都呈現出來，需要進行多輪的可用性測試，通過測試不斷的優化我們自身的一個設計方案。

三、狀态欄

先快速的看一下我選擇市場上車型中，狀态欄會有哪些信息，緊接着會逐一講解狀态欄中的内容。

特斯拉：車況信息區， 左側儀表盤上面的内容我會在下篇具體講解，右側狀态欄有 ：解鎖、 時間 、溫度 、特斯拉LOGO、個人中心、信号、藍牙

小鵬：個人中心、藍牙、解鎖、後備箱、前除霜、下載、小鵬LOGO、電池、Wi-Fi、信号、時間、個人中心

蔚來：個人中心、消息通知、倒車影像、無線充電、藍牙、信号、時間、PM2.5

理想：理想LOGO、時間、信号

比亞迪：時間、PM2.5（車内外空氣質量）、消息、導航、内存卡、藍牙、車内、信号、海拔高度、坡度（最後兩個是比亞迪特有的暫時還沒在其他車型中看到有）

岚圖：岚圖FREE的車型是有中控和副駕駛娛樂屏，他們的狀态欄基本一緻：我們羅列一下中控狀态欄内容：信号、内外循環、風量、空調吹風模式、車内空氣質量、倒車影像、時間

五菱星辰：語音、空調吹風模式（一共五種模式）、内外循環、溫度、風量、藍牙、USB、音量、時間

威瑪W6：時間、個人中心、信息、音量、USB、無線充電、藍牙、信号

對于狀态欄的思考：

首先要給大家說一下的是，車載端和手機端APP不一樣的是，車載HMI的狀态欄是需要我們設計師進行設計的，因為我們做的是一個系統，和手機中設計APP不一樣，APP不需要考慮手機系統的狀态欄。

我們列舉出了八款車有很多都是基本上大家都會有的，比如： 時間（24小時制 or 12小時制，根據産品的定義來确認最後輸出形式）、信号、藍牙，其他的狀态欄信息是根據自己車的項目需求還有硬件的差異不同，導緻每個車型、品牌都會有差異化存在。

狀态欄還有哪些内容呢？我們都來看一遍吧，車内溫度、空氣質量信息、信号、音量、信息提示、内外循環、wifi、 車輛電池信息、個人中心、解鎖、空調吹風模式等等，是不是覺得超級多，其實還有很多廠家獨有的内容，我這邊就不多說了，還是需要抓住相對重要的内容和大家分享。

下篇文章我會把狀态欄設計中可能會遇到的一些狀況，還有一些我覺得比較重要的點，會給大家進行分析，并且會新增導航欄（dock欄）分析。

本文由 @林和夕 原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部