編輯導讀：在進行車載UI工作前，我們需要了解清楚不同的度量單位，不同的度量單位對尺寸會有影響，根據尺寸進行適配。本文將從三個方面對車載UI的尺寸和適配進行分析介紹，希望對你有幫助。
在談車載UI基準尺寸之前，老生常談的説一下各度量單位：
我們先了解最基本的尺寸了。在設計中我們一般會碰到的度量單位有：dpi、ppi、dp、sp、px、pt，其中px是我們經常使用也最為熟悉的單位。
簡單瞭解一下各自的定義：
- px：像素。圖像分辨率，即屏幕上組成一幅圖或照片的最基本單位。
- pt：點，印刷常用單位。1pt=1/72英寸。
- ppi：每英寸像素數，值越高，屏幕越清晰。
- dpi：每英寸多少點，值越高，圖片越清晰。
- dp：安卓開發用的長度單位。在160ppi的情況下1dp=1px。
- sp：安卓開發用的字體大小單位。
各個單位之間的換算就不再文本中重點闡述了，網上有很多大量的換算文章。這裏只稍微補充一下，安卓端屏幕大小各不相同，根據像素密度，分為幾種規格：
以上，1dp定義為屏幕密度值160ppi時的1px，即在mdpi時，1dp=1px，以mdpi為標準，這些屏幕的密度值比為0.75：1：1.5：2：3；即以xhdpi為標準，1dp=2px。
就目前市場狀況而言，各個車廠車機尺寸粗略判斷。雖然不太全面，至少有一些參看意義：
車機圖片來源於網絡
綜上所述，xhdpi,xxhdpi是主流車機屏幕分辨率。
一、設計稿尺寸根據目前市場主流設備尺寸來看，我們要用1280*720來做車機UI設計稿尺寸。
為什麼會選擇1280*720作為設計稿標準尺寸的原因有三：
原因一：從中間尺寸向上向下適配的時候界面調整的幅度最小，最方便適配。而1280*720正好是常用分辨率的中間數值。
原因二：大屏幕時代應該選用大尺寸設計，依然使用小尺寸會限制設計的設計視角，而且很大程序小尺寸會侷限信息結構的排版佈局，以及內容展示。
原因三：用主流尺寸來做設計稿尺寸，極大的提高了視覺還原和其它機型適配。
所以，我們把基準尺寸設定為1280*720px來設計。sketch裏面可以按照640*360尺寸設計。
二、前端適配方案從市面大多車機系統設計研究表明，70%左右的車機左側導航為常駐導航，25%的微桌面卡片式，5%的是桌面應用圖標。
用户反饋和測試研究也發現，左側欄更靠近駕駛員，更利於操作。事實上，Android Auto 之前一直把快捷按鍵放到屏幕底部，除了增加了司機的操作負擔之外，還壓縮了車載導航可視區域的高度。不過在2017年的 Google I/O 上，谷歌展示的奧迪定製車載導航也把快捷鍵放在了左邊，這也側面印證了這種交互方式的可行性。
產品框架和設計尺寸都已經定好。在研發階段唯一不可缺少的是適配方案，設計稿在不同設備上到底怎樣表現？假設遇到了更寬的設備，是橫向拉寬？還是等比縮放？還是再設計一個截然不同的佈局？這些前提基本確定了該設計稿會如何實現，這樣在寫代碼時就不會出現反覆更改和適配單獨做的情況。
前端的適配方案大致分為四種：按照比例縮放、根據頁面寬度百分比適應、響應式方案以及REM縮放方案。每個方案都有自己的優缺點，可以同時使用多種適配方案，規定規則。
以聽伴車載產品為例，簡單闡述一下前端適配方案：
以高度為基準，等比例縮放尺寸中高度不變的情況下，橫向寬度縮放只需要填充內容。
比如：1280*720設計稿要適配到1824*1200時，高度按比例縮放到1200的尺寸為2133*1200，高度不變，只需要把橫向內容2133壓縮至1824.橫向的佔比按照1824處理。
特定情況下適配導航會出現運營文案少的情況，針對於此可以單獨針對此車機刪減右側的功能入口icon。
其中制定迷你播放器的最低高度90px，如果達到最低高度那就取消播放器，放置成懸浮按鈕。
比如：hdpi基準下800*450，播放器高度為90px，播放器上的文本內容已經顯示已經小於16px了，車主查看的辨識度很弱。所以，在車機高度<450時，播放器消失到左下角變成常駐懸浮按鈕。
先以安卓自有的適配規則適配，再滿足以上兩個條件。
以上需要技術評估方案的可行性，在逐步進行方案的優化。所以，設計師跟研發之間要有成熟的設計規範和相對應的研發規範支撐。
三、需要注意從設計稿尺寸建立和藍湖上傳問題上需要注意：
設計稿建立1280*720，藍湖上傳時一定要按照xhdpi 上傳。
設計稿做的是@2倍圖，上傳藍湖確實按照@1倍圖（mdpi)的通道上傳。導致藍湖上的數值各項都會偏大，在適配的時候就會出現模糊，圖片過大過小的問題。
設計稿輸出階段要及時跟研發溝通適配方案。
如果適配方案雙方達成一致，就可以着手研發，如果存在問題，調整完再進行，不然事倍功半。
設計時要思考界面的延展性和易通性。
規範一定要在項目研發前完成（除非特殊情況），這樣才能在做一個項目之初全盤考慮需要做的事情，規避後續適配問題的發生。
本文由 @Crystal 原創發佈於人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基於CC0協議