編輯導(dǎo)語：隨著現(xiàn)代技術(shù)的更新和進步，車載設(shè)計也在不斷推陳出新，而汽車HMI設(shè)計開發(fā)時是整車開發(fā)的一環(huán)。本篇文章中作者首先從整車開發(fā)流程引入，詳細的介紹了設(shè)計的分析、原則、資源、及適配，干貨滿滿，感興趣的小伙伴們快來看看吧！

車企現(xiàn)在對智能系統(tǒng)的設(shè)計越來越重視，因為只有把軟件實力提升才可以更好地掌握話語權(quán)。汽車HMI設(shè)計開發(fā)時是整車開發(fā)的一環(huán)，需要按照整車開發(fā)的流程進行，這樣在造車的各個階段才能有效地管控和輸出設(shè)計產(chǎn)物，由于HMI設(shè)計涉及的相關(guān)的國標，只有按照既定的流程才能設(shè)計出符合車機環(huán)境的系統(tǒng)界面。

一、整車開發(fā)流程

現(xiàn)在汽車的整體設(shè)計工作流程，一輛汽車的生產(chǎn)需要經(jīng)過V型的開發(fā)流程（從目標的制定到目標的驗證的過程）。

配圖來源于MOMOUX

大體可以分為五個階段：

• 產(chǎn)品戰(zhàn)略階段
• 概念設(shè)計階段
• 設(shè)計開發(fā)階段
• 工程車階段
• 生產(chǎn)階段

1. HMI設(shè)計開發(fā)四大流程

然后我們來說一下HMI設(shè)計流程，HMI和C端B端的的設(shè)計大部分一樣，也是需要與汽車工程師、市場人員、設(shè)計調(diào)研人員合作。

不同的是HMI的設(shè)計更多會反復(fù)測試保證安全性優(yōu)先的情況下，滿足功能需求，整個HMI設(shè)計過程中及設(shè)計和實現(xiàn)是機密結(jié)合的。

• 前期分析（需求分析+競品分析）
• 交互原型（信息架構(gòu)+概念交互原型提案）
• 設(shè)計交付（高保真交互DEMO+評審+ KEY設(shè)計規(guī)范+ 交付視覺設(shè)計+信息可視化優(yōu)化+整體HMI完成+ HMI整套DEMO+ 評審+ 標注切圖）
• 開發(fā)走查（開發(fā)對接+ 內(nèi)部走查+可用性測試）
• 迭代優(yōu)化（專業(yè)評測度量報告+反饋修改）

1） 需求分析，競品調(diào)研評估

在整車開發(fā)項目中，HMI體驗設(shè)計應(yīng)該從立項時開始介入，主機廠在通過市場調(diào)研和用戶需求分析等調(diào)研方法，分析出市場上存在的潛在需求后，從平臺化角度評估需求的導(dǎo)入和定型驗收，和樣車研發(fā)同步進行。

在得到用戶需求分析和市場調(diào)研的數(shù)據(jù)后，將這些數(shù)據(jù)轉(zhuǎn)化成為設(shè)計目標，得到初步的概念設(shè)計，之后在功能定義和產(chǎn)品開發(fā)達成一致之后，即項目目標正式確認，可開始進行細節(jié)和具體流程的設(shè)計。

2）功能落地，交互原型

UX策略出來后，也在這一步確立交互設(shè)計的框架。

一個合格的HMI設(shè)計師，不僅需要對當下科技發(fā)展有著敏銳的洞察力，同樣需要了解一些技術(shù)通識，像Web設(shè)計師需要了解些網(wǎng)頁代碼常識一樣，都是為了更好的幫助設(shè)計落地。

汽車不同于移動互聯(lián)網(wǎng)產(chǎn)品，它的約束性或者說是局限性更強，對于HMI設(shè)計師而言還是有一定門檻的。例如：要了解相應(yīng)的法規(guī)要求，要懂一些開發(fā)邏輯和實現(xiàn)方式，要明白功能上限等等。

