本文首发自 微盟技术中心 微信公众平台~
一、前言
在以往的开发流程中，前端开发人员常常不得不为了适配不同平台，使用不同的开发语言，将同一套设计稿进行转化。这个过程中涉及到复制和手动调整样式属性，如颜色、字体、间距等。不仅如此，UI 界面与设计稿之间常常存在差异，因此开发团队需要多次调整和设计审核，这大大增加了维护和更新的复杂性。尤其是在移动应用、Web 应用等多平台内容不断增多的情况下，设计的一致性变得尤为关键。
为了应对这一问题，Titian 组件库引入了设计令牌（Design Tokens）。它将设计稿中的基本属性，如颜色、字体、间距、阴影等，从具体的开发语言中抽离出来，并进行了抽象化处理。设计令牌的抽象化意味着在不同平台、不同设备和不同开发人员之间都能轻松地共享和应用这些设计令牌，从而确保了一致的视觉体验和开发效益。
二、定义
Design Tokens 可以被看作是一种将设计系统中各种视觉和样式元素抽象、标准化和管理的方式，包括颜色、字体、间距、阴影等。这些元素构成了设计规范的最基本、最原子层级的“设计变量”。其核心思想在于将这些设计元素抽象为可重复利用的样式属性，以确保设计的一致性和协调性。通过建立这种标准规范，设计系统能够更轻松地进行维护和演进，同时为设计师和开发人员提供了通用的语言和工具，促进协作。
这一方法有助于简化设计系统的管理，减轻了在不同项目和应用中维护一致设计的难度。Design Tokens 可被视为连接设计和开发之间的纽带，使它们能更紧密协作，确保最终用户界面具备吸引力、一致性和可维护性。对于SaaS 产品及其设计系统的构建而言，这一方法至关重要。
三、结合 Titian 组件库
在 Titian 组件库的下一个版本中，我们采用了更为简洁的设计理念，将其抽象为五个关键的视觉元素：【圆角】【颜色】【文字】【空间】【投影】。这五个元素不仅是设计的基础构建模块，还与 Tokens 结合在一起，构成了一个完整的设计系统，有助于设计师创建具有吸引力、一致性和易于理解的视觉作品。
其中，【圆角】代表元素的边缘效果，【颜色】用于定义整体调色板和界面元素的色彩方案，【文字】关注字体的选择和排版规范，【空间】涵盖布局、间距和尺寸的规范，【投影】处理元素的立体感和层次感。最重要的是，我们引入了 Design Tokens 的概念，它们成为了这五个视觉元素的基础构建块。Design Tokens 是一种可重复使用的设计规范，将视觉元素的各个方面（如颜色、字体大小、圆角大小等）抽象出来，并以一种标准化的方式组织和管理。这意味着设计师和开发人员可以共享相同的规范，确保设计与前端编码规范一致，实现了设计到开发的无缝对接。这一变化不仅仅是在设计层面的优化，还打通了设计、编码规范以及前端应用的统一性。从设计师在 Figma 中的创作，到前端工程师的实现，再到最终应用的展示，都将拥有一致的视觉语言和风格，提高了效率，增强了用户体验，使 Titian 组件库成为一个更加强大和协同的工具。
3.1 主题自由定制
在 SaaS 类产品的实施过程中，主题化设计不仅能够满足不同客户对品牌定制的需求，还可以减轻设计和开发方面的工作负担，同时确保一致性和个性化。在 Titian 组件库的当前版本中，我们采用了一种灵活的方法，通过 CSS 变量来控制组件的样式，这为不同品牌风格提供了自由度，并提炼出了潮流、通用和亲和三种品牌风格。
然而，随着客户对风格定制需求的不断增加，我们需要提供更多的底层样式外放，以使商户能够随意配置更多的风格。在Titian 组件库的下一个版本中，我们以Design Tokens为底层，以Tokens的方式设置UI样式和属性，通过标准化的设计规范和灵活的技术支持，以满足业务和品牌上多样化的视觉需求。借助Design Tokens的能力，Titian 组件库同时支持全局皮肤、局部组件以及深色模式的样式定制，实现了从3种主题到N种的主题风格多样化。这一更新将为客户提供更大的自定义空间，使他们能够更好地满足他们特定品牌的需求。这种变化带来的优势包括：1、更大的灵活性： 商户可以根据他们的具体需求配置更多的风格，这意味着他们可以更精确地控制产品的外观和风格，以满足他们的品牌需求。2、标准化的设计规范： 使用Design Tokens作为底层样式管理方式，可以确保样式属性的一致性和可维护性，从而简化了设计系统的管理。3、全局和局部定制： 组件库支持全局皮肤、局部组件以及深色模式的样式定制，这意味着商户可以根据不同的需求定制不同部分的界面，无论是整体外观还是单个组件。4、满足业务和品牌需求： 这一变化可以满足不断增加的商户对外观定制的需求，帮助他们构建与品牌一致且具有个性化的用户界面。3.1.1 全局主题定制我们深知每个商户都有其独特性。通过使用以 Design Tokens 为底层的 Titian 组件库所支持的全局主题定制功能，我们可以为用户提供了完全掌控整个店铺外观的能力。这使商户不再受制于通用主题，而可以根据品牌形象、设计要求或用户体验的需求，定制整个界面的风格，从而创造出引人注目的用户体验和突出品牌特色。
此外，全局主题定制功能还为团队提供了更大的灵活性，使其能够根据不同项目的要求迅速适应并实施个性化的设计，从而提高了开发效率和用户满意度。这一功能的引入可以为项目增色不少，同时也有助于确保每个商户都能够充分体现其独特性和品牌身份。
3.1.2 组件主题定制
除了使用整体的 Design Tokens 来设置全局主题，各个组件也开放了自己的 Tokens 来实现针对组件的样式定制能力，不同的组件之间不会相互影响。同样地，也可以通过这种方式来覆盖组件的其他 Tokens 。
3.2 深色模式
深色模式是一种设计趋势。通常使用较暗的主题，背景为黑色或接近黑色，文字、图标和其他元素为浅色。暗色模式最初是为喜欢暗色界面或在明亮背景下眼睛容易疲劳的用户提供的一种选择，现在已成为许多流行网站和应用程序的重要功能。Titian 组件库支持用户根据自己的喜好和环境条件，在明暗模式之间进行一键切换。
四、主体框架设计
为了满足商户品牌风格多样性的需求，Titian 组件库从根本需求出发，在支持以 Vue 和 React 为主导的 Web 端框架的同时，考虑到小程序在代码体积方面的限制。我们采取了以下优化措施：通过为不同样式设置独特的计算公式，来动态生成所需的全部设计 tokens 并存储在内存中，以便供组件使用。这一改进使我们能够更好地支持各种品牌的样式需求，而不会显著增加小程序端的代码体积。
在整个设计体系中，组件库在底层增加了与 Design Tokens 相关的 Tokens 公式解析器 和 Tokens 属性解析器。这些解析器的作用是将用户传入的需要进行全局定制的 tokens、自定义的局部组件 tokens 以及组件库内置的 tokens 进行合并和转化，生成组件库可识别的数据格式，并存入 Titian 内置的 Store 。这一措施能够保证组件库通过不同的使用场景，更加灵活的定制组件的样式风格，并能确保整个组件库的组件实现一致性和多样性的品牌风格。
Tokens 公式解析器： 负责将来自不同来源的数据进行合并和转化，具备强大的计算功能，能够根据指定的公式和规则，动态生成标准的设计令牌（tokens）值，并根据用户的需求和品牌要求进行实时计算，以确保设计风格的一致性和多样性。这个优化措施确保了设计令牌的高度可定制性和适应性，使其能够适用于各种不同的设计场景和品牌标识。Tokens 属性解析器： 主要职责是将传入组件的属性中包含 token 的值应用于组件中。它会解析传入组件属性值中的 tokens 字段，自动计算出样式的具体数值。这一过程消除了开发者手动设置样式的需求，从而降低了潜在的错误和不一致性，确保了组件的外观与品牌风格一致。这个优化措施不仅提高了开发效率，还加强了组件库的设计一致性。
4.1 多框架接入
在组件库的 next 版本中，新增了 TiConfigProvider 组件，业务方可以通过传递主题参数 theme 来全局定制应用的外观和组件样式。这个功能为用户提供了更灵活、更直观的方式来个性化定制界面，使其符合项目的需求。只需在 TiConfigProvider 组件中设置主题，就可以轻松地改变整个应用的外观，包括组件的主题样式，这让定制和管理主题变得更加便捷和可控。
const token = { // 修改基础值，根据公式自动生成其他值。eg: default, gradient fontSize: { default: 18, gradient: 2, t18: 18 // => 手动设置具体 token 覆盖自动生成的值 } // 设置组件维度 Token 值 components: { button: { token: { fontSize: { default: 12 } } }, },}
<TiConfigProvider theme={{ token }}> <TiButton color="theme.color.foundation.brand"> 文字 </TiButton></TiConfigProvider>
针对当前流行的前端框架，如React、Vue等，我们的组件库引入了方便的 useTheme() 和 useToken() 钩子函数。这些函数使开发者可以轻松地获取主题信息和进行 Tokens 转换，为定制界面提供了更大的灵活性。只需调用相应的函数，就能够轻松地访问主题数据和管理设计令牌，以满足项目的需求。这为前端开发者提供了更直观和高效的方式来控制界面的外观和行为。
4.2 React 使用示例
import { useTheme, useToken } from '@titian-design/mobile-react';
export const App = () => { const theme = useTheme(); console.log('获取主题样式', theme); const token = useToken();
const brandColor = token('theme.color.foundation.brand');
return <div style={{color: brandColor }}>颜色</div>}
4.3 Vue 使用示例
<template> <div :style="{color: brandColor}">颜色</div></template>
<script lang="ts" setup> import { useTheme, useToken, TiButton } from '@titian-design/mobile-vue';
const theme = useTheme(); console.log('获取主题样式', theme);
const token = useToken(); console.log(token);
const brandColor = token('theme.color.foundation.brand');</script>
五、实践结果之风格编辑器
5.1 目的为了让用户更深入地体验 Design Tokens 的灵活性和实时效果，我们在 Titian 官网上引入了 Design Tokens Editor。这个编辑器允许用户实时调整整体风格样式，以便他们能够亲身感受到 Design Tokens 的优势。
5.2 作用
通过这个工具，用户可以在界面上直观地修改设计元素，例如颜色、字体、间距等，即时查看变化后的效果，帮助他们更好地理解和利用 Design Tokens 的潜力，从而更轻松地定制自己的界面风格。这个功能不仅提高了用户的学习体验，还有助于他们更快地掌握 Design Tokens 的应用方法。
5.3 效果
用户可以通过页面上的界面预览和组件预览实时查看在应用 Design Tokens 后整个商城页面和各个组件的效果。我们还提供了一个导出按钮，使用户能够将配置好的 Design Tokens 以文件形式下载到本地，方便随时配置到他们的项目中。这个功能为用户提供了直观的界面反馈，同时也为他们提供了方便的工具，以便更灵活地管理和应用 Design Tokens，以满足项目的需求。了解更多：titian.design.weimobqa.com/theme-edito…](p3-juejin.byteimg.com/tos-cn-i-k3…)
六、未来规划
6.1 打通 WDCS 体系，推广整体应用
WDCS（Weimob Design to Code System）是一套在“移动端场景”中智能化的 标准化前台研发流程体系。由微盟“UED-C端设计团队”与“商城前端团队”负责设计、开发并维护。它包括了设计系统、自动化工具、低代码平台、物料仓库等一系列研发协作流程中所需的解决方案。我们致力于解决行业痛点，降低产品的搭建成本，同时提供优秀的设计和代码标准，充分解放设计师与开发者的生产力，更好地赋能业务创造更大价值。在整个流程中，Design Tokens 被视为底层的视觉样式原子，为整个系统提供了技术支持。这意味着 Design Tokens 在确保一致性、可维护性和灵活性方面发挥了关键作用。它们允许设计和开发团队共同使用统一的设计元素，同时也能够根据项目需求进行个性化定制，从而帮助提高开发效率，确保界面的视觉一致性，并为移动端应用提供了更高的可定制性。在WDCS的框架下，Design Tokens 不仅是视觉样式的基石，还是项目成功的重要组成部分。
6.2 通过微盟移动端组件库打造商户千店千面
随着移动应用的普及，商户越来越需要为他们的客户提供个性化的移动应用体验，以满足不同需求和品牌风格。通过微盟的移动端组件库，商户可以实现千店千面的目标。通过微盟的移动端组件库，商户可以轻松创建定制化的移动应用，以满足不同商店、门店或品牌的需求。这意味着每个商户都可以根据他们的品牌标识、产品特性和目标受众来定制自己的移动应用，使之与众不同。
参考链接
1、关于 Design Tokens（titian.weimobqa.com/docs/design…
2、Design Tokens（atlassian.design/tokens/desi… 组件库（titian.design.weimob.com/）4、TurboCod… 转码（turbo-code.design.weimob.com/tokens/how-…
原文链接：https://juejin.cn/post/7317325027338420275 作者：微盟技术中心
