車聯(lián)網(wǎng)設(shè)計之路

汽車產(chǎn)業(yè)鏈正在進(jìn)行一場自內(nèi)而外的革新運(yùn)動罐农。隨著自動駕駛技術(shù)的逐步成熟,汽車也正在從機(jī)械的1.0時代和電子的2.0時代催什,步入智能化的3.0時代啃匿。

過去人與汽車的關(guān)系是【人適應(yīng)汽車】,現(xiàn)在變成【汽車服務(wù)于人】蛆楞,用戶從【駕】車演變成【玩】車溯乒,汽車與互聯(lián)網(wǎng)的結(jié)合,正在變?yōu)檩d著“最強(qiáng)大腦”的巨型智能硬件豹爹,四個輪子+一部超強(qiáng)運(yùn)算計算機(jī)裆悄,變革了用戶的駕駛體驗(yàn);互聯(lián)網(wǎng)與汽車制造業(yè)的結(jié)合臂聋,更是加速了工業(yè)產(chǎn)品數(shù)字化轉(zhuǎn)型和落地的可能性光稼,改變了汽車產(chǎn)業(yè)的各個方面。

在3.0智能汽車時代孩等,智能化的汽車操作系統(tǒng)作為決定用戶體驗(yàn)的核心因素艾君,各大主機(jī)廠也紛紛投入精力自研操作系統(tǒng),押注于軟件帶來的升級服務(wù)成為新的盈利點(diǎn)肄方,希望將對汽車的控制權(quán)冰垄、用戶的數(shù)據(jù)掌握在自己手中。身處于車聯(lián)網(wǎng)行業(yè)权她,我談?wù)剛€人對車聯(lián)網(wǎng)操作系統(tǒng)設(shè)計趨勢的見解虹茶。

一逝薪、快

在行車場景下,面對復(fù)雜的路況蝴罪,用戶的注意力和視線必須聚焦在前方路面董济,如何更快速的在碩大的屏幕上快速找到想要的功能,與汽車進(jìn)行更自然的互動要门,系統(tǒng)能更高效虏肾、更快速的做出反饋,這對操作系統(tǒng)的人機(jī)交互布局提出了很高的要求:

1.1欢搜、功能分類排序询微,最常用應(yīng)用放置在最醒目、最易觸達(dá)的區(qū)域狂巢;相同類型的功能整合撑毛;突出地圖、多媒體的控制和顯示唧领;

圖1.交互框架對比圖

車載系統(tǒng)中藻雌,用戶最頻繁使用的應(yīng)用為導(dǎo)航、多媒體斩个、車輛胯杭、語音、通訊受啥、更多應(yīng)用等做个,在交互布局上應(yīng)將此類功能放置在視線核心區(qū),并將其排列優(yōu)先級滚局。地圖作為用戶駕車場景下最頻繁使用的應(yīng)用居暖,在頁面布局中應(yīng)最大程度展示,進(jìn)入其他應(yīng)用時藤肢,也建議以小窗口顯示地圖的導(dǎo)航信息太闺,并可以點(diǎn)擊放大。多媒體也是行車場景下最易使用的應(yīng)用之一嘁圈,在交互布局上也應(yīng)有快速控制播放器的入口省骂,便于用戶暫停播放或者切換音源。圖1為三家新能源車企的車載智能系統(tǒng)最住,均將地圖導(dǎo)航置于人機(jī)交互的核心區(qū)钞澳,并且最大程度顯示地圖信息;多媒體涨缚、通訊轧粟、車輛等作為次一級常用功能,整合歸類于同一容器,通常以圖標(biāo)導(dǎo)航欄或者widget部件窗口展示逃延±姥可以看出雖然三家車企的頁面結(jié)構(gòu)不同轧拄,但是都是遵循一個思路:功能分類揽祥、頁面分區(qū)(視覺重心和人機(jī)工程學(xué))、地圖最大化檩电、重點(diǎn)功能整合這幾個重要步驟拄丰。

1.2、減少層級關(guān)系俐末,頁面流轉(zhuǎn)順暢有秩序料按;

駕駛的特殊場景下,車載系統(tǒng)需盡可能在主界面就完成大部分操作需求卓箫,需要進(jìn)一步設(shè)置時载矿,再跳轉(zhuǎn)二級頁面。二級頁面的框架定義要清晰明了烹卒,簡化操作流程闷盔,避免出現(xiàn)大量需要用戶設(shè)置的選項(xiàng);在頁面之間切換時旅急,避免將入口定義太深逢勾,需要用戶不斷重復(fù)【下一步】,返回時還要重復(fù)【返回】才能回到主頁面藐吮。每一個應(yīng)用都需要遵循通用的二級頁面框架溺拱,在定義框架時要盡可能滿足每一個預(yù)裝應(yīng)用以及第三方應(yīng)用的需求。頁面間的跳轉(zhuǎn)也要講究一致性谣辞,是轉(zhuǎn)屏迫摔、還是浮窗,需要全盤考慮泥从。