也要懂一些實現(xiàn)方式來講，舉個例子：大型停車場的尋車問題該如何解決？在沒有網(wǎng)絡(luò)不能使用手機導(dǎo)航的情況下該借助什么技術(shù)來解決？使用藍牙？使用手機指南針做關(guān)聯(lián)？使用圖像分析？使用遙控照明？等等一切的猜測，都是建立在一些技術(shù)常識背景之上的。

當定義了某個需求功能轉(zhuǎn)化后，既了解功能背后的需求又知曉實現(xiàn)方式，會更有效的讓后面的信息流程與交互文檔行云流水。

3）視覺優(yōu)化，設(shè)計交付

原型交互設(shè)計階段完成之后，之后便進入視覺概念設(shè)計階段，保證概念設(shè)計方案會以轉(zhuǎn)專業(yè)性結(jié)果呈現(xiàn)。會制作設(shè)計規(guī)范，然后輸出關(guān)鍵頁面。

在HMI設(shè)計中，如何進行差異化設(shè)計也是讓我頭疼的問題。

近幾年互聯(lián)網(wǎng)造車大軍突然闖進了之前還算比較祥和的汽車市場，行業(yè)的待顛覆性質(zhì)或趨勢以及激烈的競爭，使得整個行業(yè)的產(chǎn)品品質(zhì)逐步提升，消費者的選擇也變得多了起來。

正因如此，尋找真正適合自己品牌的差異化，也是在行業(yè)內(nèi)眾多車企脫穎而出的關(guān)鍵點。

就目前自主品牌市場來看，用以“逃避思考”的降價手段已經(jīng)不再那么好用，這也不是解決同質(zhì)化的長久之計。

主動出擊形成差異化最經(jīng)常的做法就是，尋找行業(yè)中普遍賴以生存的優(yōu)勢。而你選擇放棄這個優(yōu)勢，從而使競爭對手難以跟進或者不在意你的策略，進而形成差異化。

關(guān)鍵在于組織體系龐大的車企，是否有勇氣為了建立新的競爭優(yōu)勢而摒棄已經(jīng)建立起來的一切。

之所以互聯(lián)網(wǎng)造車來勢洶洶，也正是因為它們看到了趨勢和市場需求，敢于大膽做一些傳統(tǒng)車企不太敢輕易嘗試的事。

4）開發(fā)評估，可用性測試

設(shè)計接近尾聲，乙方設(shè)計團隊也會做自我設(shè)計評測報告，對設(shè)計進一步改良，制定評測規(guī)則后，以理性打分方式，測評各個體驗?zāi)K的分數(shù)，然后逐一優(yōu)化。

整個項目過程會經(jīng)歷概念設(shè)計、設(shè)計團隊支持和交互效果驗收。

在這個環(huán)節(jié)中，會制作交互demo和搭建虛擬演示臺架，并且在此增加一輪設(shè)計走查，模擬設(shè)計執(zhí)行落地后的測試工作。

這也是占用人力最多的深入交付階段，往下推進會比較順利。

完成整套HMI設(shè)計時，我們會在汽車模擬臺架測試交互效果。通過臺架仿真測試，或者提供特定評價用車和培訓(xùn)用車以及進一步的分析和質(zhì)保路試。

進行體驗驗證之后是系統(tǒng)開發(fā)、硬件開發(fā)、軟件開發(fā)、整車測試與評價。即可開始生產(chǎn)批量試制（PVS）。

5）迭代優(yōu)化，修改反饋

最后是工程開發(fā)驗證階段，跟進實車功能測評，生產(chǎn)批量試制流程凍結(jié)后，會進行批量生產(chǎn)前總演習(xí)（OS），全面驗證批產(chǎn)。所有流程環(huán)節(jié)都驗證成功凍結(jié)后，產(chǎn)品則開始投入批量生產(chǎn)（SOP）。

即使上市后的產(chǎn)品是基于前面精心規(guī)劃、具體分析、不斷調(diào)整后的結(jié)晶，但必須要承認，它仍然不是完美的。

