前言

筆者在車聯(lián)網(wǎng)行業(yè)任職HMI視覺設(shè)計師，由于HMI設(shè)計發(fā)展的較晚，所以基本上在開始進(jìn)入到這個領(lǐng)域的人，大多來自于互聯(lián)網(wǎng)行業(yè)。由于互聯(lián)網(wǎng)行業(yè)發(fā)展的比較早，形成了一套成熟的工作流程，即：分工明確的遞進(jìn)式協(xié)作：交互設(shè)計師要等到產(chǎn)品PRD評審結(jié)束才開始介入需求，然后交付黑白線框稿等給到視覺設(shè)計師繼續(xù)跟進(jìn)。這種工作模式可以讓每個人在自己的崗位上做得更加專業(yè)，成為垂直領(lǐng)域的專家。在車聯(lián)網(wǎng)行業(yè)發(fā)展初期的時候，這種工作模式對于傳統(tǒng)行業(yè)的來講，比較新穎、高效，所以在一定程度上促進(jìn)了行業(yè)發(fā)展，但汽車操作系統(tǒng)的設(shè)計還是有很多不同于互聯(lián)網(wǎng)設(shè)計的地方，所以本文旨在討論HMI工作流程，如何分工，怎樣高效的進(jìn)行設(shè)計協(xié)同，以期望探索更適合車聯(lián)網(wǎng)行業(yè)的設(shè)計協(xié)同方案，希望對你可以有所助益。

什么是設(shè)計協(xié)同

對于HMI設(shè)計來講，需要了解很多專業(yè)知識，比如：屏幕、硬件、三電、法規(guī)……這些東西都會影響到設(shè)計的視覺表達(dá)，所以設(shè)計協(xié)同就顯得尤為重要，那么什么是設(shè)計協(xié)同呢？指設(shè)計師在設(shè)計之初，即可開啟分享與協(xié)作，讓協(xié)同者盡可能早的參與到設(shè)計中，通過提供一系列工具，讓協(xié)同者有更加友好地體驗，保證每個人都可以準(zhǔn)確找到相應(yīng)需求的內(nèi)容，并且快速提出修改意見與反饋。簡單地講，就是讓每個人都參與到設(shè)計過程中，以使最終的結(jié)果能夠滿足用戶的需求。

為什么設(shè)計協(xié)同很重要

從產(chǎn)品功能邏輯層面來講，HMI設(shè)計的“復(fù)雜度”是具有有一定的“限制性”的，即保證安全第一，過度復(fù)雜的設(shè)計必然影響駕駛和乘坐人的安全。所以對于設(shè)計，是需要進(jìn)行全方位評估的，必然會涉及到不同的角色。同時隨著項目的不斷發(fā)展，設(shè)計團(tuán)隊也在不斷壯大，設(shè)計師之間的協(xié)作也越來越多，相應(yīng)的溝通和協(xié)作成本就會不斷增加。如何才能更高效的合作，并把設(shè)計質(zhì)量和一致性做得更好，是我們需要解決的問題。所以設(shè)計協(xié)同的最終目的是為了解決問題，做正確的事，讓設(shè)計師做真正該做的事情。

設(shè)計協(xié)同的特點

• 設(shè)計協(xié)同軟件可以在不增加任何工作負(fù)擔(dān)，不影響你的任何設(shè)計思路的前提下，幫助你理順設(shè)計的每一張界面，記錄清楚每個歷史版本，讓你的設(shè)計不再凌亂。
• 相當(dāng)于設(shè)計中的得力助手，以一種協(xié)作的方式，使成本降低，可以更快的完成設(shè)計。
• 隨著社會信息共享化日益普及，設(shè)計協(xié)同逐漸成為設(shè)計行業(yè)發(fā)展的必然趨勢和技術(shù)革新的一個重要方向。

設(shè)計協(xié)同的價值

消除合作障礙

讓設(shè)計師專注于真正重要的事情，而不是把精力放在可以自動化處理的事情上。對所有人員的工作進(jìn)行集中化管理，所有人員基于統(tǒng)一數(shù)據(jù)源進(jìn)行協(xié)作。

沉淀設(shè)計規(guī)范，讓設(shè)計有能力傳承

