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

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

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

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

2. Style Guide / Pattern Library：偏重（Web 前端）開(kāi)發(fā)概念，基本都以網(wǎng)頁(yè)文檔形式呈現(xiàn)。內(nèi)容：對(duì)界面元素（UI Elements）的樣式風(fēng)格及實(shí)現(xiàn)其效果所對(duì)應(yīng)的代碼片段（HTML, CSS）作出說(shuō)明解釋，包含交互和動(dòng)效設(shè)計(jì)（以 JavaScript 為主）。例如：常見(jiàn)的基礎(chǔ)布局（Grid System）、字體排版（Typography）、按鈕、菜單、列表、對(duì)話框（Dialog）、Tooltip 等等。用于團(tuán)隊(duì) Web 設(shè)計(jì)和開(kāi)發(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ì)與開(kāi)發(fā)之間，由設(shè)計(jì)師直接在視覺(jué)稿（Mockup）中創(chuàng)建。內(nèi)容：主要由 Annotation（注釋，國(guó)內(nèi)俗稱“標(biāo)注”）和 Measurement（量度）構(gòu)成。Annotation 既注釋設(shè)計(jì)稿中界面元素所使用的字體字型、色值等，Measurement 則注明各元素的尺寸及它們的邊距，留白等。用于設(shè)計(jì)師與開(kāi)發(fā)人員之間溝通和工作交接，保證開(kāi)發(fā)出地產(chǎn)品界面和視覺(jué)稿高度統(tǒng)一。

靈感：

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

iOS Human Interface Guidelines
Material Guidelines（翻墻）

采用概念 2 的：

Skeleton
Pure
Bootstrap

而概念 3 往往僅在公司或團(tuán)隊(duì)內(nèi)部使用（詳見(jiàn)下文“工具”）。

靈感和實(shí)例資源：

Website Style Guide Resources | 收錄大量案例，該項(xiàng)目同時(shí)也收錄了相關(guān)文章、工具、書(shū)籍、播客等。
Find Guidelines | 一個(gè)直觀的 Guideline 官方鏈接收集列表。
Brand Style Guide Examples | 同上
All The Style Guides | 同上，托管在 Tumblr ，以博客形式呈現(xiàn)。

方法和工具：1. Style Guide / Pattern Library：

方法不限，以能夠準(zhǔn)確展現(xiàn)視覺(jué)設(shè)計(jì)風(fēng)格和品牌識(shí)別（Identity）的規(guī)范為標(biāo)準(zhǔn)。正因其偏視覺(jué)化，編寫(xiě)文檔不是必須的，可直接用圖形編輯軟件產(chǎn)出。例如：

Airbnb UI Toolkit Web
Salesforce1 UI Kit
Housing UI Style Guide

也可借助工具：

Style Inventory for Sketch | Sketch 插件，基于視覺(jué)稿生成 “Style Guide”。

Style Tiles | 用于快速制作“Style Guide”的 PSD 模版，

Frontify Style Guide | Frontify 是一個(gè)面向設(shè)計(jì)團(tuán)隊(duì)的協(xié)作平臺(tái)，提供“Style Guide”生成和“Spec”工具。

CSS Stats | 解析 URl 對(duì)應(yīng)網(wǎng)站的 Style（主要依靠分析 CSS 文件），展示相關(guān)信息，比如字體尺寸（font-size）、色板、浮動(dòng)（float）采用數(shù)量等。

Stylify Me | 填入網(wǎng)站 URL，自動(dòng)生成對(duì)應(yīng)頁(yè)面的“Style Guide”。提供 PDF 文件保存。

2. Style Guide / Pattern Library：

因要制作出網(wǎng)頁(yè)文檔，且其中含有大量的 Web 組件（代碼片段）和元素（視覺(jué)），可借助前端框架高效產(chǎn)出，比如相對(duì)大眾的 Bootstrap，Semantic UI。在大量的自由和開(kāi)源前端框架項(xiàng)目中，選擇有維護(hù)支持，自身喜歡或熟悉的即可。

可用工具：

設(shè)計(jì)師 Brad Frost 有一套叫做“原子設(shè)計(jì)（Atomic Design）”的 Web 設(shè)計(jì)理論，在該領(lǐng)域有一定影響，其核心概念就是復(fù)用“Pattern Library”，高率生產(chǎn) Web 頁(yè)面：

Atomic Design | Brad Frost（翻墻）
他為該理論創(chuàng)建了一個(gè)開(kāi)源項(xiàng)目，基于 PHP：Pattern Lab | Build Atomic Design Systems

Web Starter Kit（HTML, CSS, JS） | Google Web Fundamentals 提供的 Web 生產(chǎn)樣板，支持創(chuàng)建“Pattern Library”形式的文檔。（翻墻）

Style Guide Boilerplate（PHP） | “Pattern Library”樣板，類似 Pattern Lab。

更多方法類文章和工具列表可參考：

Website Style Guide Resources
50 Style Guide Tools, Articles, Books and Resources | Tuts+

3. Specification （Spec）：

“Spec”應(yīng)以盡量降低設(shè)計(jì)師精力消耗，并能讓開(kāi)發(fā)人員清晰理解為標(biāo)準(zhǔn)。提高效率并保證質(zhì)量的基礎(chǔ)，是選擇合適的工具。

在繪制設(shè)計(jì)稿所用的圖形編輯軟件中啟用擴(kuò)展和插件，直接生產(chǎn)“Spec”，高效直擊主題：

specKing | Photoshop（$19，推薦，正在使用）
Specctr | Photoshop, Illustrator（$49 ,PS 和 AI 單獨(dú)出售）
Markly App | Photoshop, Sketch（$39.99，PS 和 Sketch 單獨(dú)出售）
Sketch Measure | Sketch（自由）

一些其他插件也提供制作“Spec”功能，比如：

PNG EXPRESS | Automated Design Delivery for Photoshop（$29）
Ink | A Photoshop documentor plugin（免費(fèi)）

團(tuán)隊(duì)協(xié)作平臺(tái)和其他工具：

Avocode | 簡(jiǎn)化設(shè)計(jì)師與開(kāi)發(fā)人員之間的協(xié)作流程（Web 產(chǎn)品），提供 Slice（切圖）、Spec、圖層轉(zhuǎn) CSS 等功能。

Zeplin | 同樣是一款有質(zhì)量的設(shè)計(jì)協(xié)作軟件。目前僅支持 Sketch 設(shè)計(jì)稿，PS 支持仍在開(kāi)發(fā)中。產(chǎn)品處于邀請(qǐng)內(nèi)側(cè)階段。

Frontify | 上文“Style Guide 工具”提到過(guò)，屬協(xié)作平臺(tái)，支持對(duì)設(shè)計(jì)稿“Spec”。

Assistor PS | 可獨(dú)立在系統(tǒng)中運(yùn)行的 PS 協(xié)助軟件，但需借用 PS 載入設(shè)計(jì)文檔。提供 Slice，Spec 等功能。