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