因為用戶總會有新的需求出現(xiàn)，并且真實的用戶需求是在用戶使用產(chǎn)品中被不斷發(fā)現(xiàn)和滿足的，所以迭代對于汽車廠商或者HMI設(shè)計師來說，是提升用戶體驗的最佳階段。

2. 汽車HMI設(shè)計人員布置

二、設(shè)計分析

產(chǎn)品設(shè)計保證充分的搜集、整理、歸納、分析、總結(jié)，產(chǎn)品才可能具備持續(xù)性的競爭力。

所以，積極跟蹤市場反饋，及時整理分析、迭代是不斷提升用戶體驗的必經(jīng)之路。

隨著造車新勢力而且用戶研究與設(shè)計流程整合的方式能夠幫助汽車制造商在競爭激烈的汽車行業(yè)中先人一步博得用戶喜愛。

HMI設(shè)計師這個職業(yè)，最忌諱的就是“我認為”這三個字，所設(shè)計的產(chǎn)品都不知道什么樣的用戶在用，即是再好看，也是沒有靈魂的空殼。借用老舍先生的一句話，那就是：等著瞎貓碰上死耗子。

總而言之，找準目標用戶，透過現(xiàn)象看本質(zhì)。

1. 用戶研究

用戶訪談和數(shù)據(jù)挖掘是兩個了解用戶最常用的方式。

關(guān)于用戶訪談需要小心判斷用戶的真?zhèn)涡枨螅?jīng)過判斷的需求求才是需要耐心挖掘或經(jīng)過分析后的核心需求。

用戶屬性信息，是分析用戶畫像的基礎(chǔ)。比如一款車付款用戶是男性，使用用戶是女性，所以在用戶訪談之前就需要加上甄別條件。

關(guān)于數(shù)據(jù)，首先設(shè)計師自己需要有一個明確的目的，不同的目的獲取結(jié)果的途徑或者方式不一。

不同用戶數(shù)據(jù)可以幫助設(shè)計師做出判斷，但是需要經(jīng)過過濾后的數(shù)據(jù)。數(shù)據(jù)還有一個透析需求（需求來自規(guī)劃、用研、反饋、競品分析、產(chǎn)品數(shù)據(jù)分析等）的重要作用，可以用來幫助尋找痛點、優(yōu)化迭代、辨別需求真?zhèn)蔚鹊取?/p>

2. 競品分析

對于競品可以分為直接競品和間接競品，競品分析的幾個思考維度基本在戰(zhàn)略、行業(yè)競爭、運營角度、技術(shù)層面、用戶角度、盈利模式、產(chǎn)品定位、交互方式、信息架構(gòu)、功能這幾個層次。

建議設(shè)計師不僅可以從直接競品對比入手，新交互、新設(shè)計也可以從間接競品入手，可能會更多啟發(fā)。

競品分析的方式：

• 展廳體驗
• 車展
• 國內(nèi)外汽車論壇
• 網(wǎng)上汽車設(shè)計

3. 趨勢分析

?????????????????????????????????????????????????????????????????????????????????????????????????????????????汽車HMI設(shè)計是個多元化的學(xué)科，談及趨勢，所涉及到的問題包羅萬象：

• 技術(shù)趨勢
• 功能趨勢
• 系統(tǒng)應(yīng)用趨勢
• 用戶行為趨勢
• 環(huán)境趨勢
• 視覺風格趨勢
• ……

一切前瞻性趨勢的分析都是在定基調(diào)、定方向。?????????????????????????????????????????????????????????????????????????????????????????????????????????????

1）用車場景可能性的問題

車作為用戶生活的第二空間，與汽車之間的粘性遠比我們現(xiàn)在所能想象的要更強。

上下班出勤場景、接送孩子場景、情侶戀愛場景、車內(nèi)聚會場景、車輛出借場景、長途出行場景、自動駕駛場景、共享租賃場景、車外交互場景、智能家居互聯(lián)場景等，都在我們與汽車的粘性范圍之內(nèi)，都需要交互設(shè)計師深度挖掘。

