編輯導(dǎo)語：汽車HMI設(shè)計(jì)涉及了汽車和人兩方的交互體驗(yàn)設(shè)計(jì)，在汽車HMI設(shè)計(jì)過程中，有哪些需要注意的要點(diǎn)呢？本篇文章作者分享了狀態(tài)欄設(shè)計(jì)中可能會(huì)遇到的一些狀況、HMI汽車設(shè)計(jì)中較為重要的點(diǎn)以及導(dǎo)航欄的分析，感興趣的一起來學(xué)習(xí)一下吧。

在上一篇我們講解了熱門車型的首頁框架和狀態(tài)欄基礎(chǔ)內(nèi)容，這一篇我會(huì)帶大家一起學(xué)習(xí)狀態(tài)欄設(shè)計(jì)中可能會(huì)遇到的一些狀況，還有一些我覺得比較重要的點(diǎn)，會(huì)給大家進(jìn)行分析，最后還有導(dǎo)航欄（dock欄）分析。

一、狀態(tài)欄形式

狀態(tài)欄分為兩種形式，像小鵬和特斯拉的狀態(tài)欄是一種可點(diǎn)擊的，另一種狀態(tài)欄是只可以看不可點(diǎn)擊的，可點(diǎn)擊呢是可以進(jìn)行下一步操作，我還是比較喜歡這一點(diǎn)的，可能有一些用戶并不喜歡這樣子設(shè)計(jì)，因?yàn)樯赌貭顟B(tài)欄區(qū)域過小，點(diǎn)擊有點(diǎn)不太方便。

所以我們?cè)谧鰻顟B(tài)欄可以點(diǎn)擊的時(shí)候，切圖區(qū)域一定要比不可點(diǎn)擊的要偏大一點(diǎn)。

我為什么會(huì)比較喜歡可點(diǎn)擊呢？

• 其一：可以直接操作，無需在經(jīng)過多次操作進(jìn)入，狀態(tài)欄可點(diǎn)擊的話就可以省略這些步驟了，還是比較方便的；
• 其二：將這些相對(duì)重要的功能提高層級(jí)。

1. 時(shí)間

根據(jù)前面的分析后看了一圈，時(shí)間放置的位置大致是有兩種：左側(cè)和右側(cè)，國內(nèi)很多車型都是放在右側(cè)的，左側(cè)則會(huì)放一些個(gè)人中心、語音形象等 。

有的HMI系統(tǒng)為什么會(huì)將時(shí)間會(huì)放左邊呢？時(shí)間也是一個(gè)比較重要的信息，像特斯拉、理想、比亞迪、威瑪w6中的狀態(tài)欄時(shí)間都是全部居于左側(cè)，時(shí)間位置的放置也有很多的因素需要考量，這個(gè)也是取決于產(chǎn)品中的定義，我們可以從這個(gè)幾個(gè)方向來考慮：

屏幕的屬性：屏幕類型有橫屏、豎屏。豎屏的話，時(shí)間放在左、右兩側(cè)影響并不是很大，因?yàn)槠聊坏膶挾戎g跨度并不大，我們看一下他們之間對(duì)比效果圖，在橫屏上面看，蔚來汽車的狀態(tài)欄上的時(shí)間就是放在了右邊，將個(gè)人中心比較重要的內(nèi)容放在了左邊，方便用戶可以操作，需要操作的內(nèi)容肯定要優(yōu)先靠左

如果是橫屏的話，有的車型還會(huì)多出一塊副駕駛的娛樂屏幕，那娛樂屏幕就距離主駕駛較遠(yuǎn)，駕駛員是無法查看到的，因?yàn)椴榭磿r(shí)間這個(gè)功能在駕駛場景中它的占比不會(huì)很多，所以在考慮時(shí)間放置的位置問題每一個(gè)車廠都有著自己對(duì)產(chǎn)品的定義。

理想的車型不但在靠近駕駛位置的中控屏幕將時(shí)間放在了左側(cè)，并且下面還有一個(gè)很大的區(qū)域，是用來放時(shí)間，可見理想對(duì)于時(shí)間這一塊的重視程度，將左側(cè)區(qū)域的 2/5 都放置時(shí)間和日期信息。

2. 信號(hào)

