UI知識，教你建立一套UI設計規(guī)范(2)

iOS Human Interface Guidelines
Material Guidelines（翻墻）

采用概念 2 的：

Skeleton
Pure
Bootstrap

而概念 3 往往僅在公司或團隊內部使用（詳見下文“工具”）。

靈感和實例資源：

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

方法不限，以能夠準確展現(xiàn)視覺設計風格和品牌識別（Identity）的規(guī)范為標準。正因其偏視覺化，編寫文檔不是必須的，可直接用圖形編輯軟件產出。例如：

Airbnb UI Toolkit Web
Salesforce1 UI Kit
Housing UI Style Guide

也可借助工具：

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

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

Frontify Style Guide | Frontify 是一個面向設計團隊的協(xié)作平臺，提供“Style Guide”生成和“Spec”工具。

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

Stylify Me | 填入網站 URL，自動生成對應頁面的“Style Guide”。提供 PDF 文件保存。

因要制作出網頁文檔，且其中含有大量的 Web 組件（代碼片段）和元素（視覺），可借助前端框架高效產出，比如相對大眾的 Bootstrap，Semantic UI。在大量的自由和開源前端框架項目中，選擇有維護支持，自身喜歡或熟悉的即可。

可用工具：

設計師 Brad Frost 有一套叫做“原子設計（Atomic Design）”的 Web 設計理論，在該領域有一定影響，其核心概念就是復用“Pattern Library”，高率生產 Web 頁面：

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