首先先普及下HMI的概念

HMI：- Human Machine Interface : 人機界面，現(xiàn)在多指車載交互系統(tǒng)體驗設(shè)計。

既然說到人機界面，我們先來設(shè)計的載體是如何演變的。

一、車載中控儀表盤演變過程

1886 年，由卡爾·本茨發(fā)明的第一輛汽車。當時根本就沒有所謂的儀表盤概念，所以載體還得從1908年T型車（Ford Model T）說起，到2012年劃時代的特斯拉Model S，汽車儀表盤目前經(jīng)歷四代。

1、第一代:以按鍵為主

機械式儀表盤: 第一個時代儀表盤為機械芯儀表，一般包含了車速里程表、轉(zhuǎn)速表、機油壓力表、水溫表、燃油表、充電表等，之后汽車儀表還需要裝穩(wěn)壓器來穩(wěn)定儀表電源的電壓，抑制波動幅度，保證汽車儀表的準確性。初代的汽車儀表盤主要以傳統(tǒng)的熱式和動磁式，顯示的信息極為有限，更多的是車輛物理信息“通信員”的角色。

在機械時期中控臺哪有什么屏幕可言，那時候的中控臺就是收音機和空調(diào)的調(diào)節(jié)器，而且都是實體按鍵的，只能滿足駕駛的基本需求，沒有屏幕，都是照搬飛機中控布局，以實體按鍵為主，功能簡陋單一。堆砌功能按鈕儀表，沒有交互可言。

2、第二代：電氣式儀表盤+小中控屏

第二個時代的電氣式儀表盤終于誕生，從真空熒光顯示屏（VFD），發(fā)展到采用液晶顯示屏（LED）及小尺寸薄膜晶體管顯示器（TFT），顯示屏顯示的信息越來越清晰、快捷。目前電氣式儀表在市場的保有量最大，且一般采用機械儀表結(jié)合數(shù)字儀表的方式，例如車速、轉(zhuǎn)速信息采用指針，指示燈信息采用LED等點亮，其它信息則采用TFT屏。

雖然相較于第一代機械機芯儀表增加了不少功能，汽車信息反饋也更全面更及時，但是其發(fā)展速度卻明顯與汽車行業(yè)不相匹配，對于更深層次的駕駛需求，電氣式儀表仍無法滿足。

3、第三代：全數(shù)字化儀表

汽車儀表盤領(lǐng)域在不斷追求更新，于是劃時代的全數(shù)字液晶儀表盤孕育而生，也是就我們常說的虛擬儀表盤。全數(shù)字汽車儀表盤使用了一整塊液晶屏取代了傳統(tǒng)的指針和刻度表，所有信息都通過這塊屏幕顯示出來。

單從外觀上來看就能給人以一種比較高大上的感覺，這類儀表盤上往往沒有指針等部件，所有信息都通過屏幕傳遞出來。功能更強大、信息顯示更具邏輯性，駕駛者接受信息更快，提升行車安全。也可以根據(jù)個人喜好調(diào)整相應參數(shù)，比如比亞迪的儀表盤就可以改變背景顏色。在高級點的，像寶馬的全數(shù)字儀表就可以切換N多種模式。

2007年iPhone問世后，大屏、輕薄機身、高清顯示屏、可安裝應用等功能引領(lǐng)了整個行業(yè)的革命。電動汽車行業(yè)飛速發(fā)展,智能AI和人際互聯(lián)等人車交互概念也跟著興起,對于中控臺的需求和功能復雜度也跟著越發(fā)精細起來,結(jié)果就是屏幕越來越大。

2013年上市的特斯拉Model S,座艙里最驚艷的就是那塊17寸的大屏。超高的分辨率和流暢的操作,和漂亮的UI設(shè)計,最初讓很多美國民眾瘋狂。就像蘋果手機顛覆了傳統(tǒng)手機業(yè),特斯拉也顛覆了傳統(tǒng)汽車行業(yè)。

2014年換代的奔馳S級將兩塊12.3寸屏幕連在一起,合成了一塊23寸大屏,比特斯拉的大屏還多出6英寸。

拜騰M-Byte,48寸巨屏,橫向貫穿儀表臺,再一次顛覆汽車的內(nèi)飾設(shè)計。

