導(dǎo)語：本文作者入行做車載HMI已有2年余久，沉淀輸出了一些行業(yè)內(nèi)容的內(nèi)容。HMI行業(yè)還是一片藍(lán)海，很多設(shè)計師都不敢輕易的進入這個新型的行業(yè)，覺得有難度、門檻、視覺要求高。這篇文章先帶你入行，文章以一些HMI基礎(chǔ)知識作為講解，在設(shè)計規(guī)范的內(nèi)容作者會添加很多干貨，結(jié)合實際案例講解。

先給大家打一個預(yù)防針：（規(guī)范是用來打破的，本篇文章只做為參考價值）

設(shè)計規(guī)范包含什么內(nèi)容？

設(shè)計規(guī)范包含：視覺規(guī)范和交互規(guī)范，本章節(jié)先說一下視覺規(guī)范，車載交互內(nèi)容會安排在后續(xù)寫作中…

視覺規(guī)范：車載端設(shè)計和移動端、web端設(shè)計顯示差別還是蠻大的的，最主要的差異就在于布局的不同，接下來我們從文字、顏色、布局、圓角、圖標(biāo) 等角度講解，PS：偶爾還會穿插一些工作心得的內(nèi)容。

一、文字規(guī)范

文字是UI界面設(shè)計中重要的組成元素，對于文字的使用是檢驗設(shè)計師基礎(chǔ)功底的時候，用的好壞會直接影響到用戶在使用產(chǎn)品的過程中的一個體驗，文字的使用從這幾個緯度出發(fā)：字體選擇、字號大小、顏色、字重、行高。

1. 字體選擇

我要做一個良心的博主，讓你們避免侵權(quán)問題，別在傻乎乎的犯字體侵權(quán)的錯誤了。

在做車機系統(tǒng)設(shè)計的時候，需要選定該款車機中文、英文、數(shù)字或多國語言需要用什么字體。

如果在乙方公司呢，客戶會指定給到你相對于的字體包，插播一段小插曲（職場心得）：當(dāng)客戶選定字體后，如果該款字體是付費字體，你得先和客戶確認(rèn)是否得到使用許可，避免后續(xù)官司糾紛）在甲方爸爸工作的同學(xué)一般會遇到兩種情況：

1. 公司已明確字體（請專業(yè)字體設(shè)計師設(shè)計一套）；
2. 用常規(guī)設(shè)計的字體，建議使用（中文字體：思源黑體、英文/數(shù)字：Roboto）如果有做海外項目的，對于Roboto未涵蓋的語言，建議使用Noto Sans字體。Noto Sans源自類似于Roboto的度量標(biāo)準(zhǔn)，旨在實現(xiàn)視覺上和諧的國際化。

這邊肯定會有人問為什么不能用蘋果字體呢？他不是免費字體嘛？

普及一下：首先該車機系統(tǒng)屬于商業(yè)用途，并且未得到許可使用，這就是侵權(quán)，在app store上 發(fā)布的app是可以免費使用的，因為這是在蘋果生態(tài)下使用，所以不屬于侵權(quán)。

2. 字號大小與字階

2.1 字號大小

車機端的字號大小的制定也是要循規(guī)蹈矩，字號肯定要遠(yuǎn)大于移動端和web端，為了確保文字信息的掃描性，結(jié)合了：基于IDX & 同濟 (2020) 百度Apollo中控視覺基礎(chǔ)研究項目，設(shè)置清晰的文字階級參數(shù)，還有谷歌Android Automotive OS 研究，以下是用字的規(guī)范（標(biāo)紅色區(qū)域是他們之間的區(qū)別）：

可參考谷歌：字體大小的遵循4px倍數(shù)大小增量

我們在做項目的時候，規(guī)定的字體大小維持在4px，這樣有助于保持一致性和視覺層次感。

2.3 用字的注意事項

字體大小要控制在20px，這個要謹(jǐn)慎使用，一般都是使用在小標(biāo)簽輔助類的文字上，最小的正文字號為24px。

2.3 設(shè)定文字規(guī)范有兩個好處

1. 文字樣式復(fù)用，不管對于設(shè)計師還是開發(fā)同學(xué)來說，都是極大提高工作效率的一件事情；
2. 對于界面設(shè)計來說，有規(guī)可循，避免設(shè)計時降低的整體的視覺感。

3. 字體用色規(guī)則

