上半年轉(zhuǎn)行了車載行業(yè)，主要做車載地圖的交互，進入一個新行業(yè)難免需要學(xué)習(xí)這個行業(yè)的一些交互準則。畢竟車上操作與我們?nèi)粘Ｊ褂檬謾C場景上的巨大差異，導(dǎo)致設(shè)計側(cè)重點不同。

從各大廠商對于車載設(shè)計的準則來看都是圍繞兩大點：簡單易用、讓用戶專注于駕駛。圍繞這兩大核心對于交互與視覺有著不同的設(shè)計注意事項。對于交互互動而言，主要體現(xiàn)在：

交互層級：層級簡潔，反饋一致，使用戶能夠快速了解系統(tǒng)結(jié)構(gòu)和狀態(tài)；

信息合理：確保信息一目了然，保證讓用戶能夠在 1-2s 內(nèi) 就能閱讀完內(nèi)容將注意力移回至道路上。這一方面要求信息簡潔，另一方面也需要保證同一功能的信息布局始終保持一致；

語音指令人性化：語音交互是車機中非常重要的場景，非常適合在駕駛時與車機互動，所以在語音設(shè)計中也需要對喚醒，對話等話術(shù)設(shè)計的更符合人們習(xí)慣；

操作效率：功能的布局需充分考慮人機工程學(xué)，常用功能需放置在可觸控舒適區(qū)，便于用戶快速點擊；操作上也應(yīng)避免拖動、捏合、雙擊、長按這列手勢操作，主要還是需以點擊、滑動為主；大小及點擊熱區(qū)上也會盡可能加大，避免誤觸（在 1280*720 160ppi 10 英寸屏上建議熱區(qū)為 15.3mm/ 96px 以上）

大致了解了以上大類的交互原則，我們也需要進行實操，而實操的第一步就是看看目前市場上造車新勢力的車機具體設(shè)計的怎么樣？從他們的設(shè)計中也可以進行借鑒。這邊主要看了理想、小鵬、問界、特斯拉、蔚來、carplay，按照導(dǎo)航地圖的模塊進行拆分（地圖首頁、點擊搜索、搜索結(jié)果、POI 詳情、路線規(guī)劃、導(dǎo)航中、導(dǎo)航中-搜索，車道級導(dǎo)航、設(shè)置）進行橫向?qū)Ρ?，看看他們都是怎么做的?/p>

一、首頁

①車機默認首頁，目前一般都是以地圖鋪滿全屏，在上層放置一些功能入口及信息，在收集的競品來看，都會將「搜索、家、公司快捷入口、車頭朝向、設(shè)置」作為在首頁默認展示的功能，通過這些功能來滿足用戶 駕駛前對于導(dǎo)航地址、地圖調(diào)整的需求。

②在布局上，出于人機工程考慮均默認將這些操作項放在屏幕的左側(cè)，但位置上還是有所區(qū)分，搜索、家、公司地址這類都是出于目的地搜索選擇的信息，故統(tǒng)一成一個模塊放置于左上角；而一些默認的操作項則統(tǒng)一放在在左下角且數(shù)量不會超過 4 個，并且會刻意的將按鈕的間間距拉大從而加大點擊熱區(qū)；

③而對于搜索、家、公司這些常用的快捷地址，目前的做法有以下兩種，第一種確實簡潔，用icon的方式呈現(xiàn)，最大程度減少了對底圖的遮擋，但是這種多按鈕并排的方式難免會造成誤點擊分情況，對比而言，筆者認為第二種操作更加舒服，并且在首頁場景下右側(cè)已經(jīng)有足夠的空間展示地圖信息，左側(cè)這邊用卡片的方式雖然占用空間大些，但在該場景下對于信息獲取的影響較小。

二、首頁-點擊搜索

①點擊搜索進入后會展示關(guān)于搜索的更多內(nèi)容，有歷史記錄，也有一些提煉出的常用的地址搜索，以及關(guān)于地址的一些附加功能（如：點擊常用地點、管理收藏的地址等）

②雖然都是有關(guān)地址的推薦信息，但交互可以做的是將這些信息做好分類，將同類的信息放到一塊，避免同類的信息分散在各處，導(dǎo)致信息的散亂和頁面結(jié)構(gòu)的散亂。這邊可以看出，特斯拉就將收藏的地址信息和平時的地址記錄信息做了整合，而小鵬則是將收藏單獨領(lǐng)出來和其他快捷入口放在一塊，這邊筆者認為特斯拉的做法更合理

③在輸入方面，理想做的體驗就更好了，輸入中必須要用到用到鍵盤，而如果將鍵盤只是鋪滿屏幕務(wù)必會導(dǎo)致右邊的難點擊，理想這邊就對鍵盤做了處理，并且可以拖動，比較好的解決了右側(cè)難點的問題；

三、搜索結(jié)果列表

①搜索結(jié)果列表依舊和先前列表位置、寬度均保持一致，依舊給右側(cè)留出大片區(qū)域展示地圖上的位置扎點；

②結(jié)果有篩選項，則直接在頂部tab展示篩選項，便于用戶篩選；

四、poi 詳情

①蔚來2.0系統(tǒng)直接將周邊搜的快捷方式，直接以icon方式直接展示出來，如：停車、充電這類關(guān)鍵信息，有助于司機判斷；

②POI詳情信息主要分為：地址基礎(chǔ)信息、、距離及電量情況、輔助信息（生態(tài)類、電話、營業(yè)時間等）操作，建議相同信息集中在一塊，避免信息展示混亂；

③蔚來和特斯拉對于POI詳情的設(shè)計相似，POI詳情卡片就直接展示在扎點旁，對應(yīng)直觀，符合直覺；就應(yīng)該這樣的感覺。