比亞迪系列汽車的旋轉(zhuǎn)大屏,玩出新花樣,可以旋轉(zhuǎn)控制,就像手機橫屏和豎屏的場景。

縱觀下來,其實不難看出,雖然汽車的中控屏幕也是往著越來越大的方向發(fā)展,但因為空間以及功能需求的不同,相比起手機來說,中控屏幕的變化更具備多樣性。

4、第四代：HUD顯示屏

從上世紀80年代，抬頭顯示技術(shù)在汽車領(lǐng)域已經(jīng)開始被使用，直到現(xiàn)在才開始逐漸展露頭腳。

HUD抬頭顯示器(Head Up Display)，又叫平視顯示系統(tǒng)。它可以把重要的信息，映射在風窗玻璃上的全息半鏡上，使駕駛員不必低頭，就能看清重要的信息。

戰(zhàn)斗機是率先應用HUD抬頭顯示器的。飛行員在空戰(zhàn)中，需要交替觀察艙外目標和艙內(nèi)儀表，易產(chǎn)生瞬間視覺中斷，因此會導致反應遲緩、操作失誤，并有可能貽誤戰(zhàn)機，采用HUD抬頭顯示可克服這一缺點。

第一架使用HUD抬頭顯示的飛機是美國海軍的A-5艦載機。民用航空最早使用HUD抬頭顯示是法國達索飛機公司的mercure飛機。

在復雜多變的道路上開車，駕駛員雙眼離開車輛前方，是個非常危險的事情，尤其是在高速公路上更是明顯。于是很多車型，就給車輛配備了一個不需要挪開視線，就能知道車輛基本信息的配置，這就是HUD抬頭顯示。

HUD作為一款新技術(shù)，優(yōu)勢顯而易見。當駕駛員需要查看儀表盤或中控臺上的信息，視線至少需要轉(zhuǎn)移0.3秒，而HUD投影的信息就在駕駛員平視的正前方，駕駛員可以將更多的注意力放在路面上。將駕駛體驗及駕駛員對于路況信息的認知能力進行革新式升級。

二、六大車載系統(tǒng)的特點

現(xiàn)在各家系統(tǒng)百家爭鳴，各家車載系統(tǒng)設(shè)計有哪些不同？

1. 阿里 斑馬智行

簡介：

1、阿里車載小程序是一種無需下載安裝即可使用的“應用”，旨在為用戶打造“隨時可用”、“用完即走”的使用體驗。

2、AliOS作為互聯(lián)網(wǎng)汽車操作系統(tǒng)，原生地支持阿里小程序，引入阿里生態(tài)服務(wù)的同時也面向開發(fā)者開放，圍繞車場景為用戶提供從出行到生活的各類智慧服務(wù)。

特點：

1、設(shè)計特點：

獨立的大卡片式的內(nèi)容界面模塊方便車主在行車過程中單手操作，其配色鮮艷，風格扁平，符合使用場景和國人的使用習慣。

2、功能特點：自帶場景智能感知的基因。

得到車主授權(quán)后，車載小程序可以圍繞行車場景，實現(xiàn)上車前、行車中、下車后自然串聯(lián)的智能化場景服務(wù)。

用戶可以在車上通過觸控、語音、手勢等多模態(tài)交互方式，咨詢附近的推薦餐廳，小程序會基于用戶的喜好作出推薦，還可以預約排號；到達餐廳附近，系統(tǒng)會自動喚醒小程序，為用戶找到停車場；下車后，車載小程序會無縫連接到手機小程序端，用戶可以在手機上查看餐廳的預約信息等。

△ 斑馬智行2.0系統(tǒng)設(shè)計

斑馬智行，采用智能手機界面和應用商城下載 APP 的使用方式，實現(xiàn)車載和手機的雙重控制。

強大的云端特性在語音識別和線上互聯(lián)方面提供了良好的使用體驗，車主可以連接手機藍牙后，讀取其手機通訊錄，實現(xiàn)利用車載系統(tǒng)撥打和接聽電話的功能。支持 USB 接口，通過 U 盤實現(xiàn)播放音頻、視頻文件等。在娛樂生活方面，內(nèi)置蝦米音樂，蜻蜓FM，喜馬拉雅等，支持在線搜索，在線播放以及在線廣播等服務(wù)。