本質(zhì)上通過座艙內(nèi)軟硬件協(xié)調(diào)營造出特定的互動場景模式，增強智能座艙的空間娛樂屬性。

在不同的用車場景下可以滿足用戶的不同需求。以及根據(jù)場景、用戶情緒分析推薦適合的路線和目的地，根據(jù)用戶情緒推薦音樂分類。

當然，想象空間不僅僅是在座艙內(nèi)部, 外部也有很多創(chuàng)意思考。

主要的方法論就是通過結(jié)合視聽觸嗅的感官基礎(chǔ)觸發(fā)，把相應(yīng)用到的功能整合在一起提供完善的一整套座艙體驗設(shè)計。多個應(yīng)用服務(wù)能力結(jié)合完成一個完整的體驗過程。

未來的萬物互聯(lián)肯定是要到來的，是家空間和?空間更多的硬件、信息互聯(lián)互動。

有時候通過?機終端的賬戶或者 APP 達到打通后，讓兩個場景下的更多智能硬件可以互聯(lián)衍?出各種有趣的信息交互。

尤其是自主系統(tǒng)下的生態(tài)的完善，比如做的很好的蘋果生態(tài)，基于兩個空間中智能硬件的互聯(lián)可以衍生出許許多多的新交互場景，讓人們可以更加便利的控制兩個空間的互動。用戶在統(tǒng)一的生態(tài)下操作也更便捷，體驗也更好。

3）多模態(tài)交互的問題

新的交互技術(shù)諸如語音交互、手勢交互和眼動交互等，有效 用戶在駕乘中的用戶體驗。人-車-信息-環(huán)境。

無論是傳統(tǒng)汽車還是無人智能駕駛汽車，都是通過協(xié)調(diào)或優(yōu)化四者之間的關(guān)系，來獲得最優(yōu)的駕駛交互體驗。

就人車關(guān)系而言，智能無人駕駛在不斷弱化人對車的操控性，強化環(huán)境和信息感知處理能力，這是其中的一個轉(zhuǎn)變。

三、設(shè)計原則

車載HMI設(shè)計和普通C端產(chǎn)品不一樣，每款車都有特定的人群定位，比如轎跑型和商務(wù)型的不同車型，在視覺設(shè)計和交互設(shè)計的時候就會有區(qū)別。

所以項目立項時就需要做大量調(diào)研的工作。從多次的需求討論會中可以腦暴出一些想法，并可嘗試多種風格方案，最終得出調(diào)研與評審結(jié)果。

1. 視覺原則

在視覺設(shè)計上我們主要注意一下五個視覺層面。

1）顏色設(shè)計

顏色設(shè)計上以國標為基礎(chǔ)為大前提，設(shè)定符合車載場景的取色類型。

顏色對比度符合，圖文對比大于7：1，背景建議使用深色。

飽和度和明度這兩個因素的值之和盡量小于180，輔助色和表狀態(tài)顏色可參考設(shè)計原則的文章。

圖片來源于百度車機平臺

2）字體

中控與駕駛員的距離處在70cm-85cm之間，用戶在掃一眼的過程中即可準確地看到重點信息。

保證易讀性。界面文字需滿足以下要求：

• 最小可識別文字尺寸：5.4mm
• 字體層級：區(qū)分文本主副層級，字號差距需保持4-6sp
• 需要用戶閱讀和處理的重要段落文字不超過20個字（700字/分鐘，2秒內(nèi)讀完）
• 對于需要用戶關(guān)注的文本信息可通過增加字重的方式突出內(nèi)容

3）ICON

ICON的設(shè)計形式，可更多結(jié)合應(yīng)用的內(nèi)容，應(yīng)注意在內(nèi)容與形式結(jié)合時，視線上要保持一致性，可有助于在一秒的安全時間內(nèi)讓用戶快速瀏覽并判斷信息。

點擊是交互行為中最為常用的動作，為確保用戶點擊操作的易用性和成功率，操作按鈕及熱區(qū)需滿足以下規(guī)則：

