設(shè)計驅(qū)動

挖掘用戶真實需求，通過創(chuàng)建用戶畫像、體驗地圖、原型設(shè)計、驗證假設(shè)、用批判性思維方法討論假設(shè)，將有價值的概念逐步推向落地方案。

設(shè)計目標(biāo)

滿足基本功能需求，覆蓋更多場景與功能，優(yōu)化用戶體驗。

體驗原則

區(qū)別于移動設(shè)備，座艙設(shè)計最大的挑戰(zhàn)來自用戶有限的操作時間和視覺注意力管理。在安全至上的原則上，保證用戶高效操作，確保交互架構(gòu)

更扁平、更淺層。

簡潔清晰的文字信息

人類“瞥一眼”的時間是0.3秒，如何在極短時間內(nèi)接收完整信息，并讓大腦做出及時反饋，我們需要提供極簡的文字描述。

靈活有序的布局

UI設(shè)計中的一個重點(diǎn)是協(xié)調(diào)和管理各個元素之間的關(guān)系，而非設(shè)計元素本身。布局的變化引導(dǎo)用戶視覺焦點(diǎn)，幫助用戶理解外觀和功能之間的關(guān)系。

自然直觀的交互

自然的交互方式符合人類思想的延伸，用戶心里模型和行為認(rèn)知越接近，實際使用過程中的認(rèn)知負(fù)荷越低，就會覺得操作簡單方便。

上滑顯示更多應(yīng)用操作。

高級精致的品質(zhì)

追求高級感的UI視覺效果，讓內(nèi)外飾都具備精致品質(zhì)，作為背景的純黑色在數(shù)字世界色相不明確，映襯產(chǎn)品功能更清晰。

中控屏

商業(yè)化

移動端聯(lián)動操作

以用戶為中心，關(guān)注用戶使用感受，站在用戶角度、場景思考，設(shè)計驗證、直至產(chǎn)品交付。

寫在前面：

在過去幾年的時間里，數(shù)字座艙系統(tǒng)已經(jīng)陪伴車主朋友們經(jīng)歷了兩個大的版本迭代。這期間每一次的優(yōu)化、每一個新功能的推出，伴隨的都是大家對座艙體驗設(shè)計更高的期待。為此，NIO數(shù)字座艙設(shè)計團(tuán)隊不斷總結(jié)經(jīng)驗教訓(xùn)，努力探索著最適合，最貼近用戶使用習(xí)慣的座艙體驗。我們也非常愿意結(jié)合以往的經(jīng)驗總結(jié)，把我們的思考分享給大家：

Driven by Design

設(shè)計驅(qū)動的蔚來

兩年來，設(shè)計趨勢在更新，座艙駕駛體驗也發(fā)生了很多變化。較早的版本一方面設(shè)計風(fēng)格漸漸遠(yuǎn)離趨勢，結(jié)構(gòu)布局不能滿足國際化的需求；另一方面，隨著技術(shù)的更新，一些交互方式也需要升級和優(yōu)化。 

這里要感謝車主朋友們的參與和反饋，使我們得以通過用戶沙龍，一對一訪談，線上調(diào)研，了解大家在駕駛體驗中的痛點(diǎn)，挖掘真實的需求。我們通過創(chuàng)建用戶畫像，體驗地圖，原型設(shè)計，驗證我們的假設(shè)，并用批判思維方法討論這些假設(shè)，逐步將有價值的概念打磨成具體落地方案。 

設(shè)計目標(biāo) 

在過去的兩個版本中，我們從建立基礎(chǔ)交互架構(gòu)，滿足基本功能需求起步，逐步覆蓋主要的使用場景和功能定義，優(yōu)化用戶體驗結(jié)構(gòu)。 

今天的3.0版本，我們希望能結(jié)合技術(shù)創(chuàng)新展示更自然的交互，在不同的場景下滿足多樣性的需求。在提升易用性的同時提高品質(zhì)感。簡單來說就是“更易用，更高級”。

體驗原則

區(qū)別于移動設(shè)備，座艙體驗設(shè)計最大的挑戰(zhàn)來自用戶有限的操作時間和視覺注意力的管理。在安全至上的原則指導(dǎo)下，我們想要保證用戶高效率的操作，就必須確保交互架構(gòu)更扁平、更淺層。在各種場景下提供必要的信息，保證用戶高效的理解，幫助用戶快速的決策。為此，我們提出了幾個體驗原則：

Minimal / Clarity

簡潔清晰的信息

人類對于視覺的感知是不均勻的，眼睛在短時間內(nèi)獲取大量信息，大腦無法快速、即時的作出反饋。所以，信息的呈現(xiàn)方式及其出現(xiàn)的時機(jī)顯得尤為重要。新版本的儀表盤，我們梳理了信息層級，讓重要的信息在關(guān)鍵的時間“恰如其分”的展現(xiàn)，用戶通過“瞥一眼”就能掌握盡可能多的有效內(nèi)容，了解狀態(tài)的變化。

