淺析設計中臺在軟件設計開發中的應用

呂洪波 楊登豐 李正奎

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

關鍵詞：應用軟件設計;設計中臺;交互設計

一、前言

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

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

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

二、我們面臨的設計困境

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

1. 項目/產品間用戶體驗不一致

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

2. 同一項目/產品內用戶體驗不一致

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

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

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

三、解決策略

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

四、什么是設計中臺

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

應用軟件設計中臺是由可視化元件、組件、模塊、典型頁面、功能解決方案以及設計規范等設計資產組成的設計資源池，用于指導各產品快速、高質實現新增業務設計方案的工具。

設計中臺明確了統一的評價標準，是各產品的設計指導方向，使各產品的設計風格保持統一，不會往不同的方向越走越遠，不同類型的產品間能實現視覺統一性、操作一致性和數據互通性。

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

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

五、設計中臺的內容

1. 設計原則

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

2. 設計規范

設計規范確保頁面統一規整。規范內容包括設計中的基礎元素，如網格體系、顏色、字體、間距、圓角、對齊方式等。它決定了一套可視化設計組件庫的最基礎的形態。

3. 元件

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

4. 組件

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

5. 典型頁面

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

6. 功能解決方案

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

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

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

六、設計中臺的發展階段

設計中臺的發展通常分三個階段。

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

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

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

七、設計中臺的搭建方法

企業搭建設計中臺，通常有二種方法：

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

2. 基于開源的設計組件庫，結合企業自身行業和業務特點，對進行二次設計和整合，搭建設計中臺。

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

八、設計中臺的使用及落地

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

設計中臺的落地，則需要從需求分析、原型設計、視覺形態、技術實現等方面著手，整體統籌規劃，需要考慮以下幾個方面：

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

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

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

九、適合使用人群

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

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

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

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

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

參考文獻：

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

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

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