淺析設(shè)計(jì)中臺在軟件設(shè)計(jì)開發(fā)中的應(yīng)用

呂洪波 楊登豐 李正奎

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

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

一、前言

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

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

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

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

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

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

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

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

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

3. 用戶體驗(yàn)得不到完美落地

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

三、解決策略

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

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

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

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

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

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

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

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

1. 設(shè)計(jì)原則

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

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

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

3. 元件

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

4. 組件

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

5. 典型頁面

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

6. 功能解決方案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

九、適合使用人群

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

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

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

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

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

參考文獻(xiàn)：

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

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

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