呂洪波 楊登豐 李正奎

摘要：本文針對應用軟件設(shè)計開發(fā)中面臨的重復設(shè)計、重復開發(fā)、體驗不一致等問題，提出一種以設(shè)計中臺為核心的解決方案，并對其發(fā)展階段、應用模式及適用人群等進行闡述。

關(guān)鍵詞：應用軟件設(shè)計;設(shè)計中臺;交互設(shè)計

一、前言

應用軟件設(shè)計評審時，設(shè)計師發(fā)現(xiàn)自己絞盡腦汁做的設(shè)計方案其他產(chǎn)品早就做過，而且還比自己做得好;應用軟件研發(fā)時，相同的功能在不同的軟件產(chǎn)品中形態(tài)千差萬別，實現(xiàn)后也常常說改就改;用戶使用應用軟件時，同部門出品的A產(chǎn)品與B產(chǎn)品在交互操作、視覺風格等用戶體驗上大相徑庭……

這些場景是不是似曾相識？其實這是很多研發(fā)團隊面臨的典型設(shè)計困境：重復設(shè)計、重復開發(fā)、用戶體驗不一致。

這些問題的出現(xiàn)從系統(tǒng)研發(fā)的各個階段，有多種因素造成。本文主要針對UI和交互設(shè)計階段，針對典型設(shè)計困境：重復設(shè)計、重復開發(fā)、用戶體驗不一致。提出了以設(shè)計中臺為核心的解決方案，希望通過設(shè)計中臺的構(gòu)建與應用，提升設(shè)計能力、規(guī)范設(shè)計模式、減少重復開發(fā)，最終提升軟件品質(zhì)，優(yōu)化用戶體驗。

二、我們面臨的設(shè)計困境

近年來，各領(lǐng)域信息化建設(shè)大潮席卷而來，應用軟件的研制需求井噴式增長，數(shù)量、質(zhì)量要求呈快速上升態(tài)勢。以往的“項目經(jīng)理提功能需求-設(shè)計人員出原型設(shè)計-開發(fā)人員編碼實現(xiàn)”單線程工作模式讓人力資源日益捉襟見肘。同時，由于設(shè)計人員理念、風格和能力的差異性，項目間設(shè)計人員信息的不對稱，同一個問題存在多個解決方案，最終造成了以下尷尬的局面：

1. 項目/產(chǎn)品間用戶體驗不一致

某一個重點項目投入設(shè)計力量多，經(jīng)過多輪評審后投入研發(fā)，用戶體驗非常良好;但另一個臨時項目由于時間緊功能多，最終效果只能說覆蓋了功能點，用戶體驗優(yōu)化工作滯后。

2. 同一項目/產(chǎn)品內(nèi)用戶體驗不一致

某大型項目由于前后有多個設(shè)計人員參與設(shè)計，每個版本的交互方式都不一樣，項目內(nèi)光是表格樣式就有五、六種，一個模塊一種風格，造成研發(fā)輸入不一致。

3. 用戶體驗得不到完美落地

某項目緊急上馬，大家都知道用戶體驗很重要，但由于研發(fā)資源不足、進度安排時間緊……最后放棄用戶體驗方面的細節(jié)優(yōu)化。

三、解決策略

對于企業(yè)而言，大量項目的定制研發(fā)在帶來利潤的同時，人力資源緊缺成為不可忽略的現(xiàn)實問題。傳統(tǒng)的“一對一設(shè)計+點對點服務(wù)”模式不能滿足效率、質(zhì)量、成本之間的協(xié)同效應，基于此，對于項目范圍，特別是基于需求可視化的設(shè)計方式，提煉設(shè)計模式，形成“一對多設(shè)計+點對面服務(wù)”，提升設(shè)計規(guī)范性和通用性的需要日益迫切，設(shè)計中臺應運而生。設(shè)計中臺將設(shè)計人員、產(chǎn)品經(jīng)理、研發(fā)人員從大量重復工作中釋放出來，使各產(chǎn)品的用戶體驗保持一致，也確保不同能力的設(shè)計、研發(fā)輸出同等質(zhì)量的成果;其次，設(shè)計中臺避免了無謂的“重復造輪子”的資源浪費，讓設(shè)計人員把創(chuàng)造力專注在最需要的地方;同時設(shè)計中臺也降低了設(shè)計門檻，能讓更多了解業(yè)務(wù)的人參與進來，真正做到“人人都是設(shè)計師”。

