車(chē)上操作與手機(jī)上的操作場(chǎng)景有著巨大差異，這也意味著設(shè)計(jì)人員在做交互或者視覺(jué)設(shè)計(jì)時(shí)，需要秉持著不一樣的設(shè)計(jì)原則。這篇文章里，作者就結(jié)合具體品牌的車(chē)載地圖交互做了對(duì)比分析，一起來(lái)看看吧。

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

從各大廠商對(duì)于車(chē)載設(shè)計(jì)的準(zhǔn)則來(lái)看都是圍繞兩大點(diǎn)：簡(jiǎn)單易用、讓用戶(hù)專(zhuān)注于駕駛。圍繞這兩大核心對(duì)于交互與視覺(jué)有著不同的設(shè)計(jì)注意事項(xiàng)。對(duì)于交互互動(dòng)而言，主要體現(xiàn)在：

• 交互層級(jí)：層級(jí)簡(jiǎn)潔，反饋一致，使用戶(hù)能夠快速了解系統(tǒng)結(jié)構(gòu)和狀態(tài)；
• 信息合理：確保信息一目了然，保證讓用戶(hù)能夠在1-2s 內(nèi)就能閱讀完內(nèi)容將注意力移回至道路上。這一方面要求信息簡(jiǎn)潔，另一方面也需要保證同一功能的信息布局始終保持一致；
• 語(yǔ)音指令人性化：語(yǔ)音交互是車(chē)機(jī)中非常重要的場(chǎng)景，非常適合在駕駛時(shí)與車(chē)機(jī)互動(dòng)，所以在語(yǔ)音設(shè)計(jì)中也需要對(duì)喚醒，對(duì)話等話術(shù)設(shè)計(jì)的更符合人們習(xí)慣；
• 操作效率：功能的布局需充分考慮人機(jī)工程學(xué)，常用功能需放置在可觸控舒適區(qū)，便于用戶(hù)快速點(diǎn)擊；操作上也應(yīng)避免拖動(dòng)、捏合、雙擊、長(zhǎng)按這列手勢(shì)操作，主要還是需以點(diǎn)擊、滑動(dòng)為主；大小及點(diǎn)擊熱區(qū)上也會(huì)盡可能加大，避免誤觸（在1280*720160ppi 10英寸屏上建議熱區(qū)為 15.3mm/ 96px 以上）。

大致了解了以上大類(lèi)的交互原則，我們也需要進(jìn)行實(shí)操，而實(shí)操的第一步就是看看目前市場(chǎng)上造車(chē)新勢(shì)力的車(chē)機(jī)具體設(shè)計(jì)的怎么樣？從他們的設(shè)計(jì)中也可以進(jìn)行借鑒。

這邊主要看了理想、小鵬、問(wèn)界、特斯拉、蔚來(lái)、carplay，按照導(dǎo)航地圖的模塊進(jìn)行拆分（地圖首頁(yè)、點(diǎn)擊搜索、搜索結(jié)果、POI詳情、路線規(guī)劃、導(dǎo)航中、導(dǎo)航中-搜索，車(chē)道級(jí)導(dǎo)航、設(shè)置）進(jìn)行橫向?qū)Ρ?，看看他們都是怎么做的?/p>

一、首頁(yè)

1）車(chē)機(jī)默認(rèn)首頁(yè)，目前一般都是以地圖鋪滿全屏，在上層放置一些功能入口及信息，在收集的競(jìng)品來(lái)看，都會(huì)將【搜索、家、公司快捷入口、車(chē)頭朝向、設(shè)置】作為在首頁(yè)默認(rèn)展示的功能，通過(guò)這些功能來(lái)滿足用戶(hù)駕駛前對(duì)于導(dǎo)航地址、地圖調(diào)整的需求。

2）在布局上，出于人機(jī)工程考慮均默認(rèn)將這些操作項(xiàng)放在屏幕的左側(cè)，但位置上還是有所區(qū)分，搜索、家、公司地址這類(lèi)都是出于目的地搜索選擇的信息，故統(tǒng)一成一個(gè)模塊放置于左上角。

而一些默認(rèn)的操作項(xiàng)則統(tǒng)一放在在左下角且數(shù)量不會(huì)超過(guò) 4 個(gè)，并且會(huì)刻意的將按鈕的間間距拉大從而加大點(diǎn)擊熱區(qū)。