1. 文字與背景顏色對比度要遵循WCAG的標(biāo)準(zhǔn)，需要考慮到無障礙設(shè)計需求，因此保持在4.5:1 – 7:1對比度，確保文字清晰易讀；
2. 將注意力需要集中最重要的區(qū)域內(nèi)容；
3. 文本元素之間傳達(dá)視覺層次感。

4. 字體字重

字重是指一種字體的粗細(xì)樣式，下面展示字重的種類：

上實際案列講解：

謹(jǐn)慎使用中等字體粗細(xì) ，盡量別用最粗的字體，這樣會使得頁面感覺差別很大，過度的不是那么自然，沒有了細(xì)膩、輕盈的感覺。

所以在制定字體規(guī)范的時候就盡量將Bold?字重去掉，如果你想通過加粗字體的方式來和下面信息作為區(qū)分，請選擇Medium字重（根據(jù)實際項目需求來定，我的規(guī)范只做參考價值）。

5. 字體行高

為什么要加這一pa，因為這個問題一直有小伙伴問到我 我就一次性解決了，文字模塊需要增加安全距離，這塊比較復(fù)雜不行我后期錄一期視屏講解，下文也有詳細(xì)的講解。

字體的文本的高度一直困擾著設(shè)計師，我該用什么方式去對接開發(fā)？在設(shè)計過程我們是否可以使用文字字號的高度進行對齊方式，而不是使用文字區(qū)域的行高，NO 肯定是不可以的。

微信朋友圈主頁作為案列：

文本的行高肯定是要大于字號的，個人動態(tài)的字號為16px（在@1x設(shè)計稿中）如果是多行文本的時候，微信是手動調(diào)整了文本行高（正常Line：22px ?微信實際Line：20px），當(dāng)行高為20px的時候，需要將文本上移3px 才能使得圖片和文本視覺在一條線上面。

如果按照這個進行開發(fā)的話，開發(fā)小哥需要在CSS屬性過程中注意圖片和文本之間的實際差異，這種左右高度不一致的設(shè)計，會直接導(dǎo)致在開發(fā)布局過程中變得更加繁瑣。

最后的結(jié)論：按照文本的行高來對接開發(fā) 。

普及一下小知識點：車載的段落的行高一般為字號的140%-180%的視覺呈現(xiàn)，提供舒適的閱讀環(huán)境給到用戶（取整數(shù)）下面是一些專業(yè)性的知識了解一下：在設(shè)計字體過程中，字體設(shè)計師一般都會給字體預(yù)留安全距離，讓字體展示更加穩(wěn)定。

我們在做設(shè)計的時候，將字號設(shè)置為30px，但實際字體的空間是需要包含上下部分的安全距離，最終實際高度就變成了42px（Font:pingfang）?穿插一個小干貨：在不同字體下相同字號，行高（Line Height）是不同的，Ant Design的30號字，行高為38px （詳見配圖 ?計算方式）。

二、顏色規(guī)范

1. 使用場景

場景：白天陽光暴曬（陽光強度有很多檔位早、中、下午） 、 梅雨季節(jié)陰雨連天 、夜晚模式、地下隧道等。

駕駛汽車在室外不確定因素會比較的多，光線強度的干擾尤其重要，照明會根據(jù)一天中的時間、天氣、窗戶的色調(diào)等等而有很大不同。當(dāng)你設(shè)計的車載應(yīng)用程序在現(xiàn)實世界中使用時，在設(shè)計時在計算機上看到的顏色并不總是相同。

考慮顏色亮度如何影響駕駛條件，以及低對比度的顏色在陽光直射下如何被洗掉。始終在多種光照條件下預(yù)覽您的應(yīng)用，以查看顏色的顯示方式。如有必要，請進行調(diào)整以在大多數(shù)用例中提供最佳的觀看體驗。

最初車機廠商系統(tǒng)大多數(shù)都是偏愛深色背景，具有代表性的兩家系統(tǒng)谷歌的 Android Auto 系統(tǒng)和蘋果 Carplay 系統(tǒng)，我在做項目最初也是沿用了深色系。

2. 色彩中的“TF BOY”組合

我想用一句蘋果的官方話說：“配色可以提供交互性，提供視覺連貫性，并且對界面賦予生命力?！边@句話總結(jié)的真的非常到位。

集中注意力認(rèn)真聽，重點來了！UI設(shè)計中顏色的使用法則，在一個頁面設(shè)計中需要講究 60-30-10法則， 在60％+30％+10％的比例下創(chuàng)造一種平衡感，是為了視角能夠從一個焦點舒適的過渡到下一個點，避免給駕駛中的我們產(chǎn)生視覺落差很大的感覺。

