tft每日頭條

 > 職場

 > hmi實例圖

hmi實例圖

職場 更新时间:2024-08-31 10:14:44

随着新能源的發展,汽車領域開始變革,HMI也逐漸走進設計領域,受到了不少人的關注。區别于傳統的設計,HMI設計有何不同,該怎麼做?作者結合了自身的工作經驗,與你一同探讨關于HMI設計的工作流程。

hmi實例圖(HMI設計實際工作經驗-全流程拆解)1

随着新能源的發展,HMI逐漸走進設計領域,HMI設計類的文章也愈來愈多,但很少能看到有關HMI實際工作經驗的内容;恰逢我也在比較頭部的車企公司負責HMI設計兩年多了,這裡就以我實際工作距離,講一講在實際點的工作當中,HMI設計師的工作流程到底到底是怎樣的。

因為每個公司都有自己的特點,這裡僅以我參與到的情況來舉例, 因為我們公司涉及到的範圍還是比較廣的,大家可以在看的時候試着将自己代入進去,感受對于傳統互聯網的uI設計,HMI設計到底有哪些不同。

hmi實例圖(HMI設計實際工作經驗-全流程拆解)2

一、需求階段

設計開始便源于需求,每個設計師都會面臨一個接需求的階段,HMI的設計需求和我們常規uI有些不同,UI設計的需求來源一般比較單一,就是通過産品下發,那小公司可能直接通過老闆下達内容,HMI的設計中我們還是以産品的需求為主,當然這裡會在提到一些其他部門。

hmi實例圖(HMI設計實際工作經驗-全流程拆解)3

1. 需求任務

比如規劃。在這裡,我認為的規劃就類似于産品的細分,主要是研究市場領域、探尋用戶/消費者對的需求、分析競争對手、再根據公司自身的情況和發展方向,制定相關目标、戰略、戰術的一個職位。因為實際上我從規劃手中接到的需求一般都是和競品、或者市場強相關的一些内容。而産品的需求會更綜合一些,更貼近用戶和消費者和一些大的戰略方向。

還有一些需求是由UX進行體驗優化方面所帶來的,以及部分開發和測試也會有需求,這個需求并不是對bug的修改,通常是産品在原有的基礎做了升級改動,或者出現多模塊沖突的時候,需要一些相應的設計支撐;而這種情況的工作量一般不會太大。

2. 怎麼做

OK 那作為設計師,在前期需求階段要做些什麼?

首先就是了解需求,明确需求内容,不但要熟悉業務的架構還要了解相關的責任人,因為這個涉及的内容通常比較多,人員也會很多,所以認識相關的責任人很重要,不然在項目中遇到問題就會出現不知道找誰,滿屋子跑,到處求人的尴尬情況,嚴重時還可能延誤整體的交付進度。

舉個例子,我們拿座椅扶手設置的屏幕舉例,因為這種屏幕對的設計牽扯到的部門比較多,但設計師内容并不複雜,一兩個設計師就可以完成,不像中控儀表需要按照各種模塊進行設計人員的劃分;

那當我們接到了這樣的一塊扶手控制屏的時候,我們需要了解什麼?

第一就是功能,需要放什麼内容在上面,這時産品會給一份初步的功能清單,但是光有清單是不夠的,你需要清楚每個功能都是怎樣定義的,有沒有什麼内容是可以進行設計容錯的,比如說特殊的控制信息放不下的話可不可以不要,有沒有選配的内容,高端車和低端車型的配置是否統一?這些都要提前問清楚,以便去進行不同的設計适配。

3. 規格

第二要了解的便是屏幕的規格,包括尺寸,屏幕分辨率是多少,PPI多少,可能這裡會牽扯一個物理尺寸的換算,比如我們的按鈕推薦的熱區是15.2mm對吧,那設計稿要做多大?

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

大家想一想是不是這個道理,其實網上有很多文章都寫了複雜的像素和毫米之間的計算公式,什麼勾股定理,開根号,平方等等;而它們求的是什麼呢?其實是物理尺寸的大小,但在我實際工作的情況下,并沒有出現物理尺寸大小不明确的情況,當然,可能确實還沒有遇到過。

hmi實例圖(HMI設計實際工作經驗-全流程拆解)4

4. 材質

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

5. 外觀

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

最後,還要了解需求的時間節點,進行任務排期,很多時候都是多任務并行的,時間節點很重要,從需求産生,到生産上線,這個時間是不能亂動的,牽扯到整車付的問題

6. 小結