通過構(gòu)建團(tuán)隊資產(chǎn)庫，比如設(shè)計規(guī)范、控件組件庫等，通過建立健全設(shè)計規(guī)范，讓數(shù)據(jù)沉淀，一方面讓設(shè)計師的設(shè)計有據(jù)可依，提升設(shè)計的專業(yè)性，另一方面，減少因為人員變動造成的數(shù)據(jù)丟失。

合作設(shè)計

在設(shè)計之初，就讓協(xié)同者參與到設(shè)計之中，保證每個人都可以準(zhǔn)確的找到他們的需求內(nèi)容，并快速提出修改意見與反饋，讓設(shè)計師更有針對性的解決問題，讓設(shè)計師無需做重復(fù)性的工作。

當(dāng)前主流的工作流

在HMI設(shè)計的工作流程中，主要涉及到的角色有產(chǎn)品經(jīng)理、交互設(shè)計師、視覺設(shè)計師、研發(fā)工程師、測試工程師、項目經(jīng)理。

不同角色主要工作內(nèi)容是：

產(chǎn)品經(jīng)理

• 根據(jù)市場調(diào)研、競品分析或者是已上線產(chǎn)品用戶反饋，發(fā)現(xiàn)創(chuàng)新或改進(jìn)產(chǎn)品的潛在機(jī)會。
• 確定產(chǎn)品需要做什么，撰寫產(chǎn)品需求文檔。
• 與研發(fā)、設(shè)計、測試等部門溝通，確保各個協(xié)作部門對產(chǎn)品需求的充分理解。

交互設(shè)計師

• 根據(jù)需求文檔，撰寫詳細(xì)的產(chǎn)品流程設(shè)計文檔、產(chǎn)品界面及原型設(shè)計文檔。
• 與產(chǎn)品、設(shè)計、研發(fā)、測試等部門溝通，確保各個協(xié)作部門對交互流程充分理解。

視覺設(shè)計師

• 負(fù)責(zé)項目中各種交互界面、圖標(biāo)、LOGO、按鈕等相關(guān)元素的設(shè)計與制作。
• 積極與開發(fā)溝通，推進(jìn)界面及交互設(shè)計的最終實現(xiàn)。
• 軟件界面的美術(shù)設(shè)計、創(chuàng)意工作和制作工作。

研發(fā)工程師

• 根據(jù)UI界面進(jìn)行代碼化。
• 前端表現(xiàn)層及前后端交互的架構(gòu)設(shè)計和開發(fā)。
• 配合后臺開發(fā)人員實現(xiàn)產(chǎn)品UE及UI頁面結(jié)構(gòu)的代碼編程及腳本編碼。

測試工程師

• 編寫測試計劃、規(guī)劃詳細(xì)的測試方案、編寫測試用例。
• 根據(jù)測試計劃搭建和維護(hù)測試環(huán)境。
• 執(zhí)行測試工作，提交測試報告。包括編寫用于測試的自動測試腳本，完整地記錄測試結(jié)果，編寫完整的測試報告等相關(guān)的技術(shù)文檔。
• 為業(yè)務(wù)部門提供相應(yīng)技術(shù)支持，確保軟件質(zhì)量指標(biāo)。

項目經(jīng)理

• 對項目進(jìn)行全方位把控，對工作進(jìn)行分解、落實在人，在項目開始階段，進(jìn)行排期。
• 在項目進(jìn)行過程中，對遇到的問題及時跟蹤，修正，不斷溝通協(xié)調(diào)、以便推進(jìn)項目的進(jìn)展，還要對各類臨時出現(xiàn)的事項進(jìn)行拍板和決策。

圍繞著HMI設(shè)計的整個工作流程是：

產(chǎn)品經(jīng)理確認(rèn)需求，輸出PRD文檔；交互設(shè)計師收到PRD文檔以后，基于需求，梳理功能，完善業(yè)務(wù)流程，完成交互文檔的制作，輸出UE文檔；視覺設(shè)計師在收到UE文檔以后，針對交互文檔中的流程頁面，進(jìn)行視覺設(shè)計，輸出UI文件給到研發(fā)同學(xué)；研發(fā)同學(xué)根據(jù)UI文件和交互文檔進(jìn)行代碼化，完成以后進(jìn)入測試環(huán)節(jié)，測試工程師和產(chǎn)品、交互、視覺都需要參與到測試過程中，當(dāng)完成測試工作以后進(jìn)行發(fā)版。

