設(shè)計規(guī)范對于設(shè)計師來說并不陌生，日常工作中也經(jīng)常使用。統(tǒng)一的設(shè)計規(guī)范不僅有利于設(shè)計師提升效率，同樣可以幫助產(chǎn)品、開發(fā)、運營、測試等相關(guān)人員對產(chǎn)品的體驗有更好的認知。

什么是UI設(shè)計規(guī)范

通俗來說，設(shè)計規(guī)范是圍繞在某種風(fēng)格或者大型設(shè)計項目下形成可視化、數(shù)據(jù)化的標(biāo)準(zhǔn)，針對相對獨立的體系建立的統(tǒng)一遵守條款。

UI即User Interface（用戶界面），UI設(shè)計規(guī)范是基于用戶界面產(chǎn)品而制定的一套可復(fù)用設(shè)計庫，也是為了方便設(shè)計師、開發(fā)和測試人員共同協(xié)作，而遵循的規(guī)律和法則。

產(chǎn)品要有可遵循的標(biāo)準(zhǔn)來規(guī)范視覺呈現(xiàn)和元素定義，保證日后的迭代可以延續(xù)產(chǎn)品所傳遞的思想和價值，能最大限度保證產(chǎn)品的一致性。

為什么要做設(shè)計規(guī)范

統(tǒng)一產(chǎn)品風(fēng)格

對于同一個產(chǎn)品的多個頁面來說，統(tǒng)一的設(shè)計規(guī)范能夠使得產(chǎn)品視覺風(fēng)格保持一致。同時可以保障良好的用戶體驗。

一個大型項目的視覺稿，往往會有幾十個甚至是上百個頁面。哪怕自己一手包辦全部頁面，恐怕也很難統(tǒng)一各個控件的樣式，因為在設(shè)計過程中很容易產(chǎn)生細微的出入，時間長了也會忘記部分參數(shù)，導(dǎo)致每個控件都可能會有細微的差別。

更何況多個設(shè)計師共同合作，如果沒有及時制定規(guī)范，每個人自由發(fā)揮，同一個控件便會出現(xiàn)不同的樣式。

例：同一個產(chǎn)品中，設(shè)計師A的按鈕是2px圓角，設(shè)計師B的按鈕做成了8px，同時設(shè)計師C頁面的按鈕又做成了全圓角。

提高開發(fā)效率、解決代碼冗余問題

通過設(shè)計規(guī)范，程序員可以了解到哪些控件是可以一次性寫好并能重復(fù)調(diào)用，同時在規(guī)范的輔助下，程序員在搭建全局共用元素時規(guī)則更會加清晰。

例如icon、按鈕、行間距、字體大小、色值等等。這樣既可以提高開發(fā)效率，又可以減少客戶端安裝包的大小。

幫助新人快速上手

當(dāng)新人剛加入團隊時，對產(chǎn)品的風(fēng)格和基調(diào)可能不太熟悉或者理解不透，可能無法快速進入設(shè)計工作，這時設(shè)計規(guī)范就可以幫他們快速上手，提高工作效率，并且也能保持產(chǎn)品風(fēng)格和控件的統(tǒng)一性。

如何制定UI設(shè)計規(guī)范

第1步：明確設(shè)計原則

設(shè)計師要清楚的知道，產(chǎn)品需要傳遞給用戶的設(shè)計特征和原則是什么，以及整個平臺的約束是什么。

在 facebook 的設(shè)計語言原則里面，強調(diào)了他們的設(shè)計價值觀：通用、人性、干凈、統(tǒng)一、有用、快速、透明，在 facebook 所有設(shè)計中，都將這些要點作為他們設(shè)計的指導(dǎo)準(zhǔn)則。

蘋果的設(shè)計規(guī)范包括：完整性、一致性、直接操作、反饋、隱喻、用戶控制等。

設(shè)計語言系統(tǒng)可以讓產(chǎn)品在不同終端、不同場景中的表現(xiàn)保持一致性，也有機會通過植入品牌基因的方式形成視覺錘，提升產(chǎn)品的識別度以及消費者對品牌的認知。

因此，我們在建立設(shè)計規(guī)范的第一步，是根據(jù)公司戰(zhàn)略布局，結(jié)合此產(chǎn)品的終極目標(biāo)和產(chǎn)品定位，建立設(shè)計準(zhǔn)則，明確設(shè)計原則，以保證整個設(shè)計體系的高效率和一致性，并以此來檢驗設(shè)計的標(biāo)準(zhǔn)性，為具體的設(shè)計問題提供解決方案。

第2步：制定基礎(chǔ)規(guī)范

任何一款產(chǎn)品都需要制定基礎(chǔ)規(guī)范來保持整體的一致性?；A(chǔ)規(guī)范包含柵格系統(tǒng)、色彩、字體等最基礎(chǔ)的內(nèi)容，此次以移動端為例來進行說明：

柵格系統(tǒng)

建立橫向柵格系統(tǒng)，常用的是12柵格，12柵格比較好的地方能夠同時被2、3、4整除。因此能夠根據(jù)具體需求靈活的設(shè)計各種模塊。當(dāng)然如果產(chǎn)品比較輕量化，可以根據(jù)需求設(shè)置6、4甚至2柵格等。

還有一種是網(wǎng)格系統(tǒng)，制定最小的設(shè)計單位，界面中所有間距必須采用最小單位的倍數(shù)，包括模塊之間的間距、文本之間的間距等。比如制定最小單位為4，那么排版時橫向和縱向的間距都是4的倍數(shù)，比如8，12，24。根據(jù)最小單位制定間距，包括模塊之間間距、文本之間間距等。

色彩

色彩規(guī)范要標(biāo)明色彩的色值和使用范圍，包含主色、輔助色、狀態(tài)用色、文本色等。

