一文讀懂：如何創建UI設計規範

原創： Kevin改變世界的點滴 Kevin改變世界的點滴

3天前

咱們在作互聯網產品中，有的是以產品功能，但大部分以項目爲緯度進行分割。在產品1.0後，設計團隊須要UI設計師創建規範，若是你所在的產品團隊有2個以上的UI同窗。那可能在1.0還沒開始，一套好的UI規範就是須要立馬作的。

首先要明確，UI規範是須要UI設計師或UED團隊來完成的。但今天這裏我概括了一些好的設計規範方法集合（含多個案例）。

從如何創建設計規範、團隊什麼是須要規範、設計規範應該有什麼緯度，本文涵蓋較多的圖片內容，建議注意。

下面這些內容都來自一羣優秀的設計師回答者，經過產品經理視角概括了上面3個問題的答案。

設計規範的分類

UI的設計規範總共能夠分爲三類：

品牌類（VI）

幫助企業作的宣傳手冊、PPT、市場公關等pr文件，企業的總體形象顏色。就比如你如今看到的瓜子二手車，綠色是整個的顏色。

平臺、系統類

常見的是IOS、谷歌、開放平臺、小程序等，須要第三方開發者介入，須要第三方的開發者在設計上遵循什麼理念，以及遵循該套理念 後的背景與緣由、好處

產品業務類

面向產品內部，規則側重在產品設計和實現層面，實用性第一。設計文檔、標註都不能少，其餘設計同窗或工程師能夠直接參考或使用

互聯產品的設計規範概念

設計互聯網產品，Style Guide /Pattern library、Specification各具不一樣的功能和做用，卻都含「設計規範」的概念

Style Guide

偏重視覺概念，常見文檔或圖像格式呈現（還能夠擴展）

內容：對設計做品的字體（Typeface)、字型（Font）、色板、品牌標識規範（Brand Guideline)、Icon等要素進行展現和說明

這個部分主要的功能是方便設計師與設計師之間，展現產品的視覺風格。方便風格複用，規範新的元素或第三方接入。

Pattern Library:

偏重（web前端）開發概念，基本都是以網頁文檔形式呈現

內容：對界面元素（UI Elements)的樣式風格以及實現其效果所對應的代碼片斷做出解釋（HTML、CSS），常見的佈局（Grid System)、字體排版（Typography)、按鈕、菜單、列表、對話框（Dialog)、Toolip等等

能夠幫助團隊Web設計和協做開發，統一產品風格。減小UI還原與驗收的工做，保證用戶體驗與最初設計稿一致。

Specification(Spec)

介於設計與開發之間，由設計師直接在（mockup)中建立

內容：主要由Annotation（註釋，國內俗稱「標註」）和Measurement(量度）構成。其實說白了就是咱們常規研發中的讓UI切圖，是開發與設計人員最直接的交流。經過切圖，咱們能夠把字體字型、色紙

UIKit與設計文檔規範

細節的設計規範在不注重設計的公司是很是難以推進，第一是版本變化太快。極可能今天上線的新產品，明天就說要重構。UI稿都沒時間作完了，哪還有時間去琢磨這個版本的設計規範，小步快跑待商業模式清楚後再去考慮設計規範的事情。

固然，若是團隊中已經有幾個設計師的狀況，能夠考慮在基礎控件、組件上創建規範，方便設計稿合併的時候能夠鏈接上。

經過設計團隊一塊兒討論、草稿、細化、定稿、規劃、批量化，設計規範就像炒菜同樣。絕對不是經過加點鹽、少點醋能夠把菜作好的，而是經過時間的積累，越沉澱會越香。

設計師也須要從無規範到沉澱本身的規範，若是一個版本推翻，就所有從新更換規範。這就是去了規範的意義，規範是能夠複用，而且也可讓用戶達到了固定的認知，推翻則多是對用戶習慣的挑戰

UIKit,其實說白了是將設計稿源文件以 psd\sketch文件，可讓不一樣設計師快速使用，而且產生設計風格類似的產品。

好比小程序與app或web，若是已經訂好了web，則設計師能夠經過該規範快速產生小程序設計稿，讓小程序能夠用一套規範

如知乎在web的熱搜榜與知乎小程序的熱搜

UI設計文檔規範

文檔與UIkit的不一樣點在於，能夠更加詳細和準確的表達。對風格、顏色、文字、控件、交互、圖標、東校，甚至還能夠包含配樂都有了明確的標註。須要不停的更新、迭代、完善，這是一個持續的動態文檔。有點相似產品經理的需求池、需求文檔同樣，隨着新功能、新版本、新元素的加入，設計師須要增長UI設計文檔規範的內容甚至推翻部分規範。

文檔規範又分：

• 字體排版（Typography),即界面式設計

  
  