目前常用設(shè)計協(xié)同方式

設(shè)計師自我協(xié)同

涉及角色

自己、設(shè)計師小團(tuán)隊。

痛點

工作中很多重復(fù)的內(nèi)容，比如：Button、List等使用的地方很多，如果每個元素都重新繪制，勢必會投入很多時間，同時因為人為因素，難免會出現(xiàn)不統(tǒng)一的地方。那么怎么樣解決這個問題呢？

協(xié)同方式

當(dāng)團(tuán)隊初期發(fā)展的時候，或者整個團(tuán)隊只有少數(shù)幾個設(shè)計師的時候，通過匯總通用樣式和組件，形成視覺指導(dǎo)Guide，方便通用樣式的復(fù)用，減少重復(fù)工作量，達(dá)到快速完成視覺設(shè)計的目的。

優(yōu)點

通過樣式庫和控件組件庫的搭建，形成了一定的共有樣式，方便復(fù)用，有效的減少了重復(fù)工作量。

缺點

由于控件組件庫是在設(shè)計進(jìn)行到一定程度以后提煉的，會存在滯后性，并且隨著設(shè)計工作越來越往后，會發(fā)現(xiàn)前期的控件組件存在不合適的地方，需要對之前的工作進(jìn)行修正。

設(shè)計團(tuán)隊協(xié)同

涉及角色

設(shè)計團(tuán)隊內(nèi)部。

痛點

當(dāng)公司發(fā)展到一定的階段：

1. 公司有不同的產(chǎn)品，且都需要長期的開發(fā)和迭代。
2. 越來越多的設(shè)計師加入公司。

當(dāng)設(shè)計團(tuán)隊越來越大，大家分工越來越細(xì)，想法越來越多，就會發(fā)現(xiàn)，復(fù)制粘貼guide的方式，已經(jīng)無法滿足團(tuán)隊的發(fā)展了，經(jīng)常出現(xiàn)組件不能滿足使用的情況，或者是組件相似但不知道怎么選擇等問題。
同時因為沒有統(tǒng)一的流程，會發(fā)現(xiàn)不同的業(yè)務(wù)對于同一功能交互邏輯的不統(tǒng)一現(xiàn)象，比如：搜索是很多業(yè)務(wù)都會使用的功能，因為沒有統(tǒng)一定義，有的業(yè)務(wù)會采用即時搜索模式，有的業(yè)務(wù)必須點擊搜索以后才可以進(jìn)行搜索，并且這種問題，前期很難發(fā)現(xiàn)，只有到了中后期走查的時候才會發(fā)現(xiàn)。
所以在后期會針對每一個差異點進(jìn)行統(tǒng)一，需要全流程重新來一遍，費時費力。那么怎么才可以避免這種情況的發(fā)生呢？答案就是構(gòu)建設(shè)計系統(tǒng)。

協(xié)同方式

設(shè)計系統(tǒng)不同于guide的地方是：樣式，控件組件只是設(shè)計系統(tǒng)中的兩個組成部分，除此以外，設(shè)計系統(tǒng)還包括了一系列的標(biāo)準(zhǔn)來指導(dǎo)設(shè)計。比如：圖標(biāo)、動效、音效等。這些標(biāo)準(zhǔn)記錄了設(shè)計團(tuán)隊內(nèi)達(dá)成一致的一系列的決定，比如如何選擇控件，如何在不同的控件中選擇。正是這些標(biāo)準(zhǔn)才確保了設(shè)計方案不僅僅只解決一個問題，而是可以被復(fù)用的。這些標(biāo)準(zhǔn)也是為什么用戶能獲得一致的體驗的原因。
通過設(shè)計系統(tǒng)的建立，讓設(shè)計規(guī)模化，繼而進(jìn)一步強(qiáng)化車機(jī)系統(tǒng)的統(tǒng)一性，同時為設(shè)計師在做設(shè)計時提供一個很好的指導(dǎo)方向，讓團(tuán)隊內(nèi)不同成員的設(shè)計在風(fēng)格上保持一致，提升設(shè)計團(tuán)隊的專業(yè)度。關(guān)于設(shè)計系統(tǒng)的建立本文就不再過多描述，后續(xù)會出專門的文章進(jìn)行詳述，這里主要是講述設(shè)計系統(tǒng)搭建以后的協(xié)同方式。
設(shè)計系統(tǒng)的搭建需要專門的人或者團(tuán)隊進(jìn)行，當(dāng)搭建完成以后，需要輸出的資源有：UE控件組件庫、顏色/字體樣式庫、UI控件組件庫、UI控件組件說明文檔。這些資源各有什么用呢，接下來進(jìn)行詳細(xì)說明：