同時，斑馬智行依靠阿里強大的技術(shù)和資源支持，打通停車場，加油站，高速公路支付等，使用戶駕車時產(chǎn)生的費用均能通過支付寶支付。

2. 百度 Car Life和Apollo

簡介：

1、打造智能車載服務(wù)生態(tài)，滿足用戶出行、娛樂、生活等多元化需求，構(gòu)建人-車-家一體化互聯(lián)閉環(huán)成為時代趨勢。

2、智能小程序，是百度提供的一種技術(shù)解決方案。開發(fā)者基于此開發(fā)出來的服務(wù)，在各類宿主環(huán)境（手機 App、車載系統(tǒng)、IOT 設(shè)備等）中，可做到用戶無感知安裝，即點即用。

特點:

1、設(shè)計特點

車載端主界面分別采用藍、綠、紅、灰四個色塊對應四個功能模塊，「發(fā)現(xiàn)」集成音樂、娛樂、聽書、電臺等特色音視頻服務(wù)，采用紅色在界面中最為突出，其設(shè)計風格整體扁平，面性 icon 利于識別與點擊。

2、功能特點

智能小程序包括“車后服務(wù)”、“資訊”、“休閑游戲”、“視頻”、“購物”、“親子”、“旅游”、“工具”等8個類別，一共80多款。車企可以根據(jù)車型定位和自身需求自行定義和組合可供使用的車載小程序。

百度的車載小程序大部分場景下還是只能依靠用戶用語音喚醒，但在生態(tài)的開放性上，百度車載小程序則做得更為徹底，可以在百度App、百度地圖、百度貼吧、百度網(wǎng)盤百度系A(chǔ)pp上運行。

3. 騰訊 Ai in Car

簡介：

1、“騰訊小場景”是專為出行場景打造的車載輕應用生態(tài)，部署在云端，不需要下載，即用即走，并支持語音交互。

2、分為3類，出行服務(wù)小型車、生活服務(wù)小程序和視聽服務(wù)小程序。

特點：

1、設(shè)計特點：

運用的FutureLink3.0系統(tǒng)，F(xiàn)utureLink3.0 基于安卓平臺開發(fā)，在 12 英寸的中控屏幕上并沒有將大量的圖標堆砌在首頁，反而以地圖為背景，將六大功能模塊以大板塊的形式布局在地圖下方，整個界面設(shè)計簡潔。

2、功能特點：

最大特色：基于位置和場景會被自動喚醒。比如用戶經(jīng)過加油站、停車場、旅游景點的時候，有些購買和支付的服務(wù)就會主動彈在車機上，用戶再通過語音完成操作。

手機小程序是“人找服務(wù)”，那么騰訊車載小程序則進化成“服務(wù)找人”。

△ 騰訊在車載場景下的生態(tài)布局

Ai in Car，顧名思義，基于 AI 的連接能力和生態(tài)，融合騰訊內(nèi)容生態(tài)的優(yōu)質(zhì)資源，包括資訊、視頻、IP、文學等板塊，為車主提供更豐富的內(nèi)容消費。風行搭載的 FutureLink3.0 車聯(lián)網(wǎng)系統(tǒng)，就是和騰訊深度合作而誕生的優(yōu)質(zhì)案例。

△ FutureLink3.0系統(tǒng)界面

只在設(shè)置頁中，才會出現(xiàn)二級子菜單列表，而且提供的設(shè)置項目也不多，界面層級簡單，不累贅，也給司機帶來輕松愉悅的操作體驗。同時，基于行車安全考慮，在類似天氣、股票等查詢功能上，比較依賴語音控制。在娛樂生活方面，打通手機和車機賬號，用戶無需切換賬號就可以與車載導航、電臺、QQ音樂、微信等功能無縫銜接，支持車主組建聊天組，在行車途中與好友進行實時溝通。

從整體來看 FutureLink3.0 的設(shè)計，它更像是一個把需求頁面展現(xiàn)在車主面前的「輕應用」，沒有傳統(tǒng)概念上的主界面、多層交互菜單以及相應的「系統(tǒng)特質(zhì)」的設(shè)計，它更希望把海量資源建立在云端，終端只給車主呈現(xiàn)其所需要的服務(wù)即可。

