中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

車上操作與手機上的操作場景有著巨大差異，這也意味著設計人員在做交互或者視覺設計時，需要秉持著不一樣的設計原則。這篇文章里，作者就結合具體品牌的車載地圖交互做了對比分析，一起來看看吧。

上半年轉行了車載行業，主要做車載地圖的交互，進入一個新行業難免需要學習這個行業的一些交互準則。畢竟車上操作與我們日常使用手機場景上的巨大差異，導致設計側重點不同。

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

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

大致了解了以上大類的交互原則，我們也需要進行實操，而實操的第一步就是看看目前市場上造車新勢力的車機具體設計的怎么樣？從他們的設計中也可以進行借鑒。

這邊主要看了理想、小鵬、問界、特斯拉、蔚來、carplay，按照導航地圖的模塊進行拆分（地圖首頁、點擊搜索、搜索結果、POI詳情、路線規劃、導航中、導航中-搜索，車道級導航、設置）進行橫向對比，看看他們都是怎么做的。

一、首頁

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

2）在布局上，出于人機工程考慮均默認將這些操作項放在屏幕的左側，但位置上還是有所區分，搜索、家、公司地址這類都是出于目的地搜索選擇的信息，故統一成一個模塊放置于左上角。

而一些默認的操作項則統一放在在左下角且數量不會超過 4 個，并且會刻意的將按鈕的間間距拉大從而加大點擊熱區。

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

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

二、首頁-點擊搜索

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

2）雖然都是有關地址的推薦信息，但交互可以做的是將這些信息做好分類，將同類的信息放到一塊，避免同類的信息分散在各處，導致信息的散亂和頁面結構的散亂。

這邊可以看出，特斯拉就將收藏的地址信息和平時的地址記錄信息做了整合，而小鵬則是將收藏單獨領出來和其他快捷入口放在一塊，這邊筆者認為特斯拉的做法更合理。

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

三、搜索結果列表

1）搜索結果列表依舊和先前列表位置、寬度均保持一致，依舊給右側留出大片區域展示地圖上的位置扎點。

2）結果有篩選項，則直接在頂部tab展示篩選項，便于用戶篩選。

四、POI詳情

1）蔚來2.0系統直接將周邊搜的快捷方式，直接以icon方式直接展示出來，如：停車、充電這類關鍵信息，有助于司機判斷。

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

3）蔚來和特斯拉對于POI詳情的設計相似，POI詳情卡片就直接展示在扎點旁，對應直觀，符合直覺；就應該這樣的感覺。

五、路線規劃

1）大部分競品在路線規劃頁面，依舊直接展示途經點的搜索框，點擊即可快速搜索，減少交互步長。

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

3）整體結構從上到下為：搜索框、提示、路線方案、按鈕會顯得更加清晰整體（信息區塊控制在 4 個內估計會更好）。

六、導航中

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

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

• TBT + 車道線 + 時間路程
• TBT + 車道線 + 時間路程 + 到達時電量 + 退出導航
• TBT + 車道線
• TBT + 車道線 + 時間路程 + 路線概覽 + 退出導航
• TBT + 車道線 + 時間路程

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

七、設置

1）設置中涉及開關的均放左邊

2）在某個任務下，如：導航中，選擇設置，不會跳轉至整頁面，而是直接在當前狀態下彈窗展示，減少了頁面跳轉，且只展示導航相關的設置項。

八、總結

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

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

2. 點擊熱區要大，不要小

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

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

多按鈕并排時，需預留較大的間隔區域，避免因為車身抖動產生誤觸風險！熱區間隔3mm（18.9px）以上。

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

5. 同類信息不要分散，要集中

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

6. 信息展示不要都跳至新頁面，可在當前頁面直接展示

建議頁面少跳轉，可在當前頁面直接展示信息，減少因為不聽的跳轉、返回降低操作效率。

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

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

8. 不同的反饋不要一樣，要有區分度

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

9. 功能說明不要只有文字，要圖文結合

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

10. 不同狀態表現對比不要小，要加大對比

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

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

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

12. 容器樣式大小不要不一，要統一

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

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

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