2023-1-16 博博
在過(guò)去幾年的時(shí)間里,數(shù)字座艙系統(tǒng)已經(jīng)陪伴車主朋友們經(jīng)歷了兩個(gè)大的版本迭代。這期間每一次的優(yōu)化、每一個(gè)新功能的推出,伴隨的都是大家對(duì)座艙體驗(yàn)設(shè)計(jì)更高的期待。為此,NIO數(shù)字座艙設(shè)計(jì)團(tuán)隊(duì)不斷總結(jié)經(jīng)驗(yàn)教訓(xùn),努力探索著最適合,最貼近用戶使用習(xí)慣的座艙體驗(yàn)。我們也非常愿意結(jié)合以往的經(jīng)驗(yàn)總結(jié),把我們的思考分享給大家:
兩年來(lái),設(shè)計(jì)趨勢(shì)在更新,座艙駕駛體驗(yàn)也發(fā)生了很多變化。較早的版本一方面設(shè)計(jì)風(fēng)格漸漸遠(yuǎn)離趨勢(shì),結(jié)構(gòu)布局不能滿足國(guó)際化的需求;另一方面,隨著技術(shù)的更新,一些交互方式也需要升級(jí)和優(yōu)化。
這里要感謝車主朋友們的參與和反饋,使我們得以通過(guò)用戶沙龍,一對(duì)一訪談,線上調(diào)研,了解大家在駕駛體驗(yàn)中的痛點(diǎn),挖掘真實(shí)的需求。我們通過(guò)創(chuàng)建用戶畫像,體驗(yàn)地圖,原型設(shè)計(jì),驗(yàn)證我們的假設(shè),并用批判思維方法討論這些假設(shè),逐步將有價(jià)值的概念打磨成具體落地方案。
在過(guò)去的兩個(gè)版本中,我們從建立基礎(chǔ)交互架構(gòu),滿足基本功能需求起步,逐步覆蓋主要的使用場(chǎng)景和功能定義,優(yōu)化用戶體驗(yàn)結(jié)構(gòu)。
今天的3.0版本,我們希望能結(jié)合技術(shù)創(chuàng)新展示更自然的交互,在不同的場(chǎng)景下滿足多樣性的需求。在提升易用性的同時(shí)提高品質(zhì)感。簡(jiǎn)單來(lái)說(shuō)就是“更易用,更高級(jí)”。
區(qū)別于移動(dòng)設(shè)備,座艙體驗(yàn)設(shè)計(jì)最大的挑戰(zhàn)來(lái)自用戶有限的操作時(shí)間和視覺(jué)注意力的管理。在安全至上的原則指導(dǎo)下,我們想要保證用戶高效率的操作,就必須確保交互架構(gòu)更扁平、更淺層。在各種場(chǎng)景下提供必要的信息,保證用戶高效的理解,幫助用戶快速的決策。為此,我們提出了幾個(gè)體驗(yàn)原則:
人類對(duì)于視覺(jué)的感知是不均勻的,眼睛在短時(shí)間內(nèi)獲取大量信息,大腦無(wú)法快速、即時(shí)的作出反饋。所以,信息的呈現(xiàn)方式及其出現(xiàn)的時(shí)機(jī)顯得尤為重要。新版本的儀表盤,我們梳理了信息層級(jí),讓重要的信息在關(guān)鍵的時(shí)間“恰如其分”的展現(xiàn),用戶通過(guò)“瞥一眼”就能掌握盡可能多的有效內(nèi)容,了解狀態(tài)的變化。
2.0 儀表盤界面
3.0 儀表盤界面
根據(jù)NHTSA指南,駕駛員的每次操作應(yīng)該在1.5秒的掃視中完成,并且視線花在離開(kāi)道路上的累積時(shí)間不超過(guò)12秒。如果希望用戶不用花太多注意力“瞥一眼”就可以看清時(shí)速變化,我們需要將2.0版本“窄而細(xì)”的時(shí)速字重加大;這樣視線從路面到時(shí)速信息盡可能的保持簡(jiǎn)短和垂直。
我們常說(shuō)“如無(wú)必要,勿擾用戶”。新版本的儀表盤,去掉了一些冗余的圖標(biāo),界面盡可能保持簡(jiǎn)潔;區(qū)別了實(shí)線和虛線,并弱化了NOP時(shí)圍繞在“車”周圍的視覺(jué)表現(xiàn),因?yàn)槲覀冋J(rèn)為視覺(jué)的重心應(yīng)該是路面動(dòng)態(tài)的信息,而不是NOP本身的特效。
其次,在相關(guān)人因測(cè)試結(jié)果的支持下,我們將時(shí)速等重要信息移到視覺(jué)優(yōu)勢(shì)區(qū)域內(nèi),避免了因角度問(wèn)題造成的方向盤遮擋,同時(shí)也是希望到視線焦點(diǎn)盡量保持與路面垂直,縮短視線偏移帶來(lái)的安全隱患;天際線抬高以后,中間輔助駕駛顯示區(qū)域更大,提高了縱深感,可以看到更遠(yuǎn)更多的內(nèi)容。
我們重新劃定了信息區(qū)域:左邊為駕駛區(qū)域,將功率挪到時(shí)速下面;中間為ADAS區(qū)域,右側(cè)則是拓展信息區(qū)域。頂部區(qū)域我們留給了常出現(xiàn)的警報(bào)和提醒,左右兩側(cè)的邊緣留給非常見(jiàn)的提醒。
通過(guò)車速的快慢,調(diào)整視角高低,視角的變化更符合用戶實(shí)際駕駛時(shí)的感受,時(shí)速增加需要看到更遠(yuǎn)的信息。
HUD之前的布局比較分散,路口道路指示和NP/NOP并不明顯,路口距離的豎狀進(jìn)度條也比較難理解。所以新版本我們除了增加限速提醒,攝像頭距離提示以外,重新調(diào)整了布局:選擇字面率寬的字體,加粗路口方向圖標(biāo),進(jìn)度條也改成便于理解的橫向擺放,同時(shí)增強(qiáng)了NOP變道時(shí)的提示效果。
2.0 vs 3.0 HUD
HUD 信息結(jié)構(gòu)
自然的交互方式符合人們思想的延伸。用戶心理模型和行為認(rèn)知越接近,實(shí)際使用過(guò)程中的認(rèn)知負(fù)荷就越低,就會(huì)覺(jué)得操作簡(jiǎn)單方便。我們希望用更自然更符合用戶預(yù)期的交互方式,喚起用戶的本能的意識(shí),用最小的輸入獲得最高效的結(jié)果。
主頁(yè)右側(cè)的卡片,在2.0版本的實(shí)用價(jià)值并不高,僅在左下角展示了“能耗”,用戶通常只把它作為一個(gè)“我的車”的入口。新版本里,我們將用戶關(guān)注的信息直觀呈現(xiàn)在卡片上,用戶不需要進(jìn)入詳細(xì)頁(yè)面就能掌握能耗信息;同時(shí),我們把其他的內(nèi)容也添加到不同的場(chǎng)景卡片中,用戶可以根據(jù)自己的習(xí)慣選擇常用的信息??旖輬?chǎng)景卡片給了我們更多種擴(kuò)展的可能性,比如未來(lái)可以加入組隊(duì)動(dòng)態(tài),換電下單,K歌歌詞等。
橫向滑動(dòng)右側(cè)卡片切換內(nèi)容
我們發(fā)現(xiàn)用戶在點(diǎn)擊app列表以后,75%以上的人是打開(kāi)“設(shè)置”。新版本我們將“我的車”和“設(shè)置”合并,把入口提到了Dock欄里,這樣可以更快速的打開(kāi)“車輛設(shè)置”
車輛設(shè)置放入Dock欄
2.0版本的空調(diào)調(diào)節(jié),需要先喚起空調(diào)面板,再上下點(diǎn)擊或滑動(dòng)溫度,這樣操作一是路徑長(zhǎng),二是上下滑動(dòng)并不順手。啟動(dòng)和調(diào)節(jié)空調(diào)作為常用操作,應(yīng)該更自然,為此我們把它直接放在了Dock欄上,用戶可以點(diǎn)擊溫度旁邊的箭頭,也可以直接在數(shù)字上滑動(dòng)開(kāi)啟并調(diào)節(jié)空調(diào)。
點(diǎn)擊溫度旁邊的箭頭或直接滑動(dòng)溫度調(diào)節(jié)空調(diào)
長(zhǎng)按喚起風(fēng)量圖標(biāo),左右滑動(dòng)調(diào)節(jié)風(fēng)量參數(shù)
新版本里我們還增加了一個(gè)操作,用戶可以將卡片下拉進(jìn)入mini狀態(tài),滿足在某些場(chǎng)景下用戶希望看到更大地圖的需要。
下拉桌面卡片變成mini卡
UI設(shè)計(jì)中的一個(gè)重點(diǎn)是協(xié)調(diào)和管理各個(gè)元素之間的關(guān)系,而非只是設(shè)計(jì)“元素”本身。布局的變化能引導(dǎo)人們視覺(jué)的焦點(diǎn),幫助用戶理解外觀和功能之間的關(guān)系。
新版本的布局更加舒展,元素之間更講究“透氣”的留白,這使得界面有了視覺(jué)暫停,布局顯得松弛有度,同時(shí)也是暗示用戶何時(shí)專注和放松。
我們收窄了2.0布局兩邊的邊距,減少不必要的層級(jí)羅列,重新梳理網(wǎng)格系統(tǒng),加大調(diào)節(jié)Bar,用戶在使用的時(shí)候更順暢。我們也更新了一些控件,比如2.0版本里按鈕,Tab,標(biāo)簽樣式過(guò)于相近,新版本中我們做了區(qū)別。
新版本布局變化
視覺(jué)層級(jí)是UI設(shè)計(jì)中的核心要素,字體字重能幫助用戶辨別信息的主次,平衡內(nèi)容,減少信息密度。較早版本只有常規(guī)和細(xì)體兩種字重,對(duì)于一個(gè)數(shù)字系統(tǒng)OS來(lái)說(shuō),僅用兩種字重難以滿足展示多重層級(jí)信息的需求。新版本不再使用2.0時(shí)細(xì)體的字重,增加了易讀性。
新版本有5種字重
新版本中對(duì)比度的優(yōu)化提升了易讀性。按照WCAG的標(biāo)準(zhǔn),常規(guī)閱讀文字最低的對(duì)比度應(yīng)在4.5:1以上,而在駕駛場(chǎng)景下的理想對(duì)比度要求更高,至少應(yīng)為7:1。高度清晰的文本有助于駕駛員縮短瀏覽和決策時(shí)間,減少分心,提高駕駛安全。
易讀性對(duì)比度規(guī)則
一直以來(lái)我們都在追求高級(jí)感的UI效果,讓內(nèi)外飾都具備很精致的品質(zhì)。之前的版本控件樣式比較厚而軟,過(guò)渡色有些模糊,藍(lán)黑色雖然取自品牌色系統(tǒng),但是作為背景在數(shù)字界面里色相不明確,整體頁(yè)面氣氛有些“悶”,加上對(duì)比度不夠,調(diào)性顯得不夠“精神”。
3.0深色模式里我們用了黑色作為主色調(diào),輔助色也更純粹,色相更清晰,飽和度更高,點(diǎn)綴蔚來(lái)藍(lán)為主的高亮色,使界面保證足夠的生動(dòng)性。
新版本里我們重建了ADAS視覺(jué)識(shí)別模型,增加了細(xì)節(jié),區(qū)分的車型更多;飽受用戶詬病的模型也做了調(diào)整。在儀表盤上,我們會(huì)逐漸優(yōu)化自車模型,實(shí)現(xiàn)開(kāi)門、充電等功能的動(dòng)態(tài)展示;在中控屏,我們也通過(guò)渲染引擎的搭建,實(shí)現(xiàn)車輛模型的實(shí)時(shí)展示和交互,提升大家的專屬感體驗(yàn)。
3D UI能夠更好的還原真實(shí)的場(chǎng)景,形成所見(jiàn)即所得的效果,避免抽象圖形給用戶帶來(lái)的認(rèn)知負(fù)擔(dān)。這樣的處理方式也被運(yùn)用在其他重要的場(chǎng)景里。比如座椅調(diào)節(jié),香氛,氛圍燈,音場(chǎng)模式等。
氛圍燈是很有專屬感的界面。3.0版本的氛圍燈場(chǎng)景增加了預(yù)覽圖,用戶在切換顏色的時(shí)候,可以看到預(yù)覽效果。
這里要再次提到空調(diào)操作這個(gè)高頻場(chǎng)景,3.0版本用更加立體的界面取代了2.0版本扁平的圖標(biāo)形式。前后排的切換的動(dòng)效也更直觀,動(dòng)效平滑。
空調(diào)前后排切換動(dòng)效
感謝在3.0版本設(shè)計(jì)過(guò)程中,參與設(shè)計(jì)測(cè)試,并給予我們提供寶貴建議和反饋的所有車主朋友們。
以用戶為中心,關(guān)心每個(gè)用戶的使用體驗(yàn),設(shè)身處地站在用戶的角度和場(chǎng)景思考設(shè)計(jì)和體驗(yàn)是數(shù)字座艙團(tuán)隊(duì)一直以來(lái)的宗旨。這次升級(jí),我們用時(shí)一年多,從早期的需求挖掘,到創(chuàng)新探索,設(shè)計(jì)驗(yàn)證,再到最后交付走查。我們打磨細(xì)節(jié)反復(fù)驗(yàn)證,與研發(fā)兄弟團(tuán)隊(duì)協(xié)作聯(lián)調(diào)。大家既有激烈的爭(zhēng)執(zhí),也有無(wú)需言說(shuō)的默契;會(huì)為了一個(gè)好想法的產(chǎn)生而興奮,也會(huì)為了沒(méi)有來(lái)得及實(shí)現(xiàn)的功能而遺憾不已。每個(gè)人都表現(xiàn)出對(duì)完美的極致追求,團(tuán)隊(duì)成員雖壓力山大,卻也充滿激情!
3.0版本是一個(gè)新的開(kāi)始,我們會(huì)繼續(xù)以用戶為中心,收集用戶訴求和反饋,努力帶給用戶超出預(yù)期的全程體驗(yàn)!
就在本文發(fā)表的前一周,NIO OS Aspen 3.0 榮獲德國(guó) iF 設(shè)計(jì)獎(jiǎng),感謝一路以來(lái)車主朋友們的陪伴與反饋以及設(shè)計(jì)團(tuán)隊(duì)每一位小伙伴的努力與付出。
作者:蔚來(lái)數(shù)字駕艙設(shè)計(jì) 來(lái)源:站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com