設計規範對于設計師來說并不陌生，日常工作中也經常使用。統一的設計規範不僅有利于設計師提升效率，同樣可以幫助産品、開發、運營、測試等相關人員對産品的體驗有更好的認知。

什麼是UI設計規範

通俗來說，設計規範是圍繞在某種風格或者大型設計項目下形成可視化、數據化的标準，針對相對獨立的體系建立的統一遵守條款。

UI即User Interface（用戶界面），UI設計規範是基于用戶界面産品而制定的一套可複用設計庫，也是為了方便設計師、開發和測試人員共同協作，而遵循的規律和法則。

産品要有可遵循的标準來規範視覺呈現和元素定義，保證日後的疊代可以延續産品所傳遞的思想和價值，能最大限度保證産品的一緻性。

為什麼要做設計規範

統一産品風格

對于同一個産品的多個頁面來說，統一的設計規範能夠使得産品視覺風格保持一緻。同時可以保障良好的用戶體驗。

一個大型項目的視覺稿，往往會有幾十個甚至是上百個頁面。哪怕自己一手包辦全部頁面，恐怕也很難統一各個控件的樣式，因為在設計過程中很容易産生細微的出入，時間長了也會忘記部分參數，導緻每個控件都可能會有細微的差别。

更何況多個設計師共同合作，如果沒有及時制定規範，每個人自由發揮，同一個控件便會出現不同的樣式。

例：同一個産品中，設計師A的按鈕是2px圓角，設計師B的按鈕做成了8px，同時設計師C頁面的按鈕又做成了全圓角。

提高開發效率、解決代碼冗餘問題

通過設計規範，程序員可以了解到哪些控件是可以一次性寫好并能重複調用，同時在規範的輔助下，程序員在搭建全局共用元素時規則更會加清晰。

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

幫助新人快速上手

當新人剛加入團隊時，對産品的風格和基調可能不太熟悉或者理解不透，可能無法快速進入設計工作，這時設計規範就可以幫他們快速上手，提高工作效率，并且也能保持産品風格和控件的統一性。

如何制定UI設計規範

第1步：明确設計原則

設計師要清楚的知道，産品需要傳遞給用戶的設計特征和原則是什麼，以及整個平台的約束是什麼。

在 facebook 的設計語言原則裡面，強調了他們的設計價值觀：通用、人性、幹淨、統一、有用、快速、透明，在 facebook 所有設計中，都将這些要點作為他們設計的指導準則。

蘋果的設計規範包括：完整性、一緻性、直接操作、反饋、隐喻、用戶控制等。

設計語言系統可以讓産品在不同終端、不同場景中的表現保持一緻性，也有機會通過植入品牌基因的方式形成視覺錘，提升産品的識别度以及消費者對品牌的認知。

因此，我們在建立設計規範的第一步，是根據公司戰略布局，結合此産品的終極目标和産品定位，建立設計準則，明确設計原則，以保證整個設計體系的高效率和一緻性，并以此來檢驗設計的标準性，為具體的設計問題提供解決方案。

第2步：制定基礎規範

任何一款産品都需要制定基礎規範來保持整體的一緻性。基礎規範包含栅格系統、色彩、字體等最基礎的内容，此次以移動端為例來進行說明：

栅格系統

建立橫向栅格系統，常用的是12栅格，12栅格比較好的地方能夠同時被2、3、4整除。因此能夠根據具體需求靈活的設計各種模塊。當然如果産品比較輕量化，可以根據需求設置6、4甚至2栅格等。

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

色彩

色彩規範要标明色彩的色值和使用範圍，包含主色、輔助色、狀态用色、文本色等。

如果使用到漸變色，需要标注漸變色的色值和角度。

夜間模式需要額外注明日間和夜間模式下各個顔色的對應色值。

字體

