這篇文章的內(nèi)容主要來(lái)自于上個(gè)月在uxpa大會(huì)上參加的一個(gè)騰訊的高級(jí)設(shè)計(jì)師謝奕老師的工作坊，主要內(nèi)容是打造自動(dòng)化平臺(tái)設(shè)計(jì)規(guī)范。

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

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

規(guī)范的種類(lèi)

開(kāi)篇明義。所謂規(guī)范，「不以規(guī)矩，不成方圓」。各行各業(yè)都有自己的規(guī)范，互聯(lián)網(wǎng)行業(yè)中的不同領(lǐng)域有不同的規(guī)范，如角色設(shè)計(jì)規(guī)范、品牌規(guī)范、圖表可視化規(guī)范、系統(tǒng)規(guī)范、平臺(tái)規(guī)范等。其中系統(tǒng)規(guī)范普適性最高，如谷歌和蘋(píng)果的系統(tǒng)規(guī)范；品牌規(guī)范適用性最低，只適用于自身的品牌應(yīng)用。這篇文章主要討論的是平臺(tái)級(jí)規(guī)范的制定。

如何打造平臺(tái)設(shè)計(jì)規(guī)范

做設(shè)計(jì)規(guī)范的時(shí)候容易陷入一個(gè)誤區(qū)，那就是僅僅為了有一份規(guī)范而去做一份規(guī)范，照貓畫(huà)虎，沒(méi)有根據(jù)實(shí)際需求去制定一份適合自身團(tuán)隊(duì)的設(shè)計(jì)規(guī)范。這樣做出來(lái)的規(guī)范往往在實(shí)際應(yīng)用場(chǎng)景中會(huì)出現(xiàn)很多適用性的問(wèn)題，因?yàn)槊總€(gè)平臺(tái)的特性都是不一樣的。

謝老師提供了一個(gè)思路：把一份設(shè)計(jì)規(guī)范當(dāng)作一個(gè)產(chǎn)品來(lái)設(shè)計(jì)。按照用戶(hù)體驗(yàn)要素來(lái)分析和制作規(guī)范，來(lái)確保規(guī)范的質(zhì)量。

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

這是第一步也是最重要的一步，同時(shí)也是很多設(shè)計(jì)師在制定設(shè)計(jì)規(guī)范時(shí)最容易忽略的一步：制定設(shè)計(jì)規(guī)范是為了解決什么問(wèn)題？誰(shuí)需要這份設(shè)計(jì)規(guī)范，他們的需求是什么？

設(shè)計(jì)規(guī)范的用戶(hù)主要有三類(lèi)：設(shè)計(jì)師、產(chǎn)品經(jīng)理以及前端工程師。

設(shè)計(jì)師需要的設(shè)計(jì)規(guī)范可以快速?gòu)?fù)用，同時(shí)標(biāo)準(zhǔn)化設(shè)計(jì)團(tuán)隊(duì)的設(shè)計(jì)，統(tǒng)一整個(gè)平臺(tái)的設(shè)計(jì)風(fēng)格及操作體驗(yàn)。解放生產(chǎn)力，讓自己有更多時(shí)間去思考用戶(hù)需求和業(yè)務(wù)目標(biāo)而不是死摳界面；

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

前端工程師需要的設(shè)計(jì)規(guī)范是一份詳細(xì)的樣式標(biāo)注，最好是可以直接復(fù)用代碼，不需要敲代碼就可以生成的話(huà)更佳。

綜合以上用戶(hù)需求，「設(shè)計(jì)規(guī)范」的產(chǎn)品目標(biāo)就是提升生產(chǎn)效率，將設(shè)計(jì)師和前端工程師從重復(fù)性勞動(dòng)中解放出來(lái)，并最終取代設(shè)計(jì)師和前端工程師（其實(shí)我認(rèn)為最終更有可能被取代的是產(chǎn)品經(jīng)理，因?yàn)樵O(shè)計(jì)師和前端將有更多的時(shí)間去思考用戶(hù)和業(yè)務(wù)層面的問(wèn)題了）。

需要注意的是以上指出的三類(lèi)用戶(hù)只是一般情況，還有另外一些產(chǎn)品可能會(huì)有更多角色需要使用到設(shè)計(jì)規(guī)范。例如電商類(lèi)產(chǎn)品的產(chǎn)品團(tuán)隊(duì)中，需要使用到設(shè)計(jì)規(guī)范的除了以上三類(lèi)用戶(hù)外，還會(huì)有攝影師、運(yùn)營(yíng)專(zhuān)員等。

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

針對(duì)以上三類(lèi)用戶(hù)需求，設(shè)計(jì)規(guī)范需要提供什么功能來(lái)滿(mǎn)足他們的需求。

?結(jié)構(gòu)層：將產(chǎn)品需要呈現(xiàn)給用戶(hù)的功能點(diǎn)按照一定的模式和順序進(jìn)行組織

