起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識HMI領域深入研究！設計知識體系（下）
編輯導語：汽車HMI設計涉及了汽車和人兩方的交互體驗設計，在汽車HMI設計過程中，有哪些需要注意的要點呢？本篇文章作者分享了狀態欄設計中可能會遇到的一些狀況、HMI汽車設計中較為重要的點以及導航欄的分析，感興趣的一起來學習一下吧。
在上一篇我們講解了熱門車型的首頁框架和狀態欄基礎內容，這一篇我會帶大家一起學習狀態欄設計中可能會遇到的一些狀況，還有一些我覺得比較重要的點，會給大家進行分析，最后還有導航欄（dock欄）分析。
一、狀態欄形式
狀態欄分為兩種形式，像小鵬和特斯拉的狀態欄是一種可點擊的，另一種狀態欄是只可以看不可點擊的，可點擊呢是可以進行下一步操作，我還是比較喜歡這一點的，可能有一些用戶并不喜歡這樣子設計，因為啥呢狀態欄區域過小，點擊有點不太方便。
所以我們在做狀態欄可以點擊的時候，切圖區域一定要比不可點擊的要偏大一點。
我為什么會比較喜歡可點擊呢？
- 其一：可以直接操作，無需在經過多次操作進入，狀態欄可點擊的話就可以省略這些步驟了，還是比較方便的；
- 其二：將這些相對重要的功能提高層級。
1. 時間
根據前面的分析后看了一圈，時間放置的位置大致是有兩種：左側和右側，國內很多車型都是放在右側的，左側則會放一些個人中心、語音形象等 。
有的HMI系統為什么會將時間會放左邊呢？時間也是一個比較重要的信息，像特斯拉、理想、比亞迪、威瑪w6中的狀態欄時間都是全部居于左側，時間位置的放置也有很多的因素需要考量，這個也是取決于產品中的定義，我們可以從這個幾個方向來考慮：
屏幕的屬性：屏幕類型有橫屏、豎屏。豎屏的話，時間放在左、右兩側影響并不是很大，因為屏幕的寬度之間跨度并不大，我們看一下他們之間對比效果圖，在橫屏上面看，蔚來汽車的狀態欄上的時間就是放在了右邊，將個人中心比較重要的內容放在了左邊，方便用戶可以操作，需要操作的內容肯定要優先靠左
如果是橫屏的話，有的車型還會多出一塊副駕駛的娛樂屏幕，那娛樂屏幕就距離主駕駛較遠，駕駛員是無法查看到的，因為查看時間這個功能在駕駛場景中它的占比不會很多，所以在考慮時間放置的位置問題每一個車廠都有著自己對產品的定義。
理想的車型不但在靠近駕駛位置的中控屏幕將時間放在了左側，并且下面還有一個很大的區域，是用來放時間，可見理想對于時間這一塊的重視程度，將左側區域的 2/5 都放置時間和日期信息。
2. 信號
HMI車載信號的話和我們手機原理差不多，會有4G和5G的信號，并且會有信號強弱的各種狀態的切換，在設計中我們也需要做出來，估計沒人講這么細的吧。
很多車載的信號是5格、但理想的信號是4格，那么為什么會有不同呢，其實他們之間并沒有太大區別，不同的就是：四格信號 ?? 25%代表一格、五格信號 ?? 20%代表一格，我們在設計過程中需要和產品確認，該產品中用哪一個。
3. WI-FI
既然都已經說了信號了，那么就順便說一下wifi吧～，大家也發現了，很少有車型會帶Wi-Fi這一個功能的，這一塊內容看上去沒啥可講似的，但你不去細致的了解他，不出意外你會做錯的，你們會發現手機端的Android、ios系統Wi-Fi樣式就不一樣，安卓的手機Wi-Fi是4格，ios系統最多是有3個格。車載系統以安卓為主。車載系統有幾種語言，也順便跟大家說一下：QNX 、Android、Linux。
4. 藍牙
藍牙功能是車載系統和我們手機進行連接的，或者一些其他的設備比如有的香薰設備，也是需要利用這個藍牙連接的，主要連接的設備還是以手機為主，主要功能是支持電話、音樂等功能，比如需要同步手機中的通話記錄和聯系人，音樂模塊就是播放手機中的音樂。
5. 音量
狀態欄的音量會有幾種狀態，首先是靜音和有音量狀態，當有音量的時候有幾個樣式？當然這個也需要前期UE和產品定義好，制定音量的邏輯，音量在多少數值中，狀態欄該顯示什么狀態。
舉個例子?：音量是三格，那么定義1-33一檔顯示、34-66二檔顯示、67-100三檔顯示、0是靜音。
項目中最終方案還是根據產品定義走，比如會出現2格甚至其他樣式等。
6. 空氣質量信息
空氣質量PM2.5 車內外，空氣質量數值AQI，優（0-50）綠、良（51-100）黃、輕度污染（101-150）橙、中度污染（151-200）紅、重度污染（201-300）紫和嚴重污染（>300）褐等六個空氣質量等。
在顏色方面，可以根據自己設計需要而更改，但是主色系是不能改變的，可以根據自己車載系統的配色進行微調，不能將原有的色系進行改變。
7. 空調吹風模式
車載HMI系統空調基本有5種出風模式，分別是：吹面模式、吹面吹腳模式、吹腳模式、吹腳除霜模式、除霜模式，他們是一個互斥的狀態。
8. 車輛電池信息
新能源電車才會有電池信息，不同產品的車輛電池信息所在的位置也不一樣，，小鵬P7是在導航欄中，特斯拉的電池是在中控左側的車況信息區內，還剩下多少電量的狀態用三種顏色來表示：綠色（充足）、黃色（提醒）、紅色（警示）代表著不同狀態，如果在充電中電池中還會多一個小閃電。
9. 內外循環
專業詞匯要普及一下，內循環就是讓空氣只在車內流通，通過鼓風機帶動車內空氣進行循環，而外循環就是連通車內與外界，車輛行駛過程中，氣流會利用風壓自動吸入車內，靜止時車外空氣也能順著氣道進入鼓風機，從而吹入車內。
他們之間是一個切換的形式，一般在哪里調節？
會有很多種，要么就是通過實體的硬按鍵；或者是中控空調頁面有調節 ?? 比如小鵬P7；或者就是在中控屏的空調模塊內部進行切換調節，還有蔚來汽車在導航欄中也可以調節。
二、導航欄（Dock欄）
導航欄所在的位置可以居于左側 、底部、國外也有駕駛位置在右邊的，那么導航欄導航欄目也有可能是放置于靠近右邊。
舉個例子：印尼的主駕駛在右邊為了方便用戶的操作，如果這個屏幕是長屏幕那么就需要考慮導航欄的位置居于右側，靠近駕駛者這樣操作用戶可以不需要伸出很遠去點擊，安全駕駛是相當重要的，我們不應該在沉迷于自己意識中去設計，需要考慮現實狀況和這個國家的特殊屬性，做海外版需要重新考慮設計。
如果是豎屏的話，只需要將常用的放到靠右邊的即可，導航欄整體位置也基本是都是在下面。
接下來我們看一下我挑選的典型車型的狀態欄都有些什么？最后做一下總結，以及我針對導航欄的分析和看法。
1. 特斯拉導航欄
車輛、音樂、攝像頭，雨刮器、更多、主駕駛座椅、溫度、風量、副駕駛座椅、 前除霜、后除霜 、音量
特斯拉導航欄下面還有一個展開功能，將一些相對不常用的功能放置于二級導航欄菜單中，里面有這些功能：通話、日歷、攝像頭、能量、充電、網絡、娛樂、玩具箱。
特斯拉最近在2022.12.1版本軟件更新：新增了導航欄可以自定義設置，可以將常用的應用程序，固定到觸摸屏底部菜單欄中，如前/后擋風玻璃除霜、雨刮和座椅加熱等。
長按任意應用程序圖標進入編輯模式，然后將相關圖標拖到底部導航欄，點擊即可快速開啟應用。應用程序里面有：前除霜、后除霜、左側座椅、右側座椅、方向盤加熱、雨刮器、攝像頭、行車記錄儀、能量、電話、消息、劇場、游戲廳、瀏覽器、在線廣播、QQ音樂、喜馬拉雅。
2. 小鵬導航欄
更多應用、車輛信息、自動泊車和360全景、空調、多媒體（小鵬P7將音樂、讀物、電臺融合成多媒體）、電話。
更多應用：
導航欄的第一個圖標點開后會出現小程序、我的應用、應用商店。
小程序：精選中有天貓養車、途虎養車、速車、淘票票電影、飛豬旅行等等；
我的應用：音樂、藍牙電話、能力中心、攝像頭、車輛控制、系統設置、小P、個人中心和用戶手冊；
應用商店的內容有很多，根據自己需求去下載。
車輛信息：常用、車外燈、氛圍燈、輔助駕駛、車輛設置、車輛狀況。
3. 蔚來導航欄
新版蔚來將“我的車”和“設置”合并，把入口提到了導航欄里的第一個。導航欄：車輛設置、內外循環、溫度調節、風量調節、前除霜、后除霜。
4. 五菱星辰導航欄
五菱星辰的導航欄是根據不同車型會有變化的，網聯版本：音樂、導航、空調、360倒車、全應用；非網聯版本：音樂、電臺、空調、電話、全應用。
三、對于導航欄的總結
從上訴的案列中我們發現，國內車載HMI系統的導航欄所在的位置居于左側或者是底部，理想的導航欄是在左下方，他不是整體的通欄鋪設。
因為屏幕尺寸的原因，很少有1920×720將導航欄置于底部，因為導航欄的高度大約需100-120px，再減去狀態欄60-80px，那么剩余屏幕面積區域內容會少了很多，所以理想車載系統只是做了左側這一點。
我們來看一下導航欄在底部的特斯拉和蔚來汽車，他們基本上都將車輛、調節溫度、調節風量、前除霜、后除霜，長度也決定了下面dock欄內容的多少。
之前提到國外有的車主駕駛是在右邊的，特斯拉出了可編輯導航欄的這個功能，提高靈活運用性，可以根據用戶的喜好去設置。
五菱星辰和小鵬P7的導航欄都是居于左側區域，我們從操作熱區圖就可以發現，將dock欄放置于左側肯定是便于操作的，也是為了提高駕駛的安全性，避免將手臂伸遠。
其次左導航欄左側區域肯定是沒有底部的區域大，因此功能需要精簡，上面分析了兩款車型，他們將更多應用、音樂、電話、空調這些相對比較常用，使用頻率高放到了dock欄中，我們看到小鵬P7 還可以在導航欄中可以調節溫度，說實話這個如果是在駕駛狀態下去調節的話，體驗會較差。
因為點擊的這塊區域較小，盲操會導致誤觸事件發生，如果在靜止狀態下在dock欄中調節，是完全可以操作的，因此對于駕駛狀態下不習慣用語音操作的用戶，這個就有點不好了，因為那些老司機特別喜歡硬按鍵給人的反饋感，比如轉動圓圈來調節空調的溫度。
導航欄的好處就是，再另外一個功能想快速的進入音樂或者是進入空調去調節溫度、風量、風向等，可以通過點擊dock欄，一觸即達。
四、結語
這次上、下兩節文章主要是針對了HMI車載系統的首頁、狀態欄、導航欄（dock欄）進行了分析和案例講解，列舉了眾多車型去比對。
從中得出一些行業的結論，并結合自己的想法去深入的探討可行性，車載這個行業還是有著很多專業知識去挖掘，行業深度是有的，希望自己能夠堅持下去一直輸出行業文章，請大家盡情期待吧。
本文由 @林和夕 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
- 目前還沒評論，等你發揮！