UE控件組件庫

提供給交互設(shè)計師，基于提供的內(nèi)容，交互可以快速的構(gòu)建界面、交互和流程等，就像搭樂高一樣?？梢钥焖俚臉?gòu)建一些產(chǎn)品原型或者是實驗性的功能，來進(jìn)行測試以快速驗證想法。

顏色/字體樣式庫、UI控件組件庫

提供給UI設(shè)計師，形式可以是Sketch Libraries，一方面方便設(shè)計師調(diào)用，使不同的設(shè)計師的設(shè)計變得更加統(tǒng)一，且更加可預(yù)測，同時組件也可以讓設(shè)計師更多的時間專注于如何構(gòu)建更好的用戶體驗，而不是去糾結(jié)于樣式的調(diào)整。

UI控件組件說明文檔

提供給研發(fā)，可以是pdf之類的文檔形式，主要是詳細(xì)的描述每一個組件的各種屬性，以及里面包含的交互邏輯等，幫助研發(fā)搭建起研發(fā)自己的底層代碼平臺。
那么這些資源和不同的角色之間是怎么協(xié)作呢？UE控件組件庫不需要常常更新，完成后給到交互設(shè)計團(tuán)隊，供交互設(shè)計師使用搭建UE文檔。在項目開始之前，負(fù)責(zé)設(shè)計系統(tǒng)的UI團(tuán)隊進(jìn)行顏色/字體樣式庫、UI控件組件庫制作，完成以后分享到團(tuán)隊內(nèi)，供業(yè)務(wù)設(shè)計師使用進(jìn)行界面設(shè)計，同時進(jìn)行UI控件組件說明文檔的編撰，完成以后提供給相應(yīng)的平臺研發(fā)，讓平臺研發(fā)進(jìn)行組件代碼化。當(dāng)代碼實現(xiàn)以后進(jìn)行走查，檢查是否按照UI準(zhǔn)確的實現(xiàn)。當(dāng)業(yè)務(wù)設(shè)計師完成了業(yè)務(wù)的界面設(shè)計以后，進(jìn)行評審，輸出給對應(yīng)的業(yè)務(wù)研發(fā)，研發(fā)對于相應(yīng)的視覺界面進(jìn)行對應(yīng)的代碼化，使用組件的地方直接調(diào)用平臺代碼，剩下的由業(yè)務(wù)研發(fā)進(jìn)行代碼化。

優(yōu)點

組件由專門的UI設(shè)計師和研發(fā)團(tuán)隊負(fù)責(zé)，當(dāng)出現(xiàn)設(shè)計變更以后，業(yè)務(wù)設(shè)計師可以快速通過組件庫更新最新的視覺樣式，同時和平臺研發(fā)對接，進(jìn)行代碼修改，而不需要每個業(yè)務(wù)研發(fā)單獨修改，大大減少了跨部門的協(xié)作溝通成本。

缺點

團(tuán)隊內(nèi)需要專門的設(shè)計師構(gòu)建設(shè)計系統(tǒng)并負(fù)責(zé)日常維護(hù)。

設(shè)計師和交互協(xié)同

涉及角色

設(shè)計、交互團(tuán)隊。

痛點

由于需求的不確定性，以及車聯(lián)網(wǎng)項目周期較長等特點，會出現(xiàn)需求經(jīng)常變更的情況，那么交互就需要不停的更新交互文檔，UI也需要不停的輸出視覺文檔，往往一個項目結(jié)束以后，會有幾十份甚至上百份的設(shè)計文檔的情況出現(xiàn)。

協(xié)同方式

隨著云端化辦公軟件Figma的興起，為多角色協(xié)作提供了可能性，目前主流的工具有：Figma、MasterGo、Pixso、即時設(shè)計等在線軟件。
設(shè)計文件現(xiàn)在是一個鏈接，這意味著：

