自 Google 发布 Material Design 3 以来,Design Token 的概念开始进入设计师的视野。我们已通过《让组件库井井有条》这篇文章,向大家简要介绍了 Design Token 的基本概念。但在落地实践中,我们常常会遇到如下问题:
• 设计师对 Design Token 的理解不充分;
• 设计工具逻辑与 Design Token 理论不契合。
我们将在此系列文章的上篇(理论篇)中,为大家有的放矢地介绍对设计师有用的 Design Token 理论;并在下篇(落地策略篇)中,通过分享我们的实践经验,帮助大家科学地将 Design Token 落地于实际工作中。
{
"brand": {
"$value": "#07c16000"
}
}
{
"shadow": {
"$value": {
"color": "#00000000",
"offset_x": "4pt",
"offset_y": "4pt",
"blur": "25pt",
"spread": "0pt"
}
}
}
2. Group
{
"color": {
"chromatic": {
"brand": {
"$value": "#07c16000"
},
"yellow": {
"$value": "#ffc30000"
}
"blue": {
"$value": "#10aeff00"
}
}
}
}
3. Type
{
"brand": {
"$value": "#07c16000",
"$type": "color"
}
}
4. Description
{
"brand": {
"$value": "#07c16000",
"$type": "color",
"$description": "微信品牌色"
}
}
5. 总结
{
"brand": {
"$value": "#07c16000"
},
"bg-button": {
"$value": "{brand}"
}
}
• 方便管理 token;
如果每个 token value 都指向具体的值,那当我们需要批量更新样式/组件时,工作量将会非常庞大。但若使用了 alias token 的概念,则只需更新 alias token 指向的 token 即可。如上述场景中,只需更新 brand 的 value 即可同步更新 bg-button 的 value。
• 传达设计决策;
指向具体值的 token(一般被称为 core token)存储的是设计选项(choice),而 alias token 存储的是设计决策(decision)。如上述场景中的指向关系就向观者传达了「要通过按钮的样式来传递品牌感」这一设计决策。
使用规范、一致的语言,不仅能体现设计的专业性,更能提升与其他职能同事的沟通效率,由此可见 token 命名的重要性。
对于 token 的命名,最重要的点是「语义化」,要尽可能做到仅通过 token name、property name、value name 就能「望文生义」 。其次,还要考虑到技术实现。由于存储 design token 的文档一般为 JSON 格式,所以 token 的命名需符合 JSON 规范。但若严格践行 JSON 规范来命名,就会出现诸如:color.chromatic.brand.100、control.button.push_button 等不利于设计师阅读和搜寻的命名。由此,我们建议为 design token 建立两套命名体系,同时应用于 token name、token property 及其 value:
• Human-Friendly Name;
• Code-Friendly Name.
1. Human-Friendly Name
拼写 Spelling
以 AE(美式英文)为主,中文为辅。中文命名仅用于规范文档、对外物料等(主流操作系统厂商均使用美式英语,我们建议与其一致)。
使用 title case 中的 APA style 。不熟悉 APA style 的设计师可以用 Title Case Converter 来进行标准化转换(Title case 有多种风格,我们建议使用社会和人文科学惯用的 APA Style)。
大小写区分 Case Sensitivity
{
"font-size": {
"$value": "3rem"
},
"FONT-SIZE": {
"$value": "16px"
}
}
$font-size: 3rem;
$font-size: 16px;
// The 2nd $font-size overrides the 1st one, so the 1st token has essentially been lost.
不可用字符 Character Restrictions
{ } .
{
"Group of tokens": {
"$description": "This is an example of a group containing a single token",
"Token name": {
"$value": "#000000"
}
}
}
{
"group name": {
"token name": {
"$value": 1234
}
},
"alias name": {
"$value": "{group name.token name}"
}
}
分组 Grouping
• Bar / Status Bar;
• Bar / Tab Bar;
• Bar / Title Bar.
修饰 Modifiers
• Avatar - Circular;
• Avatar - Square.
此外,许多 token 会有多个梯度的变体。我们可以选用如下类型的修饰词来描述这些 token:
• Numeric / Enumereted (如:1、2、3、4、5);
• Numeric / Ordered (如:50、100、200);
• Nomeric / Bounded (如:slate-42、slate-90、slate-95);
• Numeric / Proportion (如:2-x, 4-x, half-x, quarter-x);
• Ordinal / T-shirt Sizes (如:s、m、l、xl、xxl);
• Ordinal / Importance (如:primary、secondary、tertiary);
• Ordinal / Intensity (如:low、normal、high、max);
• Ordinal / Strenth (如:weak、moderate、strong、extreme);
• Ordinal / Speed (如:instant、immediate、slow、deliberate).
参考文档 References
参考主流平台已有的命名不仅能避免重复造轮子,更能保证设计与代码的契合。为保证 token 的命名能适用于多个平台,我们建议以最为主流的 iOS 的相关文档作为参考,再按需参考其他平台的文档。
对于 iOS,按优先级从高到低参考以下文档:
• SwiftUl;
• UlKit.
对于 Android,还可参考:
• Material Design;
• Android Developer Documentation.
对于 macOS,还可参考:
• AppKit.
对于 Windows,还可参考:
• Microsoft Docs.
对于中文命名,可参考:
• Microsoft 语言门户;
• UNTERM;
• 术语在线。
2. Code-Friendly Name
即「代码友好命名」,其特点为遵循 JSON 规范、符合开发风格。确定好 human-friendly name 后,采用以下规则,即可快速转译出 code-friendly name:
• 大写字母变小写;
• 「 / 」变「.」(去掉前后的空格);
• 「 - 」变「-」(去掉前后的空格);
• 其他空格变「_」。
Code-friendly name 的具体风格建议与开发同学协商,因为不同的开发团队有着不同的命名习惯。比如我们采用了微信开发同学习惯使用的 snake_case。转译工具可委托开发同学帮助实。
3. 总结
综上所述,为 token 命名的过程中,需综合考量它在设计工具和代码中的表现:
• 在设计工具中, token 的命名要方便设计师理解、检索;
• 在代码中,token 的命名要在符合代码风格的同时,遵循开发同学的习惯。
• Design Tokens Community Group. (2022, August 31). Design Tokens Format Module.
• Thomas Lowry. (n.d.). Typography systems in Figma.
• Ale Muñoz. (2018, October 2). Do more with Data: Building a Data Supplier plugin for Sketch.
• Lukas Oppermann. (2021, February 5). Building better products with a design token pipeline.
• Nathan Curtis. (2016, June 25). Tokens in Design Systems.
• John Choura. (n.d.). Stack mirroring: Designing for code and coding for design.
• Computer Hope. (2021, February 1). What is a Boolean?
• Facebook Inc. (n.d.). Components and Props –. React — A JavaScript Library for Building User Interfaces.
• Hoffman, C. (2021, August 13). What Is an API, and How Do Developers Use Them? How-To Geek.