2023-4-6 博博
筆者在車聯(lián)網(wǎng)行業(yè)任職HMI視覺設(shè)計師,由于HMI設(shè)計發(fā)展的較晚,所以基本上在開始進入到這個領(lǐng)域的人,大多來自于互聯(lián)網(wǎng)行業(yè)。由于互聯(lián)網(wǎng)行業(yè)發(fā)展的比較早,形成了一套成熟的工作流程,即:分工明確的遞進式協(xié)作:交互設(shè)計師要等到產(chǎn)品PRD評審結(jié)束才開始介入需求,然后交付黑白線框稿等給到視覺設(shè)計師繼續(xù)跟進。這種工作模式可以讓每個人在自己的崗位上做得更加專業(yè),成為垂直領(lǐng)域的專家。在車聯(lián)網(wǎng)行業(yè)發(fā)展初期的時候,這種工作模式對于傳統(tǒng)行業(yè)的來講,比較新穎、高效,所以在一定程度上促進了行業(yè)發(fā)展,但汽車操作系統(tǒng)的設(shè)計還是有很多不同于互聯(lián)網(wǎng)設(shè)計的地方,所以本文旨在討論HMI工作流程,如何分工,怎樣高效的進行設(shè)計協(xié)同,以期望探索更適合車聯(lián)網(wǎng)行業(yè)的設(shè)計協(xié)同方案,希望對你可以有所助益。
對于HMI設(shè)計來講,需要了解很多專業(yè)知識,比如:屏幕、硬件、三電、法規(guī)……這些東西都會影響到設(shè)計的視覺表達,所以設(shè)計協(xié)同就顯得尤為重要,那么什么是設(shè)計協(xié)同呢?指設(shè)計師在設(shè)計之初,即可開啟分享與協(xié)作,讓協(xié)同者盡可能早的參與到設(shè)計中,通過提供一系列工具,讓協(xié)同者有更加友好地體驗,保證每個人都可以準確找到相應(yīng)需求的內(nèi)容,并且快速提出修改意見與反饋。簡單地講,就是讓每個人都參與到設(shè)計過程中,以使最終的結(jié)果能夠滿足用戶的需求。
從產(chǎn)品功能邏輯層面來講,HMI設(shè)計的“復雜度”是具有有一定的“限制性”的,即保證安全第一,過度復雜的設(shè)計必然影響駕駛和乘坐人的安全。所以對于設(shè)計,是需要進行全方位評估的,必然會涉及到不同的角色。同時隨著項目的不斷發(fā)展,設(shè)計團隊也在不斷壯大,設(shè)計師之間的協(xié)作也越來越多,相應(yīng)的溝通和協(xié)作成本就會不斷增加。如何才能更高效的合作,并把設(shè)計質(zhì)量和一致性做得更好,是我們需要解決的問題。所以設(shè)計協(xié)同的最終目的是為了解決問題,做正確的事,讓設(shè)計師做真正該做的事情。
讓設(shè)計師專注于真正重要的事情,而不是把精力放在可以自動化處理的事情上。對所有人員的工作進行集中化管理,所有人員基于統(tǒng)一數(shù)據(jù)源進行協(xié)作。
通過構(gòu)建團隊資產(chǎn)庫,比如設(shè)計規(guī)范、控件組件庫等,通過建立健全設(shè)計規(guī)范,讓數(shù)據(jù)沉淀,一方面讓設(shè)計師的設(shè)計有據(jù)可依,提升設(shè)計的專業(yè)性,另一方面,減少因為人員變動造成的數(shù)據(jù)丟失。
在設(shè)計之初,就讓協(xié)同者參與到設(shè)計之中,保證每個人都可以準確的找到他們的需求內(nèi)容,并快速提出修改意見與反饋,讓設(shè)計師更有針對性的解決問題,讓設(shè)計師無需做重復性的工作。
在HMI設(shè)計的工作流程中,主要涉及到的角色有產(chǎn)品經(jīng)理、交互設(shè)計師、視覺設(shè)計師、研發(fā)工程師、測試工程師、項目經(jīng)理。
不同角色主要工作內(nèi)容是:
圍繞著HMI設(shè)計的整個工作流程是:
產(chǎn)品經(jīng)理確認需求,輸出PRD文檔;交互設(shè)計師收到PRD文檔以后,基于需求,梳理功能,完善業(yè)務(wù)流程,完成交互文檔的制作,輸出UE文檔;視覺設(shè)計師在收到UE文檔以后,針對交互文檔中的流程頁面,進行視覺設(shè)計,輸出UI文件給到研發(fā)同學;研發(fā)同學根據(jù)UI文件和交互文檔進行代碼化,完成以后進入測試環(huán)節(jié),測試工程師和產(chǎn)品、交互、視覺都需要參與到測試過程中,當完成測試工作以后進行發(fā)版。
涉及角色
自己、設(shè)計師小團隊。
痛點
工作中很多重復的內(nèi)容,比如:Button、List等使用的地方很多,如果每個元素都重新繪制,勢必會投入很多時間,同時因為人為因素,難免會出現(xiàn)不統(tǒng)一的地方。那么怎么樣解決這個問題呢?
協(xié)同方式
當團隊初期發(fā)展的時候,或者整個團隊只有少數(shù)幾個設(shè)計師的時候,通過匯總通用樣式和組件,形成視覺指導Guide,方便通用樣式的復用,減少重復工作量,達到快速完成視覺設(shè)計的目的。
優(yōu)點
通過樣式庫和控件組件庫的搭建,形成了一定的共有樣式,方便復用,有效的減少了重復工作量。
缺點
由于控件組件庫是在設(shè)計進行到一定程度以后提煉的,會存在滯后性,并且隨著設(shè)計工作越來越往后,會發(fā)現(xiàn)前期的控件組件存在不合適的地方,需要對之前的工作進行修正。
涉及角色
設(shè)計團隊內(nèi)部。
痛點
當公司發(fā)展到一定的階段:
當設(shè)計團隊越來越大,大家分工越來越細,想法越來越多,就會發(fā)現(xiàn),復制粘貼guide的方式,已經(jīng)無法滿足團隊的發(fā)展了,經(jīng)常出現(xiàn)組件不能滿足使用的情況,或者是組件相似但不知道怎么選擇等問題。
同時因為沒有統(tǒng)一的流程,會發(fā)現(xiàn)不同的業(yè)務(wù)對于同一功能交互邏輯的不統(tǒng)一現(xiàn)象,比如:搜索是很多業(yè)務(wù)都會使用的功能,因為沒有統(tǒng)一定義,有的業(yè)務(wù)會采用即時搜索模式,有的業(yè)務(wù)必須點擊搜索以后才可以進行搜索,并且這種問題,前期很難發(fā)現(xiàn),只有到了中后期走查的時候才會發(fā)現(xiàn)。
所以在后期會針對每一個差異點進行統(tǒng)一,需要全流程重新來一遍,費時費力。那么怎么才可以避免這種情況的發(fā)生呢?答案就是構(gòu)建設(shè)計系統(tǒng)。
協(xié)同方式
設(shè)計系統(tǒng)不同于guide的地方是:樣式,控件組件只是設(shè)計系統(tǒng)中的兩個組成部分,除此以外,設(shè)計系統(tǒng)還包括了一系列的標準來指導設(shè)計。比如:圖標、動效、音效等。這些標準記錄了設(shè)計團隊內(nèi)達成一致的一系列的決定,比如如何選擇控件,如何在不同的控件中選擇。正是這些標準才確保了設(shè)計方案不僅僅只解決一個問題,而是可以被復用的。這些標準也是為什么用戶能獲得一致的體驗的原因。
通過設(shè)計系統(tǒng)的建立,讓設(shè)計規(guī)?;?,繼而進一步強化車機系統(tǒng)的統(tǒng)一性,同時為設(shè)計師在做設(shè)計時提供一個很好的指導方向,讓團隊內(nèi)不同成員的設(shè)計在風格上保持一致,提升設(shè)計團隊的專業(yè)度。關(guān)于設(shè)計系統(tǒng)的建立本文就不再過多描述,后續(xù)會出專門的文章進行詳述,這里主要是講述設(shè)計系統(tǒng)搭建以后的協(xié)同方式。
設(shè)計系統(tǒng)的搭建需要專門的人或者團隊進行,當搭建完成以后,需要輸出的資源有:UE控件組件庫、顏色/字體樣式庫、UI控件組件庫、UI控件組件說明文檔。這些資源各有什么用呢,接下來進行詳細說明:
UE控件組件庫
提供給交互設(shè)計師,基于提供的內(nèi)容,交互可以快速的構(gòu)建界面、交互和流程等,就像搭樂高一樣??梢钥焖俚臉?gòu)建一些產(chǎn)品原型或者是實驗性的功能,來進行測試以快速驗證想法。
顏色/字體樣式庫、UI控件組件庫
提供給UI設(shè)計師,形式可以是Sketch Libraries,一方面方便設(shè)計師調(diào)用,使不同的設(shè)計師的設(shè)計變得更加統(tǒng)一,且更加可預(yù)測,同時組件也可以讓設(shè)計師更多的時間專注于如何構(gòu)建更好的用戶體驗,而不是去糾結(jié)于樣式的調(diào)整。
UI控件組件說明文檔
提供給研發(fā),可以是pdf之類的文檔形式,主要是詳細的描述每一個組件的各種屬性,以及里面包含的交互邏輯等,幫助研發(fā)搭建起研發(fā)自己的底層代碼平臺。
那么這些資源和不同的角色之間是怎么協(xié)作呢?UE控件組件庫不需要常常更新,完成后給到交互設(shè)計團隊,供交互設(shè)計師使用搭建UE文檔。在項目開始之前,負責設(shè)計系統(tǒng)的UI團隊進行顏色/字體樣式庫、UI控件組件庫制作,完成以后分享到團隊內(nèi),供業(yè)務(wù)設(shè)計師使用進行界面設(shè)計,同時進行UI控件組件說明文檔的編撰,完成以后提供給相應(yīng)的平臺研發(fā),讓平臺研發(fā)進行組件代碼化。當代碼實現(xiàn)以后進行走查,檢查是否按照UI準確的實現(xiàn)。當業(yè)務(wù)設(shè)計師完成了業(yè)務(wù)的界面設(shè)計以后,進行評審,輸出給對應(yīng)的業(yè)務(wù)研發(fā),研發(fā)對于相應(yīng)的視覺界面進行對應(yīng)的代碼化,使用組件的地方直接調(diào)用平臺代碼,剩下的由業(yè)務(wù)研發(fā)進行代碼化。
優(yōu)點
組件由專門的UI設(shè)計師和研發(fā)團隊負責,當出現(xiàn)設(shè)計變更以后,業(yè)務(wù)設(shè)計師可以快速通過組件庫更新最新的視覺樣式,同時和平臺研發(fā)對接,進行代碼修改,而不需要每個業(yè)務(wù)研發(fā)單獨修改,大大減少了跨部門的協(xié)作溝通成本。
缺點
團隊內(nèi)需要專門的設(shè)計師構(gòu)建設(shè)計系統(tǒng)并負責日常維護。
涉及角色
設(shè)計、交互團隊。
痛點
由于需求的不確定性,以及車聯(lián)網(wǎng)項目周期較長等特點,會出現(xiàn)需求經(jīng)常變更的情況,那么交互就需要不停的更新交互文檔,UI也需要不停的輸出視覺文檔,往往一個項目結(jié)束以后,會有幾十份甚至上百份的設(shè)計文檔的情況出現(xiàn)。
協(xié)同方式
隨著云端化辦公軟件Figma的興起,為多角色協(xié)作提供了可能性,目前主流的工具有:Figma、MasterGo、Pixso、即時設(shè)計等在線軟件。
設(shè)計文件現(xiàn)在是一個鏈接,這意味著:
UI設(shè)計師不必再等到交互完成評審,輸出交互文檔以后進行視覺設(shè)計,交互和設(shè)計完全可以合二為一,輸出一份高保真交互流程文檔,并且輸出的文檔可以供研發(fā)直接瀏覽器查看,而不需要像之前一樣,不停的進行設(shè)計資源的輸出。極大的節(jié)省了設(shè)計師輸出時間。優(yōu)化了協(xié)作工作流。
優(yōu)點
協(xié)作設(shè)計,云端辦公,多角色參與。
一鍵獲取文件,不需要通過其他平臺轉(zhuǎn)化,步驟簡單;自動生成代碼與標注。設(shè)計稿修改后自動更新,無需重復下載。
缺點
云端保存,會有數(shù)據(jù)泄露的風險。
必須在線操作。
涉及角色
UE、UI、研發(fā)。
痛點
由于公司發(fā)展,業(yè)務(wù)線增加了很多適配線,這塊的工作基本上屬于:把已有的UI適配到另一個屏幕尺寸下,需要設(shè)計的地方不太多,需要花更多的時間去重新按照最新的屏幕尺寸搭建一遍UI界面,屬于用時間換業(yè)績,為了達到這個目標,可以采取的方式大致分為兩種:
第一種是增加更多的人力,不管是招更多的人,還是增加更多的供應(yīng)商人員,都會增加業(yè)務(wù)支出,并且由于業(yè)務(wù)無法一直保證飽和,所以會出現(xiàn)一段時間忙的要命,招了很多人員,過了這段時間,業(yè)務(wù)不太多了,大家都閑了下來,但是開支還是必要的,所以這算是一種沒有辦法的辦法,對于團隊或是公司來講,并不可持續(xù)。
另外一種方式就是重新梳理工作流,減少一些重復無意義的工作,比如像是系統(tǒng)設(shè)置等瀑布流式的界面,不同車型下的區(qū)別只來自于功能的有無,界面上并無太大區(qū)別,這里所說的工作,不僅僅指設(shè)計師的界面設(shè)計工作,同時也包括了研發(fā)同學的研發(fā)落地工作,同時因為研發(fā)同學的適配,也會造成測試走查環(huán)節(jié),這些都是一些重復性的工作量,所以是否有一種更好的協(xié)作方式可以避免這種情況的發(fā)生呢?
答案就是我們接下來要講的一種全新的工作模式:C2D2C模式。
協(xié)同方式
由于設(shè)計團隊在早期的發(fā)展中,積累了大量的設(shè)計資產(chǎn)。這些設(shè)計資產(chǎn)的沉淀就是設(shè)計標準化的基礎(chǔ),將設(shè)計資產(chǎn)轉(zhuǎn)為封裝好的代碼組件,也就是C2D的過程。然后將封裝好的組件通過低代碼平臺進行屬性配置、搭建頁面、布局調(diào)整實現(xiàn)頁面的設(shè)計就是 D2C 的過程。通過平臺設(shè)定交互行為和綁定后臺數(shù)據(jù),完成整個系統(tǒng),最后再進行站點發(fā)布,就實現(xiàn)了 C2D2C 的完整流程。
C2D2C(Code to design to design)的模式,簡單講就是研發(fā)同學把設(shè)計資產(chǎn)通過設(shè)計標準化和研發(fā)工業(yè)化的方式完成代碼化,然后讓設(shè)計師調(diào)用已經(jīng)代碼化的設(shè)計資產(chǎn)進行設(shè)計工作,這樣子當設(shè)計師完成了界面設(shè)計的時候,相當于同時完成了前端開發(fā),接下來研發(fā)同學只需要根據(jù)拿到的界面添加簡單的邏輯就算完成了研發(fā)工作,實現(xiàn)中后臺設(shè)計研發(fā)流程的整體提效。
優(yōu)點
由于樣式、組件已經(jīng)完成了代碼化,那么在適配工作中,控件組件化高的界面就可以直接生成代碼,不需要設(shè)計師重復設(shè)計,同時由于減少了設(shè)計師和研發(fā)的參與,節(jié)省了大量溝通成本,也減少了很多因為人為因素而產(chǎn)生的bug。
由于設(shè)計師減少了重復工作量,可以有更多的時間集中在視覺表現(xiàn)上,有效提升了設(shè)計輸出的質(zhì)量,保證了產(chǎn)品的設(shè)計感。
對于大量適配項目的團隊,可以由設(shè)計師直接配置項目組件,無需經(jīng)過研發(fā),減少出錯概率,極大提升工作效率。
缺點
前期需要研發(fā)同學代碼化基礎(chǔ)控件,所以需要投入人力、精力進行前期的工作。
由于控件提前進行了代碼化,后續(xù)可能會出現(xiàn)無法滿足業(yè)務(wù)需求等情況出現(xiàn),所以需要有人及時對代碼進行維護更新。
涉及角色
產(chǎn)品、UE、UI、研發(fā)、測試。
痛點
基于上面講述的C2D2C模式,已經(jīng)完成了一個共享平臺的搭建,由于配置需要研發(fā)的參與,所以始終需要研發(fā)同學作為集成人員,并不利于其他角色的使用,那么怎么樣可以讓產(chǎn)品同學,設(shè)計同學,或者說是普通用戶使用呢?
協(xié)同方式
一個優(yōu)秀的共享平臺是需要所有人都可以在其中使用的,所以,當公司或者團隊發(fā)展到穩(wěn)定階段,我們需要重構(gòu)工作流,以需求為導向,搭建全員工作平臺,基于設(shè)計師和研發(fā)搭建的平臺基礎(chǔ)上,提煉需求,強化個性化和定制化,滿足品牌產(chǎn)品的個性化需求,具體來講,就是把UI界面中元素提煉出相應(yīng)的功能,生成功能清單,通過選擇不同的功能,生成相對應(yīng)的界面。
當完整的共享平臺搭建完成以后,團隊中的每個角色的工作內(nèi)容都發(fā)生了變化,產(chǎn)品的工作是構(gòu)建更多的需求,交互設(shè)計師的工作是構(gòu)建更多的交互形式,產(chǎn)品架構(gòu),UI設(shè)計師的工作是設(shè)計更多更好的界面布局,視覺表現(xiàn),然后研發(fā)把上述內(nèi)容通過代碼匯總進我們的需求池中,擴展我們的平臺豐富度。
HMI設(shè)計工作,就變成了:客戶在我們的配置面板中選擇需要的需求,喜歡的布局,想要的視覺,點擊完成,就可以即刻看到高度定制化的一套系統(tǒng)。
優(yōu)點
讓每個人回歸工作的本質(zhì),不需要為了一些重復的繁雜的內(nèi)容而疲于奔命,做更有價值的工作,實現(xiàn)工作的價值
賦能行業(yè),可以滿足車企定制化的需求,提供車企一套完整的車機系統(tǒng)解決方案。
缺點
投入大,對于小體量的業(yè)務(wù)來講短期無法創(chuàng)造價值。
對于現(xiàn)在的行業(yè)環(huán)境,增速提效已經(jīng)達成了基本共識,設(shè)計協(xié)同就成了一個大課題,但是不同的企業(yè),不同的團隊面對的具體問題不一樣,可使用的資源也不太一樣,那么采用哪種協(xié)同方式并無定式,需要根據(jù)實際情況,進行具體分析,畢竟效率的提升是為了創(chuàng)造最大的價值。我們所有的努力最終目的是為了解決問題,做正確的事。
作者:菘藍C 來源:站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
藍藍設(shè)計的小編 http://www.miumiuwan.com