字體規範需要提取出各個場景下用到的字号，加以整理和說明，需要讓其他設計師清晰的理解什麼樣的場景用什麼樣的字号。各個字号的行高也需要标明，否則容易出現參差不齊的行間距，影響閱讀體驗。

第3步：制定控件規範

控件相當于由色彩、文字、圖形等組成的一個個小元素，遵循基礎規範，包含圖标、按鈕、标簽、分頁器、氣泡、提示框等。控件部分已經是一個比較龐大的内容，所以以下我隻做一小部分的示範。

圖标

為保證不同形狀的圖标在視覺上保持大小一緻，需要制作一個圖标繪制模闆和圖标制作說明。說明中标明圖标的圓角、描邊的粗細等。

按鈕

按鈕根據主次關系，通常分幾種不同的尺寸與類型，需要标明在什麼樣的場景下使用哪一種按鈕。按鈕的顔色、字體字号都遵循該産品的色彩規範、字體規範。按鈕通常有三種狀态：常規狀态、點擊狀态和失效狀态，部分情況下可能會存在加載狀态，因此需要标明按鈕在這些狀态下的樣式。

第4步：制定組件規範

組件由多個控件組合而成，因此需要在基礎規範和控件規範比較完善的情況下再去制定。組件通常包含導航、表單、彈窗、浮層、加載、缺省狀态等。同樣以下隻做一小部分的示範。

導航

導航分為頂部導航欄、底部導航欄、分段器、樓層定位等。

以頂部導航欄為例，标題需要注意文字的極限值，圖标位置和間距要考慮最小可點擊區域，熱區之間不能重疊。

UI設計規範注意點

規範建立時機

規則從無到有的制定并非一日完成的，也并非先制定了設計規範再着手進行界面改動，兩者應該同時進行。

在經過一次版本升級後，才有一個确定的設計規範，否則很可能被所謂的規範束縛住手腳，到頭來還是東拼西湊毫無可遵循的标準可言，那制定設計規範的意義就不存在了。

最佳時機是在完成風格定位後開始着手基礎規範和控件規範，根據基礎控件進行其他頁面拓展，然後建立組件規範，并後期逐步完善規範，這樣可以承上啟下高效完成工作。

規範的尺度與範圍

有時做新頁面，如果很死闆的100%遵循規範，做出來的視覺效果可能不是很好，太過全面的規範會影響設計師發揮。

一些特殊場景下，規範需要靈活變通。

例：部分強烈營銷活動場景中，頂部導航、主内容的上下左右間隔可遵循統一的設計規範，其他根據不同場景進行了自由發揮，從而給用戶帶來截然不同的視覺感受。

優秀的設計規範既能統一方向和基本參數，又能預留無數的可能性來保證擴展性。因此适當地把控好設計規範的尺度與範圍，需要在制定規範的過程中，将必須遵循的部分需要進行詳細說明。

及時疊代規範

在完成v1.0版規範後，産品還會一直疊代，産品改版過程中必定會不斷優化設計。因此，在産品疊代過程中需要對舊規範進行更新優化，不合适的、過時的規範需要及時同步歸納，并及時通知到項目相關人員。要不然，陳舊的規範無法幫助設計工作的開展，反而會造成一種負面影響。

最後

另外，還有很多内容沒有展開說，比如創建和維護規範化組件庫的方式之一：Sketch Libraries。

Libraries功能可以幫助我們創建獨立的、能夠被多個文件統一調用的Symbols庫。将所有的控件和組件制作成一個個Symbols，當你修改了Libraries源文件，相關的變化也會同步更新到所有的項目文件當中。這對于界面元素更加标準與統一，對于産品的維護和疊代更加效率。

希望小夥伴們在構建自己産品的設計規範時，要圍繞産品的設計原則，針對目标用戶制定設計規範，做到簡樸、易懂、能落地。

作者：張蕾，消費者平台研發中心 視覺設計師，公衆号：蘇甯設計

本文由 @張蕾 原創發布于人人都是産品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部