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