• 圖標：最小的圖標尺寸為6.9mm，推薦圖標大小為9.2mm。
• 熱區(qū)：最小10.7mm，推薦熱區(qū)15.3mm以上，熱區(qū)間隔3mm以上。

圖片來源于百度車機平臺

4）內(nèi)容排版

車載以駕駛員的操作為主，功能布局盡量設(shè)計在離手最近的位置，縮短操作距離，盡可能將熱區(qū)放大，展示信息放在右側(cè)。

層級最多不可超過3-4層，所有信息按照使用場景、功能分組展示。

閱讀瀏覽要滿足Z字型和F字型?；炫诺臅r候建議使用一種字體。

圖片來源于百度車機平臺

5）品牌IP

智能汽車，搭載了一個智能系統(tǒng)，除了駕駛需求，對于HMI融入品牌元素也相當重要，品牌化是智能座艙視覺設(shè)計重要的發(fā)展趨勢之一。

現(xiàn)在主要品牌的體現(xiàn)形式是車載的IP管家，他有具體的名字，可以用語音喚醒。

2. 交互原則

整個車載HMI設(shè)計過程中，最基本的六個原則

1. 安全性原則（HMI設(shè)計首先考慮的必須是以安全為第一導(dǎo)向?? ?? ?? ?? ??）
2. 及時反饋原則（時刻保障關(guān)鍵信息是最高優(yōu)先級的，更要有能力面對復(fù)雜的應(yīng)用場景，比如如油耗、故障、雨雪天、超速、疲勞等需要更加敏感。）
3. 完整性原則（頁面信息根據(jù)某些關(guān)聯(lián)性，分區(qū)塊進行顯示，這將有助于用戶更容易的建立信息位置記憶）
4. 簡單學(xué)習(xí)原則（隨著屏幕越做越大，需要駕駛員操做的功能也越來越多，所以駕駛員會因為復(fù)雜操做，面臨交通路況擁擠的情況下的額外壓力。）
5. 信息可視化原則（盡可能的采用圖像化/擬物化風格，避免或減少使用復(fù)雜的、過于專業(yè)的、技術(shù)性的圖標和術(shù)語。）
6. 情感化原則（情感化需求也是必然的需求?？梢愿鶕?jù)用戶的情感化狀態(tài)來處理車內(nèi)的情感化系統(tǒng)）

3. 場景化設(shè)計

在討論如何對超寬一體屏進行體驗設(shè)計前，我們需要對人在不同場景下的多樣化需求有大致的了解。為此，我們將人與車空間關(guān)系的場景劃分為四大方向依次是：生活、娛樂、辦公和共享。

如：

• 生活、娛樂場景下，全家出游，疲憊的人可以直接在車上睡覺休息，無聊的人可以玩游戲，車內(nèi)空間采用多音道技術(shù)，不同的音道技術(shù)可以避免彼此干擾。除此之外，還可以起到保護隱私的作用，滿足每個人對個人空間的需求。
• 在辦公場景下，人可以在駕艙內(nèi)進行各項辦公活動，諸如：視頻會議、電腦辦公、商務(wù)信息處理等。
• 在共享場景下，車不僅可以是運輸人的移動工具，還能成為運輸貨物的移動工具、移動商城、移動酒店等等。

3. 交互方式

多模態(tài)交互的方式未來肯定是大趨勢，現(xiàn)有最常見的有觸控、語音、手勢。

觸控一種是通過按鍵控制；一種是通過觸屏控制。

都是通過不斷的觸控功能按鈕行程鍛煉肌肉記憶，現(xiàn)在的趨勢越來越趨向重觸屏，輕按鈕，這樣不僅系統(tǒng)迭代成本小，功能可以動態(tài)分布。

但是對于一些精準調(diào)節(jié)的功能還是按鍵控制好一些。

語音交互被認為是車內(nèi)場景下最自然的交互方式，而語音交互需要一個載體來傳達多樣化的情感。

語音控制的前景主要在于兩個因素：

