隨著新能源的發(fā)展，汽車領(lǐng)域開(kāi)始變革，HMI也逐漸走進(jìn)設(shè)計(jì)領(lǐng)域，受到了不少人的關(guān)注。區(qū)別于傳統(tǒng)的設(shè)計(jì)，HMI設(shè)計(jì)有何不同，該怎么做？作者結(jié)合了自身的工作經(jīng)驗(yàn)，與你一同探討關(guān)于HMI設(shè)計(jì)的工作流程。

隨著新能源的發(fā)展，HMI逐漸走進(jìn)設(shè)計(jì)領(lǐng)域，HMI設(shè)計(jì)類的文章也愈來(lái)愈多，但很少能看到有關(guān)HMI實(shí)際工作經(jīng)驗(yàn)的內(nèi)容；恰逢我也在比較頭部的車企公司負(fù)責(zé)HMI設(shè)計(jì)兩年多了，這里就以我實(shí)際工作距離，講一講在實(shí)際點(diǎn)的工作當(dāng)中，HMI設(shè)計(jì)師的工作流程到底到底是怎樣的。

因?yàn)槊總€(gè)公司都有自己的特點(diǎn)，這里僅以我參與到的情況來(lái)舉例， 因?yàn)槲覀児旧婕暗降姆秶€是比較廣的，大家可以在看的時(shí)候試著將自己代入進(jìn)去，感受對(duì)于傳統(tǒng)互聯(lián)網(wǎng)的UI設(shè)計(jì)，HMI設(shè)計(jì)到底有哪些不同。

一、需求階段

設(shè)計(jì)開(kāi)始便源于需求，每個(gè)設(shè)計(jì)師都會(huì)面臨一個(gè)接需求的階段，HMI的設(shè)計(jì)需求和我們常規(guī)uI有些不同，UI設(shè)計(jì)的需求來(lái)源一般比較單一，就是通過(guò)產(chǎn)品下發(fā)，那小公司可能直接通過(guò)老板下達(dá)內(nèi)容，HMI的設(shè)計(jì)中我們還是以產(chǎn)品的需求為主，當(dāng)然這里會(huì)在提到一些其他部門。

1. 需求任務(wù)

比如規(guī)劃。在這里，我認(rèn)為的規(guī)劃就類似于產(chǎn)品的細(xì)分，主要是研究市場(chǎng)領(lǐng)域、探尋用戶/消費(fèi)者對(duì)的需求、分析競(jìng)爭(zhēng)對(duì)手、再根據(jù)公司自身的情況和發(fā)展方向，制定相關(guān)目標(biāo)、戰(zhàn)略、戰(zhàn)術(shù)的一個(gè)職位。因?yàn)閷?shí)際上我從規(guī)劃手中接到的需求一般都是和競(jìng)品、或者市場(chǎng)強(qiáng)相關(guān)的一些內(nèi)容。而產(chǎn)品的需求會(huì)更綜合一些，更貼近用戶和消費(fèi)者和一些大的戰(zhàn)略方向。

還有一些需求是由UX進(jìn)行體驗(yàn)優(yōu)化方面所帶來(lái)的，以及部分開(kāi)發(fā)和測(cè)試也會(huì)有需求，這個(gè)需求并不是對(duì)bug的修改，通常是產(chǎn)品在原有的基礎(chǔ)做了升級(jí)改動(dòng)，或者出現(xiàn)多模塊沖突的時(shí)候，需要一些相應(yīng)的設(shè)計(jì)支撐；而這種情況的工作量一般不會(huì)太大。

2. 怎么做

OK 那作為設(shè)計(jì)師，在前期需求階段要做些什么？