這一層面的設(shè)計(jì)將和設(shè)計(jì)規(guī)范最終呈現(xiàn)的界面布局以及導(dǎo)航體系強(qiáng)相關(guān)。因此進(jìn)行分類(lèi)和組織的形式將影響到用戶(hù)在使用設(shè)計(jì)規(guī)范時(shí)是否易用，用戶(hù)是否能夠在頁(yè)面中快速找到自己的目標(biāo)，在頁(yè)面中是否會(huì)迷失。

分類(lèi)方式有多種：可以按照用戶(hù)角色進(jìn)行分類(lèi)，每個(gè)用戶(hù)可以在自己的頁(yè)簽下選擇自己想要的，缺點(diǎn)是頁(yè)面要進(jìn)行多次的跳轉(zhuǎn)，或是容易造成架構(gòu)臃腫，因?yàn)槠渲杏幸恍┰厥枪餐?；普遍的做法是按照?nèi)容進(jìn)行分類(lèi)，一般會(huì)分為設(shè)計(jì)原則、組件、場(chǎng)景案例、資源下載這幾類(lèi)。

這里需要注意的問(wèn)題是結(jié)構(gòu)層的設(shè)計(jì)還需要根據(jù)具體的產(chǎn)品特點(diǎn)來(lái)進(jìn)行。還是拿電商類(lèi)產(chǎn)品來(lái)做一個(gè)例子，設(shè)計(jì)師、攝影師、運(yùn)營(yíng)專(zhuān)員等多種角色都會(huì)使用到「圖片」，因此「圖片」相關(guān)的規(guī)定面向的用戶(hù)多、細(xì)則多、要求也多。

如果按照普遍的做法，以?xún)?nèi)容進(jìn)行分類(lèi)，容易造成組件中「圖片」相關(guān)的類(lèi)目過(guò)于臃腫，整個(gè)設(shè)計(jì)體系不平衡，而且每個(gè)用戶(hù)角色想要找到相關(guān)的內(nèi)容會(huì)比較困難。針對(duì)這種情況，可以考慮將圖片單獨(dú)作為一個(gè)分類(lèi)，把和圖片相關(guān)的規(guī)范內(nèi)容都放在這個(gè)分類(lèi)下面，方便查找。

框架層：產(chǎn)品的界面、導(dǎo)航、內(nèi)容

• 界面設(shè)計(jì)：確定框架，“按鈕、輸入框、界面控件”的領(lǐng)域；
• 導(dǎo)航設(shè)計(jì)：呈現(xiàn)信息；
• 信息設(shè)計(jì)：呈現(xiàn)有效地信息溝通。

在信息設(shè)計(jì)上，最重要的是讓用戶(hù)可以一眼找到自己想要的目標(biāo)，并且可以快速使用。在設(shè)計(jì)時(shí)可以參考簡(jiǎn)約至上中的交互設(shè)計(jì)四策略：刪除、隱藏、組織、轉(zhuǎn)移。簡(jiǎn)約、克制，突出頁(yè)面重點(diǎn)。（具體可以參考ant deaign，可以說(shuō)做的很好了）

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

• 重視索引：關(guān)注用戶(hù)使用規(guī)范的主要路徑、快速定位；
• 簡(jiǎn)潔專(zhuān)注：視覺(jué)設(shè)計(jì)上刪繁就簡(jiǎn)，確保突出重點(diǎn)信息的表達(dá)；
• 多樣化統(tǒng)一：包括簡(jiǎn)單和復(fù)雜的統(tǒng)一、多樣化平臺(tái)中尋求統(tǒng)一、文案構(gòu)成具有一致性。

智能化設(shè)計(jì)規(guī)范

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

庸者止步于此，優(yōu)者保持探索。謝老師的設(shè)計(jì)團(tuán)隊(duì)在智能化平臺(tái)上進(jìn)行了很多探索，包括圖標(biāo)智能化、控件智能化、圖標(biāo)智能化、主題智能化等等。他們所做的就是不斷探索設(shè)計(jì)規(guī)律，從而進(jìn)行量化，最終寫(xiě)進(jìn)代碼做到自動(dòng)化。由此我不禁感嘆「一切可以被量化的都是可以被代替的」。

最后的最后

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

1. 使用sketch library建立控件庫(kù)，同步給團(tuán)隊(duì)內(nèi)部每一個(gè)設(shè)計(jì)師
2. 使用藍(lán)湖進(jìn)行設(shè)計(jì)歸檔，實(shí)時(shí)同步最新設(shè)計(jì)稿，同時(shí)邀請(qǐng)產(chǎn)品經(jīng)理、前端
3. 使用iconfont管理圖標(biāo)庫(kù)，和前端進(jìn)行協(xié)作

雖然一點(diǎn)都不智能化，但也算滿(mǎn)足了最低層面的協(xié)作需求。設(shè)計(jì)工具日新月異，未來(lái)會(huì)有越來(lái)越多的工具出現(xiàn)，解決我們?nèi)粘ｍ?xiàng)目中遇到的問(wèn)題，替代工作中一些瑣碎的重復(fù)性工作。要懷抱對(duì)新工具的探索、學(xué)習(xí)和接納的態(tài)度。

學(xué)不可以已。

本文由 @?janedaring 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自u(píng)nsplash，基于CC0協(xié)議