1. 一是可以把除了界面以外的利用起來，與HMI自由交談
2. 二是最小化HMI手動操作產(chǎn)生的干擾，增加安全性

手勢交互是對語音交互、觸控交互的很好補充，能夠讓車主通過簡單的手勢和語音就能完成車內(nèi)的交互任務(wù)，也是能夠增加交互趣味性、表達情感、傳達情緒的另一個自然交互方式。

常用的手勢：

• 單指滑動（上下左右）
• 雙指滑動（左右）
• 五指抓取
• …

HMI的交互手勢不同于手機和IPAD，手機和IPAD握在手里，左右手都可以操作，多指組合的可能性也多，而HMI的手勢定義，更多的是需要滿足駕駛員的使用場景，屏幕是固定在車上的，要規(guī)避掉一些不方便的手勢。

比如雙指往上滑動就很不方便，向上推不靈活，也有阻力。

四、設(shè)計資源

1. 字體庫（蒙納字庫）

快速獲取信息比時速60英里每小時要重要得多！

汽車屏幕使用的字體必須具有視覺吸引力和品牌一致性，同時還要一目了然，清晰易讀。

本篇文章展示了一系列可以輕松閱讀的字體，這些字體還能夠幫助駕駛員在行駛過程中保持注意力。

1）Avenir Next

Adrian Frutiger是從過去和未來汲取的靈感而設(shè)計的Avenir?（avenir在法語里意為“未來”）。Frutiger在他的設(shè)計中加入了一種有機的人文主義元素，將Avenir從早期字體僵硬的幾何風格中解放出來。

2004年，F(xiàn)rutiger與Linotype公司字體設(shè)計師小林章先生（Akira Kobayashi）一起復(fù)刻了Avenir字體家族，解決了其屏幕顯示的問題，它就是Avenir Next。

幾何元素與人文元素的結(jié)合使得Avenir Next字體的易讀性極高，這使其成為汽車HMI儀表盤和顯示器等快速掃視環(huán)境下最理想的選擇。

2）Burlingame

Burlingame?字體是一種相對較新的字體，它設(shè)計堅實，外形開放、清晰，易讀性非常高。

這款字體體現(xiàn)了人文主義及手工質(zhì)感，它是根據(jù)Monotype委托開展的汽車用戶界面易讀性研究所得到的結(jié)果而進行的修改，使Burlingame成為任何車輛數(shù)字儀表盤的不二選擇。

Burlingame字體為了滿足汽車顯示器的需求融合了多種特性：平整的切口，銳利的拐角，超橢圓的（super-elliptical）字碗以及寬松的字間距。

其簡單的形狀和深三角形切口還有助于確保小尺寸字體的清晰度和易讀性，尤其是在低分辨率屏幕上。

3）Frutiger

AdrianFrutiger是世界知名的字體設(shè)計師。他的同名字體設(shè)計獨具特色，而且用途廣泛。

Frutiger?字體最初用于機場導(dǎo)視牌，在遠距離及多種角度下閱讀都非常清晰。

作為一種經(jīng)典字體，F(xiàn)rutiger是人文主義無襯線字體的易讀性與具有優(yōu)美幾何線條的早期無襯線字體（Grotesque Sans）的結(jié)合。

Frutiger因其現(xiàn)代、溫暖的外觀被許多公司和政府采用。這種字體的開放性使其非常醒目，其獨特的字形避免了與其他字體相互混淆。

4）Tipperary

Tipperary?是一種單線的人文主義無襯線體，具有清晰、開放的字形。

其簡潔的字符十分易于閱讀，也非常適合數(shù)字UI顯示。為了制作這款字體，許多經(jīng)典字體設(shè)計被重新詮釋、組合。

于是就有了一款在現(xiàn)代顯示屏技術(shù)受限的范圍內(nèi)仍然表現(xiàn)出色的字體，保留了原有設(shè)計的比例和形式，使其成為印刷業(yè)最受歡迎的字體。

Tipperary字形的拐角近似幾何形狀的方形，是快速掃視環(huán)境下（如汽車儀表，顯示器和界面）的最佳字體之一。

