下面這篇是筆者整理的設計感受總結文章，主要內容包含車載地圖交互中的易操作性、界面簡潔清晰、高效、反饋幾點，大家一起來看了解更多內容吧！

關注我的粉絲寶寶們應該知道，我在今年的 2 月份換了工作到了現在的公司做車載地圖的交互設計。雖都是交互設計，都是以 「人」、「場景」「任務」三要素展開，但由于產品形態(tài)不同，使用場景不同，實際執(zhí)行上的跨度算蠻大的。

至今已 9 個月了，9 個月中，我負責了 3 個車型的車載地圖設計，也參與了目前公司從需求-設計-開發(fā)-落地-發(fā)版交付的全流程。所以從項目經驗積累、問題收集、時間維度上都適合在這個節(jié)點進行一次復盤總結?。ㄒ驗檐囕d的周期和其他C端產品周期相比會長許多，所以才過了這么久復盤）。

??僅個人自己的觀點，自行判斷～

要知道設計很多原則幾乎是相通的，只是出于不同業(yè)務機場景有不同測重，所以我在總結時會去找到 核心的歸因，因為一切不同均出于該「核心點??」。

顯而易見，車載和C 端 APP的一個明顯的差異就是「使用場景」，C端使用場景較寬泛，用戶可能在家、在地鐵、在公司、坐著、走著…..但車載核心場景就是「在開車」，駕駛的這個場景勢必最終都會引導到一個最最最核心的點：安全第一！

因為駕駛中，司機無法在屏幕上持續(xù)專注 3s 以上，所以基于「安全性」和「無法長時間看屏幕」這兩點最基礎原因會對后面交互設計產生本質影響。

??總覽

?? 核心體驗

作為地圖導航軟件，核心肯定是「精準性」。試想一個地圖導航軟件無法做到定位、導航精準、帶錯路……等等，就算其他體驗做的再好都是無用功。

當然這個是產品的基本原則，更多是技術主導。交互設計師只是在這個核心 ok 的基礎上去潤色！

其次是整個 軟件的響應速度，這個是通用的，我們日常用其他 APP 也都是希望能夠順暢使用，但是 對于車載地圖而言這個順暢性的要求會提高更多！

駕駛中，因為車是以一定的速度在運動，若系統(tǒng)的響應速度、數據更新的速度跟不上，就非常容易錯過一些關鍵路口等等，所以「定位」「流暢性」「數據更新速度」這三個是保證車載地圖軟件最基本可用的前提要素。

?? 核心場景差異導致設計重點不同

車載產品和其他 C 端產品設計上最大的不同就是需要考慮 場景差異，車載產品是在「駕駛場景」，不可忽視的就是「安全性」，因為駕駛中，司機需要目視前方，手腳并用，不能夠「分散注意力」否則就容易發(fā)生危險。

所以基于「安全性」「減少注意力分散」的這兩大影響設計核心因素下，交互設計師需要有不同側重考慮～

我這邊總結下來包含：「易操作性」、「界面簡潔清晰」「高效性」、「反饋」，下面會圍繞這 4 點展開闡述，但是他們都是服務于「安全性」+「減少注意力分散」這個核心目標！

一、易操作性

在駕駛場景中的主要任務就是確保安全到達目的地，因此使用導航地圖時操作需要 簡單直觀，以減少駕駛員注意力分散。