4. 谷歌 Android auto

簡介：

Android Auto 系統(tǒng)的工作原理是將手機連接到兼容的汽車，讓駕駛員可以使用汽車屏幕和語音操作與手機的應用程序進行交互。它提供了一種導航、收聽媒體和消息等的簡單方法。

特點：

1、設(shè)計特點：

在 UI 框架設(shè)計方面，主屏幕以卡片的形式顯示通知、活動、導航和消息，右下角有啟動語音命令的麥克風圖標和底部的活動欄，這些特性屬于全局 UI。在它下方，應用程序內(nèi)容區(qū)域顯示應用程序啟動器或當前使用的主應用程序的內(nèi)容。

△ Android auto手持設(shè)備與車載設(shè)計系統(tǒng)

Android auto 將 Android 平臺擴展到汽車上，它有兩種使用方法：在手機上或在兼容的車載屏幕上。

它有一個簡單的界面，標準化的用戶交互模型和強大的聲音動作，其目的是幫助司機盡量減少分心。需要注意的是，為汽車設(shè)計交互式應用程序與手持式設(shè)備的設(shè)計有根本上的不同，其應用程序的交互界面應該簡化，以確保司機的眼睛和手集中在開車上，減少司機分心。

△ Android auto車載系統(tǒng)UI框架

卡片上提供如消息字符串、圖標、圖形和操作等內(nèi)容，會根據(jù)用戶最近的使用情況和優(yōu)先級來確定卡片的大小。主屏幕會限制卡片的數(shù)量，以保持列表的簡短和相關(guān)。因此，當新的、更相關(guān)的內(nèi)容出現(xiàn)時，應用程序的通知可能會從屏幕上消失。同時，抽屜式的交互方式，提供了簡單的操作和導航。每個抽屜項目必須提供一個單一的觸摸目標，避免在抽屜里放長的列表，或者在相同內(nèi)容的視圖之間切換。這里官方給出的最佳 UI 做法是簡化內(nèi)容，關(guān)注上下文，顯示新鮮的、有用的和大多數(shù)不滾動的項目，使用單行，對決策至關(guān)重要的較長字符串使用兩行。

5. 蘋果 CarPlay

簡介：

CarPlay 車載系統(tǒng)旨在令用戶通過汽車制造商之原生車載系統(tǒng)來使用、操控iOS設(shè)備并發(fā)揮其功能。該產(chǎn)品的首個版本計劃于2014年發(fā)布，最早出現(xiàn)在一些制造商的汽車展覽上。

特點：

1、設(shè)計特點：

基于手機映射，所以界面除了橫向布局外，icon都和手機端統(tǒng)一。以簡潔的布局提供有用的、重點突出的信息，便于從駕駛員座椅上進行掃描。不要用不必要的細節(jié)和不必要的裝飾來弄亂屏幕。

在整個應用程序中保持整體一致的外觀。一般來說，具有相似功能的元素應該看起來相似。

2、功能特點：

作為車內(nèi)輔助、操作、娛樂的中心，Carplay 可以直接連接到汽車中控的觸摸屏上，提供基于 iOS 的相關(guān)的服務(wù)和應用。Carplay 的整體設(shè)計圍繞著車內(nèi)駕駛這一使用場景，而它的設(shè)計原則也圍繞著這一場景來規(guī)劃：

• 成熟?；谧钍煜さ?iOS 應用，來設(shè)計界面元素，并提供熟悉、直觀的體驗。

• 簡短。采用盡可能簡短的交互，不過度引人矚目

• 相關(guān)。屏幕顯示信息高度相關(guān)，提供盡可能少選項，不需要復雜決策

• 語音。基于Siri，以語音交互為核心，司機無需視線離開前方，手也不用離開方向盤即可完成交互。

  
  

全新的電子車鑰匙，加上 Apple CarPlay 車載流暢的使用體驗，讓 iPhone 能在旅途上發(fā)揮更多作用。地圖、電話、信息、音樂、日歷、一言、一觸、一旋隨你駕馭。

6、華為車機應用

簡介：

HMS for Car是華為終端云服務(wù)打造的智慧車載云服務(wù)解決方案，基于HMS（Huawei Mobile Services），通過AI場景引擎結(jié)合華為生態(tài)資源，為用戶提供精準豐富的出行場景內(nèi)容和服務(wù)，助力汽車從交通工具向具有交互和服務(wù)的能力的智能終端進化。

