2021-7-12 資深UI設計者
入行做車載 HMI 已有 2 年余久，也該沉淀輸出一些行業內容，HMI 行業還是一片藍海，很多設計師都不敢輕易的進入這個新型的行業，覺得有難度、門檻、視覺要求高、這篇文章先帶你入行，文章還是以一些 HMI 基礎知識作為講解，在設計規范方面的內容，我會添加很多干貨結合實際案例講解。
先給大家打一個預防針（規范是用來打破的，本篇文章只做為參考價值）
1. 設計規范包含什么內容
設計規范包含視覺規范和交互規范，本章節先說一下視覺規范，車載交互內容會安排在后續寫作中…
2. 視覺規范：
車載端設計和移動端、web 端設計顯示差別還是蠻大的，最主要的差異就在于布局的不同，接下來我們從文字、顏色、布局、圓角、圖標等角度講解，PS：偶爾還會穿插一些工作心得的內容。
文字是 UI 界面設計中重要的組成元素，對于文字的使用是檢驗設計師基礎功底的時候，用得好壞會直接影響到用戶在使用產品的過程中的一個體驗，文字的使用從這幾個緯度出發：字體選擇、字號大小、顏色、字重、行高.
（我要做一個良心的博主，讓你們避免侵權問題，別再傻乎乎的犯字體侵權的錯誤了）
在做車機系統設計的時候，需要選定該款車機中文、英文、數字或多國語言需要用什么字體。如果在乙方公司呢，客戶會指定給到你字體包，插播一段小插曲（職場心得：當客戶選定字體后，如果該款字體是付費字體，你得先和客戶確認是否得到使用許可，避免后續官司糾紛）在甲方爸爸工作的同學一般會遇到兩種情況：
這邊肯定會有人問為什么不能用蘋果字體呢？它不是免費字體嘛？
普及一下：首先該車機系統屬于商業用途，未得到許可使用，這就是侵權，在 app store 上 發布的 app 是可以免費使用的，因為這是在蘋果生態下使用，所以不屬于侵權。
車機端的字號大小的制定也是要循規蹈矩
字號肯定要遠大于移動端和 web 端，為了確保文字信息的掃描性，結合了：基于 IDX & 同濟 (2020) 百度 Apollo 中控視覺基礎研究項目，設置清晰的文字階級參數，還有谷歌 Android Automotive OS 研究，以下是用字的規范（標紅色區域是他們之間的區別）
可參考谷歌：字體大小的遵循 4px 倍數大小增量
我們在做項目的時候，規定的字體大小維持在 4px，這樣有助于保持一致性和視覺層次感
用字的注意事項：
字體大小控制在 20px，這個要謹慎使用，一般都是使用在小標簽輔助類的文字上，最小的正文字號為 24px
設定文字規范有兩個好處：
字重是指一種字體的粗細樣式，下面展示字重的種類：
上實際案列講解：
謹慎使用中等字體粗細 ，盡量別用最粗的字體，這樣會使得頁面感覺差別很大，過度的不是那么自然，沒有了細膩、輕盈的感覺。所以在制定字體規范的時候就盡量將 Bold 字重去掉，如果你想通過加粗字體的方式來和下面信息作為區分，請選擇 Medium 字重（根據實際項目需求來定，我的規范只做參考價值）
為什么要加這一 pa，因為這個問題一直有小伙伴問到我，我就一次性解決了，文字模塊需要增加安全距離，這塊比較復雜。不行我后期錄一期視頻講解，下文也有詳細的講解。
字體文本的高度一直困擾著設計師，我該用什么方式去對接開發？在設計過程我們是否可以使用文字字號的高度進行對齊方式，而不是使用文字區域的行高？NO 肯定是不可以的。
微信朋友圈主頁作為案列：
文本的行高肯定是要大于字號的，個人動態的字號為 16px（在@1x 設計稿中）如果是多行文本的時候，微信是手動調整了文本行高（正常 Line：22px 微信實際 Line：20px），當行高為 20px 的時候，需要將文本上移 3px 才能使得圖片和文本視覺在一條線上面，如果按照這個進行開發的話，開發小哥需要在 CSS 屬性過程中注意圖片和文本之間的實際差異，這種左右高度不一致的設計，會直接導致在開發布局過程中變得更加繁瑣。
最后的結論：按照文本的行高來對接開發
普及一下小知識點：車載段落的行高一般為字號的 140%-180%的視覺呈現，提供舒適的閱讀環境給到用戶（取整數）
下面是一些專業性的知識 了解一下：
在設計字體過程中，字體設計師一般都會給字體預留安全距離，讓字體展示更加穩定。
我們在做設計的時候，將字號設置為 30px，但實際字體的空間是需要包含上下部分的安全距離，最終實際高度就變成了 42px（Font:pingfang） 穿插一個小干貨：在不同字體下相同字號，行高（Line height1）是不同的，Ant Design 的 30 號字，行高為 38px （詳見配圖計算方式）
場景：白天陽光暴曬（陽光強度有很多檔位早、中、下午） 、 梅雨季節陰雨連天 、夜晚模式、地下隧道等。
駕駛汽車在室外不確定因素會比較的多，光線強度的干擾尤其重要，照明會根據一天中的時間，天氣，窗戶的色調等等而有很大不同。當你設計的車載應用程序在現實世界中使用時，設計時在計算機上看到的顏色并不總是相同?？紤]顏色亮度如何影響駕駛條件，以及低對比度的顏色在陽光直射下如何被洗掉。始終在多種光照條件下預覽您的應用以查看顏色的顯示方式。如有必要，請進行調整以便在大多數案例中提供最佳的觀看體驗。
最初車機廠商系統大多數都是偏愛深色背景，具有代表性的兩家系統谷歌的 Android Auto 系統和蘋果 Carplay 系統，我在做項目最初也是沿用了深色系。
我想用一句蘋果的官方話說：“配色可以提供交互性，提供視覺連貫性，并且對界面賦予生命力?！边@句話總結得真的非常到位。集中注意力認真聽，重點來了，UI設計中顏色的使用法則，在一個頁面設計中需要講究 60-30-10法則， 在60％+30％+10％的比例下創造一種平衡感，是為了視角能夠從一個焦點舒適地過渡到下一個點，避免給駕駛中的我們產生視覺落差很大的感覺。
一個項目車載系統的色彩規范，包括了品牌色、語義色、中性色。
品牌色：又稱為 “強調色“ ，通常一個車載系統只有一個品牌色，也是出現頻率較高的一種顏色，強調色一般使用場景為：tab 的切換選中，按鈕開啟狀態、音樂在播放中的音符小動畫等等 （拿我練習稿講解）
語義色：語義色需要在 UI 界面中承載著具有準確的信息傳達，在復雜場景里顏色的傾向性應十分明顯，減少用戶的理解成本和理解時間，給出行體驗者帶來良好的駕駛體驗。
根據交通標志的定義，紅色表示禁止、停止、危險，那么用戶需要在第一時間識別出這種信息，黃色為警示或不良結果等，綠色則代表通行、成功，上訴說的顏色為狀態色。下面要講一下功能色：說到鏈接色，大家第一時間肯定想到的是藍色。
中性色：主要用于除文字外，還被運用到背景色、分割線、置灰填充、邊框、等場景中 （注：根據背景色的變化，系統其余顏色也隨之而變，這是兩套用色規范切換）。
盡量使用較少的顏色，顏色飽和度不要過高，避免對駕駛的視覺干擾，吸引駕駛者的注意力，讓老司機翻了車。
避免讓交互性元素和非交互性元素使用相同的配色（如果交互式和非交互式元素具有相同的顏色，則很難知道在何處點擊）。
保持色彩一致性（請勿使用不同的顏色來任意區分單個屏幕中的重復組件。當顏色不能增加價值時，請謹慎使用）。
建立視覺層次（通過不透明度值或者是同一色系，但不要過多的使用不透明度或對比度）。
盡量使用深色背景，這是市面上很多車廠的選擇（不過蔚來、特斯拉、小鵬、carplay 都相繼推出了白色版本，來適配白天，我們項目中后期也加入白天模式，經過路測在陽光很刺眼情況下，黑色會反光，無法看清顯示屏幕內容），最終在實際各種照明條件下，對應用配色方案進行測試。
車載 UI 系統中使用足夠色彩對比度，上述在使用場景中有所提到。
繼續講干貨
(在后續文章安排里我會單獨拿出 WCAG 從感知，可操作性，易于理解和穩定性去詳細講解，這次先挑重點說)
WCAG 全稱是 Web Content Accessibility Guidlines（網頁內容無障礙指南）它們是一組是網頁內容更容易訪問的建議，主要針對殘疾人。一共分為三個級別 A（最低）、AA、AAA（最高）
講個概念：兩個白色的對比度是 1:1 , 白色（#FFFFFF）與黑色（#000000）的對比度為 21:1
做顏色對比的網站鏈接，搭梯子訪問：https://next.rsuitejs.com/en/tools/palette
要滿足 AAA 級準則，文本視覺呈現及文本圖像至少要有 7:1 的對比度，針對大號文本以及大文本圖像至少有 4.5:1 的對比度
總結：
對于顏色運用的細節，是證明了一位設計師的深度、且具備耐久力。上述內容對于顏色的規則不適用全部的設計方案，還是具體項目具體分析，用戶人群不同，運用場景也不一致，比如駕駛者和后排人的屏幕設計內容肯定會有差別。還有一個點在設計需要閱讀內容頁面，例如：微信發來的消息、設置中文本，最好能夠達到 AAA 標準。
HMI 的設計和其余終端設計，最大的差異就在于布局，布局是整個頁面設計的框架，也是最重要的內容之一，在講該模塊內容，我會從實際項目案例出發。開始制作車載 UI 系統，需要和汽車廠商確認車載 UI 可在屏幕中，設計的尺寸區域（注：其中“屏幕”是指應用正常工作空間而不是到邊緣的全部空間，有的廠商把固定按鍵也鑲嵌這塊區域中）。
我們先要了解一下熱門和主流車機分辨率。眾所周知我們車機上的屏幕尺寸和分辨率種類可以說是種類繁多，在設計過程中設計師主要還是關注屏幕的分辨率是多少？（ 需要我們設計的屏幕為儀表盤、中控、有的車載還包含有副駕駛和后排娛樂屏幕 ）
特斯拉（Tesla）
Model3 1920*1200 15 英寸（底部控件的尺寸為 120 像素是固定 ）Model S/X 用豎屏設計 分辨率 1200*1920
蔚來
ES8 10.4 英寸 分辨率 1600*1200 / ES6 11.3 英寸 分辨率 1600*1400
理想 ONE
比較特殊，它擁有 4 塊屏幕，儀表盤 12.3 英寸 1920×720 / 中控屏 16.2 英寸 2608×720
副駕駛娛樂屏 12.3 英寸 1920×720 / 再外加功能控制屏 10.1 英寸的 1280×720
小鵬
G3 豎屏幕 15.6 1920×1080 P7 控屏，在目前汽車產品中屬于分辨率較高的梯隊 2400×1200 精度超過 2K（普及一下 2K 分辨率標準為 2048×1080 像素）
接下來給大家觀看蘋果的 CarPlay 系統分辨率和谷歌車載系統
CarPlay 系統分辨率：800 * 480、1280 * 720、960 * 540、1920 * 720
相信大家已經找出規律了：在設計橫屏的時候高度基本都為 720px，其余橫屏幕按照比列縮小。
這塊內容非常重要，以至于關乎到后面整個系統的布局方式，蘋果的 CarPlay、谷歌 Android Auto、國內的百度 carLife+等都有自己的車載系統，如有的車企屏幕分辨率不一致，就無法適配成功，會出現拉伸等現象，除非通過定制化服務重新按照廠商的尺寸去重新搭建一套。我們項目中涉及到的屏幕和 CarPlay 尺寸大致很像，但布局方面我們有自己的想法，后面在自適應布局中會提到。
制定一組間距值，用于布局中元素和組件之間的固定縱向和橫向的間距，參考規格布局 8 像素點網格上構建，這意味著規范中的 UI 組件和元素之間相隔 8px 的倍數
谷歌 Android Auto 間距規范一共制定了常用的九種數值，P0 – P8
注意事項：提供 4px、12px 間距大小，是為了對齊較小的元素之間的距離，這兩個數值謹慎使用，在大屏幕車載系統內，也有很多間距需要大于 96px，因此在對于這些數值制定規范的要求就是 8px 的倍數即可使用。
說到這邊肯定會有人有疑問，我們在做規范時能不能將間距不設定成 8 的倍數，4、5、6……倍數是否可行呢，當然是可以的，“規矩是死的，人是活的“。只要是按照倍數疊加完全都 OK，如果選定一種倍數，就不能加入其他倍數，如果頁面出現多種間距會使得頁面沒有節奏感，打破了親密性原則。
這部分對于想接觸車載設計同學非常友好。講一下通用的布局，具體交互設計等待我后續更新文章，這次就簡單按照 1920×720 分辨率每個模塊我都會稍微帶一下。
講完前面每個模塊的大致布局，接下來我們來探討一下自適應布局，這個真的非常非常！！！超級重要，工作后期經常會遇到這個問題，甲方爸爸后續有增加屏幕分辨率的需求。我們前期在布局上花費的時間相對較多（但后期維護起來可以減少你很多工作量，前期需要你規劃好基礎框架）
下面拿實際做過的案列來陳述：拋出一個問題，我們如何將分辨率1920×720頁面的內容轉變成1280×720 呢？
（有同學說，直接丟開發然后他們寫自適應布局）導航相關頁面需要調用地圖的接口，這個開發是可以直接去寫自適應，但其余元素還是需設計師重新來排版。
（還有人說直接縮放比列，調整頁面布局）這個方案在比例相差很大的時候是行不通的，但同比例或者很相近是完全 OK 的，正巧我們項目上有 800×480 分辨率，和 1280×720 極其相似。
（還有人表示不服：折疊某塊區域內容，將該區域內容做成 icon 點擊后彈出來）該方法可以使用在部分內容。
有的模塊內容沒法降低層級，這個辦法就不行，遇到這類的情況我們就直接將這塊內容適配做成 1280×720 尺寸。
如果前兩種辦法都行不通，有的內容就得需要做彈性布局控件了，例如設置頁面，當中間空間很大的時候，放置到短屏中可以根據彈性布局拉伸該控件長度，拉至適配該屏幕的設計，如有需要請留言，后續彈性布局我會寫一篇文章詳細說明使用。
我們項目多種分辨率進行轉化基本都按照這些方案推進下去的，來一句雞湯：辦法總比困難多，真的只要用心做事情，沒有什么困難能難倒你的，還有不要做理想主義者，要做實踐者，實踐才會見真理。
不好意思，一下子說多了沒收住 ，進入正題。謹慎重新改變布局 ： 第一是增加開發工作量，其次就是增加用戶的學習成本，當然，屏幕是豎屏的時候則就需要重新布局，因為橫寬比例變成了相反數值。（旋轉屏幕大家可以去看看比亞迪的唐、漢車型）
上述的內容都是我們一步一個坑踩過來的，“且看且珍惜”。
更圓的角和全圓角的使用
對主要動作和組件使用更圓的角（更大的角半徑 or 全圓角），是需要重點突出的，圓形對大多數直線形狀具有更大的視覺影響，如果在頁面有足夠空間的前提下，全圓角形式會和其他按鈕做出反差，鼓勵用戶去點擊。比如：全局消息通知按鈕、電話模塊中接聽、掛斷、下拉負一屏中的按鈕等 （下方是練習稿案列）
較低的圓角和直角的使用
對于不需要 or 低強調的元素，使用較低角半徑 or 0px 圓角=直角，例如：工具欄或列表可以用較小的圓角，專輯封面不需要再強調，所以直接將它降到 0px，我們項目音樂專輯大封面就用的直角，具體問題需要具體去分析，像音樂控件的外輪廓就是帶圓角的，因此專輯封面在容器里面就必須帶有圓角，不然設計風格則就不統一。
還有一個模塊，就是在音樂分類的情況下會有很多專輯封面，我們對比一下兩種方案：有圓角 or 無圓角，兩張圖對比下來，帶有圓角的專輯封面有更明顯的邊緣產生了視覺差的感覺，而直角的專輯看起來就沒有，不易突出，因此不太可能引起我們的注意。所以在網格布局中，圓角的效果更好
谷歌對于圓角的定義
在設定圓角規則時，需要注意一個事項：大小種類不宜太多，不然顯得雜亂無章。
注意：即使應用布局是在 8dp 網格上構建的，但仍會提供 4dp 的半徑大小，以幫助在較小的組件中形成元素。該值應謹慎使用，因為它不是 8dp 的倍數
總結：圓角還是直角沒有對錯之分，合適的才是最好的。
應用程序圖標
現在 HMI 的設計趨勢已經去掉了應用程序圖標，取而代之的是卡片化的設計方案，簡單說一下卡片式設計有兩大好處，第一，把學習成本降至最低，第二，增大的接觸面積讓駕駛時誤觸率也降到最低，給到用戶最直觀的體驗就是簡單易用。不過有的汽車廠商對這一塊還是有需求，我們就稍微再提一下。
我自己也負責過有應用程序圖標的項目，在 1920×720 中為 160px 分辨率和蘋果@3x 分辨率相同 ；在相對較小的屏幕中應該按照比例同比縮小，如同 800×480 分辨率中首頁中的應用程序圖標為 80px，這是如何計算的呢？
項目中還有一款車型的屏幕分辨率為 1280×720，由于屏幕變窄，應用程序圖標需要縮小到 120px，高度 720 and 480 有一個共同 240 的倍數，所以最終小屏幕的應用程序圖標為 80px，圓角大小也隨之而變：R：24/18/12。其余分辨率按照實際情況使用。
系統性圖標（后續 HMI 組件庫搭建文章中我會詳細的講解）
該系統提供了許多小圖標（代表常見任務和內容類型），供導航欄和選項卡欄中使用。最好盡可能使用這些內置圖標，因為它們是人們熟悉的。
大廠是如何制定圖標尺寸
很多博主在講到圖標尺寸的時候都是一筆帶過，拿著別人得出的結論，卻沒說怎么計算出來，對于車載來說，前期發布這些研究報告的內容極少，所以我對圖標的計算想找到了計算方式，如果大家想知道怎么換算的話可以查看：https://zhuanlan.zhihu.com/p/158099749
根據百度 IDX 駕駛體驗中心，在對于《車載 HMI 界面效果客觀指標實驗報告》在基于視距為 50cm，計算出最小圖標為 9mm 推薦使用 12mm。視覺上的 1cm 的實際像素是多少呢？這就是一個錯誤的想法，上面文章中也有提到屏幕分辨率無法與物理長度單位進行轉換，（實際項目工作經驗告訴我，因為相同的屏幕大小但是分辨率不一樣，所以得出的結果不能共用）
PPI 的計算
我就大概講一下計算原理，這個根據屏幕的分辨率，我做過一款相同屏幕尺寸的車機，都是 8 寸屏幕，但分辨率一個為 1280×720，另外一個則為 800×480，每一個格子為一個像素。
最小圖標尺寸計算
接下來找一下分辨率 1280×720 最大公約數為 80，最后得出結論屏幕的比列 16:9
兩邊比例的平方相加 = 屏幕英寸的平方
根據勾股定理 （16X）^2 +（9X）^2=8×8 最后 x 算出的結果為 0.4357
16:9 的 8 英寸屏幕 長度（單位：英寸）=0.4357×16 =6.9712 寬 =0.4357×9=3.9213
國際計算單位 1 英寸 = 2.54cm
所得出屏幕的長度（單位：厘米）=6.9712×2.54≈17.7cm 寬 =3.9213×2.54≈9.96cm
分辨率：1280×720 寬度約等于 10cm 來計算，720/10 = 72px
分辨率：800×480 由于他們屏幕大小一致（英寸）480/10=48px
得出結論：視覺上的 1cm 的實際像素是有所差距的。
按照設計規則：按 4 的倍數來制定，因此最小圖標為 40px（這個結論只是作為推薦使用，在做項目的時候，變數有很多，甲方爸爸就喜歡超級大的，你也沒辦法，所以還是按照項目來制定）
為了計算這個我還特地的回顧了高中學習的開根號、初中的最大公約數都搬出來了，幸好當時數學還算是個小學霸，哈哈哈~~~
下面展示一下：
谷歌 Android Auto 圖標大小規范
基礎的圖標：主圖標：44px 次要圖標：36px 第三方圖標：24px
頭像的使用：小頭像：56px 中頭像：76px 大頭像：96px
百度車載生態開放平臺下載了他們組件庫，進行了研究。
基礎為圖標：48px 次要圖標 40px（最小圖標尺寸）
這邊還要說一下，對于大圖標的尺寸設定，會有很多尺寸 icon，后續我還會在輸出關于車載圖標詳細的內容，敬請關注吧。
圖標觸摸區域分為駕駛中使用和靜止中使用
例如說駕駛中需要調節空調的內外循環，原本老車機的硬按鍵替換成了屏幕中的按鈕，原有的硬按鍵已經通過長期使用有了記憶性，有觸感并且操作硬按鍵大小適中，所以在操作中減少了操作時間，降低了危險系數。新能源汽車在設計的時候可以通過增大觸摸區域降低誤操作、無法點擊使得駕駛員視野長時間遠離方向盤的情況，研究表明視野超過 2 秒以上停留，就會存在危險。
靜止使用例如：在設置頁面中調節車輛設置中的屬性，巡航模式、電動尾門打開百分比的調節等等。
谷歌制定觸摸區域的規則
最小觸摸目標尺寸為 76 x 76px，需要在單個圖標設計基礎上再額外增加一塊觸摸區域，易于駕駛中可操作，在靜止使用的話，我們可以遵循蘋果設計規范中最小手指觸摸的區域為 44x44px
這是我根據實際項目并在車內進行路測（路測：駕駛中測試）中得出結論。
還有一種特殊情況：文字+圖標組合點擊區域，在 icon 很小的時候也可以考慮將文字也組合一起，增大點擊區域
之前經常有小伙伴問我，落地項目的 icon 切圖命名規范怎么制作？就拿我之前做的風格稿首頁來說，首頁音樂卡片中的“下一首”的圖標如何命名。
首先分析這個 icon 在哪個頁面當中 or 用在哪里，接下來就是他的屬性是什么 icon 還是 button，其次就是這個 icon 代表什么，這個 icon 的大小，因為在一個系統里面會有重復功能 icon，所以是有必要增加大?。ㄟ@塊內容是選填項），最后在增加這個 icon 是處于什么狀態下，狀態分為：禁用、常態、按下、選中
最后呈現：首頁_音樂_下一首_常態 ，對接開發應該是翻譯成英文。
有時候英文命名也可以用縮寫比如設置：setting 你直接可以寫成 set icon ic button bt（如果全局使用就使用 All）
聽完小米的發布會，是我觸動較深的一次，視頻彈幕中滿屏刷著““干翻特斯拉”，小米造車一誕生就背負著全民的期望，創始人雷軍已經功成名就，但還是愿意押上全部的聲譽和未來十年的人生，全力 all in，我心中只有敬意，祝小米早日造車成功，“干翻特斯拉”，我們設計師也愿意和這個行業賭一次，行業深耕下去，砥礪前行。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：設計界的影帝
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務