首先先普及下HMI的概念
HMI:- Human Machine Interface : 人機界面,現在多指車載交互系統體驗設計。
既然說到人機界面,我們先來設計的載體是如何演變的。
一、車載中控儀表盤演變過程
1886 年,由卡爾·本茨發明的第一輛汽車。當時根本就沒有所謂的儀表盤概念,所以載體還得從1908年T型車(Ford Model T)說起,到2012年劃時代的特斯拉Model S,汽車儀表盤目前經歷四代。
1、第一代:以按鍵為主
機械式儀表盤: 第一個時代儀表盤為機械芯儀表,一般包含了車速里程表、轉速表、機油壓力表、水溫表、燃油表、充電表等,之后汽車儀表還需要裝穩壓器來穩定儀表電源的電壓,抑制波動幅度,保證汽車儀表的準確性。初代的汽車儀表盤主要以傳統的熱式和動磁式,顯示的信息極為有限,更多的是車輛物理信息“通信員”的角色。
在機械時期中控臺哪有什么屏幕可言,那時候的中控臺就是收音機和空調的調節器,而且都是實體按鍵的,只能滿足駕駛的基本需求,沒有屏幕,都是照搬飛機中控布局,以實體按鍵為主,功能簡陋單一。堆砌功能按鈕儀表,沒有交互可言。
2、第二代:電氣式儀表盤+小中控屏
第二個時代的電氣式儀表盤終于誕生,從真空熒光顯示屏(VFD),發展到采用液晶顯示屏(LED)及小尺寸薄膜晶體管顯示器(TFT),顯示屏顯示的信息越來越清晰、快捷。目前電氣式儀表在市場的保有量最大,且一般采用機械儀表結合數字儀表的方式,例如車速、轉速信息采用指針,指示燈信息采用LED等點亮,其它信息則采用TFT屏。
雖然相較于第一代機械機芯儀表增加了不少功能,汽車信息反饋也更全面更及時,但是其發展速度卻明顯與汽車行業不相匹配,對于更深層次的駕駛需求,電氣式儀表仍無法滿足。
3、第三代:全數字化儀表
汽車儀表盤領域在不斷追求更新,于是劃時代的全數字液晶儀表盤孕育而生,也是就我們常說的虛擬儀表盤。全數字汽車儀表盤使用了一整塊液晶屏取代了傳統的指針和刻度表,所有信息都通過這塊屏幕顯示出來。
單從外觀上來看就能給人以一種比較高大上的感覺,這類儀表盤上往往沒有指針等部件,所有信息都通過屏幕傳遞出來。功能更強大、信息顯示更具邏輯性,駕駛者接受信息更快,提升行車安全。也可以根據個人喜好調整相應參數,比如比亞迪的儀表盤就可以改變背景顏色。在高級點的,像寶馬的全數字儀表就可以切換N多種模式。
2007年iPhone問世后,大屏、輕薄機身、高清顯示屏、可安裝應用等功能引領了整個行業的革命。電動汽車行業飛速發展,智能AI和人際互聯等人車交互概念也跟著興起,對于中控臺的需求和功能復雜度也跟著越發精細起來,結果就是屏幕越來越大。
2013年上市的特斯拉Model S,座艙里最驚艷的就是那塊17寸的大屏。超高的分辨率和流暢的操作,和漂亮的UI設計,最初讓很多美國民眾瘋狂。就像蘋果手機顛覆了傳統手機業,特斯拉也顛覆了傳統汽車行業。
2014年換代的奔馳S級將兩塊12.3寸屏幕連在一起,合成了一塊23寸大屏,比特斯拉的大屏還多出6英寸。
拜騰M-Byte,48寸巨屏,橫向貫穿儀表臺,再一次顛覆汽車的內飾設計。
比亞迪系列汽車的旋轉大屏,玩出新花樣,可以旋轉控制,就像手機橫屏和豎屏的場景。
縱觀下來,其實不難看出,雖然汽車的中控屏幕也是往著越來越大的方向發展,但因為空間以及功能需求的不同,相比起手機來說,中控屏幕的變化更具備多樣性。
4、第四代:HUD顯示屏
從上世紀80年代,抬頭顯示技術在汽車領域已經開始被使用,直到現在才開始逐漸展露頭腳。
HUD抬頭顯示器(Head Up Display),又叫平視顯示系統。它可以把重要的信息,映射在風窗玻璃上的全息半鏡上,使駕駛員不必低頭,就能看清重要的信息。
戰斗機是率先應用HUD抬頭顯示器的。飛行員在空戰中,需要交替觀察艙外目標和艙內儀表,易產生瞬間視覺中斷,因此會導致反應遲緩、操作失誤,并有可能貽誤戰機,采用HUD抬頭顯示可克服這一缺點。
第一架使用HUD抬頭顯示的飛機是美國海軍的A-5艦載機。民用航空最早使用HUD抬頭顯示是法國達索飛機公司的mercure飛機。
在復雜多變的道路上開車,駕駛員雙眼離開車輛前方,是個非常危險的事情,尤其是在高速公路上更是明顯。于是很多車型,就給車輛配備了一個不需要挪開視線,就能知道車輛基本信息的配置,這就是HUD抬頭顯示。
HUD作為一款新技術,優勢顯而易見。當駕駛員需要查看儀表盤或中控臺上的信息,視線至少需要轉移0.3秒,而HUD投影的信息就在駕駛員平視的正前方,駕駛員可以將更多的注意力放在路面上。將駕駛體驗及駕駛員對于路況信息的認知能力進行革新式升級。
二、六大車載系統的特點
現在各家系統百家爭鳴,各家車載系統設計有哪些不同?
1. 阿里 斑馬智行
簡介:
1、阿里車載小程序是一種無需下載安裝即可使用的“應用”,旨在為用戶打造“隨時可用”、“用完即走”的使用體驗。
2、AliOS作為互聯網汽車操作系統,原生地支持阿里小程序,引入阿里生態服務的同時也面向開發者開放,圍繞車場景為用戶提供從出行到生活的各類智慧服務。
特點:
1、設計特點:
獨立的大卡片式的內容界面模塊方便車主在行車過程中單手操作,其配色鮮艷,風格扁平,符合使用場景和國人的使用習慣。
2、功能特點:自帶場景智能感知的基因。
得到車主授權后,車載小程序可以圍繞行車場景,實現上車前、行車中、下車后自然串聯的智能化場景服務。
用戶可以在車上通過觸控、語音、手勢等多模態交互方式,咨詢附近的推薦餐廳,小程序會基于用戶的喜好作出推薦,還可以預約排號;到達餐廳附近,系統會自動喚醒小程序,為用戶找到停車場;下車后,車載小程序會無縫連接到手機小程序端,用戶可以在手機上查看餐廳的預約信息等。
△ 斑馬智行2.0系統設計
斑馬智行,采用智能手機界面和應用商城下載 APP 的使用方式,實現車載和手機的雙重控制。
強大的云端特性在語音識別和線上互聯方面提供了良好的使用體驗,車主可以連接手機藍牙后,讀取其手機通訊錄,實現利用車載系統撥打和接聽電話的功能。支持 USB 接口,通過 U 盤實現播放音頻、視頻文件等。在娛樂生活方面,內置蝦米音樂,蜻蜓FM,喜馬拉雅等,支持在線搜索,在線播放以及在線廣播等服務。
同時,斑馬智行依靠阿里強大的技術和資源支持,打通停車場,加油站,高速公路支付等,使用戶駕車時產生的費用均能通過支付寶支付。
2. 百度 Car Life和Apollo
簡介:
1、打造智能車載服務生態,滿足用戶出行、娛樂、生活等多元化需求,構建人-車-家一體化互聯閉環成為時代趨勢。
2、智能小程序,是百度提供的一種技術解決方案。開發者基于此開發出來的服務,在各類宿主環境(手機 App、車載系統、IOT 設備等)中,可做到用戶無感知安裝,即點即用。
特點:
1、設計特點
車載端主界面分別采用藍、綠、紅、灰四個色塊對應四個功能模塊,「發現」集成音樂、娛樂、聽書、電臺等特色音視頻服務,采用紅色在界面中最為突出,其設計風格整體扁平,面性 icon 利于識別與點擊。
2、功能特點
智能小程序包括“車后服務”、“資訊”、“休閑游戲”、“視頻”、“購物”、“親子”、“旅游”、“工具”等8個類別,一共80多款。車企可以根據車型定位和自身需求自行定義和組合可供使用的車載小程序。
百度的車載小程序大部分場景下還是只能依靠用戶用語音喚醒,但在生態的開放性上,百度車載小程序則做得更為徹底,可以在百度App、百度地圖、百度貼吧、百度網盤百度系App上運行。
3. 騰訊 Ai in Car
簡介:
1、“騰訊小場景”是專為出行場景打造的車載輕應用生態,部署在云端,不需要下載,即用即走,并支持語音交互。
2、分為3類,出行服務小型車、生活服務小程序和視聽服務小程序。
特點:
1、設計特點:
運用的FutureLink3.0系統,FutureLink3.0 基于安卓平臺開發,在 12 英寸的中控屏幕上并沒有將大量的圖標堆砌在首頁,反而以地圖為背景,將六大功能模塊以大板塊的形式布局在地圖下方,整個界面設計簡潔。
2、功能特點:
最大特色:基于位置和場景會被自動喚醒。比如用戶經過加油站、停車場、旅游景點的時候,有些購買和支付的服務就會主動彈在車機上,用戶再通過語音完成操作。
手機小程序是“人找服務”,那么騰訊車載小程序則進化成“服務找人”。
△ 騰訊在車載場景下的生態布局
Ai in Car,顧名思義,基于 AI 的連接能力和生態,融合騰訊內容生態的優質資源,包括資訊、視頻、IP、文學等板塊,為車主提供更豐富的內容消費。風行搭載的 FutureLink3.0 車聯網系統,就是和騰訊深度合作而誕生的優質案例。
△ FutureLink3.0系統界面
只在設置頁中,才會出現二級子菜單列表,而且提供的設置項目也不多,界面層級簡單,不累贅,也給司機帶來輕松愉悅的操作體驗。同時,基于行車安全考慮,在類似天氣、股票等查詢功能上,比較依賴語音控制。在娛樂生活方面,打通手機和車機賬號,用戶無需切換賬號就可以與車載導航、電臺、QQ音樂、微信等功能無縫銜接,支持車主組建聊天組,在行車途中與好友進行實時溝通。
從整體來看 FutureLink3.0 的設計,它更像是一個把需求頁面展現在車主面前的「輕應用」,沒有傳統概念上的主界面、多層交互菜單以及相應的「系統特質」的設計,它更希望把海量資源建立在云端,終端只給車主呈現其所需要的服務即可。
4. 谷歌 Android auto
簡介:
Android Auto 系統的工作原理是將手機連接到兼容的汽車,讓駕駛員可以使用汽車屏幕和語音操作與手機的應用程序進行交互。它提供了一種導航、收聽媒體和消息等的簡單方法。
特點:
1、設計特點:
在 UI 框架設計方面,主屏幕以卡片的形式顯示通知、活動、導航和消息,右下角有啟動語音命令的麥克風圖標和底部的活動欄,這些特性屬于全局 UI。在它下方,應用程序內容區域顯示應用程序啟動器或當前使用的主應用程序的內容。
△ Android auto手持設備與車載設計系統
Android auto 將 Android 平臺擴展到汽車上,它有兩種使用方法:在手機上或在兼容的車載屏幕上。
它有一個簡單的界面,標準化的用戶交互模型和強大的聲音動作,其目的是幫助司機盡量減少分心。需要注意的是,為汽車設計交互式應用程序與手持式設備的設計有根本上的不同,其應用程序的交互界面應該簡化,以確保司機的眼睛和手集中在開車上,減少司機分心。
△ Android auto車載系統UI框架
卡片上提供如消息字符串、圖標、圖形和操作等內容,會根據用戶最近的使用情況和優先級來確定卡片的大小。主屏幕會限制卡片的數量,以保持列表的簡短和相關。因此,當新的、更相關的內容出現時,應用程序的通知可能會從屏幕上消失。同時,抽屜式的交互方式,提供了簡單的操作和導航。每個抽屜項目必須提供一個單一的觸摸目標,避免在抽屜里放長的列表,或者在相同內容的視圖之間切換。這里官方給出的最佳 UI 做法是簡化內容,關注上下文,顯示新鮮的、有用的和大多數不滾動的項目,使用單行,對決策至關重要的較長字符串使用兩行。
5. 蘋果 CarPlay
簡介:
CarPlay 車載系統旨在令用戶通過汽車制造商之原生車載系統來使用、操控iOS設備并發揮其功能。該產品的首個版本計劃于2014年發布,最早出現在一些制造商的汽車展覽上。
特點:
1、設計特點:
基于手機映射,所以界面除了橫向布局外,icon都和手機端統一。以簡潔的布局提供有用的、重點突出的信息,便于從駕駛員座椅上進行掃描。不要用不必要的細節和不必要的裝飾來弄亂屏幕。
在整個應用程序中保持整體一致的外觀。一般來說,具有相似功能的元素應該看起來相似。
2、功能特點:
作為車內輔助、操作、娛樂的中心,Carplay 可以直接連接到汽車中控的觸摸屏上,提供基于 iOS 的相關的服務和應用。Carplay 的整體設計圍繞著車內駕駛這一使用場景,而它的設計原則也圍繞著這一場景來規劃:
-
成熟?;谧钍煜さ?iOS 應用,來設計界面元素,并提供熟悉、直觀的體驗。
-
簡短。采用盡可能簡短的交互,不過度引人矚目
-
相關。屏幕顯示信息高度相關,提供盡可能少選項,不需要復雜決策
-
語音?;赟iri,以語音交互為核心,司機無需視線離開前方,手也不用離開方向盤即可完成交互。
全新的電子車鑰匙,加上 Apple CarPlay 車載流暢的使用體驗,讓 iPhone 能在旅途上發揮更多作用。地圖、電話、信息、音樂、日歷、一言、一觸、一旋隨你駕馭。
6、華為車機應用
簡介:
HMS for Car是華為終端云服務打造的智慧車載云服務解決方案,基于HMS(Huawei Mobile Services),通過AI場景引擎結合華為生態資源,為用戶提供精準豐富的出行場景內容和服務,助力汽車從交通工具向具有交互和服務的能力的智能終端進化。
華為快應用是一種基于行業標準開發的新型免安裝應用,其標準由主流手機廠商組成的快應用聯盟聯合制定。開發者開發一次即可將應用分發到所有支持行業標準的手機運行。
HMS Core提供端、云開放能力,幫助開發者實現應用高效開發、快速增長、商業變現,使能開發者創新,為全球用戶提供精品內容、服務及體驗。
1、全球化分發。已上線超過170+國家和地區。
2、全終端接入。全面支持從小屏幕到大屏幕各種智能終端。
3、全場景支持。快應用直達鏈接和卡片嵌入全終端場景。
特點:
1、設計特點:
在交互界面上,Carplay和Carlife由于使用的投屏方式,主界面依然是一個個的APP圖標,需要點擊啟動進入后才能使用。筆者認為采用這樣移動端過于笨重的交互方式并不適用于車載場景;HUAWEI HiCar的設計理念是"安全便捷、自然舒適、智能貼心", 對車載端的人機交互要素重新布局規劃設計,采用桌面卡片的設計方式,以滿足復雜駕駛狀態下的使用需求。
桌面卡片是應用內容和功能特性的重要載體,用戶通過對卡片的快捷操作直達應用的核心功能,提升交互的便捷性。應用可通過接入 HUAWEI HiCar 桌面卡片的方式呈現最核心的功能和服務,并根據自身的需求特性,自行組合卡片元素以滿足不同場景下的用戶訴求。
-
背板:背板樣式可以為色彩填充或設置背景圖。
背景色支持黑、白、彩色三套。
應用需提供三套背板以適配卡片主題切換。
-
品宣區:品宣樣式為圖標+文字,應用可根據在此區域顯示品牌圖標和名稱。
-
內容區:展示與應用場景相關的信息,其內容可以是圖片、文本或圖文樣式。
-
操作區:操作區為文字或圖片按鍵,最多 3 個控件或 1 個控件組。
2、功能特點:
華為智慧助手,可結合用戶使用場景,以卡片形式推送提醒、服務和行程,實現智慧化服務找人。例如,送孩子上學時,車機端華為智慧助手將自動推送"有聲續播"卡片,用戶點擊卡片,即可一鍵續播孩子在華為手機上沒聽完的有聲兒童內容;用戶在開車下班回家路上,進入離家500米范圍內時,車機系統可自動啟動"回家模式",提前打開家中的窗簾、空調等設備,方便用戶享受愜意生活。
My Car功能面向車企開放華為手機等智能硬件系統級入口能力,能夠實現遠程控車、查車、汽車服務/告警關鍵信息等反向推送能力。遠程控車功能,可以滿足用戶高頻控車訴求,例如,遠程開關空調、尋車、查看門窗狀態等。另外,當車輛胎壓不足、門窗未關閉時,用戶也能通過手機、車機及時收到提醒。
三、系統的開源地址
1、阿里Alios開放平臺
https://miniapp.alios.cn/index#/document
2、百度車載生態開放平臺
https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html
3、騰訊-車載小場景(私我領取PDF)
4、谷歌駕駛
https://developers.google.com/cars/design/design-foundations
5、蘋果apple car play
iOS - CarPlay 車載
6、華為車機三方應用交互設計規范
https://developer.huawei.com/consumer/cn/doc/50902#h2-1587181522014
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
文章來源:站酷 作者:郝小七
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
交互式數據可視化是一種更能夠吸引用戶的數據信息交流形式,在BI中的應用也變得越來越流行,并且由于其有較強的易用性以及能夠為用戶體驗帶來更多附加值而逐漸成為大多數數據分析系統的常見部分。它通過數據動態演示的交互方式,使用戶可以直接與信息交互,用以構建自己對信息的理解,交互式可視化必須具有與人機交互方式,如單擊按鈕,移動滑塊,快速響應以顯示輸入和輸出之間的真實關系。
靜態數據可視化是不包含任何交互功能且不隨時間變化的數據可視化,從單一視角關注特定數據故事的信息圖。圖表中沒有可操作的交互功能來調整靜態可視化的數據展示結果,更適合不太復雜的數據故事、建立概念之間的關系以及傳達預定的視圖。其構建成本遠低于交互式設計。因此在設計時必須充分考慮如何展示當前顯示的數據擬定好數據故事。
交互式是可視化設計中的絕佳工具,因為它們能夠優化信息的顯示方式,減少視覺噪音,降低用戶對數據閱讀的難度。系統中最常見應用之一是數字化儀表板或數字看板,如果直接從枯燥的數據表格獲取信息這樣的體驗是非常原始且視覺干擾過多。而通過梳理數據結構使用適當的交互可視化使看板,能夠成為用戶快速汲取主要數據信息的理想工具
設計時決定應用哪種數據可視化形式一方面需通過用戶畫像分析了解用戶偏好如何,另一方面則需要結合數據故事復雜程度采用哪種才能夠更全面更準確的傳達數據信息,以及在構建項目的過程投入成本最終回報率的高低也起著決定性因素。
大量數據可用于幫助用戶做出更好的業務決策。為了實現這一點,并從數據中獲得最大價值,用戶必須能夠理解它;提出問題、體驗模型并識別異常。
我們的大腦處理視覺圖像要比處理文字內容快 60,000 倍,能夠在13 ms內處理一張圖像,然而,大腦的處理能力也是有限的。為了展示最優效果,數據可視化必須基于人類認知速度提供信息。需要設計輸入來將信息分解成可管理的模塊并以用戶能夠簡易處理的方式呈現它。
我們在構建任何類型數據可視化時都需以用戶為中心,了解用戶的目標、動機和需求,經營環境,需要解決什么問題,以及用戶語言和特定領域的知識;
系統用戶的體驗建立在兩個主要元素上:關鍵點可視化以及交互路徑。而用戶路徑中每個關鍵點需設計為對應特定的業務問題。
可視化中的交互改變了數據的視角,始終致力于簡單的可視化而不是復雜的可視化。目標是使其更易于理解和閱讀。因此,需要避免使因使用過多的圖表引起頁面結構混亂,意味著通過過濾某些數據點,選擇數據的不同區域,甚至完全改變可視化的類型。重要的一點是:交互式可視化不再是靜態的,也不代表數據的單一視圖。交互使人們能夠根據自己的需要調整可視化并提出不同的問題。
通過了解受眾群體是誰,需要展示哪些數據,了解他們將如何使用這些數據。這些都將作為我們設計的理論依據,用以解決設計中哪些圖表是可以快速應用到實際場景中,如何為數據結構做簡化等問題;在數據的展示形式上通常是使用圖表、線條或點、條形圖和地圖來實現的。萬變不離其宗,交互可視化也是同樣在此基礎上進行擴展發揮作用。
在設計中需要為數據可視化創建各種交互式小部件,但首先需要遵循數據可視化交互設計的三個基本設計原則——可用性、可訪問和可操作。
可視化架構是映射數據故事的形式化基礎,在此基礎上通過線條、圖標和顏色等設計元素的視覺工具進行展示。為了利用這些工具,我們責需要運用對比關系、比重關系、顏色差異、位置信息和象征意義等突出顯示信息所呈現的目的及數據間的結構關系。
如在做地圖中的交互可視化時要探索當前特定點或區域的實時信息,此時需要將圖標或交互功能融入在地圖上













































