如何构建一个有效的设计框架（包括一个免费的 Sketch UI 框架）

如果您在设计界工作了一段时间，您可能听说过这些术语：设计框架、UI 框架、UI 工具包或模式库。 它们都指的是同一个东西——一个由设计标准、模板、UI 模式和组件组成的系统，在整个产品中使用并为其设计语言提供服务。

如果您之前没有创建过设计框架，开始一个设计框架可能会让人感到不知所措并且看起来很耗时，但它会加快您的设计工作并使其整体效率更高。

让我们概述一个设计框架解决的主要问题，为什么需要一个，以及在构建一个时需要创建的组件。 您将在本文后面找到一个可免费下载的 Sketch UI 框架，它允许您创建自己的设计框架。

什么是设计框架？

每个用户界面设计都从一个空的画板开始，每个设计师都有一个他们用来将空白画布转换为功能齐全的产品的过程。 这个过程包括创建的所有小型设计组件，以及设计师构建一个有凝聚力的整体所经历的步骤，从颜色到按钮以及介于两者之间的所有内容。

通常，这项工作是重复性的，可以通过创建一个相互关联的模式和组件系统来巩固和提高效率。 换句话说，一个设计框架。

设计框架解决了几个问题，包括：

• 消除产品设计中的不一致。
• 提高设计和产品团队之间的协作、效率和沟通。
• 使设计过程后期的设计更新不那么令人沮丧。

第一个问题：产品不一致

一致性将一个好的设计转变为一个伟大的设计。 一致性提高了用户体验、一般可用性以及用户使用数字产品的效率。 无论是小型网站、应用程序还是大型 SaaS 产品，设计的不一致都会影响产品的外观、感觉、可信度和用户体验。

当团队或设计师做事太快或即时进行更改时，通常会发生不一致。 有时，设计师会通过快速向他们展示这些变化的样子来回应客户或利益相关者要求不同的东西。 突然，设计团队发现自己有四种不同深浅的绿色，没有人确定哪一种是主要的按钮颜色。

设计框架通过建立一致的标准来解决这个问题。

第二个问题：协作和沟通的差距

通常在开发过程中，当有多个团队成员在流程的不同点参与设计工作时，如果没有一套标准来指导团队，就会变得混乱。

设计框架通过简化沟通过程并提供明确的标准和方向来提高协作和效率。 没有更多的时间来回奔波试图找出哪种颜色或字体是正确的使用。

第三个问题：后期设计变更

在已经开发了 120 个画板的设计文件中，设计师需要对单一颜色进行多少次更改？ 有多少次需要更改属于 200 个组件的图标？

变化在整个设计过程中是不可避免的，它是产品改进的方式，但它往往发生得比设计师想要的晚。 设计框架使这些后期更改变得不那么痛苦，因为它建立在面向对象组件的系统上。 更改一次，它就会在整个设计中产生涟漪。

如何创建设计框架

现在我们知道了设计框架是什么以及它解决的问题，让我们谈谈创建一个（以及本文后面提供的 Sketch UI 工具包下载中的内容）。

本文使用的设计框架是一个单独的 Sketch 文件，它使用特定的组件层次结构进行布局，在 Sketch 中称为“符号”。 这些符号可以通过单击轻松实现文件范围的更改。 “主”组件（即“符号”）的一个变化会立即反映在所有其他实例中。

设计框架层次

要创建一个运行良好的设计框架，首先要建立一个坚实的视觉层次。 首先设计最无所不在的组件，例如颜色和排版。 然后细化到更小的组件，例如按钮和输入组件。 把它想象成盖房子——先打地基，然后随着项目的进展添加其他部分。

颜色

颜色是 UI 设计框架层次结构中最重要的元素——设计中的每个组件都使用颜色。 颜色会引起人们强烈的反应和情绪，并决定产品的整体外观、感觉和色调。

一个好的做法是将颜色分组：

1. 原色是主要的品牌颜色，通常用于创建项目的一般配色方案和按钮等关键组件。
2. 二次色补充了主要调色板——通常它们是原色的不同色调、饱和度或色调。 灰度通常用于排版或背景。 五到八级灰度应该足够了。
3. 系统反馈颜色是设计师经常忘记的一个重要组。 这些颜色显示系统消息，包括警报、警告和通知。

网格：设计空间

选择颜色后，下一步是设置网格。 网格将页面上的所有其他组件保持在正确的位置和顺序。 这是整体设计空间。

有两种类型的网格：垂直和水平。

垂直网格是最常用的网格，它使所有内容保持水平对齐。 有许多流行的网格系统，例如 Bootstrap 或旧的 960px 网格。

水平网格并不常见。 水平网格用于排版。 它为段落创造垂直节奏，在报纸上很常见。

修饰符：风格规则

除了颜色和网格之外，设计框架层次结构中还有一个组件：修饰符。 它们不能用作自主组件——它们用于修改或设计其他组件。

该组为项目带来风格，并包括负责美学的组件，例如形状或阴影； 在项目的后期阶段单独更改它们可能很麻烦。

将修饰符视为所有后续构建块的参数。 用三种不同的形状创建草图符号：矩形、圆角矩形和圆形。 使用这些形状来创建 UI 的每个组件，包括按钮、输入组件、表单字段等和背景元素。

这种技术允许设计师更多地关注用户体验而不是 UI 组件的外观。 它还可以轻松返回基本形状，更改其样式（例如角半径），并且所有连接的内容都会自动更新。

