設(shè)計(jì)要知道!如何著手車載設(shè)計(jì)?

1 評(píng)論 7181 瀏覽 27 收藏 40 分鐘

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

車企現(xiàn)在對(duì)智能系統(tǒng)的設(shè)計(jì)越來(lái)越重視,因?yàn)橹挥邪衍浖?shí)力提升才可以更好地掌握話語(yǔ)權(quán)。汽車HMI設(shè)計(jì)開(kāi)發(fā)時(shí)是整車開(kāi)發(fā)的一環(huán),需要按照整車開(kāi)發(fā)的流程進(jìn)行,這樣在造車的各個(gè)階段才能有效地管控和輸出設(shè)計(jì)產(chǎn)物,由于HMI設(shè)計(jì)涉及的相關(guān)的國(guó)標(biāo),只有按照既定的流程才能設(shè)計(jì)出符合車機(jī)環(huán)境的系統(tǒng)界面。

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

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

配圖來(lái)源于MOMOUX

大體可以分為五個(gè)階段:

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

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

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

1) 需求分析,競(jìng)品調(diào)研評(píng)估

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

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

2)功能落地,交互原型

UX策略出來(lái)后,也在這一步確立交互設(shè)計(jì)的框架。

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

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

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

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

3)視覺(jué)優(yōu)化,設(shè)計(jì)交付

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

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

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

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

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

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

之所以互聯(lián)網(wǎng)造車來(lái)勢(shì)洶洶,也正是因?yàn)樗鼈兛吹搅粟厔?shì)和市場(chǎng)需求,敢于大膽做一些傳統(tǒng)車企不太敢輕易嘗試的事。

4)開(kāi)發(fā)評(píng)估,可用性測(cè)試

設(shè)計(jì)接近尾聲,乙方設(shè)計(jì)團(tuán)隊(duì)也會(huì)做自我設(shè)計(jì)評(píng)測(cè)報(bào)告,對(duì)設(shè)計(jì)進(jìn)一步改良,制定評(píng)測(cè)規(guī)則后,以理性打分方式,測(cè)評(píng)各個(gè)體驗(yàn)?zāi)K的分?jǐn)?shù),然后逐一優(yōu)化。

整個(gè)項(xiàng)目過(guò)程會(huì)經(jīng)歷概念設(shè)計(jì)、設(shè)計(jì)團(tuán)隊(duì)支持和交互效果驗(yàn)收。

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

這也是占用人力最多的深入交付階段,往下推進(jìn)會(huì)比較順利。

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

進(jìn)行體驗(yàn)驗(yàn)證之后是系統(tǒng)開(kāi)發(fā)、硬件開(kāi)發(fā)、軟件開(kāi)發(fā)、整車測(cè)試與評(píng)價(jià)。即可開(kāi)始生產(chǎn)批量試制(PVS)。

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

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

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

因?yàn)橛脩艨倳?huì)有新的需求出現(xiàn),并且真實(shí)的用戶需求是在用戶使用產(chǎn)品中被不斷發(fā)現(xiàn)和滿足的,所以迭代對(duì)于汽車廠商或者HMI設(shè)計(jì)師來(lái)說(shuō),是提升用戶體驗(yàn)的最佳階段。

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

二、設(shè)計(jì)分析

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

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

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

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

總而言之,找準(zhǔn)目標(biāo)用戶,透過(guò)現(xiàn)象看本質(zhì)。

1. 用戶研究

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

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

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

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

2. 競(jìng)品分析

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

競(jìng)品分析的方式:

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

3. 趨勢(shì)分析

?????????????????????????????????????????????????????????????????????????????????????????????????????????????汽車HMI設(shè)計(jì)是個(gè)多元化的學(xué)科,談及趨勢(shì),所涉及到的問(wèn)題包羅萬(wàn)象:

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

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

1)用車場(chǎng)景可能性的問(wèn)題

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

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

本質(zhì)上通過(guò)座艙內(nèi)軟硬件協(xié)調(diào)營(yíng)造出特定的互動(dòng)場(chǎng)景模式,增強(qiáng)智能座艙的空間娛樂(lè)屬性。

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

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

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

未來(lái)的萬(wàn)物互聯(lián)肯定是要到來(lái)的,是家空間和?空間更多的硬件、信息互聯(lián)互動(dòng)。

有時(shí)候通過(guò)?機(jī)終端的賬戶或者 APP 達(dá)到打通后,讓兩個(gè)場(chǎng)景下的更多智能硬件可以互聯(lián)衍?出各種有趣的信息交互。

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

3)多模態(tài)交互的問(wèn)題

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

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

三、設(shè)計(jì)原則

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

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

1. 視覺(jué)原則

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

1)顏色設(shè)計(jì)

顏色設(shè)計(jì)上以國(guó)標(biāo)為基礎(chǔ)為大前提,設(shè)定符合車載場(chǎng)景的取色類型。

顏色對(duì)比度符合,圖文對(duì)比大于7:1,背景建議使用深色。

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

圖片來(lái)源于百度車機(jī)平臺(tái)

