LOFTER這份精而美的設計規範，頁數不多，但每頁都是經過三思後得出的總結，推薦一看。
讀者對象：
剛接觸產品設計的視覺設計師
一、設計規範有什麼用？設計規範能為團隊解決不少問題，並提升工作效率，主要體現在以下三個方面：
1、解決多人協作時控制項混亂問題一個大型項目的視覺稿，往往會有幾十個甚至是上百個頁面。對於第一次做這種大項目的設計師，如果在視覺風格成型後沒有做規範的話，哪怕自己一手包辦全部頁面，恐怕也很難統一視覺樣式。在創作階段設計其他頁面時，如果沒有規範來指導，設計過程中很容易產生細微的出入，導致每個控制項都會有細微的差別，經常會做著做著就出現控制項不一致的問題，比如A頁面的按鈕是4PX圓角，B頁面的按鈕又做成了6PX圓角，再後來做的C頁面的按鈕又做成了2PX圓角。如果一直埋頭苦幹趕頁面，沒檢查出這些問題，頁面做的越多錯誤就越多，到時候幾十個頁面的控制項都要修改，那可真是苦不堪言啊。
一個人做頁面尚且會出現這種樣式不統一的問題，更何況是多人協作。因此，在進行多人協作一個項目前，可由主視覺設計師出一份視覺規範，其他一起協作的幾個設計師遵循這個規範，才能把控視覺統一性，提高效率，減少返工率。
另外，當新人加入團隊的時候，他們對產品的品牌基因可能理解不透，這時設計規範就可以幫他們快速上手，並且保持產品的統一性。
2、解決開發效率、代碼冗餘問題如果沒有做規範，就拿按鈕這個常見的控制項來舉例，程式設計師不知道具體的規範，每個程式設計師用代碼寫了A頁面的按鈕樣式，然後在開發B頁面時又要重新用代碼寫按鈕樣式，頁面越多程式設計師的工作量也就越大，影響項目進度，代碼也會越來越臃腫。
如果做了規範，程式設計師從視覺規範中了解到哪些控制項是可以一次性寫好並能重複調用。在規範的輔助下，程式設計師在搭建全局共用元素時規則更加清晰明了，如按鈕、行間距、字體大小、色值等等。
另外，對於末端界面沒有規範到的角落和由規範控制項組成的新頁面提供了有效參考，比如規範中已經列出的5種常用彈窗樣式，後來需求迭代時出現由原有規範樣式混搭組成的新彈窗，這時程式設計師就可以借鑑原有5種彈窗裡的標題、間距、按鈕等樣式去完成該工作。
3、解決產品迭代中品牌形象會走樣問題產品在迭代過程中，往往是小版本進行幾個功能的迭代比較多。如果沒有做規範，在多次迭代過程中會忘記設計初衷，同樣一個TAB控制項，可能會出現多種不同樣式的TAB，舉一反三，這種太隨意的設計會讓產品控制項混亂，導致品牌形象走樣，看起來很不協調，像是幾個風格不同的設計師共同完成的半成品。
有了規範，後續迭代中也能保持設計初衷，遵循定製好的設計規範，維護好品牌形象。就算是後來加入新的設計師，新的設計師也能通過主設計師做好的規範，統一品牌形象。
規範能使產品在不斷更新迭代中保持品牌形象不走樣，保持產品特性，產品的規範統一增加了用戶使用認知，不同程度有效提升用戶體驗。
二、設計規範操作的五大誤區設計規範的工作量不小，開始動手之前應了解一下有哪些誤區，儘量少走彎路，更科學高效地完成一份有效的規範文檔。
錯誤一：規範建立時機不對規範建立的時機很重要，太早或者太晚都會給後續迭代帶來很多麻煩。
如上圖所示，如果在創作初期就做設計規範，這時視覺風格還沒成型，投入太多精力去做規範，在視覺風格定位後，之前做的視覺規範又要推翻重做，因此太早做設計規範會造成沒必要的返工。
如果等V1.0上線後才開始做規範，已經錯過了最佳時機。因為在V1.0開發的後半部分的兩大工作是設計師拓展頁面和程式設計師進行開發，在設計師拓展頁面的階段，如果沒有設計規範的指導往往會很難保持視覺統一性，這時把頁面交到程式設計師手裡，同樣一個控制項在各個頁面中的呈現樣式卻不一樣，混亂不協調的控制項庫會對程式設計師造成困擾，從而影響開發進度。在程式設計師前期開發階段，如果有了規範，就可以快速根據規範搭建控制項庫，高效完成工作。
因此，最佳時機是在完成風格定位後做規範，可以承上啟下高效完成工作。
錯誤二：對非重要界面進行規範設定記得以前剛接觸設計規範的時候，覺得設計規範就像一本設計聖經可以非常細緻全面的指導設計工作，然後我對全部界面都做了詳細的規範，花了很多時間和精力做出的設計規範多達幾十頁好幾十個細分模塊，最後實際應用時發現自己被這份設計規範打臉，因為有時做新的頁面，如果死板的100%遵循了規範，做出來的視覺效果不好；如果完全拋開設計規範，那之前做的過於全面的規範等於白做了，可見太過全面的規範會影響設計師發揮，並不是一件好事。
所以，整理規範時，應只針對控制項、色值、質感、動效、品牌元素等重要界面進行規範設定。
錯誤三：規則沒彈性採用28原則只能針對產品80%的界面進行規範。這裡講的80%和20%是一個相對的概念，80%代表色彩、按鈕、字體、間距等重要內容，這些內容需要進行詳細的規範說明。另外的20%是指某些控制項是不可復用並且不重要的，這種20%的內容不需要花費精力做進規範裡。這個28原則需要設計師根據具體情況具體分析，作出更適合當下的設計。
如果對所有界面進行100%規範，一方面會束縛設計師的發揮，另一方面也會影響產品迭代的設計彈性，比如一個產品官網進行了100%規範，需求迭代時要在導航加上一個活動入口，這時如果死板的遵循原先的導航規範來加這個活動入口，視覺效果和活動數據效果可能並不理想，所以在面對這類需求的時候，適當的做出導航調整也是可以的。
錯誤四：規範沒有迭代在完成v1.0版規範後，產品還會一直迭代，產品改版過程中必定會不斷優化設計。
如果設計師沒有跟著產品改版的節奏去迭代視覺規範，一般會出現兩種情況：一是被原規範的舊樣式束縛，死板的遵循最初的規範，長久下去會出現視覺樣式過時的問題。二是改版中用了新的視覺風格，沒有及時總結歸納成規範，這樣一來又會出現品牌形象走樣的問題。
所以在產品迭代過程中需要對舊的規範進行更新優化，不好的、過時的規範需要及時同步歸納，並及時通知到項目相關人員。要不然，陳舊的規範起不到幫助設計工作的開展，反而是一種負面影響。
錯誤五：規範沒有執行力有兩種規範是缺乏執行力的：
第一、規範內容不具體，缺少對核心模塊的細節說明。各個模塊缺少必需的說明，比如色彩模塊中有主色卻缺少輔助色的說明，按鈕模塊中缺少滑過、點擊、不可點狀態的說明，字體模塊缺少字體磅數的分布設定。這種沒有核心內容的規範，沒有參考價值，規範的作用幾乎等於零，其他參與項目的設計師還得找製作規範的設計師要相關的規範才能進行下去，所以這種類型的規範是沒有執行力的。
第二、規範太全面死板太臃腫，無從看起，對後續設計有束縛。對所有界面的所有元素進行規範，連不重要的元素也強行歸納進來，多達幾十頁的規範文檔。造成三方面的影響，一是會增加大量沒必要的工作時間來製作規範，二是設計師和程式設計師需要花很多時間精力去看無關緊要的內容，增加了很多負擔。三是設計本來就不是一件絕對的事，需要20%的靈活空間，不然後面遇到新的頁面，死板的把規範用在新的頁面上，出來的效果可能並不好。
三、設計規範怎麼做？設計規範的模塊分類有很多，會讓新人感到無從下手，怎麼樣梳理才更能科學易用？以下六個維度可以作為參考。
1、信息系統：字體選擇、顏色、層級區分產品中的字號應該有一個全局的規劃，在同一個界面內，儘量少用太多太接近的字號，比如一個產品詳情頁的正文部分，如果同時用了12、13、14、15、16、18去排版，文字的層級對比會比較弱，不利於閱讀，視覺效果也會有點凌亂。
如果你對全局的字號沒把握，不妨參考一下上圖的字號分布，這套基於12、14、16、20和34號的字號分布能夠良好的適應布局結構，層次明晰，所以具有一定的參考意義。當然以上僅供參考，沒有絕對的字號布局方案，設計師可以根據具體的產品情況來分布。
如上圖所示，「L」和 「XXL」用了兩個很相似的顏色#666666和#6e6e6e，這兩個顏色肉眼難以區分，在同一層級去做字體顏色區分是沒必要的。同一組中的內容屬於同一層級，從信息層級來講應該要用同一種顏色，表示是同一個層級。
產品文字中一般會有一級標題、二級標題、一級正文、二級正文、提示文字、輔助文字等，為了區分層級便於瀏覽，通常會根據產品需要把字體顏色深淺分成3到5個層級，常見的有#333333、#666666、#999999這個組合，這個組合的層級區分比較分明，適應性比較廣，因此有一定的參考價值。
從技術實現層面來講，對於字體的選擇，產品設計和推廣設計有較大的區別。
推廣設計的風格多種多樣，需要根據需求選擇字體來營造氛圍，推廣設計的字體往往是做在圖片上，不需要考慮用戶的設備中有沒有包含該字體。
產品設計的字體，很少會做在圖上，大多數字體由前端工程師來實現，設計師一般會選擇用戶設備裡自帶的字體來進行設計。如果在頁面中用了蘭亭黑、正黑等大量第三方字體，用戶的設備沒有這些字體就會以默認字體來顯示，最終效果會和視覺稿有很大出入。
另外，從視覺層面來講，文字的層級一般用字號去區分，如果既用字號去區分，又用不同字體去區分信息，會顯得凌亂缺乏美感，因此字體的數量應做減法，能用2種就不要用3種，能用1種就不要用2種。
2、控制項系統：按鈕的樣式統一在產品中按鈕控制項的復用度是很高的，同樣的一個確定按鈕也會根據頁面環境不同來設定不同寬高尺寸。
需要注意的是，即使按鈕寬高不同，按鈕樣式也需要統一寬高比例、描邊、直角、圓角、色值、文字區域、字體、字間距等，以保證按鈕樣式的統一。
另外，在一般情況下，按鈕會有四種滑鼠狀態。不同顏色的按鈕之間，相同的滑鼠狀態也需統一視覺效果。比如同層級的藍色和綠色按鈕放在一起，這2個按鈕在hover狀態下的明度變化看起來應相對統一。
3、布局系統：界面內不能出現多餘的行間距在設計的過程中，間距這個隱形元素往往會被新人忽略，間距能表明內容之間的層級和從屬關係，凌亂複雜的間距會對用戶認知造成較大困擾。
因此，設計師需要將間距當做色彩、字體、字號一樣的元素來設計。一個界面中能用5種間距，就不要用6種；能用3種就不要用4種，這是一個需要做減法的設計原則。
另外，內間距儘量不要大於外邊距。大多環境下，外邊距小於內邊距時內容會有外擴力，顯得擁擠，有閱讀壓力。外邊距大於內邊距時，有適當的留白，內容沒有外擴力，用戶的視線不受幹擾，更專注於內容本身。
4、配色系統選擇主色調時，首先確定產品的調性、用戶對象和所要表達的氣氛，以及利用色彩所希望達到的目的，色彩取向決定了這個產品的風格。產品的輔助色可用主調色的鄰近色，也可用對比色。確定主色和輔助色之前，建議應用到各種頁面中去看看實際效果，因為每個頁面的使用環境都不同，反覆驗證後才能確定最終的色彩方案。
一般情況下，可選擇一到三種輔助色配合使用，整個產品的色彩最好控制在四種顏色之內。
5、品牌系統：LOGO應用LOGO會應用到各種頁面中，在LOGO定稿後需要將LOGO的各種組合方式整理出來，便於後續的實際應用。比如LOGO的左右結構及上下結構；反白的情況；黑白的情況；單色的情況；黑底白底的情況；最小尺寸；以及錯誤的使用方式都需要標示出來。
6、推廣系統推廣規範設定應突出商品、主體內容和主要文案。不得使用無版權的圖片和字體，文案排版需符合閱讀習慣，避免折行，字體不要過小，字體筆畫均勻識別度高，輔助圖形不得擾亂文案信息和產品展示。
以及具體的排版結構，它是上下還是左右，先圖後文，還是先文後圖，四周的邊距和文案的間距，可以和不可以的排版行為需要標示。
四、設計規範案例網易雲音樂android端V3.0版規範遵循28原則，對產品80%的主要界面進行規範，ICON的風格統一和色彩的整體把控，以及品牌的統一性，都有條有理的安排在規範中。這份考究嚴謹的設計規範，列出大量方便復用的控制項，在內容的框架梳理和模塊的細節說明上極具參考性，非常適合設計新人借鑑參考。
LOFTER經過幾個大版本的迭代，設計風格和LOGO都有所改變，因此規範也隨之迭代優化。對比V1.0和V5.2規範，可以發現LOFTER在V1.0產品初期階段，只需對色彩、字號、按鈕等主要模塊進行規範，隨著產品的發展，到了V5.2版設計規範，對規範進行了更多的補充說明，以及保持產品自身的品牌調性。
LOFTER這份精而美的設計規範，頁數不多，但每頁都是經過三思後得出的總結，推薦一看。
本文提供網易雲音樂和LOFTER的規範文檔下載，下載地址：
連結: http://pan.baidu.com/s/1bpeFYhT 密碼: 63xd
作者：網易UEDC / 吳良
原文地址：http://www.uisdc.com/163-design-principle-and-guideline#