排版：内容

排版是最后一个重要的设计框架组件。 它可以分为两组：静态页面副本，如标题和段落； 和交互式组件副本，例如按钮、导航或输入字段。

设计所有标题（H1、H2、H3 等）和段落的样式和大小。 静态页面副本通常没有很多风格（颜色或重量）变化。 与静态页面复制样式相关的唯一变化是它是在浅色还是深色背景上。 因此，最好创建两组颜色以确保静态页面副本适用于两者。

出现在交互式组件（如按钮或系统反馈消息）上的副本可以有多种变体。 例如，系统反馈消息可以根据消息类型（警告、错误、成功等）显示在四种不同的背景颜色上——按钮标签也可以在不同的背景上。

在全局考虑排版时，将这个组包含在设计框架中很有帮助。 首先，创建常规按钮标签文本，其次，创建其变体； 这将有助于避免最终使用太多的字体大小。 在框架中创建新的 UI 组件时，请始终检查是否存在适合的现有排版样式。

图标

设计系统中有两组图标：信息图标和用户界面图标。 第一组通常是插图系统的一部分，不用于任何 UI 交互组件（例如按钮）。 第二组——UI 图标——为更复杂的组件添加了意义：按钮、标签或表格，同时占用的空间非常小。 UI 中的图标也可以用作“编辑”、“复制”、“下载”和“删除”等功能触发器。

从用于 UI 交互的简单图标开始，例如箭头、“添加”(+) 或“关闭”(x)。 一个好的做法是将它们设计成不同的尺寸（12px、16px、24px 32px）。

成分

纽扣

按钮无疑是 UI 设计中最重要的组件之一，多年来，随着设计趋势的来来去去，它们经历了许多变化。

在设计按钮时，请确保设计它们各自的“状态”。 通常，一个按钮具有多种状态，并向用户提供视觉反馈以指示当前状态（空闲、悬停、按下、禁用、活动等）。

有两种方法可以做到这一点：第一种是为每种状态（常规、活动、悬停和按下）分别设计按钮的外观。 此解决方案可能很耗时，但随后提供了很大的灵活性。 （此方法在下面包含的免费 Sketch UI 框架中使用。）

第二种方法是在初始状态的基础上设计所有状态。 例如，创建一个将更改每个状态的颜色、饱和度或亮度的 Sketch 符号。

为此，请将符号放置为具有草图混合模式之一的按钮的叠加层：色调、饱和度或叠加层。 在常规按钮上使用具有色调混合模式的黑色矩形来更改其饱和度。 稍后更改覆盖不透明度使其成为或多或少饱和的按钮。

输入组件

输入允许用户与应用程序通信并上传数据。 使用诸如输入字段和按钮之类的组件可以创建一个简单的 Web 应用程序。 与按钮一样，最好创建具有​​不同状态的输入组件。 这取决于设计框架，但至少要考虑创建空、填充和错误状态。

复杂组件

在这个阶段，设计框架可以被认为是完整的，因为它具有创建功能产品所需的一切。 但是，通常值得花更多时间为 UI 框架创建更复杂的 UI 组件，例如卡片、表格、日期选择器、图表和表单。

部分

在这个阶段，可以通过创建应用程序或网站的最常见部分来进一步开发设计框架。 通过设计导航、标题、“关于我们”部分和画廊等内容，设计师可以在项目的后期阶段节省时间。 创建产品不同部分的多个变体将更容易适应不同的项目。

设计框架最佳实践

不断测试设计框架

测试应包含在任何设计或开发过程中。 通过创建小型设计件并对其进行“压力测试”来避免错误和缺失组件。 例如，检查更改一开始创建的组件是否也会更改最近添加的组件。

创建简单的 UI 组件

保持组件简单，同时尽可能多地考虑设计用例，以便将来可以涵盖任何样式。 最好创建具有​​简单形状的 UI 组件，使其足够灵活，以便轻松适应任何项目。

不要专注于单一风格

设计框架应该是通用的，因此不要专注于特定的风格，而是专注于可用于创建风格的组件。

创建自己的设计框架

在您的下一个项目中，从一开始就花时间仔细地构建一个设计框架。 您会发现它改进了整体设计过程，提高了效率，并增强了产品的设计一致性，从而提高了可用性。 当这些想法在 120 个 Sketch 画板上在几秒钟内变为现实时，您将节省时间、更有效地传达设计想法并让客户和利益相关者感到高兴。

您准备好开始自己的设计框架了吗？

在此处下载草图文件。 包含有关如何使用它的说明。

启发设计系统和 UI 框架

了解更多关于设计框架的最佳方法之一是检查大型、成熟的公司使用它们的程度。 关注这些类型的公司并了解他们的方法。

Google 的 Material Design——目前是世界上最流行的设计框架之一。 了解 Google 如何将整个设计过程分层并构建有用的组件层次结构。

IBM 的设计语言——IBM 分享他们的整个设计过程，包括对每个细节的深入解释。 他们还分享了大量来自设计语言的资源，从简单的图标到 UI 动画库。

Atlassian – 另一个很棒的学习资源。 他们的产品风格指南是一个很好的学习设计系统。 他们共享他们的 Web GUI 包，这是一个包含大量组件和概念的 Sketch 文件。

• • •

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——最佳实践概述（附信息图）
• 以人为本的设计在产品设计中的重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 移动界面的启发式原则
• 预期设计：如何创造神奇的用户体验