原子设计和Sketch–改进工作流程的指南

本文概述

• 设计系统：入门
• 原子设计：建筑设计系统
• 如何在Sketch中使用原子设计
• 包起来

Sketch和原子设计是设计人员可以用来创建允许标准化和更有效的工作流程的设计系统的功能强大的工具和方法集。

设计系统：入门

设计系统是一组可重用的组件和指南, 可帮助团队在产品的创建和使用过程中围绕共同的语言团结一致。

在大多数情况下, 设计系统由样式指南和组件库组成。它们还可以包括语音和语调以及品牌价值等元素。拥有设计系统的目的是创建一套标准, 以充当产品或品牌的单一事实来源。

Google的Material Design是一个结构化的设计系统, 提供了一组可重复使用的UI模式和指南。

Google的Material Design是结构化UI设计系统的一个示例。 Material Design于2014年推出, 是设计和开发具有凝聚力的Android应用程序的一种方式。

另一个例子是Mailchimp的语音和音调。它描述了一个人的声音如何始终保持相同, 但是语调根据上下文而变化。意识到这一点有助于赋予内容权力并赋予品牌个性。

虽然可以使用许多不同的方法来创建设计系统, 但最好选择一个框架, 使团队可以围绕一种通用语言和一组标准进行统一。原子设计是实现这两个目标的框架的一个很好的例子。

原子设计：建筑设计系统

原子设计是布拉德·弗罗斯特(Brad Frost)在2013年提出的一种方法, 其依据是可以将每个设计系统定义为一系列共存的构建块的思想。

以下是原子设计组件的快速概述：

• 原子。表示设计系统的基本构建块。一个示例是按钮或文本样式。
• 分子。一组原子作为一个单元一起工作。分子是有形的UI元素。例如, 可以将按钮和文本字段分组以创建搜索表单。
• 有机体。原子和分子以复杂的结构协同工作。与导航栏分组的搜索字段在网站上形成页眉生物。
• 模板。页面级对象将组件放置在定义内容结构的布局中。例如, 获取标头生物并将其放在主页模板上。
• 页面。代表最终产品的模板实例。

设计系统的一个很好的框架和方法是Atomic Design, 它包括可重复使用的设计组件和用户界面元素。

“我们的任务是在更多设备上以比以往任何时候更大的屏幕尺寸和更多功能在更多设备上使用更多浏览器为更多背景下的更多用户提供界面。确实, 这是一项艰巨的任务。值得庆幸的是, 这里的设计系统对你有所帮助。”-布拉德·弗罗斯特(Brad Frost)作为原子设计和设计系统的介绍。

使用Atomic Design创建和维护设计系统将帮助设计人员更有效地工作, 并在团队内部更好地沟通。创建和维护设计系统的工具和方法很多, 但是最好的工具往往是我们最熟悉的工具和方法。

如何在Sketch中使用原子设计

要使用Atomic Design开发设计系统, Sketch是一个很棒的(已经很熟悉)的工具。它为我们提供了一个创建原子, 分子和有机体的画布：这是定义设计系统核心所需的元素。

创建原子

我们首先在Sketch中创建三种类型的原子：符号, 图层样式和文本样式。

符号。符号不过是可重用的组件。定义它们一次是因为可以在整个产品中实例化它们。例如, 可以使用边框颜色, 大小等属性定义箭头符号(原子)。然后, 我们可以重复使用该符号, 而不必每次都重新创建它。

图层样式。图层样式是可重用的视觉样式元素, 在每个图层上保持一致。例如, 先前定义的箭头的填充颜色。

文字样式。文本样式与图层样式类似, 是可重用的元素, 可确保相似文本对象之间的一致性。例如, 定义h1元素的字体大小和颜色。它的工作方式类似于Google文档或Microsoft Word中的文本样式。

当我们定义符号, 图层样式和文本样式时, Sketch可以使用” /”(正斜杠)在其符号和文本样式菜单中将它们划分为分层类别。遵循命名约定并具有一组明确定义的主类别将使文件具有组织化的结构, 从而减少混乱和不一致。

在Sketch中, 我们可以使用”插入”面板菜单来拖放已创建的可重用组件。

以下是在Sketch中为符号, 文本和图层样式创建层次结构类别的一些方法。

我们可以在Atoms /下使用以下建议的命名约定来表示符号：

• 资产
• 纽扣
• 输入控件
• 图片
• 导航
• 信息

我们可以在Sketch中快速轻松地创建符号原子, 这将成为使用Atomic Design的设计系统的基础。

