技术文章

了解最新技术文章

当前位置:首页>技术文章>技术文章
全部 111 常见问题 0 技术文章 111

如何 在 Sketch 中组织和维护设计系统

时间:2023-10-13   访问量:1019

最近讲了如何构建设计系统我介绍了颜色变量样式等基本组件,以及如何在指南和协议中工作。但随着你的设计系统的发展,你可能会发现自己有太多的元素需要分类。不用担心!没有什么是一些好的组织最佳实践无法解决的——至少在设计系统方面是这样。

今天,我们将学习不同的技术来分组和组织我们的组件。我们还将讨论在您发展设计系统时需要记住的一些事项。

我们来看看吧👀

拥抱你内心的组织者

当我们考虑设计系统时,我们经常会想到每个组件都有一个库。但没有任何规则规定您需要将所有内容保存在一个文档中。例如,您可能希望为不同类型的组件建立单独的库,甚至需要另一个文档来保存指南和文档。

在 Sketch 中,您可以使用项目集合作为组织的主要和次要级别。例如,您可以为您的品牌创建一个项目,并将您的库和其他设计文档分组到一个集合中。

您的设计系统越复杂,您的创造力就越强。不过,我建议一开始就保持简单——添加的级别越多,以后找到合适的组件就越困难。


在平台无关和平台优先之间进行选择

如果您从事产品设计,一个有用的起点是在平台无关和平台优先之间进行选择。我的意思是选择是关注组件还是平台——例如设备、操作系统、浏览器等。

使用设计系统,可以更轻松地立即更新和维护组件及其所有变体,而不必在许多不同的地方(每个平台)寻找相同的组件。这是一种与平台无关的方法。

另一方面,通过平台优先级,您更有可能搜索和选择特定平台的组件。翻阅特定于平台的组件可能需要更多时间,但这也意味着您的设计系统将更容易扩展和维护。Apple 的 UI 套件是平台优先的一个很好的例子

两种方法都有其优点和缺点。重要的是尽早选择并坚持你的选择。并确保其他从事设计系统工作的人也这样做!

对组件进行分组

当您创建组件时,最好考虑一下它们如何相互关联。问自己这样的问题:这个符号是另一个符号的非活动状态吗?或者,此画板模板是否特定于设备?

确定一组命名约定,以帮助将组件分组在一起,甚至在它们之间创建层次结构。例如,您可能有一个标准按钮符号,但随后创建了经常重复使用的其他版本,例如非活动状态变体或具有不同 CTA 的按钮。通过将这些符号命名为“按钮”、“按钮/非活动”、“按钮/立即购买”、“按钮/非活动/立即购买”等,您可以在 Sketch 中自动将它们分组。

每当您搜索组件时,这些按钮都会彼此相邻显示,从而更容易查找或交换。但是,请尽量保持组件层次结构尽可能平坦。在确定结构并增加不必要的复杂性之前,始终问问自己是否可以简化当前的方法。


使用单一事实来源

随着设计系统的发展,您可能会发现自己处于需要进行实质性或临时更改的情况。但是,如何在不干扰可能已经在使用您的设计系统组件的队友的情况下进行更改呢?

加星标的版本可以通过将设计系统的最新(或任何)迭代设置为其他人可以继续使用的默认值来提供帮助。这意味着您可以开发新版本,而不会影响团队的工作流程。完成所有更改后,您可以为该版本的库加注星标,我们会将更新提供给使用该库的任何人。

以下是有关如何使用版本星号来更好地管理设计系统的一些额外提示:

随着时间的推移,加星标版本对于维护和发展设计系统非常有帮助。它提供控制、记录您的更改并将创建与使用分开。


使用样式构建您的组件

创建组件时,请尝试尽可能依赖样式和颜色变量,而不是单独自定义每个组件。这种方法保证,如果以后某个地方有任何样式和颜色变化,您可以轻松更新组件和屏幕,而不会造成太多干扰。

例如,假设您根据品牌颜色和版式设计一个登陆页面。如果您使用颜色变量和样式,您可以通过更改这些库组件来重新命名整个设计,而无需单独更新所有内容。


成立设计系统委员会

无论您的团队规模有多大,定期召开会议来确定设计系统的状态可能是个好主意。我们可以将其称为设计系统委员会,它可以由任意需要参与的队友组成。

目标是让对话围绕您的设计系统进行,以及它是否适合当前状态下的每个人。通过这些会话,您可以决定要删除、组合、添加或修改哪些元素。利用这些时间来建立您的设计系统的架构,建立有关演进和创建组件的原则,并定义您的文档目标和版本控制策略。

总体而言,成立设计系统委员会是收集反馈并让每个人都有机会谈论自己的经验和痛点的好方法。它们还非常适合让所有重要的利益相关者保持同步,并确保团队中的每个人都有参与感。仪式和程序取决于你——没有人抱怨免费披萨!🍕

最终,设计系统只有在人们实际使用时才有用。建立委员会将增加设计系统满足团队或组织需求的可能性。此外,它还可以阻止人们在指定库之外随意创建自己的组件。


设计系统用途广泛且实用,但一开始确实需要一些跑腿工作。给您自己和您的团队足够的时间来考虑您的需求以及可以使用哪些技术来最好地满足这些需求。这样,您将构建一个真正适合您的设计系统,并在以后的迭代和扩展时给您额外的信心提升。


上一篇:ChibiStudio如何 帮助动漫迷表达他们的创造力

下一篇:如何 在Sketch中构建组件库

发表评论:

评论记录:

未查询到任何数据!

免费通话

24小时免费咨询

请输入您的联系电话,座机请加区号

免费通话

微信扫一扫

微信联系
返回顶部