高手經(jīng)驗(yàn)總結(jié)！關(guān)于UI設(shè)計(jì)規(guī)范，這些你必須知道

設(shè)計(jì)規(guī)范的宏觀意義是統(tǒng)一

• 方便在大型體系下建立設(shè)計(jì)文化。
• 輻射與傳播設(shè)計(jì)思想（抽象的）更加容易。
• 保證多成員參與的項(xiàng)目保持視覺一致性。
• 設(shè)計(jì)規(guī)范的建立與規(guī)范本身的優(yōu)秀與否考驗(yàn)設(shè)計(jì)團(tuán)隊(duì)的實(shí)力。
• 用戶層對(duì)某產(chǎn)品的體驗(yàn)一致性得到落地。
• 塑造品牌調(diào)性。
• 迭代與交接可以更加無(wú)縫。
• 減少設(shè)計(jì)出錯(cuò)率。

宏觀上對(duì)內(nèi)統(tǒng)一，對(duì)外區(qū)分；簡(jiǎn)化，優(yōu)化，糾正執(zhí)行錯(cuò)誤；管理與合作變得容易。

首先我們要了解設(shè)計(jì)規(guī)范的定義基礎(chǔ)，它是圍繞在某種風(fēng)格或者大型設(shè)計(jì)文化下的，同時(shí)設(shè)計(jì)規(guī)范也分宏觀與微觀。

• 宏觀規(guī)范通常用來(lái)描述視覺感受（抽象的），由高級(jí)leader發(fā)起，由中層leader輻射給整個(gè)設(shè)計(jì)團(tuán)隊(duì)。
• 微觀規(guī)范更加可視化，數(shù)據(jù)化，是針對(duì)相對(duì)獨(dú)立的體系建立的一些視覺遵守條款。

我們都不希望在使用過(guò)程中平臺(tái)各個(gè)頁(yè)面間的設(shè)計(jì)差異明顯，增加新的使用成本，而這些針對(duì)用戶層都是非常重要的體驗(yàn)。

設(shè)計(jì)不應(yīng)該是變化多端，豐富的么？我們很多設(shè)計(jì)師無(wú)法理解規(guī)范的意義可能都是源于這種思考。但我們的變化與擴(kuò)展應(yīng)該是基于某種基礎(chǔ)上的，這看起來(lái)是不是更有挑戰(zhàn)了？

借用前段時(shí)間非常精彩的一段內(nèi)容，可以深刻體會(huì)一下這段話。

 

規(guī)范不等同于標(biāo)注，它比標(biāo)注更宏觀，好的規(guī)范總是統(tǒng)一方向與基本參數(shù)，卻能預(yù)留無(wú)數(shù)的設(shè)計(jì)可能性來(lái)保證擴(kuò)展性。這樣的設(shè)計(jì)規(guī)范是優(yōu)秀的。相對(duì)而言，一個(gè)優(yōu)秀的設(shè)計(jì)師，也總能在某種同樣的條件下設(shè)計(jì)更精彩的方案。

你可以這樣理解設(shè)計(jì)規(guī)范，這是一套有規(guī)則的標(biāo)準(zhǔn)，同時(shí)提供了可變化的設(shè)計(jì)方法，方便迭代，方便其他人繼續(xù)已經(jīng)存在的設(shè)計(jì)。

你還可以想象如何管理一個(gè)幾百人的設(shè)計(jì)團(tuán)隊(duì)。如果沒有規(guī)范，將如何保持用戶體驗(yàn)上的統(tǒng)一，包括視覺，操作，風(fēng)格，文化等。


 

設(shè)計(jì)規(guī)范的節(jié)點(diǎn)

如果考慮規(guī)范的存活期，這應(yīng)該在公司達(dá)到一定規(guī)模的時(shí)候進(jìn)行。在這之前，無(wú)論在戰(zhàn)略層還是執(zhí)行層，已經(jīng)開始關(guān)注獨(dú)立品牌或設(shè)計(jì)文化建設(shè)。

如果是固定的風(fēng)格規(guī)范，比如微軟的「磁貼」，NAVER的「方格」，Google的「扁平」，是完全可以書寫全局，并且時(shí)間相對(duì)長(zhǎng)久的Type(類型)規(guī)范。這些視覺語(yǔ)言首先完成了獨(dú)立與區(qū)分，進(jìn)而完成系統(tǒng)性與擴(kuò)展性。

 

