如果你在设计界工作了一段时间，你可能听说过这些术语: 设计框架、UI框架、UI工具包或模式库. 它们都指的是同一件事——设计标准体系, 模板, UI模式, 以及在整个产品中使用并为其服务的组件 设计语言.
如果你之前没有创建过设计框架, 开始一个会让人觉得难以承受，似乎很耗时, 但它会加快你的设计工作，使其更有效率.
让我们概述一下设计框架解决的主要问题, 为什么你需要一个, 以及在构建时需要创建的组件. 你会发现 免费的 可下载的草图 UI框架，它允许您创建自己的设计框架.
每个用户界面设计都是从一个空的画板开始的, 每个设计师都有一个将空白画布变成功能齐全的产品的过程. 这个过程包括所有创建的小设计组件, 以及设计师构建一个有凝聚力的整体的步骤, 从颜色到按钮以及介于两者之间的一切.
经常, 这项工作是重复的，可以通过创建一个相互关联的系统来巩固和提高效率 模式 和组件. 换句话说， 设计框架.
设计框架解决了几个问题，包括:
一致性将一个好的设计变成一个 伟大的设计. 一致性改善用户体验, 一般可用性, 以及用户使用数字产品的效率. 不管是一个小网站, 一个应用程序, 或者大型SaaS产品, 设计上的不一致损害了外观, 感觉, 信誉, 和 用户体验 产品的.
不一致经常发生当一个团队或一个 设计师 是不是事情做得太快了，或者变化太快了. 有时，设计师通过快速向客户或利益相关者展示这些变化的外观来回应客户或利益相关者的不同要求. 突然, 设计团队发现他们有四种不同深浅的绿色，没有人确定哪一种是主要的按钮颜色.
设计框架通过建立一致的标准来解决这个问题.
通常在开发过程中，当有多个团队成员在过程的不同阶段参与许多设计工作时, 如果没有一套标准来指导团队，就会变得令人困惑.
设计框架通过简化沟通过程并提供明确的标准和方向来提高协作和效率. 没有更多的时间浪费来回试图找出哪种颜色或字体是正确的使用.
对于已经开发的120个画板，设计师需要在设计文件中进行多少次颜色更改? 一个包含200个组件的图标需要更改多少次?
在整个设计过程中，变化是不可避免的, 这是产品如何改进的关键, 但它通常发生在 设计师 想. 设计框架可以减少后期更改的痛苦, 因为它建立在面向对象组件的系统上. 只要改变一次，它就会波及整个设计.
现在我们知道了什么是设计框架以及它所解决的问题, 让我们讨论一下如何创建一个(以及本文后面提供的下载的草图 UI工具包中的内容).
本文使用的设计框架是一个草图文件，它使用特定的组件层次结构进行布局, 在素描中被称为“符号”.这些符号使得只需点击一下就可以轻松实现文件范围的更改. “主”组件(即“符号”)中的一个变化会立即反映到所有其他实例中.
要创建一个有效的设计框架，首先要建立一个坚实的视觉层次结构. 首先设计最无所不在的组件，比如颜色和排版. 然后细化到更小的，比如按钮和输入组件. 把它想象成盖房子——先打地基, 然后随着项目的进展添加其他部分.
颜色是最重要的元素 用户界面设计 框架层次结构——设计中的每个组件都使用颜色. 颜色引起人们强烈的反应和情绪，并决定了整体的外观, 感觉, 和产品的基调.
一个好的做法是把颜色分成不同的组:
一旦颜色被选择，下一步是建立一个网格. 网格使页面上的所有其他组件保持在正确的位置和顺序. 这是整体的设计空间.
有两种类型的网格: 垂直 和 水平.
垂直网格是最常用的一种，它使所有内容保持水平对齐. 有许多流行的网格系统像 引导 或者旧的960px网格.
水平网格并不常见. 水平网格用于排版. 它为段落创造了垂直的节奏，在报纸上很常见.
除了颜色和网格, 在设计框架层次结构中还有一个较高的组件:修饰符. 它们不能被用作自治组件——它们被用来修改或修饰其他组件.
这个组为项目带来风格，并包括负责美学的组件，例如 形状 or 阴影; changing them individually in the later phases of the project can be cumbersome.
将修饰符视为所有后续构建块的参数. 创建三种不同形状的素描符号:矩形，圆角矩形和圆形. 使用这些形状来创建UI的每个组件, 包括按钮, 输入组件, 表单字段, 等. 背景元素.
这种技术允许 设计师 更多地关注用户体验，而不是UI组件的外观. 这也使它很容易回到基本形状, 改变它的样式(例如角半径)，所有连接的东西都会自动更新.
排版是最后一个重要的设计框架组成部分. 它可以分为两组:静态页面复制, like 头 和 paragraphs; 和 inter活跃的 comp一个nt copy, 像按钮, 导航, 或者输入字段.
设计所有标题(H1, H2, H3等)的样式和大小.)及段落. 静态页面副本通常没有很多风格(颜色或粗细)变化. 唯一的变化(与静态页面复制样式相关)是它是在浅色背景上还是深色背景上. 因此，最好创建两套颜色，以确保静态页面复制在两种颜色上都有效.
显示在交互式组件上的副本, 比如按钮或系统反馈信息, 可以有多种变体. 例如, 系统反馈消息可以根据消息类型(警告)以四种不同的背景颜色显示, 错误, 成功, 等.)按钮标签也可以在不同的背景上.
在设计框架中包含这一组对全局排版的思考是有帮助的. 第一个, 创建常规按钮标签文本, 和第二, create its variations; this will help avoid ending up with too many font sizes. 在框架中创建新的UI组件时, 经常检查是否有合适的现有排版样式.
在设计系统中有两组图标:信息图标和用户界面图标. 第一组是典型的 演示系统 并且不用于任何UI交互组件(如按钮). 第二组用户界面图标为更复杂的组件添加意义:按钮, 标签, 或表, 同时占用非常小的空间. UI中的图标也可以用作功能触发器，例如“edit”,”“复制,”“下载,和“移除”.”
从用于UI交互的简单图标开始，如箭头，“添加”(+)或“关闭”(x)。. 一个好的做法是将它们设计成不同的大小(12px, 16px, 24px, 32px).
按钮无疑是UI设计中最重要的组件之一, 这么多年来, 他们已经 经历了很多变化 随着设计潮流的来来去去.
在设计按钮时，请确保设计它们各自的“状态”.“通常来说, 按钮具有多种状态，并向用户提供视觉反馈，以指示当前状态(空闲), 徘徊, 按下, 禁用, 活跃的, 等.).
有两种方法可以做到这一点:第一种是为每个状态(规则)分别设计按钮的外观, 活跃的, 徘徊, 和压). 这种解决方案可能很耗时，但随后提供了很大的灵活性. (这种方法在下面包含的免费草图 UI框架中使用.)
第二种方法是基于初始状态来设计所有状态. 例如，创建 一个 将更改每个状态的颜色、饱和度或亮度的草图符号.
要做到这一点, 将符号作为按钮的叠加，使用其中一种素描混合模式:色调, 饱和, 或覆盖. 使用黑色矩形 色相混合模式 超过常规按钮，以改变其饱和度. 稍后更改覆盖的不透明度，使其或多或少饱和的按钮.
输入允许用户与应用程序通信并上传数据. 使用诸如输入字段和按钮之类的组件可以创建一个简单的web应用程序. 与按钮一样，最好创建具有不同状态的输入组件. 这取决于设计框架, 但至少, 考虑创建空的, 填满, 错误状态.
在这个阶段, 设计框架可以被认为是完整的，因为它拥有创建功能产品所需的一切. 然而, 花更多的时间为UI框架创建更复杂的UI组件通常是值得的, 比如卡片, 表, datepicker, 图表, 和形式.
在这个阶段, 设计框架可以通过创建应用程序或网站的最常见部分来进一步开发. 通过设计导航之类的东西, 头, “关于我们”部分, 和画廊, 设计师可以在项目的后期阶段节省时间. 为产品的不同部分创建几个变体将使其更容易适应不同的项目.
测试 应该包含在任何设计或开发过程中吗. 通过创建小的设计块并对其进行“压力测试”来避免错误和遗漏组件. 例如, 检查更改开始时创建的组件是否也会更改最近添加的组件.
保持组件简单，同时提前考虑尽可能多的设计用例, 所以在未来, 任何风格都可以覆盖. 最好创建具有简单形状的UI组件, 保持足够的灵活性，以适应任何项目.
设计框架应该是通用的, 所以不要专注于一种特定的风格, 关注可用于创建样式的组件.
在你的下一个项目中，一开始就花点时间仔细地构建一个设计框架. 你会发现它改善了整个设计过程, 增加效率, 提高了产品的设计一致性, 这提高了可用性. 你会节省时间, 更有效地沟通设计理念, 并让客户和利益相关者高兴，当这些想法在短短几秒钟内被带到120素描画板上.
在这里下载草图文件. 说明书包括如何使用它.
了解更多关于设计框架的最好方法之一是检查它有多大, 老牌公司使用它们. 关注这些类型的公司，了解他们的做法.
谷歌的素材设计 -目前世界上最流行的设计框架之一. 了解Google如何分层整个设计过程并构建有用的组件层次结构.
IBM的设计语言 - IBM分享他们的整个设计过程，包括对每个细节的深入解释. 他们也有很多共同点 资源 从他们的设计语言，从简单的图标到UI动画库.
Atlassian -另一个很好的学习资源. 他们的 产品风格指南 一个伟大的设计系统值得研究吗. 他们分享他们的 Web GUI包，包含大量组件和概念的草图文件.
Wojciech是一位拥有8年经验的产品设计师和网页设计师. 他对排版和声音设计充满热情.
作者都是各自领域经过审查的专家，并撰写他们有经验的主题. 我们所有的内容都经过同行评审，并由同一领域的Toptal专家验证.
世界级的文章，每周发一次.
世界级的文章，每周发一次.