OK 前期需求部分講的有點多,其實當中還有很多更細的内容需要根據不同的情況去考慮,主要想讓大家明白,在設計前期,一定要先做到深度的了解需求再進行設計輸出。

hmi實例圖(HMI設計實際工作經驗-全流程拆解)5

二、概念設計

在理解了需求後,下一步我們就可以進行概念方案的輸出,要針對當前的問題,不确定的因素做一些典型頁面的方案呈現。

為什麼說是概念方案,以及做這個概念方案是幹啥的?大家應該記得在上一階段,我們可能有很多沒有确定下來的因素,設計師在其中其實主要是要配合産品,交互,市場做一些内容想法上的表達,這裡并不是視覺設計師的主場,主要是産品和功能上的确認。

1. 需求評審

這裡就提到了下一個階段——需求評審的環節——起到需求确認的作用。

我們做的概念方案就是展現這個地方,主要給産品起到決策輔助的作用,但是設計師要參與其中,也會去輸出一些自己的看法,來确認方案的可行性;并不是所有的需求評審都需要設計師支持,看情況而定。

除了确認需求之外,還有一個重要作用就是确認開發的可行性,防止出現設計稿确認後,開發實現成本過高影響整體交付進度的問題,所以協調開發資源,确認開發任務難度也需要在這裡完成确認。

hmi實例圖(HMI設計實際工作經驗-全流程拆解)6

2. 交互/視覺優化

接下來就到了我們設計師的主場了,萬事具備,隻欠東風~

這裡其實跟常規的uI設計理論沒有太大的區别,首先就是要進行大量的競品分析,這裡競品分析的作用就體現出來了,因為市面上已經落地的内容是經過大量驗證的,安全性是有較大保障的,我們都知道HMI的設計安全性是放在首位的,小到一個圖标大到整個項目視覺表現,都需有強有力數據支撐,YY或者自嗨式的想法就是純是在耍流氓了,競品就是一面很好的鏡子。

這也是市面上很多作品集不落地的原因之一;有同學可能會問,有些内容是我們創新來的呀,市面上根本沒有競品;在這裡我認為并沒有純創新的設計,總會在其他方面找到類似的場景參考,多結合一下,與人因及交互的同學讨論方案是否合理,在進行設計輸出。

hmi實例圖(HMI設計實際工作經驗-全流程拆解)7

3. 多場景設計

在設計的時候也要考慮多場景,同一個功能模塊,在設計時是否與中控、儀表或其他模塊項目上産生沖突;因為在設計後期,即使是新增一個小小的功能,牽扯到的頁面邏輯會越來越多,要考慮多種沖突之間的關系,進行設計方案的協調。

4. 設計規範

還有就是複用性,規範化,嚴格按照指定好的規範來進行頁面輸出也是設計的必要條件,形成規範,包括字體,顔色、間距、圓角、陰影等等,在開發側,也會有和我們設計一樣的控件庫,新增控件,或者圖标時,也要嚴格在原有規範的基礎上進行疊代優化。

基本這樣的做出來的界面才可以具有很高統一度,那我們在做自己的項目的時候一定要嚴格按照自己制定的規範去輸出頁面。

hmi實例圖(HMI設計實際工作經驗-全流程拆解)8

四、設計評審

在交互/視覺都完成之後,我們還需要進行一個設計走查以及評審的環節。

因為設計面向大量的用戶,要承擔生命的責任,基本上任何一個設計方案需要經過嚴格的評審環節,在設計評審中,一般是各個uX部門的主要負責人作為評委,此時,需要講清楚需求背景、落地競品的設計方案,原有方案及優化方案,講清不同方案之間的設計思路與邏輯,同時記錄會議内容,進行後續的設計升級。

hmi實例圖(HMI設計實際工作經驗-全流程拆解)9

五、方案落地

設計完成後,最後一步便是交由開發進行代碼實現,在這裡需要對設計方案進行溝通于标注,便于開發注意開發難點,合理分配時間。

開發完成,還需交由設計師進行頁面驗收,通過實機測試,審查包括字體,顔色、間距、圓角、陰影方面是否和設計稿保持一緻,交互邏輯、頁面跳轉、按鈕狀态是否完善并和主框架統一。檢驗視覺BUG,保證設計可以高度還原。

以上就是HMI的設計主流程啦,希望可以給你帶來啟發,如果你有其他疑問,歡迎留言積進行讨論哦~

本文由 @阿洋 原創發布于人人都是産品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是産品經理平台僅提供信息存儲空間服務。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关職場资讯推荐

热门職場资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved