這篇文章的內(nèi)容主要來自于上個月在uxpa大會上參加的一個騰訊的高級設計師謝奕老師的工作坊蚣旱，主要內(nèi)容是打造自動化平臺設計規(guī)范。

筆者在日常工作中接觸了許多企業(yè)后臺的設計酗钞，在設計規(guī)范的制定和執(zhí)行層面遇到許多問題。最主要的問題就是沒有一份平臺級的設計規(guī)范终娃，因此我所設計的子應用的后臺和其他設計師設計的后臺存在許多不統(tǒng)一的地方。這次能夠近距離去了解和學習一個規(guī)范從0到60再到80的一個過程，以及應該以怎么樣的一個思考方式去打造一份設計規(guī)范，非常幸運敢茁。

在工作坊之后，我發(fā)現(xiàn)我現(xiàn)在所面臨的問題在他們看來根本已經(jīng)不成其為問題姥卢，并且深深地感受到危機感卷要。

規(guī)范的種類

開篇明義。所謂規(guī)范独榴，「不以規(guī)矩僧叉，不成方圓」。各行各業(yè)都有自己的規(guī)范棺榔，互聯(lián)網(wǎng)行業(yè)中的不同領域有不同的規(guī)范瓶堕，如角色設計規(guī)范、品牌規(guī)范症歇、圖表可視化規(guī)范郎笆、系統(tǒng)規(guī)范、平臺規(guī)范等忘晤。其中系統(tǒng)規(guī)范普適性最高宛蚓，如谷歌和蘋果的系統(tǒng)規(guī)范；品牌規(guī)范適用性最低设塔，只適用于自身的品牌應用凄吏。這篇文章主要討論的是平臺級規(guī)范的制定。

如何打造規(guī)范

做設計規(guī)范的時候容易陷入一個誤區(qū)闰蛔，那就是僅僅為了有一份規(guī)范而去做一份規(guī)范痕钢，照貓畫虎，沒有根據(jù)實際需求去制定一份適合自身團隊的設計規(guī)范序六。這樣做出來的規(guī)范往往在實際應用場景中會出現(xiàn)很多適用性的問題任连，因為每個平臺的特性都是不一樣的。

謝老師提供了一個思路：把一份設計規(guī)范當作一個產(chǎn)品來設計例诀。按照用戶體驗要素來分析和制作規(guī)范随抠，來確保規(guī)范的質(zhì)量。

戰(zhàn)略層：明確用戶需求和產(chǎn)品目標

這是第一步也是最重要的一步余佃，同時也是很多設計師在制定設計規(guī)范時最容易忽略的一步：制定設計規(guī)范是為了解決什么問題暮刃？誰需要這份設計規(guī)范，他們的需求是什么爆土？

設計規(guī)范的用戶主要有三類：設計師椭懊、產(chǎn)品經(jīng)理以及前端工程師。

設計師需要的設計規(guī)范可以快速復用步势，同時標準化設計團隊的設計氧猬，統(tǒng)一整個平臺的設計風格及操作體驗。解放生產(chǎn)力坏瘩，讓自己有更多時間去思考用戶需求和業(yè)務目標而不是死摳界面盅抚；

產(chǎn)品經(jīng)理需要的設計規(guī)范是可以快速搭建出一個生動形象的需求原型，而不是每次都使用競品的截圖倔矾。當然妄均，這個頁面最好是可以進行交互操作柱锹，能直接生成前端界面更佳；

前端工程師需要的設計規(guī)范是一份詳細的樣式標注丰包，最好是可以直接復用代碼禁熏，不需要敲代碼就可以生成的話更佳。

綜合以上用戶需求邑彪，「設計規(guī)范」的產(chǎn)品目標就是提升生產(chǎn)效率瞧毙，將設計師和前端工程師從重復性勞動中解放出來，并最終取代設計師和前端工程師（其實我認為最終更有可能被取代的是產(chǎn)品經(jīng)理寄症，因為設計師和前端將有更多的時間去思考用戶和業(yè)務層面的問題了）宙彪。

需要注意的是以上指出的三類用戶只是一般情況，還有另外一些產(chǎn)品可能會有更多角色需要使用到設計規(guī)范有巧。例如電商類產(chǎn)品的產(chǎn)品團隊中释漆，需要使用到設計規(guī)范的除了以上三類用戶外，還會有攝影師篮迎、運營專員等灵汪。

范圍層：確定用戶的主要需求，轉(zhuǎn)化為核心功能點

針對以上三類用戶需求柑潦，設計規(guī)范需要提供什么功能來滿足他們的需求享言。

