淺談企業級設計中臺
自我介紹
各位見字好，本文是我在sketch meeting 上海站的分享內容，值此機會沉澱為文字，希望為當下日漸普及的B類設計同學帶去一些淺薄的經驗輸入。
前言
原先我的專業是油畫，畢業1年後將視野轉向網際網路領域，並於次年加入阿里巴巴，聚焦於視覺設計領域。目前我80%的精力傾注於企業級產品中臺設計領域的研究和創新，在日漸形成的專業體系及逐年遞進的角色變換中我是這樣理解的：
純藝術&商業設計
純藝術創作是讓每個人看到你的作品能產生N種共鳴，而商業設計是讓N個人看到你的作品都會進行同一種解讀
（圖例：一件當代藝術品&一場商業大促）藝術發現問題，設計解決問題。
視覺設計能力成長的3個階段
表現層：
我們的眼睛能辨認一個東西是因為它的“形體“和“顏色“，我們能否伸手抓到它取決於它的“體積“和與它之間的“空間“。基礎的視覺設計就是運用“形““色““空間“去模擬一個真實存在。（下圖）
語言層：視覺成為一種表達方式，等同於語言，去對文字資訊表達的“翻譯“結果，甚至在特定場合替代文字成為更佳的資訊傳達方式。（下圖）
突破：任何一個專業高度的拐點都是跨界融合，更深度的視覺設計認知是在特定場合下與環境或人發生的關係，以形成最佳實踐。
什麼是中臺設計
中臺設計不是設計的門類，屬於一種業務屬性領域。狹義上講中臺可以是一個具象的設計系統，它能幫我們解決效率問題。從廣義上講中臺是一種思維，能在反覆的重複勞動中尋找“偷懶“的方法。而我們正是需要以這樣的思維去實現一個具象的系統。
現在向各位介紹一下我們的設計中臺
為何需要設計中臺？
BU大BOSS把話撂這了：我們這個bu存在的價值，不要你去買產品賺多少錢，服務好7w+阿里人的企業協同，形成提效的終極目標，就是我們存在的價值。所以也有了這句Slogan “make work easy&happy“
人
• 企業級專業系統（法務／財務／行政／HR／IT／採購）的特徵是垂直度深，介面數量多，邏輯複雜，流程重複性，業務變種多，且使用者都具備專業背景。
事
• 在我們團隊內部，設計師與PD的比例是1：7，每位設計師身兼多條業務線，因此需要各條業務線能夠通用的一套設計模式，在提效的同時，不同型別的產品間能實現視覺統一性、操作一致性和資料互通性。
場
• 且在我們BU技術戰略上，資訊平臺體驗部和基礎技術部很早就開始針對研發提效的目標，建立線上視覺化搭建和後端配置平臺，需要在設計層面進行配合。這也是整個企業級產品的業界共識。
設計中臺的3個階段
1.0主要為UI kit的彙集，設計師使用元件自行搭建頁面
2.0設計語言在業務環境中誕生，元件的樣式更有針對性。同時設計規範拓展至正規化、模版，以更大的顆粒度覆蓋業務。同時和中臺產品樂高／宜搭形成緊密的關聯，在開發層面也形成同步的提效
3.0從設計資產轉向解決方案，在某些場景嘗試脫離設計資源投入，以既有的流程化解決方案直接支援業務，只需要接入資料即可完成業務需求。我們現在仍在這個階段努力。
設計資產的演進
DPL：DPL的全稱是 Design Pattern Library，它決定了一套視覺化設計元件庫的最基礎的形態，通常通過“形“與“色“定義了元件級的樣式特性。譬如圓角／顏色／尺寸／字形...
元件：元件被封裝成元件，是能被呼叫的最小組成部分，因顆粒度足夠小，所以具備了很大的靈活度，能被充分運用於各種新／老業務場景。譬如按鈕／輸入框／圖示／選擇器／標籤...
正規化：在Material Design中成為“Patterns“（模式），正規化的概念在元件之上，具備一定的約束性。正規化存在的原因是解決元件濫用導致的落地產品質量不可控的問題，正規化就是基於行業標準化和設計語言給出的最佳實操。譬如表單／幫助／查詢篩選／提示&反饋
模版：模版更重視拿來即用的概念，將一些高頻場景直接做成現成的套件，讓設計者無需再投入精力去0-1拼裝元件。譬如表單頁／列表頁／資料看板／詳情頁／展示頁／結果頁／預設頁...
解決方案：相當於多個模版按既定的規則形成一個完整的互動鏈路，來直接覆蓋一些常用流程化的操作
下面我們來看一個關於DPL的案例
案例一
（如圖）是我們基於平臺業務場景打造的一套DPL體系
每一個設計師都需要記憶一些常用色值，在單一的產品線中我們確實可以通過記憶去解決，那換成上百個產品呢？
這裡介紹一下我對針對顏色系統引入的透明度體系。（如圖）同一個顏色的2種實現方式，左側是通過十六進位制碼實現的，右側是基於#000000這一個色值改變透明度實現的。在白底上它們實現了同樣的視覺效果。
然後，我們將同樣的方式轉移到有色底的環境中，可以發現通過透明度實現的顏色可以和底色形成疊加關係，保留色彩的調性。而色值實現的結果開始出現了瑕疵（下圖）。
這個疊加特性甚至能幫我們精簡元件的最小組成單位，拿分割線作為例子（下圖），原先我們需要3種顏色的線去應對“白底”“灰底”“深灰底”，而現在只需要一個色值，在不同的環境色差異下也能形成較好的對比效果。
基於這個原理，我們將透明度分成多個階梯，讓品牌色實現了有規律的格式。向下疊加黑色透明度，向上降低透明度
並將每一個梯度關聯到每一個元件的元件中，在設計側可以通過sketch的symbol快速關聯色值，完成頁面設計；在前端側，將這個鏈路形成聯動，不用再去關心每個元件用什麼色值，只需更改主色值，就可以全域性生效。這也為平臺生態化（多品牌色的接入）的接入打下了堅實的基礎。
緊接著，我們並沒有止步於此：“加黑、加白並不是最佳的成色方式”
顏色是否能像自然界的光影般，有日照山巒的暖色，有樹蔭下的冷色，有黃昏時分大地那一片渾然的金色？
前文提及，跨界產生創新，這個想法其實在技術層面已有現成的方案。（圖中）2行簡單的程式碼其實對應的就是我們常用PS中的混合模式，能在多個顏色疊加中保留顏色混合的視覺特性。結果如（下圖）
大色盤的建立，隨時應對生態系統saas化接入。
案例二
接下來我們來看一個元件的案例，這裡我想用一個不能再常見的例子：
首先，我們統計了一下平臺現狀：
所以，我們之前對待預設頁的態度是這樣的，這是一個顯而易見的“一致性”問題，甚至低優先順序的產品使用的是網路素材圖（下圖）
當然，重點專案的預設頁仍然是很不錯的（下圖），這是一個線上筆記類的產品，使用書本、放大鏡這類元素很好地切合了業務屬性。
但此時，我們以中臺的思維去看待這件事時，才發現了大問題。這類獨立專案的插圖視覺效果優異，也讓生態產品失衡。關鍵是這類業務屬性定製化的插圖並不能直接複用到其它產品中。
我們花了一些時間去收集所有產品線的預設頁面，得到了20+場景。僅拿一個空狀態頁面為例，就有“行程計劃為空”“差旅單為空”“操作記錄為空”“回覆數為空”等8+語境。假如我們以這樣的細分方式去繪製插圖，一定是一個無底洞。於是我們把分類維度上升一層，把20+場景濃縮為6個分類（下圖）
複雜事情的解決方案有可能是簡單粗暴的，我們輸出了6張圖：
將插圖的敘事性對標企業級辦公的場景，使用“文件”“電腦”“工位”去營造一個辦公場景的語境，以巨集觀層面的不變去應對各業務線的萬變；採用了中立色調，能相容多種品牌色主題。並融入基礎DPL中的佈局間距規則方式進行頁面級的模版化輸出（下圖），從歷史案例中抽取固定的元件組合方式，比如單雙按鈕的情況，出現連結的情況，文字折行的情況。
這一切看似結束了，此時我們又想了想，都做到這一步了，為何不再進一步呢？
在我們的體驗部團隊中，有一塊是中臺產品支援，既然已經有了充足的正規化，就完全可以將其過程產品化，於是我們做了這樣一個東西：預設頁生成器（下圖）
案例三
做中臺的過程中，一直面臨著業務的挑戰，以及我們自己設計師的聲音：
這裡我要說的是，規範並不是約束，而是對一些不必要的差異化的限制，求同存異。這裡要引入中臺設計的一個核心概念： 容器的設計
我們可以把中臺框架看成是一個容器，把業務屬性上的設計看作是容器中東西。拿一張小卡片為例（下圖），它由“頭像”“標籤”“標題”“文字”“按鈕”5個元件組成。如果把這5個元件統一看作一個內容整體的化，它和卡片之間還有一圈間距，就像容器的“厚度”一樣。這個厚度，在前端語言中，它有一個專業的名詞——“padding”。
當多張卡片組合佈局時，我們還需要去定於多個容器之間的空隙，即佈局中的間距。有了這一層框架下的規則後，再去對內容的組合序列進行一層抽象，去安放“頭像”“標籤”“標題”“文字”“按鈕”5個元件的位置關係，甚至在增刪改的變化中相互擠壓的佈局規則。那麼，我們可以看到，在這統一套框架的約束下，內容同樣也可以靈活地根據業務進行自定義配置。
且在這樣的框架下，不同業務線的產品頁面都可以遵循一套統一的佈局方案
在開發提效的同時，也順帶覆蓋了品牌化輸出的一致性問題，同時也讓設計者的有限時間聚焦在內容本身上！
此處詳情可參考我的另一篇獨立文章《移動端列表解決方案》https://www.ui.cn/detail/413969.html
迭代方式
隨著設計資產在業務中跑起來，我們也不斷接收到各種需求。“能不能在這裡給開一個操作”“能否把這個3欄的擴充套件成5欄結構”...林林總總的需求鋪天蓋地，此時作為中颱設計師一定要保持清醒，因為你假如把所有需求都滿足了，恰如一身肥肉，看似豐腴卻不堪一擊。
所以（上圖），“專業性”的圓壓在“反饋”之上。從需求中過濾出真正的訴求，合理地規劃需求池。同時也要具備前瞻性的視野，縱深行業，去為業務的發展準備未來解決方案。
通過協同工具進行每個迭代的團隊專案管理
比設計更難的是落地
我們針對如下4個角色推動設計規範的落地
中臺設計的5點體會
• 首先設計中臺只承擔解決70%問題的能力，犧牲小的個性化，成就大的標準化
• 在確保功能能跑通的前提下，假如個性化方案能讓體驗＋1分，效率－2分，而使用中臺能力解決問題體驗－1分，效率＋2分，優先選擇中臺解決方案
• 設計規範保證了產品的基層效率和基礎質量，它僅是一條及格線，產品的整體體驗始終是卓越線，但二者並不矛盾，這也更高地要求了設計師在專案中對“限制“與“創新“的佈局能力
• 也許做中臺設計每天都要面對業務的個性化挑戰，這個過程必然是痛的，在於你能否挺住，把那唯一的解決方案，不斷地做的更好！
• 定義問題比解決問題更重要，這是對每一個設計師要求的更高的能力
Thanks
文中提及更多案例可檢視作者其它文章專題