HMI車載信號(hào)的話和我們手機(jī)原理差不多，會(huì)有4G和5G的信號(hào)，并且會(huì)有信號(hào)強(qiáng)弱的各種狀態(tài)的切換，在設(shè)計(jì)中我們也需要做出來，估計(jì)沒人講這么細(xì)的吧。

很多車載的信號(hào)是5格、但理想的信號(hào)是4格，那么為什么會(huì)有不同呢，其實(shí)他們之間并沒有太大區(qū)別，不同的就是：四格信號(hào) ?? 25%代表一格、五格信號(hào) ?? 20%代表一格，我們?cè)谠O(shè)計(jì)過程中需要和產(chǎn)品確認(rèn)，該產(chǎn)品中用哪一個(gè)。

3. WI-FI

既然都已經(jīng)說了信號(hào)了，那么就順便說一下wifi吧～，大家也發(fā)現(xiàn)了，很少有車型會(huì)帶Wi-Fi這一個(gè)功能的，這一塊內(nèi)容看上去沒啥可講似的，但你不去細(xì)致的了解他，不出意外你會(huì)做錯(cuò)的，你們會(huì)發(fā)現(xiàn)手機(jī)端的Android、ios系統(tǒng)Wi-Fi樣式就不一樣，安卓的手機(jī)Wi-Fi是4格，ios系統(tǒng)最多是有3個(gè)格。車載系統(tǒng)以安卓為主。車載系統(tǒng)有幾種語言，也順便跟大家說一下：QNX 、Android、Linux。

4. 藍(lán)牙

藍(lán)牙功能是車載系統(tǒng)和我們手機(jī)進(jìn)行連接的，或者一些其他的設(shè)備比如有的香薰設(shè)備，也是需要利用這個(gè)藍(lán)牙連接的，主要連接的設(shè)備還是以手機(jī)為主，主要功能是支持電話、音樂等功能，比如需要同步手機(jī)中的通話記錄和聯(lián)系人，音樂模塊就是播放手機(jī)中的音樂。

5. 音量

狀態(tài)欄的音量會(huì)有幾種狀態(tài)，首先是靜音和有音量狀態(tài)，當(dāng)有音量的時(shí)候有幾個(gè)樣式？當(dāng)然這個(gè)也需要前期UE和產(chǎn)品定義好，制定音量的邏輯，音量在多少數(shù)值中，狀態(tài)欄該顯示什么狀態(tài)。

舉個(gè)例子?：音量是三格，那么定義1-33一檔顯示、34-66二檔顯示、67-100三檔顯示、0是靜音。

項(xiàng)目中最終方案還是根據(jù)產(chǎn)品定義走，比如會(huì)出現(xiàn)2格甚至其他樣式等。

6. 空氣質(zhì)量信息

空氣質(zhì)量PM2.5 車內(nèi)外，空氣質(zhì)量數(shù)值A(chǔ)QI，優(yōu)（0-50）綠、良（51-100）黃、輕度污染（101-150）橙、中度污染（151-200）紅、重度污染（201-300）紫和嚴(yán)重污染（>300）褐等六個(gè)空氣質(zhì)量等。

在顏色方面，可以根據(jù)自己設(shè)計(jì)需要而更改，但是主色系是不能改變的，可以根據(jù)自己車載系統(tǒng)的配色進(jìn)行微調(diào)，不能將原有的色系進(jìn)行改變。

7. 空調(diào)吹風(fēng)模式

車載HMI系統(tǒng)空調(diào)基本有5種出風(fēng)模式，分別是：吹面模式、吹面吹腳模式、吹腳模式、吹腳除霜模式、除霜模式，他們是一個(gè)互斥的狀態(tài)。

8. 車輛電池信息

新能源電車才會(huì)有電池信息，不同產(chǎn)品的車輛電池信息所在的位置也不一樣，，小鵬P7是在導(dǎo)航欄中，特斯拉的電池是在中控左側(cè)的車況信息區(qū)內(nèi)，還剩下多少電量的狀態(tài)用三種顏色來表示：綠色（充足）、黃色（提醒）、紅色（警示）代表著不同狀態(tài)，如果在充電中電池中還會(huì)多一個(gè)小閃電。

9. 內(nèi)外循環(huán)

專業(yè)詞匯要普及一下，內(nèi)循環(huán)就是讓空氣只在車內(nèi)流通，通過鼓風(fēng)機(jī)帶動(dòng)車內(nèi)空氣進(jìn)行循環(huán)，而外循環(huán)就是連通車內(nèi)與外界，車輛行駛過程中，氣流會(huì)利用風(fēng)壓自動(dòng)吸入車內(nèi)，靜止時(shí)車外空氣也能順著氣道進(jìn)入鼓風(fēng)機(jī)，從而吹入車內(nèi)。

