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