如果使用到漸變色，需要標(biāo)注漸變色的色值和角度。

夜間模式需要額外注明日間和夜間模式下各個顏色的對應(yīng)色值。

字體

字體規(guī)范需要提取出各個場景下用到的字號，加以整理和說明，需要讓其他設(shè)計師清晰的理解什么樣的場景用什么樣的字號。各個字號的行高也需要標(biāo)明，否則容易出現(xiàn)參差不齊的行間距，影響閱讀體驗。

第3步：制定控件規(guī)范

控件相當(dāng)于由色彩、文字、圖形等組成的一個個小元素，遵循基礎(chǔ)規(guī)范，包含圖標(biāo)、按鈕、標(biāo)簽、分頁器、氣泡、提示框等?？丶糠忠呀?jīng)是一個比較龐大的內(nèi)容，所以以下我只做一小部分的示范。

圖標(biāo)

為保證不同形狀的圖標(biāo)在視覺上保持大小一致，需要制作一個圖標(biāo)繪制模板和圖標(biāo)制作說明。說明中標(biāo)明圖標(biāo)的圓角、描邊的粗細等。

按鈕

按鈕根據(jù)主次關(guān)系，通常分幾種不同的尺寸與類型，需要標(biāo)明在什么樣的場景下使用哪一種按鈕。按鈕的顏色、字體字號都遵循該產(chǎn)品的色彩規(guī)范、字體規(guī)范。按鈕通常有三種狀態(tài)：常規(guī)狀態(tài)、點擊狀態(tài)和失效狀態(tài)，部分情況下可能會存在加載狀態(tài)，因此需要標(biāo)明按鈕在這些狀態(tài)下的樣式。

第4步：制定組件規(guī)范

組件由多個控件組合而成，因此需要在基礎(chǔ)規(guī)范和控件規(guī)范比較完善的情況下再去制定。組件通常包含導(dǎo)航、表單、彈窗、浮層、加載、缺省狀態(tài)等。同樣以下只做一小部分的示范。

導(dǎo)航

導(dǎo)航分為頂部導(dǎo)航欄、底部導(dǎo)航欄、分段器、樓層定位等。

以頂部導(dǎo)航欄為例，標(biāo)題需要注意文字的極限值，圖標(biāo)位置和間距要考慮最小可點擊區(qū)域，熱區(qū)之間不能重疊。

UI設(shè)計規(guī)范注意點

規(guī)范建立時機

規(guī)則從無到有的制定并非一日完成的，也并非先制定了設(shè)計規(guī)范再著手進行界面改動，兩者應(yīng)該同時進行。

在經(jīng)過一次版本升級后，才有一個確定的設(shè)計規(guī)范，否則很可能被所謂的規(guī)范束縛住手腳，到頭來還是東拼西湊毫無可遵循的標(biāo)準(zhǔn)可言，那制定設(shè)計規(guī)范的意義就不存在了。

最佳時機是在完成風(fēng)格定位后開始著手基礎(chǔ)規(guī)范和控件規(guī)范，根據(jù)基礎(chǔ)控件進行其他頁面拓展，然后建立組件規(guī)范，并后期逐步完善規(guī)范，這樣可以承上啟下高效完成工作。

規(guī)范的尺度與范圍

有時做新頁面，如果很死板的100%遵循規(guī)范，做出來的視覺效果可能不是很好，太過全面的規(guī)范會影響設(shè)計師發(fā)揮。

一些特殊場景下，規(guī)范需要靈活變通。

例：部分強烈營銷活動場景中，頂部導(dǎo)航、主內(nèi)容的上下左右間隔可遵循統(tǒng)一的設(shè)計規(guī)范，其他根據(jù)不同場景進行了自由發(fā)揮，從而給用戶帶來截然不同的視覺感受。

優(yōu)秀的設(shè)計規(guī)范既能統(tǒng)一方向和基本參數(shù)，又能預(yù)留無數(shù)的可能性來保證擴展性。因此適當(dāng)?shù)匕芽睾迷O(shè)計規(guī)范的尺度與范圍，需要在制定規(guī)范的過程中，將必須遵循的部分需要進行詳細說明。

及時迭代規(guī)范

在完成v1.0版規(guī)范后，產(chǎn)品還會一直迭代，產(chǎn)品改版過程中必定會不斷優(yōu)化設(shè)計。因此，在產(chǎn)品迭代過程中需要對舊規(guī)范進行更新優(yōu)化，不合適的、過時的規(guī)范需要及時同步歸納，并及時通知到項目相關(guān)人員。要不然，陳舊的規(guī)范無法幫助設(shè)計工作的開展，反而會造成一種負面影響。

最后

另外，還有很多內(nèi)容沒有展開說，比如創(chuàng)建和維護規(guī)范化組件庫的方式之一：Sketch Libraries。

Libraries功能可以幫助我們創(chuàng)建獨立的、能夠被多個文件統(tǒng)一調(diào)用的Symbols庫。將所有的控件和組件制作成一個個Symbols，當(dāng)你修改了Libraries源文件，相關(guān)的變化也會同步更新到所有的項目文件當(dāng)中。這對于界面元素更加標(biāo)準(zhǔn)與統(tǒng)一，對于產(chǎn)品的維護和迭代更加效率。

希望小伙伴們在構(gòu)建自己產(chǎn)品的設(shè)計規(guī)范時，要圍繞產(chǎn)品的設(shè)計原則，針對目標(biāo)用戶制定設(shè)計規(guī)范，做到簡樸、易懂、能落地。

作者：張蕾，消費者平臺研發(fā)中心 視覺設(shè)計師，公眾號：蘇寧設(shè)計

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

題圖來自Unsplash，基于CC0協(xié)議。