他們之間是一個(gè)切換的形式，一般在哪里調(diào)節(jié)？

會(huì)有很多種，要么就是通過實(shí)體的硬按鍵；或者是中控空調(diào)頁面有調(diào)節(jié) ?? 比如小鵬P7；或者就是在中控屏的空調(diào)模塊內(nèi)部進(jìn)行切換調(diào)節(jié)，還有蔚來汽車在導(dǎo)航欄中也可以調(diào)節(jié)。

二、導(dǎo)航欄（Dock欄）

導(dǎo)航欄所在的位置可以居于左側(cè) 、底部、國外也有駕駛位置在右邊的，那么導(dǎo)航欄導(dǎo)航欄目也有可能是放置于靠近右邊。

舉個(gè)例子：印尼的主駕駛在右邊為了方便用戶的操作，如果這個(gè)屏幕是長屏幕那么就需要考慮導(dǎo)航欄的位置居于右側(cè)，靠近駕駛者這樣操作用戶可以不需要伸出很遠(yuǎn)去點(diǎn)擊，安全駕駛是相當(dāng)重要的，我們不應(yīng)該在沉迷于自己意識(shí)中去設(shè)計(jì)，需要考慮現(xiàn)實(shí)狀況和這個(gè)國家的特殊屬性，做海外版需要重新考慮設(shè)計(jì)。

如果是豎屏的話，只需要將常用的放到靠右邊的即可，導(dǎo)航欄整體位置也基本是都是在下面。

接下來我們看一下我挑選的典型車型的狀態(tài)欄都有些什么？最后做一下總結(jié)，以及我針對(duì)導(dǎo)航欄的分析和看法。

1. 特斯拉導(dǎo)航欄

車輛、音樂、攝像頭，雨刮器、更多、主駕駛座椅、溫度、風(fēng)量、副駕駛座椅、 前除霜、后除霜 、音量

特斯拉導(dǎo)航欄下面還有一個(gè)展開功能，將一些相對(duì)不常用的功能放置于二級(jí)導(dǎo)航欄菜單中，里面有這些功能：通話、日歷、攝像頭、能量、充電、網(wǎng)絡(luò)、娛樂、玩具箱。

特斯拉最近在2022.12.1版本軟件更新：新增了導(dǎo)航欄可以自定義設(shè)置，可以將常用的應(yīng)用程序，固定到觸摸屏底部菜單欄中，如前/后擋風(fēng)玻璃除霜、雨刮和座椅加熱等。

長按任意應(yīng)用程序圖標(biāo)進(jìn)入編輯模式，然后將相關(guān)圖標(biāo)拖到底部導(dǎo)航欄，點(diǎn)擊即可快速開啟應(yīng)用。應(yīng)用程序里面有：前除霜、后除霜、左側(cè)座椅、右側(cè)座椅、方向盤加熱、雨刮器、攝像頭、行車記錄儀、能量、電話、消息、劇場、游戲廳、瀏覽器、在線廣播、QQ音樂、喜馬拉雅。

2. 小鵬導(dǎo)航欄

更多應(yīng)用、車輛信息、自動(dòng)泊車和360全景、空調(diào)、多媒體（小鵬P7將音樂、讀物、電臺(tái)融合成多媒體）、電話。

更多應(yīng)用：

導(dǎo)航欄的第一個(gè)圖標(biāo)點(diǎn)開后會(huì)出現(xiàn)小程序、我的應(yīng)用、應(yīng)用商店。

小程序：精選中有天貓養(yǎng)車、途虎養(yǎng)車、速車、淘票票電影、飛豬旅行等等；

我的應(yīng)用：音樂、藍(lán)牙電話、能力中心、攝像頭、車輛控制、系統(tǒng)設(shè)置、小P、個(gè)人中心和用戶手冊(cè)；

應(yīng)用商店的內(nèi)容有很多，根據(jù)自己需求去下載。

車輛信息：常用、車外燈、氛圍燈、輔助駕駛、車輛設(shè)置、車輛狀況。

3. 蔚來導(dǎo)航欄