• 設(shè)計師可以更輕松地并行工作。
• 工程師可以更早的查看設(shè)計稿進(jìn)行技術(shù)評審。
• 利益相關(guān)者或任何有鏈接的人都可以看到設(shè)計從想法到實現(xiàn)的過程。
• 設(shè)計現(xiàn)在是一個整體而不是在設(shè)計過程被分割成多個文件。

UI設(shè)計師不必再等到交互完成評審，輸出交互文檔以后進(jìn)行視覺設(shè)計，交互和設(shè)計完全可以合二為一，輸出一份高保真交互流程文檔，并且輸出的文檔可以供研發(fā)直接瀏覽器查看，而不需要像之前一樣，不停的進(jìn)行設(shè)計資源的輸出。極大的節(jié)省了設(shè)計師輸出時間。優(yōu)化了協(xié)作工作流。

優(yōu)點

協(xié)作設(shè)計，云端辦公，多角色參與。
一鍵獲取文件，不需要通過其他平臺轉(zhuǎn)化，步驟簡單；自動生成代碼與標(biāo)注。設(shè)計稿修改后自動更新，無需重復(fù)下載。

缺點

云端保存，會有數(shù)據(jù)泄露的風(fēng)險。
必須在線操作。

設(shè)計和研發(fā)協(xié)同

涉及角色

UE、UI、研發(fā)。

痛點

由于公司發(fā)展，業(yè)務(wù)線增加了很多適配線，這塊的工作基本上屬于：把已有的UI適配到另一個屏幕尺寸下，需要設(shè)計的地方不太多，需要花更多的時間去重新按照最新的屏幕尺寸搭建一遍UI界面，屬于用時間換業(yè)績，為了達(dá)到這個目標(biāo)，可以采取的方式大致分為兩種：
第一種是增加更多的人力，不管是招更多的人，還是增加更多的供應(yīng)商人員，都會增加業(yè)務(wù)支出，并且由于業(yè)務(wù)無法一直保證飽和，所以會出現(xiàn)一段時間忙的要命，招了很多人員，過了這段時間，業(yè)務(wù)不太多了，大家都閑了下來，但是開支還是必要的，所以這算是一種沒有辦法的辦法，對于團(tuán)隊或是公司來講，并不可持續(xù)。
另外一種方式就是重新梳理工作流，減少一些重復(fù)無意義的工作，比如像是系統(tǒng)設(shè)置等瀑布流式的界面，不同車型下的區(qū)別只來自于功能的有無，界面上并無太大區(qū)別，這里所說的工作，不僅僅指設(shè)計師的界面設(shè)計工作，同時也包括了研發(fā)同學(xué)的研發(fā)落地工作，同時因為研發(fā)同學(xué)的適配，也會造成測試走查環(huán)節(jié)，這些都是一些重復(fù)性的工作量，所以是否有一種更好的協(xié)作方式可以避免這種情況的發(fā)生呢？
答案就是我們接下來要講的一種全新的工作模式：C2D2C模式。

協(xié)同方式

由于設(shè)計團(tuán)隊在早期的發(fā)展中，積累了大量的設(shè)計資產(chǎn)。這些設(shè)計資產(chǎn)的沉淀就是設(shè)計標(biāo)準(zhǔn)化的基礎(chǔ)，將設(shè)計資產(chǎn)轉(zhuǎn)為封裝好的代碼組件，也就是C2D的過程。然后將封裝好的組件通過低代碼平臺進(jìn)行屬性配置、搭建頁面、布局調(diào)整實現(xiàn)頁面的設(shè)計就是 D2C 的過程。通過平臺設(shè)定交互行為和綁定后臺數(shù)據(jù)，完成整個系統(tǒng)，最后再進(jìn)行站點發(fā)布，就實現(xiàn)了 C2D2C 的完整流程。
C2D2C（Code to design to design）的模式，簡單講就是研發(fā)同學(xué)把設(shè)計資產(chǎn)通過設(shè)計標(biāo)準(zhǔn)化和研發(fā)工業(yè)化的方式完成代碼化，然后讓設(shè)計師調(diào)用已經(jīng)代碼化的設(shè)計資產(chǎn)進(jìn)行設(shè)計工作，這樣子當(dāng)設(shè)計師完成了界面設(shè)計的時候，相當(dāng)于同時完成了前端開發(fā)，接下來研發(fā)同學(xué)只需要根據(jù)拿到的界面添加簡單的邏輯就算完成了研發(fā)工作，實現(xiàn)中后臺設(shè)計研發(fā)流程的整體提效。