四、什么是設(shè)計中臺

所謂中臺，是通過制定標準和機制，把不確定的業(yè)務(wù)規(guī)則和流程通過工業(yè)化和市場化的手段確定下來，以減少人與人之間的溝通成本，同時還能最大程度地提升協(xié)作效率。其目的是提高企業(yè)快速低成本創(chuàng)新的能力，減少溝通成本。

應用軟件設(shè)計中臺是由可視化元件、組件、模塊、典型頁面、功能解決方案以及設(shè)計規(guī)范等設(shè)計資產(chǎn)組成的設(shè)計資源池，用于指導各產(chǎn)品快速、高質(zhì)實現(xiàn)新增業(yè)務(wù)設(shè)計方案的工具。

設(shè)計中臺明確了統(tǒng)一的評價標準，是各產(chǎn)品的設(shè)計指導方向，使各產(chǎn)品的設(shè)計風格保持統(tǒng)一，不會往不同的方向越走越遠，不同類型的產(chǎn)品間能實現(xiàn)視覺統(tǒng)一性、操作一致性和數(shù)據(jù)互通性。

設(shè)計中臺提供不斷更新進化的系統(tǒng)性解決方案。當需要設(shè)計一個常用業(yè)務(wù)流程時，都可以從設(shè)計中臺迅速找到推薦方案，從功能到頁面、到組件元素都不再需要設(shè)計人員重復決策。

設(shè)計中臺還是可直接調(diào)用的資源池。設(shè)計人員原型設(shè)計時，設(shè)計中臺提供從元件到解決方案的不同粒度的設(shè)計資源;對研發(fā)而言，可直接調(diào)用與設(shè)計中臺匹配的代碼化組件，推進設(shè)計方案的快速落地。

五、設(shè)計中臺的內(nèi)容

1. 設(shè)計原則

從設(shè)計理論和實踐總結(jié)出的代表性問題及對應的處理方法，是設(shè)計過程中所依據(jù)的準則。如易用、美觀、高效，以及簡化交互、即時反饋、對齊等。

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

設(shè)計規(guī)范確保頁面統(tǒng)一規(guī)整。規(guī)范內(nèi)容包括設(shè)計中的基礎(chǔ)元素，如網(wǎng)格體系、顏色、字體、間距、圓角、對齊方式等。它決定了一套可視化設(shè)計組件庫的最基礎(chǔ)的形態(tài)。

3. 元件

元件是原型設(shè)計中能被調(diào)用的最小單位，因其粒度足夠小，故而具備了最大的靈活度，能被充分運用于各種新/老業(yè)務(wù)場景。如按鈕、輸入框、下拉選擇框、標簽、步進器等。

4. 組件

組件是元件的集合，其存在目的是解決元件濫用導致的軟件產(chǎn)品質(zhì)量不可控的問題，組件通常就是基于行業(yè)標準化和設(shè)計語言形成的功能最優(yōu)解。如表單、卡片、查詢過濾、提示反饋、幫助等。

5. 典型頁面

典型頁面是將一些高頻場景組裝成現(xiàn)成的頁面，其目的是讓設(shè)計者“上手即用”，無需再從無到有地用元件組件搭建頁面。使用時根據(jù)業(yè)務(wù)需要選擇類似結(jié)構(gòu)的頁面模板，稍加改動即可快速原型圖。如注冊登錄、統(tǒng)計看板頁面、列表頁面、詳情頁、結(jié)果頁等。