首先就是了解需求，明確需求內(nèi)容，不但要熟悉業(yè)務(wù)的架構(gòu)還要了解相關(guān)的責(zé)任人，因?yàn)檫@個(gè)涉及的內(nèi)容通常比較多，人員也會(huì)很多，所以認(rèn)識(shí)相關(guān)的責(zé)任人很重要，不然在項(xiàng)目中遇到問(wèn)題就會(huì)出現(xiàn)不知道找誰(shuí)，滿屋子跑，到處求人的尷尬情況，嚴(yán)重時(shí)還可能延誤整體的交付進(jìn)度。

舉個(gè)例子，我們拿座椅扶手設(shè)置的屏幕舉例，因?yàn)檫@種屏幕對(duì)的設(shè)計(jì)牽扯到的部門比較多，但設(shè)計(jì)師內(nèi)容并不復(fù)雜，一兩個(gè)設(shè)計(jì)師就可以完成，不像中控儀表需要按照各種模塊進(jìn)行設(shè)計(jì)人員的劃分；

那當(dāng)我們接到了這樣的一塊扶手控制屏的時(shí)候，我們需要了解什么？

第一就是功能，需要放什么內(nèi)容在上面，這時(shí)產(chǎn)品會(huì)給一份初步的功能清單，但是光有清單是不夠的，你需要清楚每個(gè)功能都是怎樣定義的，有沒(méi)有什么內(nèi)容是可以進(jìn)行設(shè)計(jì)容錯(cuò)的，比如說(shuō)特殊的控制信息放不下的話可不可以不要，有沒(méi)有選配的內(nèi)容，高端車和低端車型的配置是否統(tǒng)一？這些都要提前問(wèn)清楚，以便去進(jìn)行不同的設(shè)計(jì)適配。

3. 規(guī)格

第二要了解的便是屏幕的規(guī)格，包括尺寸，屏幕分辨率是多少，PPI多少，可能這里會(huì)牽扯一個(gè)物理尺寸的換算，比如我們的按鈕推薦的熱區(qū)是15.2mm對(duì)吧，那設(shè)計(jì)稿要做多大？

很多人在糾結(jié)這個(gè)像素和mm的換算很麻煩，用到一堆公式啥的，如果現(xiàn)在告訴你：物理是長(zhǎng)度150mm 屏幕分辨率是720，那你知道1mm等于多少像素嗎？720除以150 等于多少4.8 ，1mm等于一4.8px，那15mm不就是72px嘛 ，這很難么？

大家想一想是不是這個(gè)道理，其實(shí)網(wǎng)上有很多文章都寫了復(fù)雜的像素和毫米之間的計(jì)算公式，什么勾股定理，開(kāi)根號(hào)，平方等等；而它們求的是什么呢？其實(shí)是物理尺寸的大小，但在我實(shí)際工作的情況下，并沒(méi)有出現(xiàn)物理尺寸大小不明確的情況，當(dāng)然，可能確實(shí)還沒(méi)有遇到過(guò)。

4. 材質(zhì)

回到剛才的需求階段， 除了功能、規(guī)格，我們還要了解屏幕的材質(zhì)，交互的載體，顯示屏幕的視覺(jué)表現(xiàn)情況，是否有物理按鈕的考慮等等，都需有一個(gè)全面的了解。

5. 外觀

還有就是外觀，是不是異形的設(shè)計(jì)，我們都知道有些儀表并不是中規(guī)中矩的方形，很多都是根據(jù)車型結(jié)構(gòu)做的特殊形狀，在做新的屏幕設(shè)計(jì)的時(shí)候也要考慮進(jìn)去，這里還有考慮的邊緣區(qū)域的距離——BM區(qū)域，俗稱就是屏幕黑邊，這個(gè)區(qū)域的大小也會(huì)影響設(shè)計(jì)的視覺(jué)美觀度，包括交互操作的合理性，如果邊緣很小，點(diǎn)擊觸摸操作的時(shí)候就會(huì)就是難以交互，設(shè)計(jì)時(shí)可以考慮把頁(yè)面兩邊的安全邊距加大，如果BM區(qū)域大的話，內(nèi)容區(qū)域就可留的更多一些，這些在前期都是可以討論的，設(shè)計(jì)也可以根據(jù)方案去提出一些意見(jiàn)。