圖2.二級頁面布局對比

圖中列舉的三家新勢力造車的車載系統(tǒng)攒菠,均使用了浮窗的形式進(jìn)入二級頁面,浮窗的特點(diǎn)在于更輕量歉闰,即用即走辖众,關(guān)閉即可退出二級,不需要逐層返回和敬;但也會出現(xiàn)浮窗疊彈窗的情況凹炸,會產(chǎn)生界面的錯亂感,以及對第三方的適配性會差一些昼弟。不能單純的評判浮窗的形式彈出應(yīng)用二級啤它,還是頁面跳轉(zhuǎn)進(jìn)入應(yīng)用二級孰好孰壞,需根據(jù)整體交互框架的定義和產(chǎn)品需求去全局性定義各個應(yīng)用的彈出方式,只要保持一致性和秩序感就好变骡。

1.3离赫、凡事有交代,件件有著落塌碌,事事有回音渊胸;

汽車操作系統(tǒng)作為決定整車體驗(yàn)的核心,是駕駛者的貼心助理台妆,對于用戶的任何形式互動翎猛,都要做到事事有回音。一是在頁面布局上接剩,避免有“無價值”的【展示信息】切厘,一個頁面中,很多地方只可看懊缺,不可點(diǎn)疫稿,或者點(diǎn)擊無響應(yīng),對于行駛中的用戶是非常不友好的鹃两;二是在界面設(shè)計時遗座,任何可交互可點(diǎn)擊的區(qū)域,都要有設(shè)計反饋怔毛,包括圖標(biāo)的設(shè)計必須符合人機(jī)工程學(xué)员萍,人的手臂長度大約為90厘米,手指平均寬度為1.5-2.0厘米(45像素)拣度,大拇指能達(dá)到72px碎绎,圖標(biāo)的大小不要小于單個手指觸控范圍。在點(diǎn)擊樣式上抗果,也要有明顯的反饋筋帖,比如放大、彈跳冤馏、變色或者加背景等形式日麸;三是事件反饋上,通過細(xì)膩的動效給用戶以成功失敗逮光、正確錯誤代箭、完成取消的反饋,增加頁面的設(shè)計細(xì)節(jié)和體驗(yàn)涕刚。

圖3.material design圖標(biāo)點(diǎn)擊樣式

1.4 UI可視化程度高嗡综;

車載系統(tǒng)的UI風(fēng)格定義和手機(jī)app不同,APP可以根據(jù)品牌和服務(wù)杜漠,設(shè)計充滿多樣性极景、個性化的視覺風(fēng)格察净。但車載系統(tǒng)的設(shè)計風(fēng)格,需要考慮通用性和集成性盼樟,還有駕駛場景的特殊性氢卡,在風(fēng)格的設(shè)計上,以可視化作為視覺風(fēng)格的標(biāo)準(zhǔn)晨缴,在增加品牌獨(dú)特化译秦,追求視覺炫酷效果的同時,需要考慮用戶特殊場景下的界面識別度喜庞,在展示產(chǎn)品功能的基礎(chǔ)上诀浪,化繁為簡棋返,不過多展示裝飾化元素延都。那車載系統(tǒng)如何設(shè)計出又精美、又個性睛竣、識別度又高的界面風(fēng)格呢晰房?設(shè)計細(xì)節(jié)決定頁面的精致感,字體射沟、配色殊者、圖標(biāo)、圖形化验夯、控件猖吴、動效均能體現(xiàn)高品質(zhì)的設(shè)計感。無論是扁平化挥转,還是質(zhì)感化海蔽,都可以體現(xiàn)細(xì)膩的界面設(shè)計。最重要的還是設(shè)計元素的一致性绑谣,圓潤還是硬朗党窜,需要貫穿于整個設(shè)計細(xì)節(jié),避免有些樣式使用大圓角借宵,有些使用直角幌衣,這就容易造成整體風(fēng)格不統(tǒng)一;避免圖標(biāo)設(shè)計樣式不統(tǒng)一壤玫,有些是實(shí)心icon豁护,有些是描邊icon,同一大小的圖標(biāo)線寬粗細(xì)也需要統(tǒng)一欲间。圖中是在進(jìn)行界面設(shè)計之初Mood Baord情緒版創(chuàng)意收集楚里,在其中尋找設(shè)計靈感并提煉關(guān)鍵界面元素, 不斷優(yōu)化設(shè)計細(xì)節(jié)括改,產(chǎn)生精美腻豌、可視程度化高的車載系統(tǒng)HMI界面家坎,這里暫不具體展開描述了。