編寫者

參與規(guī)范書寫建議由全隊(duì)專業(yè)能力最強(qiáng)的人輔助產(chǎn)品戰(zhàn)略分析進(jìn)行。專業(yè)能力代表他的執(zhí)行力，溝通力，全局能力。由他主導(dǎo)，紕漏會(huì)降到最少。這個(gè)角色應(yīng)該具備很好的協(xié)調(diào)能力，設(shè)計(jì)戰(zhàn)略觀，全局觀，配備幾名設(shè)計(jì)助手，將規(guī)范涉及的產(chǎn)品線進(jìn)行統(tǒng)計(jì)?；ǜ嗟臅r(shí)間進(jìn)行統(tǒng)一上可能性的分析，這能幫你確定視覺語(yǔ)言的可行性與擴(kuò)展性，中間應(yīng)該做任何可行性嘗試，綜合產(chǎn)品戰(zhàn)略進(jìn)行最終確認(rèn)。好的規(guī)范能用最少的規(guī)則進(jìn)行視覺風(fēng)格的統(tǒng)一，讓品牌擁有統(tǒng)一的視覺語(yǔ)言，產(chǎn)生競(jìng)品區(qū)分，強(qiáng)化品牌個(gè)性，同時(shí)能保證眾多產(chǎn)品線的擴(kuò)展性。統(tǒng)一與變化是規(guī)范中最難協(xié)調(diào)的部分，全局統(tǒng)一，局部區(qū)分（產(chǎn)品線個(gè)性）。最終，會(huì)形成獨(dú)特的設(shè)計(jì)個(gè)性與設(shè)計(jì)文化。

產(chǎn)品的角色介入主要為了防止全局或局部規(guī)范無(wú)法適應(yīng)產(chǎn)品的過(guò)大變化。兩者相加，能將規(guī)范的使用時(shí)間延長(zhǎng)很多。

設(shè)計(jì)規(guī)范通常會(huì)劃在設(shè)計(jì)的最頂層，因?yàn)槭侵笇?dǎo)性視覺文件，制定應(yīng)該慎重。同時(shí)，規(guī)范應(yīng)該具備良好的概括性，全局性，這些特征導(dǎo)致設(shè)計(jì)規(guī)范的整理并不簡(jiǎn)單。

我們見到的，更多都是標(biāo)注，雖然與規(guī)范之間有大量的交集，但與規(guī)范的功能還是有些區(qū)別的。規(guī)范的核心是一定的框架內(nèi)設(shè)計(jì)，標(biāo)注的核心是參數(shù)。他們雖然交叉，但意義不同，話語(yǔ)權(quán)不同。規(guī)范一旦制定，就有不可違反性，是設(shè)計(jì)核心可見的指導(dǎo)性文檔，能幫助更多的團(tuán)隊(duì)成員形成統(tǒng)一的視覺語(yǔ)言。標(biāo)注更多時(shí)候是用于輔助我們進(jìn)行技術(shù)開發(fā)的像素級(jí)還原。

視覺規(guī)范有了不可違反性，就一定帶來(lái)了設(shè)計(jì)擴(kuò)展上的障礙，一個(gè)新需求的設(shè)計(jì)如何在大的規(guī)范體系下，保持規(guī)則又能區(qū)分。

 

Q: 請(qǐng)問(wèn)前面提到的分析具體要如何執(zhí)行？從商業(yè)戰(zhàn)略層的內(nèi)容如何轉(zhuǎn)換到實(shí)際的設(shè)計(jì)原則或者設(shè)計(jì)規(guī)范，具體怎么操作？

這問(wèn)題有點(diǎn)復(fù)雜，我嘗試說(shuō)。就我的經(jīng)歷看，戰(zhàn)略落地到設(shè)計(jì)中大部分跟品牌傳遞相關(guān)，產(chǎn)品的受眾，產(chǎn)品核心理念傳遞，產(chǎn)品的性格，統(tǒng)一與擴(kuò)展。