優(yōu)點

由于樣式、組件已經(jīng)完成了代碼化，那么在適配工作中，控件組件化高的界面就可以直接生成代碼，不需要設(shè)計師重復(fù)設(shè)計，同時由于減少了設(shè)計師和研發(fā)的參與，節(jié)省了大量溝通成本，也減少了很多因為人為因素而產(chǎn)生的bug。
由于設(shè)計師減少了重復(fù)工作量，可以有更多的時間集中在視覺表現(xiàn)上，有效提升了設(shè)計輸出的質(zhì)量，保證了產(chǎn)品的設(shè)計感。
對于大量適配項目的團(tuán)隊，可以由設(shè)計師直接配置項目組件，無需經(jīng)過研發(fā)，減少出錯概率，極大提升工作效率。

缺點

前期需要研發(fā)同學(xué)代碼化基礎(chǔ)控件，所以需要投入人力、精力進(jìn)行前期的工作。
由于控件提前進(jìn)行了代碼化，后續(xù)可能會出現(xiàn)無法滿足業(yè)務(wù)需求等情況出現(xiàn)，所以需要有人及時對代碼進(jìn)行維護(hù)更新。

全角色協(xié)同

涉及角色

產(chǎn)品、UE、UI、研發(fā)、測試。

痛點

基于上面講述的C2D2C模式，已經(jīng)完成了一個共享平臺的搭建，由于配置需要研發(fā)的參與，所以始終需要研發(fā)同學(xué)作為集成人員，并不利于其他角色的使用，那么怎么樣可以讓產(chǎn)品同學(xué)，設(shè)計同學(xué)，或者說是普通用戶使用呢？

協(xié)同方式

一個優(yōu)秀的共享平臺是需要所有人都可以在其中使用的，所以，當(dāng)公司或者團(tuán)隊發(fā)展到穩(wěn)定階段，我們需要重構(gòu)工作流，以需求為導(dǎo)向，搭建全員工作平臺，基于設(shè)計師和研發(fā)搭建的平臺基礎(chǔ)上，提煉需求，強(qiáng)化個性化和定制化，滿足品牌產(chǎn)品的個性化需求，具體來講，就是把UI界面中元素提煉出相應(yīng)的功能，生成功能清單，通過選擇不同的功能，生成相對應(yīng)的界面。
當(dāng)完整的共享平臺搭建完成以后，團(tuán)隊中的每個角色的工作內(nèi)容都發(fā)生了變化，產(chǎn)品的工作是構(gòu)建更多的需求，交互設(shè)計師的工作是構(gòu)建更多的交互形式，產(chǎn)品架構(gòu)，UI設(shè)計師的工作是設(shè)計更多更好的界面布局，視覺表現(xiàn)，然后研發(fā)把上述內(nèi)容通過代碼匯總進(jìn)我們的需求池中，擴(kuò)展我們的平臺豐富度。
HMI設(shè)計工作，就變成了：客戶在我們的配置面板中選擇需要的需求，喜歡的布局，想要的視覺，點擊完成，就可以即刻看到高度定制化的一套系統(tǒng)。

優(yōu)點

讓每個人回歸工作的本質(zhì)，不需要為了一些重復(fù)的繁雜的內(nèi)容而疲于奔命，做更有價值的工作，實現(xiàn)工作的價值
賦能行業(yè)，可以滿足車企定制化的需求，提供車企一套完整的車機(jī)系統(tǒng)解決方案。

缺點

投入大，對于小體量的業(yè)務(wù)來講短期無法創(chuàng)造價值。

最后

對于現(xiàn)在的行業(yè)環(huán)境，增速提效已經(jīng)達(dá)成了基本共識，設(shè)計協(xié)同就成了一個大課題，但是不同的企業(yè)，不同的團(tuán)隊面對的具體問題不一樣，可使用的資源也不太一樣，那么采用哪種協(xié)同方式并無定式，需要根據(jù)實際情況，進(jìn)行具體分析，畢竟效率的提升是為了創(chuàng)造最大的價值。我們所有的努力最終目的是為了解決問題，做正確的事。