圖4.mood board情緒版

二吝梅、多

用戶在使用車聯(lián)網(wǎng)系統(tǒng)時虱疏,除了關(guān)注系統(tǒng)的執(zhí)行速度【快】之外,車載系統(tǒng)給用戶帶來的還有很【多】苏携。出行場景下做瞪,車內(nèi)不僅僅有駕駛員,還會有副駕右冻、后排成員装蓬,不同身份的用戶對于車機(jī)大屏的需求也不一樣。車載系統(tǒng)需要移植用戶對于手機(jī)的使用需求和習(xí)慣纱扭,在車內(nèi)使用車機(jī)完成手機(jī)能完成的所有任務(wù)牍帚,并給予更多的服務(wù)和價值。

1.1乳蛾、多應(yīng)用暗赶;

為了不斷滿足用戶的需求,車載系統(tǒng)需要集成更多更豐富的應(yīng)用和小程序肃叶。不僅要求APP更好適配車機(jī)蹂随,還要在未來自動駕駛的趨勢下,研發(fā)更多的車載應(yīng)用因惭,為車輛網(wǎng)賦能岳锁。這考驗(yàn)了龐大的互聯(lián)網(wǎng)生態(tài)網(wǎng)絡(luò),車輛開放越多的數(shù)據(jù)蹦魔,車聯(lián)網(wǎng)越能提供更全面的服務(wù)激率,不僅是車輛的維修保養(yǎng),還包括出行服務(wù)版姑、支付場景柱搜,本地生活、移動社交剥险、游戲等聪蘸。

圖5.大量的android應(yīng)用

車載系統(tǒng)是用戶在封閉的場景下沉浸式的駕車體驗(yàn),駕駛員會更專注的聚焦于某個功能并快速的觸達(dá)表制,希望每一個應(yīng)用的進(jìn)入健爬、返回保持同樣的操作邏輯,并有著一致的界面風(fēng)格呈現(xiàn)么介。所以在多應(yīng)用的趨勢下娜遵,車載系統(tǒng)的設(shè)計需要秉承完整、一體化的使用流程和用戶體驗(yàn)壤短,在信息架構(gòu)设拟、導(dǎo)航方式慨仿、視覺界面上,需有一套詳細(xì)完整的設(shè)計規(guī)范纳胧,讓第三方應(yīng)用更好的適配車機(jī)系統(tǒng)镰吆,保持體驗(yàn)的一致性。除了基礎(chǔ)的色彩跑慕、文本万皿、圖標(biāo)、動效核行、框架等硬性規(guī)范外牢硅,還應(yīng)該有排版、圖形芝雪、留白减余、層級、結(jié)構(gòu)绵脯、窗口等規(guī)范的定義佳励。這里提出模組化控件的概念休里,車載系統(tǒng)定義一套強(qiáng)大且完整的組件庫蛆挫,一套針對于設(shè)計師,一套針對于研發(fā)妙黍,第三方應(yīng)用像搭積木一樣快速搭建界面悴侵,并實(shí)時預(yù)覽效果,既能快速自查拭嫁,又能降低研發(fā)成本可免,最終保證整個系統(tǒng)使用的一致性。未來車載系統(tǒng)的設(shè)計規(guī)范做粤,也會像IOS和Android一樣浇借,通用性、擴(kuò)展性怕品、一致性更強(qiáng)妇垢。下圖為Uber的UI元素設(shè)計規(guī)范,感興趣的可以詳細(xì)了解細(xì)節(jié):https://brand.uber.com/肉康。

Uber UI elements toolkits

1.2闯估、多主題,場景化吼和;