• 召開并發(fā)起guide必要性會(huì)議。于公司內(nèi)部傳達(dá)目前設(shè)計(jì)中存在的問(wèn)題，編寫guide的原因，作用，對(duì)公司戰(zhàn)略層面的推動(dòng)力等。在編寫前，務(wù)必得到各個(gè)事業(yè)部門的支持。
• 提供各事業(yè)部或部門的支持詳情，對(duì)接人，日程，確認(rèn)人。
• 整理并分析已經(jīng)存在的產(chǎn)品，視覺體系，指派全局型設(shè)計(jì)人力進(jìn)行第一階段的設(shè)計(jì)嘗試。
• TYPE輸出首要原則是用更大的設(shè)計(jì)寬容性滿足產(chǎn)品特點(diǎn)與需求，過(guò)程中應(yīng)該有意識(shí)形成視覺語(yǔ)言的獨(dú)立性，但絕不會(huì)因?yàn)樵O(shè)計(jì)上的小把戲而損失擴(kuò)展性。
• 進(jìn)行多產(chǎn)品線適配實(shí)驗(yàn)，或單產(chǎn)品獨(dú)特設(shè)計(jì)需求的適配實(shí)驗(yàn)。很多設(shè)計(jì)方法在大面積已經(jīng)完成了適配，但是無(wú)法應(yīng)用到很特別的設(shè)計(jì)需求，你需要有更多的合理設(shè)計(jì)方法，產(chǎn)生的設(shè)計(jì)變化不得影響整體規(guī)范的執(zhí)行，這是很有挑戰(zhàn)的設(shè)計(jì)工作。
• 確定并局部確認(rèn)規(guī)范，與各產(chǎn)品線進(jìn)行會(huì)議，展示未來(lái)的設(shè)計(jì)方法，并提供演示圖，得到產(chǎn)品線的認(rèn)可或整理問(wèn)題進(jìn)行二次設(shè)計(jì)嘗試。
• 各產(chǎn)品線的認(rèn)可為必要節(jié)點(diǎn)，得到認(rèn)可后進(jìn)行全規(guī)范的書寫，完成后共享給各個(gè)設(shè)計(jì)分支，產(chǎn)品線，并明確該規(guī)范的原則性。
• 規(guī)范的使用過(guò)程中會(huì)出現(xiàn)擴(kuò)展性障礙，需要設(shè)計(jì)leader級(jí)別介入進(jìn)行更正或確認(rèn)，一旦產(chǎn)生新的規(guī)則，要及時(shí)更新規(guī)范。
• 為了保證規(guī)范的可行性，應(yīng)該給使用者提供更多的選擇，滿足在框架內(nèi)設(shè)計(jì)的變化可能性。

先從宏觀上規(guī)劃出設(shè)計(jì)規(guī)范的大致方向，涉及到色彩情緒，視覺符號(hào)，剛硬或者柔和，嚴(yán)肅或活潑等，這部分應(yīng)該有全局型規(guī)范做指導(dǎo)。比如干凈，清晰，便捷，這就給我們提供了一個(gè)方向。

規(guī)范在輸出前，需要做的確認(rèn)工作較多，當(dāng)色彩，語(yǔ)言特點(diǎn)（形式感），情緒等有了方向，應(yīng)該完成了第一步工作。接下來(lái)要進(jìn)行type輸出，召集設(shè)計(jì)會(huì)議，確定方向及細(xì)化內(nèi)容。

中間是最費(fèi)時(shí)間的部分，如果涉及到更多的產(chǎn)品線，應(yīng)該整理他們之間可能的共性，或者制造一個(gè)共性讓眾多產(chǎn)品可以遵守。難點(diǎn)在于協(xié)調(diào)他們的共性與產(chǎn)品個(gè)性，這屬于guide的擴(kuò)展性部分。設(shè)計(jì)guide不同于獨(dú)立標(biāo)注，標(biāo)注通常集中在參數(shù)上，也未必考慮其他的使用場(chǎng)景。guide卻是更高層級(jí)的規(guī)則設(shè)計(jì)，不但有方法，規(guī)則指導(dǎo)，擴(kuò)展性尤其重要，要考慮很多其他場(chǎng)景的可用性，不可能局限于單一需求。

