[ 平面理論教程 ] 超實用六步透視網易設計規範分享- 設計教程 - 骨子愛創意

教學主題: 超實用六步透視網易設計規範分享

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 超實用六步透視網易設計規範分享

這教學的重點為這幾點 [ 規範,分享,設計,網易,透視,實用,產品,頁面,字體,按鈕, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

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

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

本文提供網易雲音樂和LOFTER的規範文檔下載，強烈推薦下載：http://pan.baidu.com/s/1bp2vmwR

 

文：網易UEDC / 吳良

讀者對象：

剛接觸產品設計的視覺設計師

一、設計規範有什麼用?

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

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、控件系統：按鈕的樣式統一

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

在產品中按鈕控件的復用度是很高的，同樣的一個確定按鈕也會根據頁面環境不同來設定不同寬高尺寸。

需要注意的是，即使按鈕寬高不同，按鈕樣式也需要統一寬高比例、描邊、直角、圓角、色值、文字區域、字體、字間距等，以保證按鈕樣式的統一。

另外，在一般情況下，按鈕會有四種鼠標狀態。不同顏色的按鈕之間，相同的鼠標狀態也需統一視覺效果。比如同層級的藍色和綠色按鈕放在一起，這2個按鈕在hover狀態下的明度變化看起來應相對統一。

3、布局系統：界面內不能出現多餘的行間距

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

在設計的過程中，間距這個隱形元素往往會被新人忽略，間距能表明內容之間的層級和從屬關係，凌亂複雜的間距會對用戶認知造成較大困擾。

因此，設計師需要將間距當做色彩、字體、字號一樣的元素來設計。一個界面中能用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這份精而美的設計規範，頁數不多，但每頁都是經過三思后得出的總結，推薦一看。

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 超實用六步透視網易設計規範分享 這教學會喜歡

文章標題: 骨子愛創意- 超實用六步透視網易設計規範分享–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 規範,分享,設計,網易,透視,實用,產品,頁面,字體,按鈕,

本文永久連結 :超實用六步透視網易設計規範分享

本文轉載自 :VIA