5）Daytona

Daytona?是由Monotype公司的Jim Wasco遵循易讀性原則而設(shè)計的一款字體。

其方正堅實的字符特征遵循的是人文主義的形狀和比例。

Daytona的字形偏窄，可以最大限度地利用空間而且還可以提高閱讀舒適性。圓潤的拐角、開放的字懷以及簡單的字符形狀使Daytona成為Monotype字體庫中最易讀的字體之一。

Daytona字體幾乎在所有的屏幕環(huán)境（包括汽車用戶界面、數(shù)字儀表盤以及GPS設(shè)備）中都能表現(xiàn)得非常出色。

6）Akko

Akko?及AkkoRounded字體通常會用兩個不太可能放到一起的詞來描述——“工業(yè)的”和“精致的”，這其實得益于設(shè)計師小林章先生（Akira Kobayashi）對最初嚴謹?shù)墓I(yè)概念的弱化。

Akko這個名字來源于著名設(shè)計者名字和姓氏的前兩個字母。

Akko設(shè)計友好且非?，F(xiàn)代化，清晰易讀而且又非常時尚。Akko字形的“裸骨”骨架降低了其他設(shè)計風格中出現(xiàn)的視覺擁擠現(xiàn)象。

7）Mayberry

Mayberry最初是為了模仿Tiresias?字體家族的技術(shù)而設(shè)計的，以便用于機頂盒電視設(shè)備和用戶界面。比起Tiresias，Mayberry在美學(xué)和功能方面都有顯著的改進。

Mayberry包含真正的意大利斜體以及多種字重，可以在低分辨率設(shè)備上提供高質(zhì)量的閱讀和最好的可讀性，同時它還具有一系列能夠吸引專業(yè)人士的OpenType功能。

Mayberry是一款字寬被輕微壓縮了的人文主義無襯線字體，這樣可以在較窄的文本欄顯示更多的可讀文本。開放的字懷與垂直的應(yīng)力都有助于在低分辨率的情況下保持Mayberry設(shè)計的可讀性。

8）TradeGothic

TradeGothic字體家族是美國平面設(shè)計作品的主打產(chǎn)品，自1948年由Jackson Burke發(fā)布以來在一直不斷地被使用。這一設(shè)計在國際上也很受歡迎，而且曾一度被視為Helvetica ?家族的競爭對手。

2008年的版本名為TradeGothic Next，這款字體改進并擴展經(jīng)典系列，還將它引入到一個流行的新時代。這種不和諧卻為Trade Gothic設(shè)計增添了一點質(zhì)樸的自然主義色彩，這也是許多設(shè)計師回歸的原因之一。

TradeGothic Next是最清晰的早期無襯線字體類型。該設(shè)計具有開放的字形及寬松的字間距，讓人感覺容易接近，這些都使其在需要掃視的閱讀環(huán)境下表現(xiàn)良好。

9）Slate

Slate字體家族將出色的功能及視覺的優(yōu)雅融合成一種卓越的交流工具。很少有字體具有這種設(shè)計的美感和力量。

Slate是RodMcDonald的作品，Rod McDonald是一位屢獲殊榮的字體設(shè)計師和刻字藝術(shù)家。在四十年的職業(yè)生涯中，McDonald參與了加拿大國家盲人研究所（CNIB）開展的字體易讀性和可讀性研究項目。

在那里，McDonald了解到哪些設(shè)計特征更適合最大限度地提高字符易讀性及文本可讀性。

Slate是一款風格化的人文主義字體，提供了一種溫暖的視覺體驗。即使在具有挑戰(zhàn)性的技術(shù)環(huán)境中，Slate也能為用戶提供舒適的閱讀環(huán)境。

10）Unitext

HendrikWeber的Unitext字體設(shè)計清晰、簡潔，是一款適應(yīng)性強、識別效率高的無襯線字體，風格介于怪誕與人文主義之間。

Unitext深入研究了設(shè)計機構(gòu)對于品牌字體的需求，以及設(shè)計師Hendrik Weber本人為公司定制字體的經(jīng)驗。

