序：對于剛入行的新人，可能覺得設計規范是一件很高大上又很讓人頭疼的事情，面對這么多設計模塊感到無從下手。設計規范如果考慮不到位，往往會出現規范太空洞缺乏實際指導意義、規范太死板影響設計發揮等問題。這篇文章會從新人的角度出發，總結一些設計規范要點，算是一次溫故總結的分享。

一、設計規范有什么用？

設計規范能為團隊解決不少問題，并提升工作效率，主要體現在以下三個方面：

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、推廣系統

推廣規范設定應突出商品、主體內容和主要文案。不得使用無版權的圖片和字體，文案排版需符合閱讀習慣，避免折行，字體不要過小，字體筆畫均勻識別度高，輔助圖形不得擾亂文案信息和產品展示。

以及具體的排版結構，它是上下還是左右，先圖后文，還是先文后圖，四周的邊距和文案的間距，可以和不可以的排版行為需要標示。

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

網頁題目：新手教程，六步設計規范
文章地址：http://m.newbst.com/news4/319854.html

成都網站建設公司_創新互聯，為您提供網站建設、企業建站、Google、網站收錄、ChatGPT、做網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