6. 功能解決方案

元件組件解決了頁面元素級的設(shè)計問題，設(shè)計中臺指導設(shè)計人員在什么情況下使用什么樣的元素，并且提供直接調(diào)用的元件;

典型頁面解決了頁面級的設(shè)計問題，設(shè)計中臺指導設(shè)計人員在什么情況下使用哪種的頁面，并且提供可直接復制的頁面模板，只要按需適當調(diào)整內(nèi)容即可;

而功能解決方案解決的是更高一層的問題，多個頁面按既定的規(guī)則形成一個完整的交互鏈路，來直接覆蓋一些常用流程化的操作。即將典型通用功能的解決方法通過提煉、封裝，規(guī)定某功能采用哪幾個頁面、頁面之間的關(guān)系如何等。在各產(chǎn)品實際業(yè)務(wù)中可直接采用的一整套完整方案。

六、設(shè)計中臺的發(fā)展階段

設(shè)計中臺的發(fā)展通常分三個階段。

第一階段，主要是以元件組件為主，設(shè)計師用元件組件搭建出頁面;

第二階段，元件、組件在業(yè)務(wù)的牽引下演變等更具針對性，在原型設(shè)計時，以典型頁面的形式來覆蓋業(yè)務(wù)，具有一定的業(yè)務(wù)屬性;

第三階段，加深與典型業(yè)務(wù)流程的耦合，在某些業(yè)務(wù)場景下，甚至可以脫離設(shè)計資源的投入，設(shè)計中臺提供的解決方案與前端技術(shù)框架對應，直接對接后臺數(shù)據(jù)便可完成業(yè)務(wù)需求落地，是設(shè)計中臺最為理想的狀態(tài)。

七、設(shè)計中臺的搭建方法

企業(yè)搭建設(shè)計中臺，通常有二種方法：

1. 梳理以往產(chǎn)品、項目，基于積累的元件、組件、典型頁面資源庫，在此基礎(chǔ)上提煉共性組件，在行業(yè)常用業(yè)務(wù)場景下，搭建設(shè)計中臺。

2. 基于開源的設(shè)計組件庫，結(jié)合企業(yè)自身行業(yè)和業(yè)務(wù)特點，對進行二次設(shè)計和整合，搭建設(shè)計中臺。

在使用的過程中，根據(jù)業(yè)務(wù)的拓展和需求的反饋，設(shè)計中臺會不斷迭代更新。面對不同產(chǎn)品不同業(yè)務(wù)的紛繁需求，不能全盤接收一概采納，要過濾出真正的訴求，以專業(yè)的設(shè)計原則合理規(guī)劃。同時也要基于行業(yè)特征，以前瞻性的視野為業(yè)務(wù)的發(fā)展準備未來解決方案。

八、設(shè)計中臺的使用及落地

設(shè)計中臺搭建之后，設(shè)計人員或產(chǎn)品經(jīng)理拿到業(yè)務(wù)需求后，對照手邊的設(shè)計中臺資源池，優(yōu)先選用功能解決方案，其次選用典型頁面快速形成原型界面。如沒有合適的典型頁面，再從元件庫中挑選元件拼裝界面。元件庫也無法滿足的，再根據(jù)實際需求定制化設(shè)計。通過這種積木拼裝式的方法，解決約70%的常規(guī)業(yè)務(wù)需求，特殊需求經(jīng)評估后進行個性化設(shè)計，實現(xiàn)“基于模式提升效率，兼顧個性確保品質(zhì)”。

設(shè)計中臺的落地，則需要從需求分析、原型設(shè)計、視覺形態(tài)、技術(shù)實現(xiàn)等方面著手，整體統(tǒng)籌規(guī)劃，需要考慮以下幾個方面：

1. 通用性與特殊性的平衡：設(shè)計中臺在推行過程中必然會遇到通用性與特殊性性的矛盾，此時便需要設(shè)計師來把握邊界，建立二者的共存機制，這也是對設(shè)計中臺能否長久生存的考驗。更好的通用性能夠讓設(shè)計中臺應用更多場景和業(yè)務(wù)，也具備更長久的生命力。