由于了解用于品牌推廣的無襯線字體的流行度——還有它們的缺點 —— Weber開始著手創(chuàng)作一些可以適應(yīng)不同環(huán)境但又不放棄友好性的字體?？勺x性也是一個重要的考慮因素。

Unitext是一種新型混合風格的字體，它具有現(xiàn)代感及前瞻性的外觀，可讀性高，并且極具未來主義的優(yōu)雅。

完美的易讀性。無與倫比的設(shè)計。

Monotype的字體創(chuàng)意總監(jiān)Steve Matteson將這些字體組織到一起來展示一系列可以輕松閱讀、并可以幫助駕駛員在行駛過程中保持注意力的字體樣本。

通過為儀表板或HMI選擇合適的字體，您將能夠確保您的汽車顯示屏清晰易讀，并且擁有觀眾喜愛的無與倫比的設(shè)計。

2. 組件庫（這里）

和正常的搭建C端、B端組件庫一樣的，先是把頁面中的元素按這些維度拆分散成原子、分子、組件、模塊、頁面。

1）制定組件庫框架

框架可以從現(xiàn)有界面上按功能模塊梳理。

2）每個頁面拆分組件

3. 走查表

設(shè)計走查自測表：阿里車載-設(shè)計走查自測表。

為方便車載小程序設(shè)計，提供輕量化的小程序設(shè)計走查表以供參考。

可用于：

• 項目前期設(shè)計自測
• 項目中研發(fā)自測檢查
• 項目上線后設(shè)計/產(chǎn)品協(xié)同開發(fā)同學(xué)完成自測問題
• 查缺補漏規(guī)避風險點

五、設(shè)計適配

1. 主流設(shè)計屏幕尺寸

1）橫屏尺寸

經(jīng)過對主要車企車型的分辨率收集與分析，目前市面上主流屏幕分辨率比例以 16:9 和 8:3 居多，能覆蓋到72.39%的車型。并以此為縮放的基準屏。

2）豎屏尺寸

2. 尺寸和適配

1）橫屏適配

以高度為基準，等比例縮放尺寸中高度不變的情況下，橫向?qū)挾瓤s放只需要填充內(nèi)容。

比如：1280*720設(shè)計稿要適配到1824*1200時，高度按比例縮放到1200的尺寸為2133*1200，高度不變，只需要把橫向內(nèi)容2133壓縮至1824.橫向的占比按照1824處理。

特定情況下適配導(dǎo)航會出現(xiàn)運營文案少的情況，針對于此可以單獨針對此車機刪減右側(cè)的功能入口icon。

2）豎屏適配

寬度一致時：固定寬度時，屏幕高度上適配，導(dǎo)航欄固定，播放器位置固定在頁面底部展示，中間內(nèi)容填充區(qū)域適配。

寬度不一致時：等比縮放寬度，在向高度上適配。

參考鏈接：

• https://www.zhihu.com/question/28078272/answer/39551206
• http://m.22none.com/u/371477
• http://www.itas-hk.com/news/yjyb/448.html
• https://baijiahao.baidu.com/s?id=1652700903627827020&wfr=spider&for=pc
• https://www.zhihu.com/question/326120874/answer/697093219

圖片來源于網(wǎng)絡(luò)，侵刪

小插曲

我在參加人人都是產(chǎn)品經(jīng)理2021年度作者評選，希望喜歡我的文章的朋友都能來支持我一下~

點擊下方鏈接進入我的個人參選頁面，點擊紅心即可為我投票。

每人最多可投3票，投票即有機會獲得百萬驚喜禮品&起點課堂千元豪禮哦！

投票傳送門：http://996.pm/7drpK

#專欄作家#

郝小七，微信公眾號：七醬設(shè)計筆記，人人都是產(chǎn)品經(jīng)理專欄作家。蜻蜓FM高級UI設(shè)計師，5年工作經(jīng)驗。專注于體驗設(shè)計，歡迎各位同學(xué)一起交流。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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