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

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)。

方法不限，以能夠準(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 文件保存。

因要制作出網(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