2.0 儀表盤界面

3.0 儀表盤界面

根據(jù)NHTSA指南，駕駛員的每次操作應(yīng)該在1.5秒的掃視中完成，并且視線花在離開道路上的累積時間不超過12秒。如果希望用戶不用花太多注意力“瞥一眼”就可以看清時速變化，我們需要將2.0版本“窄而細(xì)”的時速字重加大；這樣視線從路面到時速信息盡可能的保持簡短和垂直。

我們常說“如無必要，勿擾用戶”。新版本的儀表盤，去掉了一些冗余的圖標(biāo)，界面盡可能保持簡潔；區(qū)別了實線和虛線，并弱化了NOP時圍繞在“車”周圍的視覺表現(xiàn)，因為我們認(rèn)為視覺的重心應(yīng)該是路面動態(tài)的信息，而不是NOP本身的特效。

其次，在相關(guān)人因測試結(jié)果的支持下，我們將時速等重要信息移到視覺優(yōu)勢區(qū)域內(nèi)，避免了因角度問題造成的方向盤遮擋，同時也是希望到視線焦點(diǎn)盡量保持與路面垂直，縮短視線偏移帶來的安全隱患；天際線抬高以后，中間輔助駕駛顯示區(qū)域更大，提高了縱深感，可以看到更遠(yuǎn)更多的內(nèi)容。

我們重新劃定了信息區(qū)域：左邊為駕駛區(qū)域，將功率挪到時速下面；中間為ADAS區(qū)域，右側(cè)則是拓展信息區(qū)域。頂部區(qū)域我們留給了常出現(xiàn)的警報和提醒，左右兩側(cè)的邊緣留給非常見的提醒。

通過車速的快慢，調(diào)整視角高低，視角的變化更符合用戶實際駕駛時的感受，時速增加需要看到更遠(yuǎn)的信息。

HUD之前的布局比較分散，路口道路指示和NP/NOP并不明顯，路口距離的豎狀進(jìn)度條也比較難理解。所以新版本我們除了增加限速提醒，攝像頭距離提示以外，重新調(diào)整了布局：選擇字面率寬的字體，加粗路口方向圖標(biāo)，進(jìn)度條也改成便于理解的橫向擺放，同時增強(qiáng)了NOP變道時的提示效果。

2.0 vs 3.0 HUD

HUD 信息結(jié)構(gòu)

Natural / Intuitive

自然直觀的交互

自然的交互方式符合人們思想的延伸。用戶心理模型和行為認(rèn)知越接近，實際使用過程中的認(rèn)知負(fù)荷就越低，就會覺得操作簡單方便。我們希望用更自然更符合用戶預(yù)期的交互方式，喚起用戶的本能的意識，用最小的輸入獲得最高效的結(jié)果。 

主頁右側(cè)的卡片，在2.0版本的實用價值并不高，僅在左下角展示了“能耗”，用戶通常只把它作為一個“我的車”的入口。新版本里，我們將用戶關(guān)注的信息直觀呈現(xiàn)在卡片上，用戶不需要進(jìn)入詳細(xì)頁面就能掌握能耗信息；同時，我們把其他的內(nèi)容也添加到不同的場景卡片中，用戶可以根據(jù)自己的習(xí)慣選擇常用的信息?？旖輬鼍翱ㄆo了我們更多種擴(kuò)展的可能性，比如未來可以加入組隊動態(tài)，換電下單，K歌歌詞等。

橫向滑動右側(cè)卡片切換內(nèi)容

我們發(fā)現(xiàn)用戶在點(diǎn)擊app列表以后，75%以上的人是打開“設(shè)置”。新版本我們將“我的車”和“設(shè)置”合并，把入口提到了Dock欄里，這樣可以更快速的打開“車輛設(shè)置”

車輛設(shè)置放入Dock欄

2.0版本的空調(diào)調(diào)節(jié)，需要先喚起空調(diào)面板，再上下點(diǎn)擊或滑動溫度，這樣操作一是路徑長，二是上下滑動并不順手。啟動和調(diào)節(jié)空調(diào)作為常用操作，應(yīng)該更自然，為此我們把它直接放在了Dock欄上，用戶可以點(diǎn)擊溫度旁邊的箭頭，也可以直接在數(shù)字上滑動開啟并調(diào)節(jié)空調(diào)。

點(diǎn)擊溫度旁邊的箭頭或直接滑動溫度調(diào)節(jié)空調(diào)

長按喚起風(fēng)量圖標(biāo)，左右滑動調(diào)節(jié)風(fēng)量參數(shù)

新版本里我們還增加了一個操作，用戶可以將卡片下拉進(jìn)入mini狀態(tài)，滿足在某些場景下用戶希望看到更大地圖的需要。

下拉桌面卡片變成mini卡

Hierarchy / Flexible 

靈活有序的布局