結構層：將產(chǎn)品需要呈現(xiàn)給用戶的功能點按照一定的模式和順序進行組織

這一層面的設計將和設計規(guī)范最終呈現(xiàn)的界面布局以及導航體系強相關。因此進行分類和組織的形式將影響到用戶在使用設計規(guī)范時是否易用渗鬼，用戶是否能夠在頁面中快速找到自己的目標览露，在頁面中是否會迷失。

分類方式有多種：可以按照用戶角色進行分類譬胎，每個用戶可以在自己的頁簽下選擇自己想要的差牛，缺點是頁面要進行多次的跳轉(zhuǎn)，或是容易造成架構臃腫堰乔，因為其中有一些元素是共同的偏化；普遍的做法是按照內(nèi)容進行分類，一般會分為設計原則镐侯、組件侦讨、場景案例、資源下載這幾類苟翻。

這里需要注意的問題是結構層的設計還需要根據(jù)具體的產(chǎn)品特點來進行韵卤。還是拿電商類產(chǎn)品來做一個例子，設計師崇猫、攝影師沈条、運營專員等多種角色都會使用到「圖片」，因此「圖片」相關的規(guī)定面向的用戶多诅炉、細則多蜡歹、要求也多屋厘。如果按照普遍的做法，以內(nèi)容進行分類月而，容易造成組件中「圖片」相關的類目過于臃腫擅这，整個設計體系不平衡，而且每個用戶角色想要找到相關的內(nèi)容會比較困難景鼠。針對這種情況，可以考慮將圖片單獨作為一個分類痹扇，把和圖片相關的規(guī)范內(nèi)容都放在這個分類下面铛漓，方便查找。

框架層：產(chǎn)品的界面鲫构、導航浓恶、內(nèi)容應該設計成什么樣子

界面設計：確定框架，“按鈕结笨、輸入框包晰、界面控件”的領域；

導航設計：呈現(xiàn)信息炕吸；

信息設計：呈現(xiàn)有效地信息溝通伐憾。

在信息設計上，最重要的是讓用戶可以一眼找到自己想要的目標赫模，并且可以快速使用树肃。在設計時可以參考簡約至上中的交互設計四策略：刪除、隱藏瀑罗、組織胸嘴、轉(zhuǎn)移。簡約斩祭、克制劣像，突出頁面重點。（具體可以參考ant deaign摧玫，可以說做的很好了）

表現(xiàn)層：重視索引耳奕、簡潔專注、多樣化統(tǒng)一

重視索引：關注用戶使用規(guī)范的主要路徑诬像、快速定位吮铭；

簡潔專注：視覺設計上刪繁就簡，確保突出重點信息的表達颅停；

多樣化統(tǒng)一：包括簡單和復雜的統(tǒng)一谓晌、多樣化平臺中尋求統(tǒng)一、文案構成具有一致性癞揉。

智能化設計規(guī)范

到這一步纸肉，設計規(guī)范已經(jīng)從0做到了60分溺欧，算作是一份基本可用的設計規(guī)范，但是距離「解放生產(chǎn)力」的產(chǎn)品目標還遠遠不夠柏肪。

庸者止步于此姐刁，優(yōu)者保持探索。謝老師的設計團隊在智能化平臺上進行了很多探索烦味，包括圖標智能化聂使、控件智能化、圖標智能化谬俄、主題智能化等等柏靶。他們所做的就是不斷探索設計規(guī)律，從而進行量化溃论，最終寫進代碼做到自動化屎蜓。由此我不禁感嘆「一切可以被量化的都是可以被代替的」。

最后的最后

雖然參加這個工作坊使我的心靈和思維都受到了震蕩钥勋，但是實際工作中我們還是很難做到像大廠一樣做一份如此高水平的設計規(guī)范炬转。但是我們還是可以通過一些其他的工具去彌補其中的不足。以下我將結合自身經(jīng)歷簡單談一談我們這個普通的設計團隊是如何進行協(xié)作的算灸。

1.使用sketch library建立控件庫扼劈，同步給團隊內(nèi)部每一個設計師

2.使用藍湖進行設計歸檔，實時同步最新設計稿菲驴，同時邀請產(chǎn)品經(jīng)理测僵、前端

3.使用iconfont管理圖標庫，和前端進行協(xié)作

雖然一點都不智能化谢翎，但也算滿足了最低層面的協(xié)作需求捍靠。設計工具日新月異，未來會有越來越多的工具出現(xiàn)森逮，解決我們?nèi)粘ｍ椖恐杏龅降膯栴}榨婆，替代工作中一些瑣碎的重復性工作。要懷抱對新工具的探索褒侧、學習和接納的態(tài)度良风。

學不可以已。