2. 匹配技術(shù)實現(xiàn)框架：要讓設(shè)計中臺自身價值落地，單靠設(shè)計層面的建設(shè)是不夠的，還需要與開發(fā)人員配合，建設(shè)成套的技術(shù)實現(xiàn)框架。倘若對應的技術(shù)實現(xiàn)和成套的代碼化組件有所缺失，設(shè)計中臺就只能服務(wù)于設(shè)計師本身，而不能真正擴散到產(chǎn)品、研發(fā)等上下游角色。同時也會因為缺少代碼化沉淀，而不具備節(jié)約研發(fā)成本的基本訴求，對于企業(yè)內(nèi)的不同部門也缺乏約束力、說服力。

3. 設(shè)計能力的傳播：設(shè)計中臺的出現(xiàn)，讓界面原型設(shè)計變得和堆積木一樣簡單。設(shè)計師以外的產(chǎn)品相關(guān)干系人（如產(chǎn)品經(jīng)理、研發(fā)等）通過學習基本的排版規(guī)則和設(shè)計理念，也能自行組裝出常用的典型頁面，設(shè)計師不定期舉行設(shè)計中臺相關(guān)培訓和交流，通過對原型設(shè)計工具、組件元件庫、設(shè)計基本原則、排版與布局方式等方面的講解，來幫助非設(shè)計專業(yè)人員掌握基本設(shè)計技巧，提升彼此的協(xié)同效率。

九、適合使用人群

1. 設(shè)計師。使用設(shè)計中臺做原型設(shè)計，能提高設(shè)計效率，規(guī)范和統(tǒng)一視覺交互體驗。設(shè)計師應負責設(shè)計中臺的需求收集和過濾、資源庫的實時迭代更新以及設(shè)計中臺相關(guān)的宣傳和培訓。

2. 團隊領(lǐng)導。利用設(shè)計中臺的快速原型能力能更直觀的理解系統(tǒng)、幫助決策。團隊領(lǐng)導應自上而下的推行設(shè)計中臺策略。

3. 產(chǎn)品經(jīng)理。設(shè)計中臺降低設(shè)計參與門檻，產(chǎn)品經(jīng)理通過可直接上手做頁面原型設(shè)計，降低溝通成本，保證項目進度。產(chǎn)品經(jīng)理應參加培訓使用原型設(shè)計工具，并使用組件庫搭建原型。

4. 前端研發(fā)。設(shè)計中臺有助于前端研發(fā)者更高效的理解設(shè)計思想，參與設(shè)計，降低溝通成本。前端研發(fā)應通過學習了解最新設(shè)計組件庫的方式直接參與業(yè)務(wù)。

設(shè)計中臺提供了規(guī)范統(tǒng)一的視覺和交互模式，形成動態(tài)迭代、持續(xù)優(yōu)化、兼容吸收業(yè)務(wù)場景模式和解決方案，通過設(shè)計中臺不斷沉淀積累的設(shè)計資源，設(shè)計師提高設(shè)計效率，有效支撐團隊形成統(tǒng)一產(chǎn)品風格，非設(shè)計專業(yè)人員也能快速上手簡單的原型界面搭建，再結(jié)合與之配套的前端技術(shù)框架、設(shè)計理論培訓，不斷共享和提煉設(shè)計與研發(fā)模式，以應對更多不確定性應用場景和業(yè)務(wù)需求，進而提升整個團隊的競爭力。

參考文獻：

【1】Jenifer Tidwell.界面設(shè)計模式[M].東南大學出版社， 2011-5：25-40

【2】GB/T 20527.1-2006.多媒體用戶界面的軟件人類工效學，第1部分：設(shè)計原則和框架[S].

【3】海頓·皮克林.包容性Web設(shè)計[M].人民郵電出版社，2017-7：65-93