UI設(shè)計中的一個重點(diǎn)是協(xié)調(diào)和管理各個元素之間的關(guān)系，而非只是設(shè)計“元素”本身。布局的變化能引導(dǎo)人們視覺的焦點(diǎn)，幫助用戶理解外觀和功能之間的關(guān)系。 

新版本的布局更加舒展，元素之間更講究“透氣”的留白，這使得界面有了視覺暫停，布局顯得松弛有度，同時也是暗示用戶何時專注和放松。 

我們收窄了2.0布局兩邊的邊距，減少不必要的層級羅列，重新梳理網(wǎng)格系統(tǒng)，加大調(diào)節(jié)Bar，用戶在使用的時候更順暢。我們也更新了一些控件，比如2.0版本里按鈕，Tab，標(biāo)簽樣式過于相近，新版本中我們做了區(qū)別。

新版本布局變化

視覺層級是UI設(shè)計中的核心要素，字體字重能幫助用戶辨別信息的主次，平衡內(nèi)容，減少信息密度。較早版本只有常規(guī)和細(xì)體兩種字重，對于一個數(shù)字系統(tǒng)OS來說，僅用兩種字重難以滿足展示多重層級信息的需求。新版本不再使用2.0時細(xì)體的字重，增加了易讀性。

新版本有5種字重

新版本中對比度的優(yōu)化提升了易讀性。按照WCAG的標(biāo)準(zhǔn)，常規(guī)閱讀文字最低的對比度應(yīng)在4.5：1以上，而在駕駛場景下的理想對比度要求更高，至少應(yīng)為7：1。高度清晰的文本有助于駕駛員縮短瀏覽和決策時間，減少分心，提高駕駛安全。

易讀性對比度規(guī)則

Premium / Precision

高級精致的品質(zhì)

一直以來我們都在追求高級感的UI效果，讓內(nèi)外飾都具備很精致的品質(zhì)。之前的版本控件樣式比較厚而軟，過渡色有些模糊，藍(lán)黑色雖然取自品牌色系統(tǒng)，但是作為背景在數(shù)字界面里色相不明確，整體頁面氣氛有些“悶”，加上對比度不夠，調(diào)性顯得不夠“精神”。 

3.0深色模式里我們用了黑色作為主色調(diào)，輔助色也更純粹，色相更清晰，飽和度更高，點(diǎn)綴蔚來藍(lán)為主的高亮色，使界面保證足夠的生動性。

新版本里我們重建了ADAS視覺識別模型，增加了細(xì)節(jié)，區(qū)分的車型更多；飽受用戶詬病的模型也做了調(diào)整。在儀表盤上，我們會逐漸優(yōu)化自車模型，實現(xiàn)開門、充電等功能的動態(tài)展示；在中控屏，我們也通過渲染引擎的搭建，實現(xiàn)車輛模型的實時展示和交互，提升大家的專屬感體驗。 

3D UI能夠更好的還原真實的場景，形成所見即所得的效果，避免抽象圖形給用戶帶來的認(rèn)知負(fù)擔(dān)。這樣的處理方式也被運(yùn)用在其他重要的場景里。比如座椅調(diào)節(jié)，香氛，氛圍燈，音場模式等。

氛圍燈是很有專屬感的界面。3.0版本的氛圍燈場景增加了預(yù)覽圖，用戶在切換顏色的時候，可以看到預(yù)覽效果。

這里要再次提到空調(diào)操作這個高頻場景，3.0版本用更加立體的界面取代了2.0版本扁平的圖標(biāo)形式。前后排的切換的動效也更直觀，動效平滑。

空調(diào)前后排切換動效

Design for Everyone

持續(xù)創(chuàng)新

感謝在3.0版本設(shè)計過程中，參與設(shè)計測試，并給予我們提供寶貴建議和反饋的所有車主朋友們。 

以用戶為中心，關(guān)心每個用戶的使用體驗，設(shè)身處地站在用戶的角度和場景思考設(shè)計和體驗是數(shù)字座艙團(tuán)隊一直以來的宗旨。這次升級，我們用時一年多，從早期的需求挖掘，到創(chuàng)新探索，設(shè)計驗證，再到最后交付走查。我們打磨細(xì)節(jié)反復(fù)驗證，與研發(fā)兄弟團(tuán)隊協(xié)作聯(lián)調(diào)。大家既有激烈的爭執(zhí)，也有無需言說的默契；會為了一個好想法的產(chǎn)生而興奮，也會為了沒有來得及實現(xiàn)的功能而遺憾不已。每個人都表現(xiàn)出對完美的極致追求，團(tuán)隊成員雖壓力山大，卻也充滿激情！ 

3.0版本是一個新的開始，我們會繼續(xù)以用戶為中心，收集用戶訴求和反饋，努力帶給用戶超出預(yù)期的全程體驗！

寫在最后：

就在本文發(fā)表的前一周，NIO OS Aspen 3.0 榮獲德國 iF 設(shè)計獎，感謝一路以來車主朋友們的陪伴與反饋以及設(shè)計團(tuán)隊每一位小伙伴的努力與付出。