3）而對(duì)于搜索、家、公司這些常用的快捷地址，目前的做法有以下兩種，第一種確實(shí)簡(jiǎn)潔，用iocn的方式呈現(xiàn)，最大程度減少了對(duì)底圖的遮擋。

但是這種多按鈕并排的方式難免會(huì)造成誤點(diǎn)擊分情況，對(duì)比而言，筆者認(rèn)為第二種操作更加舒服，并且在首頁(yè)場(chǎng)景下右側(cè)已經(jīng)有足夠的空間展示地圖信息，左側(cè)這邊用卡片的方式雖然占用空間大些，但在該場(chǎng)景下對(duì)于信息獲取的影響較小。

二、首頁(yè)-點(diǎn)擊搜索

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

2）雖然都是有關(guān)地址的推薦信息，但交互可以做的是將這些信息做好分類(lèi)，將同類(lèi)的信息放到一塊，避免同類(lèi)的信息分散在各處，導(dǎo)致信息的散亂和頁(yè)面結(jié)構(gòu)的散亂。

這邊可以看出，特斯拉就將收藏的地址信息和平時(shí)的地址記錄信息做了整合，而小鵬則是將收藏單獨(dú)領(lǐng)出來(lái)和其他快捷入口放在一塊，這邊筆者認(rèn)為特斯拉的做法更合理。

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

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

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

2）結(jié)果有篩選項(xiàng)，則直接在頂部tab展示篩選項(xiàng)，便于用戶(hù)篩選。

四、POI詳情

1）蔚來(lái)2.0系統(tǒng)直接將周邊搜的快捷方式，直接以icon方式直接展示出來(lái)，如：停車(chē)、充電這類(lèi)關(guān)鍵信息，有助于司機(jī)判斷。

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

3）蔚來(lái)和特斯拉對(duì)于POI詳情的設(shè)計(jì)相似，POI詳情卡片就直接展示在扎點(diǎn)旁，對(duì)應(yīng)直觀，符合直覺(jué)；就應(yīng)該這樣的感覺(jué)。

五、路線規(guī)劃

1）大部分競(jìng)品在路線規(guī)劃頁(yè)面，依舊直接展示途經(jīng)點(diǎn)的搜索框，點(diǎn)擊即可快速搜索，減少交互步長(zhǎng)。

2）特斯拉 蔚來(lái) 問(wèn)界均將路線的提示（限行、電量不足等）均融合至路線列表容器，更加整體。

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

六、導(dǎo)航中

1）從競(jìng)品導(dǎo)航默認(rèn)態(tài)頁(yè)面信息來(lái)看，TBT面板、車(chē)道線、時(shí)間路程、全覽、道路名、路線概覽為必備信息外，友商們也會(huì)將「退出」、「語(yǔ)音播報(bào)」「更多」「車(chē)道朝向」進(jìn)行露出，方便用戶(hù)點(diǎn)擊。

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

• TBT + 車(chē)道線 + 時(shí)間路程
• TBT + 車(chē)道線 + 時(shí)間路程 + 到達(dá)時(shí)電量 + 退出導(dǎo)航
• TBT + 車(chē)道線
• TBT + 車(chē)道線 + 時(shí)間路程 + 路線概覽 + 退出導(dǎo)航
• TBT + 車(chē)道線 + 時(shí)間路程

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

七、設(shè)置

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

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

八、總結(jié)

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

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

2. 點(diǎn)擊熱區(qū)要大，不要小

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

3. 按鈕間距不擁擠，要寬松

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

4. 操作按鈕不放右邊，要放左邊

5. 同類(lèi)信息不要分散，要集中

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

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

建議頁(yè)面少跳轉(zhuǎn)，可在當(dāng)前頁(yè)面直接展示信息，減少因?yàn)椴宦?tīng)的跳轉(zhuǎn)、返回降低操作效率。

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

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

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

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

9. 功能說(shuō)明不要只有文字，要圖文結(jié)合

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

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

在地圖上選擇扎點(diǎn)時(shí)候，選中的扎點(diǎn)需和其他扎點(diǎn)大小差異拉的更開(kāi)一些，避免感知太弱分不清楚。

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

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

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

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

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

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