UI知识，教你建立一套UI设计规范

最值得收藏的UI设计干货！今天这篇从概念、灵感，方法及工具3个方面帮同学们理清UI设计规范，同时有一大波神器推荐 

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

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

概念：

设计互联网产品，Style Guide / Pattern Library 和纯粹的 Specification 各具不同功能和作用，却都含“设计规范”的概念。

1. Style Guide / Pattern Library：偏重视觉概念，一般以文档或图像格式呈现（不限定）。内容：对设计作品中的字体（Typeface）、字型（Font）、色板、品牌标识规范（Brand Guideline）、Icon 等要素作出展示和说明。主要作用于设计团队或设计师之间，展示产品的视觉设计风格。便于风格复用，规范第三方的品牌塑造（Branding）和接入。

实例参考（更多参考下文中“灵感”）：

Brand Assets | Kickstarter

Logos & branding | Dropbox（翻墙）

2. Style Guide / Pattern Library：偏重（Web 前端）开发概念，基本都以网页文档形式呈现。内容：对界面元素（UI Elements）的样式风格及实现其效果所对应的代码片段（HTML, CSS）作出说明解释，包含交互和动效设计（以 JavaScript 为主）。例如：常见的基础布局（Grid System）、字体排版（Typography）、按钮、菜单、列表、对话框（Dialog）、Tooltip 等等。用于团队 Web 设计和开发协作，统一产品风格。复用时提升工作效率，同时也保证用户体验质量。

实例参考（更多参考下文中“灵感”）：

Pattern Library | MailChimp（翻墙）

Mapbox styleguide | Mapbox

概念 1 和 2 结合的实例（更多参考下文中“灵感”）：

Product Style Guide, Visual guidelines | Salesforce

Style Guide | Lonely Planet

3. Specification (Spec)：介于设计与开发之间，由设计师直接在视觉稿（Mockup）中创建。内容：主要由 Annotation（注释，国内俗称“标注”）和 Measurement（量度）构成。Annotation 既注释设计稿中界面元素所使用的字体字型、色值等，Measurement 则注明各元素的尺寸及它们的边距，留白等。用于设计师与开发人员之间沟通和工作交接，保证开发出地产品界面和视觉稿高度统一。

灵感：

一些常用的项目和文档都有采用上述的“概念”，比如采用了概念 1 的：