最后，還要了解需求的時(shí)間節(jié)點(diǎn)，進(jìn)行任務(wù)排期，很多時(shí)候都是多任務(wù)并行的，時(shí)間節(jié)點(diǎn)很重要，從需求產(chǎn)生，到生產(chǎn)上線，這個(gè)時(shí)間是不能亂動(dòng)的，牽扯到整車付的問(wèn)題

6. 小結(jié)

OK 前期需求部分講的有點(diǎn)多，其實(shí)當(dāng)中還有很多更細(xì)的內(nèi)容需要根據(jù)不同的情況去考慮，主要想讓大家明白，在設(shè)計(jì)前期，一定要先做到深度的了解需求再進(jìn)行設(shè)計(jì)輸出。

二、概念設(shè)計(jì)

在理解了需求后，下一步我們就可以進(jìn)行概念方案的輸出，要針對(duì)當(dāng)前的問(wèn)題，不確定的因素做一些典型頁(yè)面的方案呈現(xiàn)。

為什么說(shuō)是概念方案，以及做這個(gè)概念方案是干啥的？大家應(yīng)該記得在上一階段，我們可能有很多沒(méi)有確定下來(lái)的因素，設(shè)計(jì)師在其中其實(shí)主要是要配合產(chǎn)品，交互，市場(chǎng)做一些內(nèi)容想法上的表達(dá)，這里并不是視覺(jué)設(shè)計(jì)師的主場(chǎng)，主要是產(chǎn)品和功能上的確認(rèn)。

1. 需求評(píng)審

這里就提到了下一個(gè)階段——需求評(píng)審的環(huán)節(jié)——起到需求確認(rèn)的作用。

我們做的概念方案就是展現(xiàn)這個(gè)地方，主要給產(chǎn)品起到?jīng)Q策輔助的作用，但是設(shè)計(jì)師要參與其中，也會(huì)去輸出一些自己的看法，來(lái)確認(rèn)方案的可行性；并不是所有的需求評(píng)審都需要設(shè)計(jì)師支持，看情況而定。

除了確認(rèn)需求之外，還有一個(gè)重要作用就是確認(rèn)開(kāi)發(fā)的可行性，防止出現(xiàn)設(shè)計(jì)稿確認(rèn)后，開(kāi)發(fā)實(shí)現(xiàn)成本過(guò)高影響整體交付進(jìn)度的問(wèn)題，所以協(xié)調(diào)開(kāi)發(fā)資源，確認(rèn)開(kāi)發(fā)任務(wù)難度也需要在這里完成確認(rèn)。

2. 交互/視覺(jué)優(yōu)化

接下來(lái)就到了我們?cè)O(shè)計(jì)師的主場(chǎng)了，萬(wàn)事具備，只欠東風(fēng)～

這里其實(shí)跟常規(guī)的uI設(shè)計(jì)理論沒(méi)有太大的區(qū)別，首先就是要進(jìn)行大量的競(jìng)品分析，這里競(jìng)品分析的作用就體現(xiàn)出來(lái)了，因?yàn)槭忻嫔弦呀?jīng)落地的內(nèi)容是經(jīng)過(guò)大量驗(yàn)證的，安全性是有較大保障的，我們都知道HMI的設(shè)計(jì)安全性是放在首位的，小到一個(gè)圖標(biāo)大到整個(gè)項(xiàng)目視覺(jué)表現(xiàn)，都需有強(qiáng)有力數(shù)據(jù)支撐，YY或者自嗨式的想法就是純是在耍流氓了，競(jìng)品就是一面很好的鏡子。

