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

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

因為每個公司都有自己的特點，這里僅以我參與到的情況來舉例， 因為我們公司涉及到的范圍還是比較廣的，大家可以在看的時候試著將自己代入進去，感受對于傳統(tǒng)互聯(lián)網(wǎng)的UI設(shè)計，HMI設(shè)計到底有哪些不同。

一、需求階段

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

1. 需求任務(wù)

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

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

2. 怎么做

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

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

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

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

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

3. 規(guī)格

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

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

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

4. 材質(zhì)

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

5. 外觀

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

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

6. 小結(jié)

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

二、概念設(shè)計

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

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

1. 需求評審

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

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

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

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

接下來就到了我們設(shè)計師的主場了，萬事具備，只欠東風(fēng)～

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

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

3. 多場景設(shè)計

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

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

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

基本這樣的做出來的界面才可以具有很高統(tǒng)一度，那我們在做自己的項目的時候一定要嚴格按照自己制定的規(guī)范去輸出頁面。

四、設(shè)計評審

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

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

五、方案落地

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

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

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

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

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

該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。