如果操作復雜不直觀，可能會讓駕駛員分心，增加事故發(fā)生風險。而易操作性好的設計，能讓駕駛員只需要將目光移到屏幕 1-3s 就能進行操作，以確保新手司機、年紀較大的司機都能夠很好上手?；谠隈{駛過程下對易操作性的考慮需注意：

1. 操作直觀，按鈕夠大

這個直觀最直接的做法就是要「減少按鈕個數」，特別是要避免多個按鈕排一起的情況，即使有多個按鈕，也要控制在 4 個內。因為按鈕越多，選擇越多，所需時間就越多，試想 4 個按鈕 和 1 個主按鈕，哪個操作快？

按鈕大小盡量大些，主按鈕肯定要比其他的輔助的按鈕要大。一來是為了凸顯按鈕讓用戶一眼就看到，二來是駕駛中是會輕微的晃動的，無法做到完全精確的點擊，并且如果太小容易出現誤觸的情況。

這點可以在 CarPlay 可以非常明顯的感受到，他們的頁面內容少，且按鈕夠大，甚至大到讓你感到“這也太大了吧～”但是在駕駛中卻 更容易看且看清楚且容易點！

物理按鈕的在駕駛體驗是非常好的，因為具備天然的「觸覺反饋」，很多時候都可以盲操。

比如音量旋轉按鈕，我只要摸到按鈕位置直接旋轉就行，視線完全可以一直保持在前方，不會影響駕駛安全。但因為觸摸屏技術發(fā)展以及當前人們的審美都傾向于簡潔，無按鈕會給人顯得更加先進的錯覺，從而更加吸引消費者。

即使觸摸屏和數字界面流行，但在駕駛安全和操作直觀性上，物理按鈕的優(yōu)勢不可替代，這也就是為什么很多豪車都還是會保留物理按鈕。無論保留與否，都是圍繞易操作 性去考量設計的。

2. 語音交互

上面說到的物理按鈕和車機屏幕虛擬按鈕的差異點，隨著 AI 語音的發(fā)展，這個可以充分由「語音交互來」實現，語音技術的接入完全 實現了駕駛員在保持雙手控制方向盤和雙眼注視前方的同時操作車載系統(tǒng)，從而減少駕駛過程中的分心和操控性風險。

還能直接輸入「多任務指令，完成多任務處理」并且「語音交互不受空間限制」。因為語音交互可以拉開距離完成操作，這些都極大的提高的「操作效率」

如：到最近最便宜的加油站 最近+最便宜+加油站，若是駕駛員操作需要經歷：找加油站-搜索-篩選，而語音只需要說:“導航到最近最便宜的加油站”。

先前在語音交互設計時，著重設計指令，強調設計簡單直接的觸發(fā)指令。但現在大模型語言技術的進步，在「語意理解」能力上的極大進步，對用戶輸入的語音指令而言的限制減少，用戶能夠更加自然，以更加日?；脑捫g與之對話。所以在輸入指令這塊在技術的加持下，讓體驗得到質的飛躍。但整體還需注意：

①反饋：在接收指令時需要有明確的傾聽狀態(tài)，讓用戶快速知道當前車機正在接收中；其次是接收完處理的輸出的反饋要簡潔，「直接說重點」。

②容錯性和指導：當語音指令不清晰或系統(tǒng)無法理解時，系統(tǒng)應該提供指導、建議，而不是簡單的提示顯示錯誤。

③個性化：系統(tǒng)可以適應用戶偏好和需求，例：記住用戶常去目的地、設置等等。

3. 短路徑

短路徑一個是我們 「操作路徑要短」，「能直達就直達」，「能用 2 步就不用 3 步」，能在當前頁面解決就不用二級頁面，「能不跳轉就不跳轉」。其核心就是「簡化用戶從開始到完成一個任務所需的步驟」，所以要達成該效果：

①首先需要我們「明確核心功能」，并將核心功能凸顯放大。

②其次是優(yōu)化流程，「系統(tǒng)能幫忙做的就自動默認做了」，來減少用戶決策的數量。

③「利用模態(tài)窗口和浮層代替全屏頁面」，對于一些操作，使用浮層可以減少用戶導航的步驟，「直接在當前頁面完成操作」。

④「預測用戶行為，減少操作」，這個和第②點類似，就是通過系統(tǒng)智能化來幫助用戶快捷完成。

⑤「快捷功能」將用戶常用的功能提取出來，便于用戶一鍵觸達，如：回家、去公司、充電站這樣的功能，用戶只需一次點擊即可快速發(fā)起導航~

另外一個短路徑是在實際駕駛室伸手和車機屏幕操作的距離，我們的操作項需要離用戶更近，因為受于人機工學的影響，我們會發(fā)現，車載的很多應用所有的 「按鈕都是傾向于放左邊」，主要目的就是「離駕駛員近」，更接近駕駛員自然手臂伸展范圍~

還有一點是我們在一個連續(xù)的操作中，我們的「面板位置要固定在一個位置」絕對不可以一級頁面在上面觸發(fā)，然后到了二級頁面板在下面，這種位置的偏移不光需要用戶手臂上下、左右的來回擺動，并且給到駕駛員的感知就會覺得整體很散亂，降低整體體驗！

所以我們在畫頁面的時候就需要對頁面空間上進行區(qū)分固定，只有在一個統(tǒng)一的區(qū)分下，最后整體才會更加統(tǒng)一！

所以在易操作上，我主要歸納為以上 3 點，其實只要我們在擼稿的時多考慮，最終的設計稿的設計合理性就會更強，整體的邏輯會更嚴謹。

二、界面簡潔清晰

界面簡潔清晰是個設計師都知道，特別是車載地圖這個要求會更高，因為簡潔清晰的界面能夠 提高信息獲取效率，便于駕駛員更快更準的看清信息。在車載上，如果想要盡可能做到界面簡潔清晰需要重點關注：

• 信息顆粒少且層次清楚；
• 簡化視覺元素；
• 布局統(tǒng)一，信息集中；
• 功能排序。

1. 信息顆粒少且層次清楚

這個環(huán)節(jié)就是要充分去了解用戶需求，日常工作中，可以多看看用戶調研的結果，從實際用戶訪談中了解哪些信息對他們是重要的，并且也需要判斷「這些信息是否所屬當前場景？」，問自己每個信息顆粒是否對用戶理解和使用產品至關重要？

如若不是，就可以在心里打個?，看看是否可以考慮移除~還有就是避免「重復信息」的展示。

在減少信息顆粒后，就需要對信息進行分類，同類的信息一定要展示在一起，如導航中的：車道線、誘導、距離時間、路口放大圖、車速這些都是給駕駛員指引的信息，所以在實際界面設計時需要將這些信息集中在一塊區(qū)域，方便駕駛員看一眼就能一起看到信息。

如下圖是特斯拉，將導航信息中的路口圖、路段誘導、車道線、路線詳情這些指引類的信息收納在上面卡片，而時間及剩余公里這類不需要一直關注的信息則收納在下面的卡片。從「信息重要度」及「看信息的頻率」上很好的將信息區(qū)分開！也沒有出現許多信息全部扎堆融在一塊的情況。

在信息層次上，看上面卡片的順序及區(qū)域大小就可以很清楚了，路口大圖 >下一個路口誘導信息 > 車道線 > 路線詳情，這樣的層次劃分給人的感覺就很舒服。

2. 簡化視覺元素

這塊主要是UI，具體什么風格我不闡述。但是在影響信息獲取上需要注意「避免過多顏色的使用」因為多種顏色非常容易轉移我們的視線焦點，形成視覺干擾，所以在顏色的使用上不能超過 3 種顏色，一般都是按照正常色、輔助色、警示色去做區(qū)分，這樣可以有效避免顏色的過多導致視覺干擾。

還有就是在導航場景下 視覺裝飾不要過渡，但不絕對，如靜態(tài)時看的頁面，如：設置、娛樂等其他頁面可以做更加有氛圍感，這樣也能體現整體車載系統(tǒng)的UI格調。

還有就是字體，字體不僅關系到美觀性，更重要的是影響「可讀性」。

①所以在字體選擇上需要選擇更加易于識別的「無襯線」字體，無襯線字體通常比襯線字體更容易在屏幕上閱讀。

②字體大小，因為不同車機的尺寸和分辨率不同，還有駕駛員與屏幕間的距離也不同，所以實際做的時候最好是「上車親自體驗」，根據感受進行調整。

其他廠商的字體上也出了一些規(guī)范，平時也可以參考：

③字體粗細，通常中等的粗體在多種光照條件下具有較好的可讀性，避免使用過細的字體，因為細的字體在陽光下會看不見~

④字體間距，在某研究機構研究下，發(fā)現小字體大間距和大字體小間距這樣的設定，字體更容易閱讀~

最后是 對比度，這個在實際測試中經常被提及，因為對比弱而對用戶產生誤解。

如：灰色按鈕的灰色的的控制如何避免讓人誤以為是不可點擊、icon的開啟/關閉狀態(tài)、常規(guī)路段和支持人機共駕路段的蚯蚓線顏色差異等等，這些對比度沒拉開，就需要用戶去仔細辨認，而在駕駛中，這種仔細辨認是非常影響駕駛安全的。

3. 布局直觀

布局上，大框架的布局主要就需要對功能模塊區(qū)域進行劃分，并將這個劃分后的布局始終貫徹，保證布局的統(tǒng)一性。目前橫屏的車機一般信息都展示在左側，右側展示地圖底圖路線信息，將操作都集中在左側，避免右半部分交互~

而操作區(qū)域會將重要且常用的快捷操作放在左下角（ps：該處要很注意，不可以放的太下面，因為車載機是嵌在車上的，放太下面實際點擊的時候不好點），不常用的放在右側，如：刷新、反饋、放大縮小按鈕等。

而卡片的布局就是要準尋「對齊統(tǒng)一」「操作區(qū)統(tǒng)一」的兩個原則就行，一般在卡片中，操作的按鈕都會固定在卡片底部，卡片上部的信息都會根據信息類型 通過間距的不同區(qū)分成不同小塊。

4. 功能簡化

功能簡化需要和產品保持密切溝通，因為地圖產品在不斷的迭代中，內容會越來越多，所以做的時候需要對一些低頻使用、場景較少的功能針對性的進行刪減，為產品瘦身。

但這個步驟通常需要經歷漫長的流程，因為需要數據和研究數據的驗證。如果一時間無法將這些功能刪除，設計上我們可以將這些低頻使用的功能打包在一個合集入口中，「功能收納」用戶如果想要用可以到一個統(tǒng)一的地方尋找，這樣做能夠更好的保證我們界面的簡潔性，也不影響用戶高頻功能的使用~

所以在界面清晰簡潔上，設計原則高度一致，需要交互設計不斷的去推敲不同信息在相應場景上的優(yōu)先級，通過排版布局等手段將這些優(yōu)先級，重要度差異體現在頁面上~

三、高效

這邊的高效不討論設計上，設計上只要遵循上面說的幾點，一般都會符合高效的訴求。本次這個高效主要是在系統(tǒng)流暢性上設計師在走查時需要更加關注，從而推動開發(fā)修改代碼，提高整體流暢性性能。

因為這個流暢性貫穿整個車載地圖的全流程，一旦流暢性差，幾乎白干一場，影響巨大。所以我們在走查的時候需要關注：

①響應速度：響應速度可以體現在手和屏幕互動的每個環(huán)節(jié)，如果有明顯讓你感受到卡頓，那就必須要在項目內部提出，讓開發(fā)測試同學查找原因，修改代碼。

②數據更新：車載地圖中數據更新如果不準確，就會導致導航指引信息延遲，這個在真實的使用場景中是不可以忍受的，路線、紅綠燈、施工路段、違章拍攝、限速等等，這些數據都需集成實時信息，以便駕駛員能夠及時獲得最新道路情況。這個通常是需要和交通信息管理的公共部門合作的~

③路線的靈活規(guī)劃：在實際駕駛中，路況信息是時刻變化的，經常開著開著前方出現事故造成堵車，這時候就需要智能化路線規(guī)劃，引導用戶變更其他更加快捷的路線，可以提供「一鍵重新規(guī)劃路線」等功能入口，并且除了在界面上反饋，在 語音播報上也可以提示用戶進行路線變更~

還有一個必現的場景就是駕駛員開錯路了，在這種情況下如果車機能夠越快響應到走錯路而立即生成新的路線體驗，那給人的體驗將會嘎嘎提升~這點也是在用戶調研時被提及最多次的。

但是這個涉及到：導航系統(tǒng)的響應速度、GPS信號處理技術，只有在這兩個方面能提升才能支持界面的上的反饋轉變。

四、反饋

反饋很重要！是人機交互中的不可缺少的中間態(tài)。在車載上，目前可以區(qū)分為「視覺反饋」和「播報反饋」。好的反饋機制能夠大幅增加使用的整體流暢感。

1. 視覺反饋要更加直觀高效

視覺反饋中，我們常見的有 toast、氣泡、彈窗、動畫、遮罩顏色……在不同的場景下我們會選用不同的反饋形式，但是這些反饋需要滿足一個目標，就是要「直觀」，直觀的反饋會更自然，獲取反饋的效率會更高。

如上圖，地圖直接在地圖上將要走的車道直接渲染成綠色的路面，色塊上直接顯示著自己車的汽車模型，相較于下圖這樣頂部展示車道線而言，映射關系更精確，直觀~ 幾乎可以不用思考，無腦跟著色塊走就行。

并且在此基礎上，還可以將更多的路況信息與之結合，如：限速，超速等提示都能夠通過色塊「顏色+語音播報」可以用戶及時反饋，非常直觀且高效！如果需要更加強調，可以和下圖一樣增加一個 警示顏色的氣泡提示來增加提示感知。

2. 重要提示可提前輕量化展示

駕駛中會面臨著復雜的路線，針對重要的路線出入口等信息可以提前在頁面上給予用戶提示，如下圖，會提前在頁面上展示前方 2 個入口的方向信息，這樣用戶在看到后可以提前準備，給用戶實現機動操作預留了足夠時間，避免匆匆忙忙增加事故風險！

3. 反饋提示需匹配場景緊急程度

駕駛中存在不同場景，不同場景對應的緊急程度也不同，所以在反饋形式及強度上需要做區(qū)分。如：

一般的操作的反饋：使用icon狀態(tài)變化、toast展示；

需征求用戶同意：彈窗；

重要但不想打斷用戶：氣泡、toast;

重要且需用戶立即響應：大范圍警示色+彈窗！

4. 反饋文案明確

最直接的案例就是彈窗上按鈕的文案很多都是用 “確定” “取消”，實際上如果能根據不同彈窗的提示和語境給出 指向性更明確的文案 會更好，用戶能更快理解~

5. 語音播報反饋要簡短

語音播報在駕駛中起著重要的作用，但現實很多語音播報均存在各種情況：播報話術冗長；播報機制不夠靈活，只有前一段播完才播下一段；播報類型優(yōu)先級無定義等情況，所以，實際在做這塊時需按照以下原則去設計與走查：

①簡化播報內容：精簡語音播報播報內容，做到只包含關鍵信息。

②分段播報：如果信息較長，可以拆分成幾個短句播報，每個句子可以適當留間隙，這樣如果有新的優(yōu)先級更高的信息就可在這些間隙中插入。避免等待時間較長才開始播報。

③建立即時打斷機制：對不同的播報信息類型進行分級，重要的信息需要即時打斷當前播報。如：用戶即將錯過一個重要的轉彎，這時候應該立即打斷當前播報，提示用戶轉彎。

6. 遇上故障需告知原因

有時候系統(tǒng)會故障或者是底圖數據接口出現問題，導致導航退出或其他問題，這時候需要明確告知用戶無故關閉、閃退的原因，并引導用戶應該怎么解決。只有這樣用戶才遇到這種情況時才不會懵逼~

五、結語

以上車載地圖設計復盤，讓我意識到想要真正提升用戶體驗，必須在精確性、實時性和交互等多方面下功夫，我們期待通過更高效的GPS信號處理技術及更靈活的路線調整功能以及更加人性化的交互設計，為用戶提供更加安全、便捷、愉悅的駕駛體驗~

最后，因為推薦機制的改變，麻煩給我點個「贊」