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

2024-01-01 17:38:06 来源/作者: / 己有:0人学习过

最值得收藏的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(翻墙)

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

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

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

实例参考(更多参考下文中“灵感”):

Pattern Library | MailChimp(翻墙)
Mapbox styleguide | Mapbox

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

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

概念 1 和 2 结合的实例(更多参考下文中“灵感”):

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

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

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

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

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

灵感:

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