命名设计令牌(Token)、组件和变量的最佳实践

原文信息: 查看原文查看原文

Best Practices For Naming Design Tokens, Components And Variables

- Cosima Mielke

快速摘要:我们如何能更擅长命名?这篇文章致力于命名约定、技巧和现实世界的例子,帮助您以一种健壮和灵活的方式命名事物。

命名很难。作为设计师和开发人员,我们经常在为设计令牌、颜色、UI组件、HTML类和变量找到正确名称方面遇到困难。有时,我们选择的名称太通用,因此很难理解确切的含义。有时它们太具体,几乎没有灵活性和重用的空间。

在这篇文章中,我们想要深入探讨这个问题,并探索如何使命名更加直接。我们如何选择正确的名称?哪些命名约定最有效?让我们仔细看看。

命名的灵感来源

如果您正在寻找命名HTML类、CSS属性或JavaScript函数的灵感,Classnames是一个充满想法的绝佳资源,让您跳出思维定势

Classnames

Classnames提供了按主题分组的单词列表,您可以用它们来命名。(大图预览)

该网站提供了按主题分组的单词列表,非常适合命名。您会发现用于描述不同行为、事物之间的相似性、顺序、分组和关联的术语,还有主题化的单词集合,这些单词在代码方面不会立即出现在人们的脑海中,包括自然、艺术、戏剧、音乐、建筑、时尚和出版领域的单词。

命名约定

什么构成了一个好的名称?Javier Cuello总结了一套命名最佳实践,帮助您以一种一致且可扩展的方式命名您的层、组和组件

命名良好实践

Javier Cuello探讨了什么构成了有效名称。(大图预览)

正如Javier所指出的,一个好的名称具有逻辑结构,简短、有意义,并且为每个人所熟知,并且与视觉属性无关。他分享了应该做和不应该做的事项来说明如何实现这一点,并且还仔细研究了在命名大小、颜色、组、层和组件时需要考虑的所有细节。

设计令牌命名游戏手册

您如何命名和管理设计令牌?为了提高您的设计令牌命名技能,Romina Kavcic创建了一个交互式的设计令牌命名游戏手册。它涵盖了从不同的命名结构方法到创建可搜索数据库、举办命名研讨会和自动化的所有内容。

设计令牌命名游戏手册

设计令牌命名游戏手册是尝试名称的绝佳资源。(大图预览)

游戏手册还包括一个命名游乐场,您可以通过拖放来尝试名称。对于更多的视觉示例,还请务必查看Figma模板。它包括所有类别的组件,允许您尝试不同的命名结构。

灵活的设计令牌分类法

如何构建一个灵活的设计令牌分类法,适用于不同的产品?这是Intuit团队面临的挑战。Mailchimp、Quickbooks、TurboTax和Mint等产品的母公司开发了一个灵活的令牌系统,它超越了品牌主题,成为各种产品的基础设施系统。

为Intuit的设计系统创建灵活的设计令牌分类法

Nate Baldwin分享了关于Intuit灵活设计令牌分类法的见解。(大图预览)

Nate Baldwin写了一篇案例研究,在其中他分享了有关Intuit设计令牌分类法的有价值的见解。它更深入地探讨了旧分类法系统的痛点、他们为新系统定义的标准以及它是如何创建的。保证有很多关于构建您自己的健壮和灵活的令牌分类法的收获。

命名颜色

当您创建颜色系统时,您需要为它的所有方面和用途命名。每个人都能理解的名称。但是如何实现呢?您如何将逻辑带入颜色这样的主观话题?Adobe Spectrum Design System的员工内容设计师Jess Satell分享了他们如何掌握挑战

在设计系统中命名颜色

Jess Sattell解释了语言如何为颜色这样的主观话题带来逻辑。(大图预览)

正如Jess所解释的,Spectrum颜色命名法使用颜色家族分类器(例如蓝色或灰色)与增量亮度值尺度(50-900)相结合来命名颜色,不仅对所有参与者都是逻辑的,而且随着系统的增长也是可扩展和灵活的

在命名颜色方面,另一个有用的小助手是Color Parrot。这个Twitter机器人能够命名并识别任何给定图像中的颜色。只需在回复中提到机器人,它就会以调色板回应。

UI组件的通用名称

看看其他人是如何称呼类似事物的,这是一个很好的开始,当您在命名方面遇到困难时。还有什么比其他设计系统更好的来源呢?在您陷入设计系统兔子洞之前,Iain Bean已经为您做了研究,并创建了组件画廊

组件画廊

组件画廊收集了来自现实世界设计系统的界面组件。(大图预览)

组件画廊是来自现实世界设计系统的界面组件的集合。它包括超过50个UI组件的大量示例——从手风琴到视觉隐藏——并且还列出了UI组件的其他名称。一个极好的资源——不仅在命名方面。

变量分类法地图

沃达丰英国设计系统团队提供了一个复杂多品牌、多主题设计系统的命名指南的绝佳示例。他们的变量分类法地图设计令牌的解剖和分类分解成一个精心编排的集合系统。

变量分类法地图

沃达丰的变量分类法地图适应了一个复杂的多品牌、多主题设计系统。(大图预览)

该地图展示了支持系统所需的四个集合以及令牌之间的连接——从品牌和原色到语义和页面。它建立在Nathan Curtis关于命名设计令牌的工作之上,并使每个人都能从令牌的名称中获得关于令牌使用位置和代表什么的见解。

如果您想探索更多关于命名设计令牌的方法,Vitaly汇编了一个有用的Figma工具包和资源列表,值得一看。

设计令牌名称清单

Romina Kavcic创建了一个非常有用的资源,它肯定会为您的设计令牌命名工作流程提供动力。设计令牌名称清单电子表格不仅使确保一致命名变得容易,而且还可以直接同步到Figma。

设计令牌名称清单电子表格

设计令牌名称清单电子表格自动同步到Figma。(大图预览)

电子表格具有简单的结构,有四个级别,可以让您鸟瞰所有设计令牌。您可以轻松地添加行、主题和模式,而不会失去跟踪,并过滤您的令牌。虽然电子表格本身已经是一个保持所有人在同一页面上的好解决方案,但它与Google电子表格插件Kernel插件结合使用时,发挥了真正的强大功能。一旦安装,您在电子表格中所做的更改就会反映在Figma中。真正的省时工具!

想要深入了解?

我们希望这些资源在您处理命名问题时能派上用场。如果您想深入了解设计令牌、组件和设计系统,我们有几个友好的在线研讨会SmashingConfs即将到来:

我们非常高兴欢迎您参加我们的特别Smashing体验之一——无论是在线还是亲自参加!

分享于 2024-06-01

访问量 118

预览图片