2)字體

中控與駕駛員的距離處在70cm-85cm之間,用戶在掃一眼的過(guò)程中即可準(zhǔn)確地看到重點(diǎn)信息。

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

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

3)ICON

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

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

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

圖片來(lái)源于百度車機(jī)平臺(tái)

4)內(nèi)容排版

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

層級(jí)最多不可超過(guò)3-4層,所有信息按照使用場(chǎng)景、功能分組展示。

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

圖片來(lái)源于百度車機(jī)平臺(tái)

5)品牌IP

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

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

2. 交互原則

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

整個(gè)車載HMI設(shè)計(jì)過(guò)程中,最基本的六個(gè)原則

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

3. 場(chǎng)景化設(shè)計(jì)

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

如:

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

3. 交互方式

多模態(tài)交互的方式未來(lái)肯定是大趨勢(shì),現(xiàn)有最常見(jiàn)的有觸控、語(yǔ)音、手勢(shì)。

觸控一種是通過(guò)按鍵控制;一種是通過(guò)觸屏控制。

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

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

語(yǔ)音交互被認(rèn)為是車內(nèi)場(chǎng)景下最自然的交互方式,而語(yǔ)音交互需要一個(gè)載體來(lái)傳達(dá)多樣化的情感。

語(yǔ)音控制的前景主要在于兩個(gè)因素:

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

手勢(shì)交互是對(duì)語(yǔ)音交互、觸控交互的很好補(bǔ)充,能夠讓車主通過(guò)簡(jiǎn)單的手勢(shì)和語(yǔ)音就能完成車內(nèi)的交互任務(wù),也是能夠增加交互趣味性、表達(dá)情感、傳達(dá)情緒的另一個(gè)自然交互方式。

常用的手勢(shì):

  • 單指滑動(dòng)(上下左右)
  • 雙指滑動(dòng)(左右)
  • 五指抓取

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

比如雙指往上滑動(dòng)就很不方便,向上推不靈活,也有阻力。

四、設(shè)計(jì)資源

1. 字體庫(kù)(蒙納字庫(kù))

快速獲取信息比時(shí)速60英里每小時(shí)要重要得多!

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

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

1)Avenir Next

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

Adrian Frutiger是從過(guò)去和未來(lái)汲取的靈感而設(shè)計(jì)的Avenir?(avenir在法語(yǔ)里意為“未來(lái)”)。Frutiger在他的設(shè)計(jì)中加入了一種有機(jī)的人文主義元素,將Avenir從早期字體僵硬的幾何風(fēng)格中解放出來(lái)。

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

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

2)Burlingame

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

Burlingame?字體是一種相對(duì)較新的字體,它設(shè)計(jì)堅(jiān)實(shí),外形開(kāi)放、清晰,易讀性非常高。

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

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

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

3)Frutiger

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

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

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

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

4)Tipperary

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

Tipperary?是一種單線的人文主義無(wú)襯線體,具有清晰、開(kāi)放的字形。

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

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

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

5)Daytona

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

其方正堅(jiān)實(shí)的字符特征遵循的是人文主義的形狀和比例。

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

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

6)Akko

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

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

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

7)Mayberry

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

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

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

8)TradeGothic

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

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

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

9)Slate

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

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

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

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

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

10)Unitext

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

HendrikWeber的Unitext字體設(shè)計(jì)清晰、簡(jiǎn)潔,是一款適應(yīng)性強(qiáng)、識(shí)別效率高的無(wú)襯線字體,風(fēng)格介于怪誕與人文主義之間。

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

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

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

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

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

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

2. 組件庫(kù)(這里)

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

1)制定組件庫(kù)框架

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

2)每個(gè)頁(yè)面拆分組件

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

3. 走查表

設(shè)計(jì)走查自測(cè)表:阿里車載-設(shè)計(jì)走查自測(cè)表。

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

可用于:

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

五、設(shè)計(jì)適配

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

1)橫屏尺寸

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

2)豎屏尺寸

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

2. 尺寸和適配

1)橫屏適配

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

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

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

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

2)豎屏適配

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

寬度不一致時(shí):等比縮放寬度,在向高度上適配。

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

設(shè)計(jì)要知道!-如何著手車載設(shè)計(jì)

參考鏈接:

  • https://www.zhihu.com/question/28078272/answer/39551206
  • http://m.codemsi.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

圖片來(lái)源于網(wǎng)絡(luò),侵刪

小插曲

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

點(diǎn)擊下方鏈接進(jìn)入我的個(gè)人參選頁(yè)面,點(diǎn)擊紅心即可為我投票。

每人最多可投3票,投票即有機(jī)會(huì)獲得百萬(wàn)驚喜禮品&起點(diǎn)課堂千元豪禮哦!

投票傳送門(mén):http://996.pm/7drpK

#專欄作家#

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

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

題圖來(lái)自Unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 干貨滿滿!請(qǐng)問(wèn),這個(gè)阿里車載設(shè)計(jì)走查表可以分享一下嗎,或者哪里可以下載

    來(lái)自福建 回復(fù)