汽車的內(nèi)飾結(jié)構(gòu)決定了操作大屏的擺放位置和角度涨薪,受日間光照的影響,屏幕會出現(xiàn)不同程度的反光炫乓,導(dǎo)致信息閱讀性降低刚夺,不利于用戶視覺的聚焦和快速點(diǎn)擊献丑。為了有更好的視覺體驗(yàn),車載系統(tǒng)定義了淺色模式侠姑、深色模式的主題切換阳距,分別用于黑白天界面的顯示,用戶可以自定義主題切換结借,也可以根據(jù)日落時間自動切換主題筐摘。除了屏幕自身人機(jī)工程的因素決定了車機(jī)系統(tǒng)推出深淺色模式外,個性化設(shè)置也是提升用戶體驗(yàn)的必要條件船老,隨著智能汽車操作系統(tǒng)的普及咖熟,消費(fèi)者對于定制的需求越來越強(qiáng)烈,車作為大號的電子產(chǎn)品柳畔,除了環(huán)境因素外馍管,更要充滿個性化,除了更換系統(tǒng)色彩外薪韩,車機(jī)系統(tǒng)還可以結(jié)合場景化提供不同的內(nèi)容和個性化推薦确沸,比如結(jié)合生活服務(wù)場景,分析用戶的偏好俘陷,在功能入口顯示不同的內(nèi)容罗捎;或者在用戶生日或者紀(jì)念日時,在系統(tǒng)界面以對應(yīng)的祝福主題展示拉盾。盡管有很多自定義主題的需求桨菜,以及界面多樣化的展現(xiàn)形式,但必須注意的是捉偏,汽車駕駛的特殊場景下倒得,必須保證內(nèi)容第一的原則,所有主題的設(shè)計不能干擾車載信息的展示夭禽,克制化的增加主題設(shè)計霞掺,一旦過于開放個性化,會嚴(yán)重影響用戶體驗(yàn)及界面的美觀性讹躯,預(yù)留幾處可修改菩彬,可運(yùn)營的入口即可,還是以用戶在高速駕駛的情景下安全高效的使用系統(tǒng)為一切個性化的基礎(chǔ)蜀撑。目前特斯拉挤巡,小鵬、蔚來酷麦,包括車聯(lián)網(wǎng)平臺Android Auto以及Carplay矿卑,都使用了深淺色主題,相信未來會有更多個性化的主題出現(xiàn)沃饶,提升車機(jī)系統(tǒng)的用戶體驗(yàn)母廷。

圖7.tesla黑白天主題

汽車智能座艙的操作系統(tǒng)還有很多可以挖掘的設(shè)計細(xì)節(jié)轻黑,未來也會像手機(jī)OS一樣,形成一套非常完整的設(shè)計體系和規(guī)范琴昆,踐行者特斯拉在不斷的迭代和優(yōu)化著車載系統(tǒng)的用戶體驗(yàn)氓鄙,還會有更多的顛覆者創(chuàng)造智能化,讓汽車更懂人性业舍。未來可期抖拦,智能化的操作系統(tǒng)勢必會成為所有主機(jī)廠在百年汽車的發(fā)展長河中,最具競爭力的“武器”舷暮,期望未來每一個用戶都能享受智能網(wǎng)聯(lián)化在汽車行業(yè)的顛覆帶來的個性化服務(wù)态罪。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市下面,隨后出現(xiàn)的幾起案子复颈,更是在濱河造成了極大的恐慌,老刑警劉巖沥割,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件耗啦,死亡現(xiàn)場離奇詭異,居然都是意外死亡机杜,警方通過查閱死者的電腦和手機(jī)帜讲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來叉庐,“玉大人舒帮,你說我怎么就攤上這事《傅” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵肢执,是天一觀的道長枉阵。 經(jīng)常有香客問我,道長预茄,這世上最難降的妖魔是什么兴溜? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮耻陕,結(jié)果婚禮上拙徽,老公的妹妹穿的比我還像新娘。我一直安慰自己诗宣,他們只是感情好膘怕,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著召庞,像睡著了一般岛心。 火紅的嫁衣襯著肌膚如雪来破。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天忘古,我揣著相機(jī)與錄音徘禁,去河邊找鬼。 笑死髓堪,一個胖子當(dāng)著我的面吹牛送朱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播干旁,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼骤菠,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了疤孕?” 一聲冷哼從身側(cè)響起商乎,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎祭阀,沒想到半個月后鹉戚,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡专控,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年抹凳,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片伦腐。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡赢底,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出柏蘑,到底是詐尸還是另有隱情幸冻,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布咳焚,位于F島的核電站洽损,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏革半。R本人自食惡果不足惜碑定,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望又官。 院中可真熱鬧延刘,春花似錦、人聲如沸六敬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至崖疤,卻和暖如春秘车,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背劫哼。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工叮趴, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人权烧。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓眯亦,卻偏偏與公主長得像,于是被迫代替她去往敵國和親般码。 傳聞我的和親對象是個殘疾皇子妻率,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361