UI知識(shí)，教你建立一套UI設(shè)計(jì)規(guī)范

最值得收藏的UI設(shè)計(jì)干貨！今天這篇從概念、靈感，方法及工具3個(gè)方面幫同學(xué)們理清UI設(shè)計(jì)規(guī)范，同時(shí)有一大波神器推薦 

作者追波：https://dribbble.com/fiohistory

概念，靈感，方法和工具。

概念：

設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品，Style Guide / Pattern Library 和純粹的 Specification 各具不同功能和作用，卻都含“設(shè)計(jì)規(guī)范”的概念。

1. Style Guide / Pattern Library：偏重視覺概念，一般以文檔或圖像格式呈現(xiàn)（不限定）。內(nèi)容：對(duì)設(shè)計(jì)作品中的字體（Typeface）、字型（Font）、色板、品牌標(biāo)識(shí)規(guī)范（Brand Guideline）、Icon 等要素作出展示和說明。主要作用于設(shè)計(jì)團(tuán)隊(duì)或設(shè)計(jì)師之間，展示產(chǎn)品的視覺設(shè)計(jì)風(fēng)格。便于風(fēng)格復(fù)用，規(guī)范第三方的品牌塑造（Branding）和接入。

實(shí)例參考（更多參考下文中“靈感”）：

Brand Assets | Kickstarter
Logos & branding | Dropbox（翻墻）

2. Style Guide / Pattern Library：偏重（Web 前端）開發(fā)概念，基本都以網(wǎng)頁(yè)文檔形式呈現(xiàn)。內(nèi)容：對(duì)界面元素（UI Elements）的樣式風(fēng)格及實(shí)現(xiàn)其效果所對(duì)應(yīng)的代碼片段（HTML, CSS）作出說明解釋，包含交互和動(dòng)效設(shè)計(jì)（以 JavaScript 為主）。例如：常見的基礎(chǔ)布局（Grid System）、字體排版（Typography）、按鈕、菜單、列表、對(duì)話框（Dialog）、Tooltip 等等。用于團(tuán)隊(duì) Web 設(shè)計(jì)和開發(fā)協(xié)作，統(tǒng)一產(chǎn)品風(fēng)格。復(fù)用時(shí)提升工作效率，同時(shí)也保證用戶體驗(yàn)質(zhì)量。

實(shí)例參考（更多參考下文中“靈感”）：

Pattern Library | MailChimp（翻墻）
Mapbox styleguide | Mapbox

概念 1 和 2 結(jié)合的實(shí)例（更多參考下文中“靈感”）：

Product Style Guide, Visual guidelines | Salesforce
Style Guide | Lonely Planet

3. Specification (Spec)：介于設(shè)計(jì)與開發(fā)之間，由設(shè)計(jì)師直接在視覺稿（Mockup）中創(chuàng)建。內(nèi)容：主要由 Annotation（注釋，國(guó)內(nèi)俗稱“標(biāo)注”）和 Measurement（量度）構(gòu)成。Annotation 既注釋設(shè)計(jì)稿中界面元素所使用的字體字型、色值等，Measurement 則注明各元素的尺寸及它們的邊距，留白等。用于設(shè)計(jì)師與開發(fā)人員之間溝通和工作交接，保證開發(fā)出地產(chǎn)品界面和視覺稿高度統(tǒng)一。

靈感：

一些常用的項(xiàng)目和文檔都有采用上述的“概念”，比如采用了概念 1 的：