• 顏色（Color)規範，產品主要的顏色庫

  
  

• 圖標庫（Icon)

  
  

• 控件庫（UI Toolikt)

  
  

• 視覺框架（Visual Hierarchy)，定義產品的交互框架結構，與信息架構有關須要產品經理參與

下面是一個UI文檔規劃web端案例

企業vi/品牌形象的規範

企業vi並非互聯網的UI規範，他沒有像互聯產品的什麼button\控件等。但他們都很是類似，由於二者緊密相關。經過企業的logo展開的產品、企業服務、企業形象都是vi、UI設計師須要考慮的。

二個比較好的例子就是MUJI和apple，下面分別是他們的app \網頁\實體店

蘋果

設計UI規範步驟

既然知道UI規範有什麼，須要什麼內容。UI同窗真正在實際工做中是如何創建設計規範的？

大致的流程爲：

瀏覽全部組件》分類》整合》參考競品，優化組件》寫UI文檔》驗證、拓展更新

瀏覽組件

瀏覽產品全部的頁面，對產品的組件進行全面的瞭解，好比若是是社區產品，則feed流、登陸註冊、圖文組件。必定要注意緯度是最細的：組件，搞清楚有多少種組件

分類

不一樣行業的產品，組件的優先級會有不一樣。好比電商類的是以圖文組件、新聞資訊的是信息流組件。

經過截圖的方式進行收集，不要一開始就用sketch或axure來進行繪製。很是耽誤時間

整合

對組件進行分類，注意的是有一些組件可能會出現個性化的狀況。根據產品經理需求而定。對照新版本和需求，對如今沒有的組件也進行標註，如下面的方式進行展開

參考競品、對照需求，優化組件

經過分類，咱們能夠以組件的類型去參考一些好的案例。好比網易、騰訊等產品，甚至是本身所在行業的競品，上面咱們只是把以前的組件進行了規整。接下來就是對不一樣類型的組件進行優化，由於不少組件可能在沒有規範的時候實際上是老化或淘汰的。

參考競品既能夠知道組件規範的問題，也能夠知道是否付費時代用戶趨勢。在這步完成後，咱們的組件就基本新鮮出爐啦。

寫UI規範文檔

經過上面的工做，咱們接下來使用sketch或藍湖等工具，將文檔規範輸出。注意前面說的，UI規範文檔是一個持續動態的文檔，保證團隊能夠及時更新和複用。下面是一個例子

顏色提供高度定製化仍是提供有限色板

在這裏有2個前端開源工具，分別是Bootstrap和Semantic UI，都是很是豐富的前端規範案例。

Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合做基於HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷

Semantic UI

Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

在色調的選擇上

有去色板的，色彩主題很是容易切換；因爲顏色的可選性很少致使場景的選擇上會更加苛刻，或者須要添加額外的設計

定製化的優點是方便提供色彩的豐富性，每個component的顏色均可以毫無相關，但劣勢是增長了色板的控制難度，對開發的要求也會很是高。開發須要經過管理不肯定的顏色，就要管理未知的代碼設計。

下面是在是一個案例

本次規範內容原創的做者門：

阿本、陳希 Chris、周莜、葉卉、靜靜、阿本、icecreamliker

原文連接：https://www.zhihu.com/question/29936125/answer/97371682

（如有侵權請留言刪除）

好的內容會發光，感謝他們的內容提供。相信也能在這裏幫助正在閱讀的你

定一套設計規範，減小產品彎路

之因此花這麼長時間整理這篇概括內容，是近期在工做中深入認知到一套UI規範是能夠大大提高開發效率，減小在測試、UI還原的工做量，並在思考一個問題產品經理如何協助UI定規範？

產品經理須要告知需求的背景、需求介紹、產品將來的規劃甚至是產品的商業模式

固然，若是你只有一個點子，尚未開始你的項目運營。那設計規範能夠放在後邊，但當項目上線後，逐步開始進行UI的迭代與團隊成員增長，一個持續動態更新的UI規範是很是有必要的。

產品經理要知道在UI規範中常見的一些事件，好比按鈕的狀態、輸入框的狀態等類型。由於不少狀況下，UI設計師一我的是沒辦法所有想全面，產品經理須要在測試環境甚至是線上環境就給予建議。

固然，理想的方式仍是在UI設計中就給予對應的元素、元素狀態。

在最後，產品經理如何與UI進行有效溝通展開協做，也會在我《Kevin帶新人第二期》中教學，30個學生目前還剩18個名額。

在春節，進行一次成功的產品經理轉型、完成訓練，是本次訓練我開設的目標。若是你還在擔憂魚龍混雜的產品課程現狀，這一次你不妨能夠試試。若是你想了解課程大綱能夠點擊下面連接