新版蔚來將“我的車”和“設(shè)置”合并，把入口提到了導(dǎo)航欄里的第一個(gè)。導(dǎo)航欄：車輛設(shè)置、內(nèi)外循環(huán)、溫度調(diào)節(jié)、風(fēng)量調(diào)節(jié)、前除霜、后除霜。

4. 五菱星辰導(dǎo)航欄

五菱星辰的導(dǎo)航欄是根據(jù)不同車型會(huì)有變化的，網(wǎng)聯(lián)版本：音樂、導(dǎo)航、空調(diào)、360倒車、全應(yīng)用；非網(wǎng)聯(lián)版本：音樂、電臺(tái)、空調(diào)、電話、全應(yīng)用。

三、對(duì)于導(dǎo)航欄的總結(jié)

從上訴的案列中我們發(fā)現(xiàn)，國內(nèi)車載HMI系統(tǒng)的導(dǎo)航欄所在的位置居于左側(cè)或者是底部，理想的導(dǎo)航欄是在左下方，他不是整體的通欄鋪設(shè)。

因?yàn)槠聊怀叽绲脑颍苌儆?920×720將導(dǎo)航欄置于底部，因?yàn)閷?dǎo)航欄的高度大約需100-120px，再減去狀態(tài)欄60-80px，那么剩余屏幕面積區(qū)域內(nèi)容會(huì)少了很多，所以理想車載系統(tǒng)只是做了左側(cè)這一點(diǎn)。

我們來看一下導(dǎo)航欄在底部的特斯拉和蔚來汽車，他們基本上都將車輛、調(diào)節(jié)溫度、調(diào)節(jié)風(fēng)量、前除霜、后除霜，長度也決定了下面dock欄內(nèi)容的多少。

之前提到國外有的車主駕駛是在右邊的，特斯拉出了可編輯導(dǎo)航欄的這個(gè)功能，提高靈活運(yùn)用性，可以根據(jù)用戶的喜好去設(shè)置。

五菱星辰和小鵬P7的導(dǎo)航欄都是居于左側(cè)區(qū)域，我們從操作熱區(qū)圖就可以發(fā)現(xiàn)，將dock欄放置于左側(cè)肯定是便于操作的，也是為了提高駕駛的安全性，避免將手臂伸遠(yuǎn)。

其次左導(dǎo)航欄左側(cè)區(qū)域肯定是沒有底部的區(qū)域大，因此功能需要精簡，上面分析了兩款車型，他們將更多應(yīng)用、音樂、電話、空調(diào)這些相對(duì)比較常用，使用頻率高放到了dock欄中，我們看到小鵬P7 還可以在導(dǎo)航欄中可以調(diào)節(jié)溫度，說實(shí)話這個(gè)如果是在駕駛狀態(tài)下去調(diào)節(jié)的話，體驗(yàn)會(huì)較差。

因?yàn)辄c(diǎn)擊的這塊區(qū)域較小，盲操會(huì)導(dǎo)致誤觸事件發(fā)生，如果在靜止?fàn)顟B(tài)下在dock欄中調(diào)節(jié)，是完全可以操作的，因此對(duì)于駕駛狀態(tài)下不習(xí)慣用語音操作的用戶，這個(gè)就有點(diǎn)不好了，因?yàn)槟切├纤緳C(jī)特別喜歡硬按鍵給人的反饋感，比如轉(zhuǎn)動(dòng)圓圈來調(diào)節(jié)空調(diào)的溫度。

導(dǎo)航欄的好處就是，再另外一個(gè)功能想快速的進(jìn)入音樂或者是進(jìn)入空調(diào)去調(diào)節(jié)溫度、風(fēng)量、風(fēng)向等，可以通過點(diǎn)擊dock欄，一觸即達(dá)。

四、結(jié)語

這次上、下兩節(jié)文章主要是針對(duì)了HMI車載系統(tǒng)的首頁、狀態(tài)欄、導(dǎo)航欄（dock欄）進(jìn)行了分析和案例講解，列舉了眾多車型去比對(duì)。

從中得出一些行業(yè)的結(jié)論，并結(jié)合自己的想法去深入的探討可行性，車載這個(gè)行業(yè)還是有著很多專業(yè)知識(shí)去挖掘，行業(yè)深度是有的，希望自己能夠堅(jiān)持下去一直輸出行業(yè)文章，請(qǐng)大家盡情期待吧。

本文由 @林和夕 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。