五、路線規(guī)劃

①大部分競品在路線規(guī)劃頁面，依舊直接展示途經(jīng)點的搜索框，點擊即可快速搜索，減少交互步長；

②特斯拉 蔚來 問界均將路線的提示（限行、電量不足等）均融合至路線列表容器，更加整體；

③整體結(jié)構(gòu)從上到下為：搜索框、提示、路線方案、按鈕會顯得更加清晰整體（信息區(qū)塊控制在 4 個內(nèi)估計會更好）

六、導(dǎo)航中

①從競品導(dǎo)航默認態(tài)頁面信息來看，TBT面板、車道線、時間路程、全覽、道路名、路線概覽為必備信息外，友商們也會將「退出」、「語音播報」「更多」「車道朝向」進行露出，方便用戶點擊；

②TBT面板信息的組合方式有以下幾種：

1. TBT + 車道線 + 時間路程
2. TBT + 車道線 + 時間路程 + 到達時電量 + 退出導(dǎo)航
3. TBT + 車道線
4. TBT + 車道線 + 時間路程 + 路線概覽 + 退出導(dǎo)航
5. TBT + 車道線 + 時間路程

可以看出均 將車道線和 TBT 看板金融融合，均屬于導(dǎo)航指示類信息，放一塊更加合理，但是視覺上有些許區(qū)分或許更好些；

七、設(shè)置

1. 設(shè)置中涉及開關(guān)的均放左邊

2. 在某個任務(wù)下，如：導(dǎo)航中，選擇設(shè)置，不會跳轉(zhuǎn)至整頁面，而是直接在當(dāng)前狀態(tài)下彈窗展示，減少了頁面跳轉(zhuǎn)，且只展示導(dǎo)航相關(guān)的設(shè)置項

以上是地圖中最常見的頁面，通過這些對比可以看到各大廠商對于車機地圖的交互都遵從著一些基礎(chǔ)的原則，而這些原則提煉出的準確或許很官方，很抽象，但是將這些原則帶入到實際的頁面中去看其實就能更好的發(fā)現(xiàn)其中的設(shè)計原因，也能幫助自己更好的了解這些原則在實際頁面中是怎么應(yīng)用的。通過以上競品的對比，我這邊有簡單的進行提煉，提煉的不一定對，僅供參考。

①常用功能不隱藏，要直接露出

②點擊熱區(qū)要大，不要小

可點擊內(nèi)容盡可能擴大點擊區(qū)域，便于第一時間看到，也好點擊；熱區(qū)：最小 10.7mm(67.4)，推薦熱區(qū) 15.3mm（96px)以上

③按鈕間距不擁擠，要寬松

多按鈕并排時，需預(yù)留較大的間隔區(qū)域，避免因為車身抖動產(chǎn)生誤觸風(fēng)險！熱區(qū)間隔 3mm(18.9px）以上

④操作按鈕不放右邊，要放左邊

⑤同類信息不要分散，要集中

同類的信息建議放在一起，不用用多個頁面分散在各處，很難記憶，反復(fù)跳轉(zhuǎn)降低操作效率。

⑥信息展示不要都跳至新頁面，可在當(dāng)前頁面直接展示

建議頁面少跳轉(zhuǎn)，可在當(dāng)前頁面直接展示信息，減少因為不聽的跳轉(zhuǎn)、返回降低操作效率

⑦卡片信息不要太多層，要少于 4 層

卡片通常會承載著很多信息，有基礎(chǔ)的標題、地址信息又有一些圖片、評分等生態(tài)信息，還有操作信息。太多的信息全部揉到一小張卡片中時，信息密度超標，非常影響信息的獲取，所以盡可能保證最多展示 4 層信息，若超過 4 層則在首屏展示 4 層，滑動查看剩余信息。

⑧不同的反饋不要一樣，要有區(qū)分度

反饋信息有重要、緊急等不同情況，顏色上要根據(jù)不同提示信息程度進行區(qū)分：標紅文字、帶底色文字等

⑨功能說明不要只有文字，要圖文結(jié)合

一些車上的功能設(shè)置，以往會通過標題+輔助文本的方式對該功能解釋說明，但當(dāng)前新勢力都逐漸使用 3D 場景化、3D 動畫的方式直接演示功能，相較于文字更容易理解

⑩不同狀態(tài)表現(xiàn)對比不要小，要加大對比

在地圖上選擇扎點時候，選中的扎點需和其他扎點大小差異拉的更開一些，避免感知太弱分不清楚

?提示信息不要割裂，要和信息融合

當(dāng)前很多提示的信息都用 toast、或小黃條直接彈在頁面頂上，這就導(dǎo)致用戶看了之后需要根據(jù)提示的內(nèi)容尋找提示所指的信息，才能明白該條提示是為誰而提。所以可以將提示和提示所指的信息放一塊，這樣更容易理解。

?容器樣式大小不要不一，要統(tǒng)一

承載信息的容器卡片樣式要盡量做到統(tǒng)一，不要出現(xiàn)有很多種樣式，避免讓整體顯得很不統(tǒng)一，同時也避免用戶的視覺焦點不斷在畫面上轉(zhuǎn)移。

最后是動畫部分，由于對動畫這部分沒有深入，故不做展開，基礎(chǔ)的原則就是，動畫反應(yīng)要快，順暢，通過動畫也能拉高整體的使用體驗以及整體設(shè)計的精致程度~

以上就是這次競品的主要心得，里面的結(jié)論目前也僅是依照競品來歸納的初步結(jié)論，后續(xù)還需不斷深挖以及驗證，并且需要結(jié)合自己實際的項目情況進行思考與調(diào)整~

作者：小發(fā)的設(shè)計筆記