這也是市面上很多作品集不落地的原因之一；有同學(xué)可能會(huì)問(wèn)，有些內(nèi)容是我們創(chuàng)新來(lái)的呀，市面上根本沒(méi)有競(jìng)品；在這里我認(rèn)為并沒(méi)有純創(chuàng)新的設(shè)計(jì)，總會(huì)在其他方面找到類似的場(chǎng)景參考，多結(jié)合一下，與人因及交互的同學(xué)討論方案是否合理，在進(jìn)行設(shè)計(jì)輸出。

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

在設(shè)計(jì)的時(shí)候也要考慮多場(chǎng)景，同一個(gè)功能模塊，在設(shè)計(jì)時(shí)是否與中控、儀表或其他模塊項(xiàng)目上產(chǎn)生沖突；因?yàn)樵谠O(shè)計(jì)后期，即使是新增一個(gè)小小的功能，牽扯到的頁(yè)面邏輯會(huì)越來(lái)越多，要考慮多種沖突之間的關(guān)系，進(jìn)行設(shè)計(jì)方案的協(xié)調(diào)。

4. 設(shè)計(jì)規(guī)范

還有就是復(fù)用性，規(guī)范化，嚴(yán)格按照指定好的規(guī)范來(lái)進(jìn)行頁(yè)面輸出也是設(shè)計(jì)的必要條件，形成規(guī)范，包括字體，顏色、間距、圓角、陰影等等，在開(kāi)發(fā)側(cè)，也會(huì)有和我們?cè)O(shè)計(jì)一樣的控件庫(kù)，新增控件，或者圖標(biāo)時(shí)，也要嚴(yán)格在原有規(guī)范的基礎(chǔ)上進(jìn)行迭代優(yōu)化。

基本這樣的做出來(lái)的界面才可以具有很高統(tǒng)一度，那我們?cè)谧鲎约旱捻?xiàng)目的時(shí)候一定要嚴(yán)格按照自己制定的規(guī)范去輸出頁(yè)面。

四、設(shè)計(jì)評(píng)審

在交互/視覺(jué)都完成之后，我們還需要進(jìn)行一個(gè)設(shè)計(jì)走查以及評(píng)審的環(huán)節(jié)。

因?yàn)樵O(shè)計(jì)面向大量的用戶，要承擔(dān)生命的責(zé)任，基本上任何一個(gè)設(shè)計(jì)方案需要經(jīng)過(guò)嚴(yán)格的評(píng)審環(huán)節(jié)，在設(shè)計(jì)評(píng)審中，一般是各個(gè)uX部門的主要負(fù)責(zé)人作為評(píng)委，此時(shí)，需要講清楚需求背景、落地競(jìng)品的設(shè)計(jì)方案，原有方案及優(yōu)化方案，講清不同方案之間的設(shè)計(jì)思路與邏輯，同時(shí)記錄會(huì)議內(nèi)容，進(jìn)行后續(xù)的設(shè)計(jì)升級(jí)。

五、方案落地

設(shè)計(jì)完成后，最后一步便是交由開(kāi)發(fā)進(jìn)行代碼實(shí)現(xiàn)，在這里需要對(duì)設(shè)計(jì)方案進(jìn)行溝通于標(biāo)注，便于開(kāi)發(fā)注意開(kāi)發(fā)難點(diǎn)，合理分配時(shí)間。

開(kāi)發(fā)完成，還需交由設(shè)計(jì)師進(jìn)行頁(yè)面驗(yàn)收，通過(guò)實(shí)機(jī)測(cè)試，審查包括字體，顏色、間距、圓角、陰影方面是否和設(shè)計(jì)稿保持一致，交互邏輯、頁(yè)面跳轉(zhuǎn)、按鈕狀態(tài)是否完善并和主框架統(tǒng)一。檢驗(yàn)視覺(jué)BUG，保證設(shè)計(jì)可以高度還原。

以上就是HMI的設(shè)計(jì)主流程啦，希望可以給你帶來(lái)啟發(fā)，如果你有其他疑問(wèn)，歡迎留言積進(jìn)行討論哦~