我们不会将图层样式转换为符号, 因此按其语义组进行识别就足够了。同样, 使用Atoms /：

• 填充
• 边框
• 暗影
• 渐变色

图层样式原子可以在Sketch中定义, 并将在整个设计系统中使用。

与图层样式类似, 这是我们如何在Atoms /下创建文本样式的方法：

• 标题
• 身体
• 字幕
• 标签
• 链接

Sketch中的文本样式原子使用原子设计方法来帮助建立设计系统的基础。

统一的设计语言不应该只是一组静态规则和各个原子。它应该是一个不断发展的生态系统。—Airbnb建立视觉语言。

创造分子

原子定义了产品设计指南的基本部分, 但它们本身并不完全有用。为了获得某些功能, 我们将原子连接在一起并创建分子。

将标签(原子)与输入按钮(原子)连接以创建搜索功能是常用分子元素的一个很好的例子。

在Sketch中连接原子以形成功能分子。

请注意, 此处可能会有一些灰色区域。在代码级别的按钮被视为原子, 而在设计级别的按钮被视为分子, 因为我们将图层样式和文本样式原子分组。为避免混淆, 最好只考虑代码级元素。

属于分子/的主要类别是：

• 信息
• 导航
• 输入控件

由于分子将开始以交互方式塑造我们的产品, 因此最好进一步定义上述类别。在这种情况下, 我们将定义一组代表模式库的子类别：

• 下拉列表
• 切换
• 滑杆
• 标签
• 分页
• 进度指标
• 日期字段
• 文字栏位
• 选框
• 单选按钮
• 模组

在Sketch中将原子连接在一起以创建功能分子。

创造生物

生物是原子和分子的组。它们也可以是其他生物的一部分。

与原子和分子不同, 有机体在我们设计的产品中没有抽象的内含物。它们是具体的, 可重用的组件, 可以通过特定操作轻松识别。它们的结构比原子或分子更复杂。

如果将先前定义的搜索字段与其他组件(如导航栏(分子)和徽标(原子))分组, 则会创建生物。一个示例是导航栏或日历。

像分子一样, 生物可以归入相同的类别和子类别：

以下是我们将为有机体/创建的主要类别：

• 信息
• 导航
• 输入控件

在Sketch中, 可以通过组合原子和分子来创建原子设计生物。从左到右, 我们有一个聊天生物, 一个标头生物和两个移动导航生物示例。

与分子一样, 我们还将为生物创建子类别：

• 下拉列表
• 切换
• 滑杆
• 标签
• 分页
• 进度指标
• 日期字段

到目前为止, 大多数UI都已经设计完毕, 因此现在变得非常简单, 只需在设计需要时调用我们的组件实例即可。

通过使用”Sketch”工具栏上的”插入”面板直接搜索这些组件, 可以通过它们的语义组轻松找到每个组件, 在这里我们可以找到组织良好的3个主要类别的集合, 或者使用类似草绘的赛跑者。

可以使用”Sketch”工具栏中的”插入”面板找到”Sketch”中的”原子设计”组件。这使设计人员可以在整个设计过程中快速轻松地使用组件。

Runner for Sketch通过提供设计师可以使用的一组键盘命令来代替无尽菜单中的内容, 从而优化了设计师的工作流程。例如, 他们可以键入单词insert, 按Tab键并查找所需的组件。

通过输入原子, 下拉列表将向我们显示该类别下的所有元素。如果原子和分子具有共同的类别, 则将仅看到原子, 而将忽略所有分子。

诸如_Runner for Sketch_之类的插件提供了一种使用键盘快捷键来搜索组件而不是浏览无尽菜单的方法。

包起来

Sketch和原子设计是一组功能强大的工具, 可以一起使用以改善设计工作流程并促进有效的设计系统框架。

使用原子, 分子和有机体的概念作为组件的基础, 原子设计可以帮助设计人员在产品的创建和使用过程中围绕通用语言进行统一。

设计人员可以使用诸如Sketch之类的工具来实现Atomic Design, 以提供更高效的工作流程和一系列标准, 包括在项目最后阶段的开发人员在内的设计团队中的每个人都应遵循。

• • •

在srcmini设计博客上进一步阅读：

• 如何建立有效的设计框架
• 了解设计系统和模式
• 如何创建Sketch样式指南, 库和UI套件
• 为什么初创企业需要样式指南
• Zeplin Sketch插件–设计与工程之间的工作流桥梁