一個項目車載系統(tǒng)的色彩規(guī)范，包括了品牌色、語義色、中性色。

1）品牌色

又稱為“強調(diào)色”，通常一個車載系統(tǒng)只有一個品牌色，也是出現(xiàn)頻率較高的一種顏色，強調(diào)色一般使用場景為：tab的切換選中，按鈕開啟狀態(tài)、音樂在播放中的音符小動畫等等（拿我練習(xí)稿講解）。

2）語義色

語義色需要在UI界面中承載這具有準(zhǔn)確的信息傳達(dá)，在復(fù)雜的場景里顏色的傾向性應(yīng)十分明顯，減少用戶的理解成本和理解時間，給出行體驗者帶來良好的駕駛體驗。

根據(jù)交通標(biāo)志的定義，紅色表示禁止、停止、危險，那么用戶需要在第一時間識別出這種信息，黃色為警示或不良結(jié)果等，綠色則代表通行、成功，上訴說的顏色為狀態(tài)色。下面要講一下功能色：鏈接色大家第一時間肯定想到的是藍(lán)色。

3）中性色

主要用于除文字外，還被運用到背景色、分割線、置灰填充、邊框、等場景中（注：根據(jù)背景色的變化，系統(tǒng)其余顏色也隨之而變，這是兩套用色規(guī)范切換）。

3. 如何制作HMI色彩規(guī)范？

盡量使用較少的顏色，顏色飽和度不要過高，避免對駕駛的視覺干擾，吸引駕駛者的注意力，讓老司機翻了車。

避免讓交互性元素和非交互性元素使用相同的配色（如果交互式和非交互式元素具有相同的顏色，則很難知道在何處點擊）。

保持色彩一致性（請勿使用不同的顏色來任意，區(qū)分單個屏幕中的重復(fù)組件。當(dāng)顏色不能增加價值時，請謹(jǐn)慎使用）。

建立視覺層次（通過不透明度值或者是同一色系，但不要通過將過多的不透明度或?qū)Ρ榷戎祽?yīng)用于太多元素來過度使用它們）。

盡量使用深色背景，這是市面上很多車廠的選擇（不過蔚來、特斯拉、小鵬、carplay都相繼推出了白色版本，來適配白天，我們項目中后期也加入白天模式，經(jīng)過了路測在陽光很刺眼情況下，黑色會反光，無法看清顯示屏幕內(nèi)容）最終在實際各種照明條件下，對應(yīng)用配色方案進行測試。

車載UI系統(tǒng)中使用足夠色彩對比度，上訴在使用場景中有所提到。

繼續(xù)講干貨：在后續(xù)文章安排里我會單獨拿出WCAG從感知，可操作性，易于理解和穩(wěn)定性去詳細(xì)講解，這次先挑重點說。

WCAG全稱是Web Content Accessibility Guidlines（網(wǎng)頁內(nèi)容無障礙指南）它們是一組是網(wǎng)頁內(nèi)容更容易訪問的建議，主要針對殘疾人，一共分為三個級別?A（最低）、AA、AAA（最高）。

講個概念：兩個白色的對比度是?1:1?, 白色（#FFFFFF）與黑色（#000000）的對比度為?21:1。

做顏色對比的網(wǎng)站鏈接?https://next.rsuitejs.com/en/tools/palette，要滿足 AAA 級準(zhǔn)則，文本視覺呈現(xiàn)及文本圖像至少要有?7:1?的對比度，針對大號文本以及大文本圖像至少有?4.5:1?的對比度。

總結(jié)：

對于顏色運用的細(xì)節(jié)，是證明了一位設(shè)計師的深度、且具備耐久力。

上訴全部闡述對于顏色的規(guī)則不適用全部的設(shè)計方案，還是具體項目具體分析，用戶人群不同，運用場景也不一致，比如駕駛者和后排人的屏幕設(shè)計內(nèi)容肯定會有差別。

還有一個點在設(shè)計需要閱讀內(nèi)容頁面，例如：微信發(fā)來的消息、設(shè)置中文本，最好能夠達(dá)到AAA標(biāo)準(zhǔn)。

作者：設(shè)計界的影帝

原文鏈接：https://www.zcool.com.cn/article/ZMTIyNjAxMg==.html

本文由@設(shè)計界的影帝 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議