接下來(lái)我們要對(duì)前面的方向進(jìn)行一次盡量嚴(yán)謹(jǐn)?shù)穆涞貙?shí)驗(yàn)，實(shí)驗(yàn)過(guò)程配備更多的設(shè)計(jì)資源，將已經(jīng)形成的核心視覺語(yǔ)言嵌套給各個(gè)可能產(chǎn)生問(wèn)題的位置進(jìn)行可行性實(shí)驗(yàn)。當(dāng)大部分實(shí)驗(yàn)都成功時(shí)，這個(gè)體系已經(jīng)算初步成型。對(duì)于涉及產(chǎn)品眾多的大型guide，人力要更多用于實(shí)驗(yàn)，規(guī)范制定后的可用性，擴(kuò)展性，以及使用后的統(tǒng)一性都是考核項(xiàng)。最后就對(duì)每個(gè)可拆分的控件進(jìn)行細(xì)化與規(guī)范書寫。如果有必要，也可以對(duì)分支可行性進(jìn)行確認(rèn)，召集相關(guān)產(chǎn)品參與可行性分析確認(rèn)。

產(chǎn)品線性格差異很大難以在細(xì)節(jié)統(tǒng)一時(shí)，就引入項(xiàng)目型或小型guide，配合全局guide保持公司層級(jí)的視覺一致性。沒有具體的guide內(nèi)容擴(kuò)展描述時(shí)，一定要注明沖突或者特殊情況的審核者，必定只有設(shè)計(jì)中心才是guide制作部門。只有得到這些部門確認(rèn)，這次guide修改或沖突才可以面向受眾露出。

內(nèi)容的整理應(yīng)該盡可能的提供參考案例，簡(jiǎn)單的距離設(shè)計(jì)，都應(yīng)該清楚注明他們的基本規(guī)則，參數(shù)，以及特殊情況的擴(kuò)展原則。例如：30px如果是我們的標(biāo)準(zhǔn)間距，它在什么時(shí)候必須遵守，什么特殊情況我可以進(jìn)行改變，旁邊要有詳盡的案例說(shuō)明，或者給他們更多的可選項(xiàng)與設(shè)計(jì)樣式。拿到guide的其他使用者，應(yīng)該能迅速知道該如何設(shè)計(jì)。又或者我們有一套獨(dú)立的比例計(jì)算公式來(lái)確定間距，這些整理對(duì)guide使用者是非常友善的，具備核心價(jià)值。

guide就是一套可指導(dǎo)，可延續(xù)，可擴(kuò)展，可統(tǒng)一，可區(qū)分的視覺指引手冊(cè)，是統(tǒng)一自己并區(qū)分其他品牌的根本。它是一種設(shè)計(jì)方法（具象的），一種設(shè)計(jì)思考模型（抽象的），指導(dǎo)相關(guān)設(shè)計(jì)結(jié)構(gòu)完成統(tǒng)一性與對(duì)外區(qū)分性。

guide在縱向管理的設(shè)計(jì)體系發(fā)揮作用很大，配合中層設(shè)計(jì)leader的審核，能有效完成抽象確認(rèn)的部分。比如guide里提到簡(jiǎn)潔（抽象的），什么是簡(jiǎn)潔在很多人理解上就不同，縱向管理是點(diǎn)式散發(fā)，所有的中層都要執(zhí)行「點(diǎn)」的輻射，同時(shí)匯報(bào)給「點(diǎn)」，出現(xiàn)的偏差也當(dāng)然由「點(diǎn)」進(jìn)行判斷對(duì)錯(cuò)，所以容易落地，容易統(tǒng)一。

橫向管理的設(shè)計(jì)團(tuán)隊(duì)很難完成這種深度輻射的抽象共性，leader不同，能力不同，理解不同，各自為營(yíng)，guide很快就會(huì)淪為一種設(shè)計(jì)政績(jī)或產(chǎn)品政績(jī)。

對(duì)大部分公司來(lái)說(shuō)，我們首先難以完成的是產(chǎn)生一套既獨(dú)立創(chuàng)新又可以形成系統(tǒng)的視覺語(yǔ)言，像微軟的磁貼，或是Google的扁平。設(shè)計(jì)規(guī)范一旦存在，在設(shè)計(jì)上，給我們帶來(lái)的創(chuàng)新壓力必然更大，這非常有挑戰(zhàn)性。