華為快應用是一種基于行業(yè)標準開發(fā)的新型免安裝應用，其標準由主流手機廠商組成的快應用聯(lián)盟聯(lián)合制定。開發(fā)者開發(fā)一次即可將應用分發(fā)到所有支持行業(yè)標準的手機運行。

HMS Core提供端、云開放能力，幫助開發(fā)者實現(xiàn)應用高效開發(fā)、快速增長、商業(yè)變現(xiàn)，使能開發(fā)者創(chuàng)新，為全球用戶提供精品內(nèi)容、服務(wù)及體驗。

1、全球化分發(fā)。已上線超過170+國家和地區(qū)。

2、全終端接入。全面支持從小屏幕到大屏幕各種智能終端。

3、全場景支持?？鞈弥边_鏈接和卡片嵌入全終端場景。

特點：

1、設(shè)計特點：

在交互界面上，Carplay和Carlife由于使用的投屏方式，主界面依然是一個個的APP圖標，需要點擊啟動進入后才能使用。筆者認為采用這樣移動端過于笨重的交互方式并不適用于車載場景；HUAWEI HiCar的設(shè)計理念是"安全便捷、自然舒適、智能貼心", 對車載端的人機交互要素重新布局規(guī)劃設(shè)計，采用桌面卡片的設(shè)計方式，以滿足復雜駕駛狀態(tài)下的使用需求。

桌面卡片是應用內(nèi)容和功能特性的重要載體，用戶通過對卡片的快捷操作直達應用的核心功能，提升交互的便捷性。應用可通過接入 HUAWEI HiCar 桌面卡片的方式呈現(xiàn)最核心的功能和服務(wù)，并根據(jù)自身的需求特性，自行組合卡片元素以滿足不同場景下的用戶訴求。

• 背板：背板樣式可以為色彩填充或設(shè)置背景圖。

  背景色支持黑、白、彩色三套。

  應用需提供三套背板以適配卡片主題切換。

• 品宣區(qū)：品宣樣式為圖標+文字，應用可根據(jù)在此區(qū)域顯示品牌圖標和名稱。

• 內(nèi)容區(qū)：展示與應用場景相關(guān)的信息，其內(nèi)容可以是圖片、文本或圖文樣式。

• 操作區(qū)：操作區(qū)為文字或圖片按鍵，最多 3 個控件或 1 個控件組。

2、功能特點：

華為智慧助手，可結(jié)合用戶使用場景，以卡片形式推送提醒、服務(wù)和行程，實現(xiàn)智慧化服務(wù)找人。例如，送孩子上學時，車機端華為智慧助手將自動推送"有聲續(xù)播"卡片，用戶點擊卡片，即可一鍵續(xù)播孩子在華為手機上沒聽完的有聲兒童內(nèi)容；用戶在開車下班回家路上，進入離家500米范圍內(nèi)時，車機系統(tǒng)可自動啟動"回家模式"，提前打開家中的窗簾、空調(diào)等設(shè)備，方便用戶享受愜意生活。

My Car功能面向車企開放華為手機等智能硬件系統(tǒng)級入口能力，能夠?qū)崿F(xiàn)遠程控車、查車、汽車服務(wù)/告警關(guān)鍵信息等反向推送能力。遠程控車功能，可以滿足用戶高頻控車訴求，例如，遠程開關(guān)空調(diào)、尋車、查看門窗狀態(tài)等。另外，當車輛胎壓不足、門窗未關(guān)閉時，用戶也能通過手機、車機及時收到提醒。

三、系統(tǒng)的開源地址

1、阿里Alios開放平臺

https://miniapp.alios.cn/index#/document

2、百度車載生態(tài)開放平臺

https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html

3、騰訊-車載小場景（私我領(lǐng)取PDF）

4、谷歌駕駛

https://developers.google.com/cars/design/design-foundations

5、蘋果apple car play

iOS - CarPlay 車載

6、華為車機三方應用交互設(shè)計規(guī)范

https://developer.huawei.com/consumer/cn/doc/50902#h2-1587181522014

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷    作者：郝小七

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)