关于我：优设大课堂金牌讲师，高级原画师、插画师。多次参与国内外知名游戏项目； 擅长欧美 CG、Q 版卡通等多种绘画风格。

想看我更多作品可以关注我的小红书@wuli_石头，微博 @wuli_石头 。

之前在小红书上分享了一套按《搞笑一家人》里面的罗文姬女士的形象绘制的人物的表情包，收到了很多朋友的转发点赞，看来大家都挺喜欢的这种风格的人物绘画。

所以决定出一篇文章，给大家分享一下我绘制 人物头像 的 6 大步骤，同时会对相关的知识点和技巧做细致的讲解，希望对大家有所帮助。

对人物外形的抽象概括 传统的人物造型按头部、颈部、肩部、躯干的顺序依次构建，然后再根据透视做进一步刻画。这样画人物会与原照片非常的“像”，但同时也会没有特点，缺少趣味和神韵。

我根据自己长期的绘画经验，总结出一套自己的人物造型方法，概括来说就是大胆抽象，夸张对比。

大胆抽象，首先需要我们对绘画对象有一个细致的观察。要善于利用自己的直觉，抓住人物给我们的第一印象或者印象最深刻的点。发掘其所带有的一种情绪或者“势能”，然后用简单的形状概括出来。

我们看下面 2 张示例，2 张图片虽然都是同一个人物，但是整体神态是不同的。

上图中人物是站立的状态，我们可以观察人物头部与躯干的相对位置，是一个比较舒展挺拔的状态，有往上延展的趋势。结合人物色块在整个图形中所占比例（人物色块与背景色块的区别），我们可以选择用一个直立细长的三角形来概括人物整体外轮廓。

在第二张图中，我们可以看到人物的头部与躯干重叠，缩着脖子耸肩。这样给人的整体感觉比较内收，像是被压缩了。所以我选择用一个四分之一圆的形式概括整体的外形。

确定好主体外形轮廓之后，我们在草稿起形的时候就非常快了。同时我们可以将初步外形做进一步的夸张：将尖锐三角形的进一步拉长，四分之一圆进一步压扁，让形状所代表的气质更加明显。

再多给大家展示几个人物轮廓的概括步骤，帮助大家理解：

虽然图片上人物头部的轮廓是圆的，但是我选择变方为圆，将人物的脸部连同脖子夸张成一个长条形，肩部部分则横向展开为一个梯形。这样的宽窄对比就会让形状更有节奏感，显得有趣。

直接按照图片绘制的话，整体外轮廓会呈现方形， 比较呆板。我们转换一下思路，当人物躺倒的时候，在二维平面上原来的比例都会被压缩，我们可以一个选择扁长的形状，更符合我们直觉中被压缩的感觉。

小结

绘画的第一步不是拿起画笔就照着图片画，而是要带着思考去观察，用直觉感受绘画对象整体“势”的特征，然后用最能体现这种特征的几何形状去概括。我们在这一步确定的几何形状会主导后面人物造型的方向和特点，影响到成图的整体状态。

可能有些同学会觉得，这样夸张的概括有些失真了。但其实这就是夸张的的优势和魅力，只要做到足够夸张，那么就更比照片更能体现人物状态的精髓，也更加生动传神。

头身比例及分形 在确定好整体的人物外形后，下一步就是划分头身比例并分形。

首先需要说明的是，头身比例的划分没有绝对值，看个人风格和习惯。确定好头身比之后，我们就可以进一步划分出第二个几何形。

示例 ①

第一步已经将人物外形概括为一个细长的三角形。确定好头身比之后，根据人物身体色块在图片中的占据的形状，第二个几何形就确定为一个半圆形。

在半圆形之上就是我们头部的位置。我并没有严格依照头骨形状来画，而是按照片上人物皮肤的面积，将其概括成一个椭圆形。然后用线条找出头发的位置，草稿部分就基本完成了。

示例 ②

第一步我们已经将人物外形概括为压扁的四分之一圆。这里我没有将脸部概括为一个椭圆，而是一个倒三角。原因是，仔细观察人物我们会发现，她的眼睛是向上看的，结合整体看有一个斜向上的趋势。而倒三角形就能展现出这样的一种趋势，如果话概括成纯椭圆的话就没有什么特点了。

大家可以再看看下面几张图，多感受一下分形的思路：

第一步我们将整体概括为一个长方形加一个梯形，进一步分形时，我将左右头发概括成两个圆形，头顶的发量压缩，这样在外轮廓上就有一个明确的变化，更加有趣。

我们已经将整体概括了一个扁平的形状。进一步分形时，按照图片中头部皮肤色块呈现的形状，在内部分出一个稍微扁一点的半圆。再简单概括一下头发和手部的形状。

小结

在确定好主体的几何形状后，第二步就是确定头身比例，然后做进一步的大方向分型。在对头部或者躯干进行分型时，不一定要按照很精准的人体比例去理解，但是要对色块、元素及他们之间的关系有一个准确的把握。

基础透视原理与点对点的处理 在前两步的分形阶段，我们用了非常感性的方法对于人物造型进行抽象概括。但想画成一张好看的图，光靠感性和直觉是完全不够的。

在基本的分形确定好之后，我们的思维要转到理性的一面，运用基础的透视理论和点对点知识，帮助我们确定正确的五官位置和头身关系。

① 纵向中心线

人物的分形草稿已经完成，这个时候我们心中需要有几条线：脸部的中心线、脖子的中心线、躯干的中心线。这些都是纵向的线条，分别对应我们的头颅，颈部和身体。只有这三条纵线在垂直方向上是贯通的，我们画出的人才是形体才是正的，不会出现出现形态扭曲。

② 横向位置线

纵向线条标好之后，我们就能在此基础上进行横向线条的划分。

确定眼睛、鼻子、嘴巴的大概位置和互相之间的距离。这是要注意由于透视变化，五官之间距离的变化。透视不对，五官看起来就很怪异。

注意线条的倾斜角度和方向的问题。确定五官位置的时候，要仔细观察人物实际状态，线条呈现出对于倾斜的趋势。

横向的线条确定好之后，我们就可以在标记好的位置上确定五官的位置了。

人体转向角度的不同，中心线的对应位置也会发生变化，眼睛这种原本两侧对称的点位置也会发生偏移。这个时候就要运用「点对点」的方式，以纵向中心线为准，让身体左右两侧的元素保持在同一水平线，并且在透视上保持距离相等。

表情绘制与五官分形 仔细观察五官线条的走向，是塑造人物表情非常重要的点。准确的线条走向让五官的表现力更强，情绪传达更加饱满。

上图中，人物表情是嫌弃、不耐烦。仔细观察五官的线条走向：嘴角下坠，眉毛往中间聚拢，眼睛是向右看。在画草图的时候，就可以把这几个点抓住，用带有方向性的线条标出来，情绪的基本调性就被确定下来了。

这张图中，人物双手捂住耳朵，眼睛紧闭，眉毛皱在一起，整体非常抗拒的姿态。在草图中，我们要用线条表达出这些趋势，且这些线条都是往面部中心收缩。

在基础的线条方向确定好之后，就可以进一步用简单的形状，对五官的进行分形。我这里还对人物的鼻子做了夸张的处理，做成了一个尖锐的三角形，以进一步凸显人物激烈的情绪状态。

小结

不同走向的五官线条，会表达出不一样的情感。在保证五官的整体位置是正确的前提下，暗示出这些重要的方向向性线条，就能为五官的刻画定向正确的基调，塑造最终的表情时就会更加准确。

五官具体刻画与脸部轮廓 确定了五官线条的大体走向，接下来就是五官的具体刻画了。这里给大家分享一个我长期以来使用的画五官的方法：

直接眉毛连鼻子，再连人中和嘴巴。即除了眼睛之外，眉毛、鼻子嘴巴都是一根线。

这样做的好处就是：确定好单边眉毛的位置，我们就通过「点对点」的方法，确定另一侧眉毛的位置，然后沿面部中线，画出鼻子、人中，嘴巴的形状，五官刻画速度非常快。

第四步的时候，我们已经确定好五官线条的大致走向，这里就直接草稿的基础上进一步完善，勾勒出五官的具体形状。此外也可以加入一些睫毛、皱纹等个性化的特色。

另外再说一下脸型设计的问题。第一步进行整体外形概括时，用的是一个简单的几何形状。但是在具体刻画时，我们也要更具人物实际状态来概括。

比如上图中，人物年纪比较大，脸部的肌肉松弛下垂，那么我们在塑造脸部轮廓时，就需要把脸部的下半部分处理的更宽阔圆润一些，形成一个半圆，与左侧的直线和头部较窄的圆弧形成对比，这样形状轮廓的节奏感也更好。

头发的绘制思路 头部、躯干、五官都已经讲完了，接下来为大家讲解一下头发绘制的思路。画头发要注意到 2 方面的问题：透视和外形轮廓。

透视方面，头部转向的不同，头发呈现的状态不一样。照片中人物的脸是向右转的，那么对于左边的头发整体呈现的就更多，右边的呈现的较少且头发会被遮挡。

外轮廓是头部造型的重点，一定要有识别度。如果要表现卷发，那我们就用饱满的半圆形弧线去概括，比软绵绵的弧线来说表现力要强很多。

另外就利用分组来归纳发型的表现。先根据照片，对头发进行分块的概括，块面的大小要有对比变化，这样才能体现蓬松饱满的感觉。

总结 经过以上 6 步，人物头像的线稿就完成了。整个人物头像的绘制思路非常清晰，技巧也并不复杂，在日常联系或者创作中多多运用，肯定会对大家的人物造型有帮助。

今天的分享就是这些，喜欢的话可以点赞收藏，后续我会继续为大家分享更多欧美风格人物插画的知识技巧。同时也欢迎大家关注我的小红书@wuli_石头，上面有我的最新作品和日常创作思路分享。

零基础也没事！大神教你 5 步画出好看的扁平风人物插画 大家好我是花生。

阅读文章 >

前言 随着近几年 Figma 等一系列在线设计工具的崛起，相信 设计师 对设计系统的都有了更深的了解。其实设计系统的建设是一个非常庞大而复杂的工程。我们通过各种设计规范等对产研流程提效，但还是会经常遇到一些棘手的问题。

1. 开发用的颜色/字体样式/投影等与设计稿存在差距；

2. 颜色选择困难。不同设计师之间在用各种层级的文本颜色时，到底用 Gray1 还是用 Gray2，不知道该选哪一种；

3. SaaS 类的产品需要根据客户的品牌色调整产品的主色，设计和开发都面临巨大的工作量；

4. 设计稿的更新无法及时在开发者的代码中体现，一是因为开发首先需要拿到新的设计稿，再根据标注甚至肉眼判断区别后更新代码；另一方面，设计稿中看似简单的改动可能导致较大范围的代码改动，例如字体大小等；

为了解决和优化上述的问题，Design Token 应运而生。它可以高效地解决产品设计和开发过程中的细节和风格一致性的问题，提高产研团队设计质量和协作效率。

什么是 Design Token “Token”原本的意思是“令牌，指令”，与 Design 连在⼀起指“设计变量”。在工程逻辑中用于用户身份与服务器端进行验证，而在设计体系中，Design Token 则可以简单理解为封装的视觉样式参数。它通过规定样式参数，并通过一套符合设计师、工程师理解的统一的命名规则，为这些样式参数的定义名称。

腾讯出品的 Design Token 应用指南：设计篇 在线设计、研发协作工具和组件概念的普世化，让设计、研发效率大大提升；数字产品发展到今天，数字产品对迭代速度、个性化品质要求也越来越强。

阅读文章 >

原子设计理论提出者 Brad Frost （布拉德 · 弗罗斯特）在《Atomic Design》中提到：原子设计理论从原子（Atoms）、分子（Molecules）、组织（Organisms）、模板（Templates）、页面（Pages）、标准流程（Patterns）再到更完善的 设计体系 （Design Systems），这一切都是为了产品设计、研发效率和一致性提供帮助。同时，它们也是传达设计原则、构成产品独特气质的基石。Design Token 就是原子级的最基础的构成要素。

根据北美顶级 SaaS 企业的开源设计系统 Saleforce Lightning Design System 的解释，Design Token 是设计系统中的可视化原子，是设计属性的命名实体，使用它们代替具体编码值（如颜色的 16 进制、间距的像素值等），以便于维护一套可扩展且一致性的设计系统。

可以说，Token 就是最底层的原子，本质上就是找到了组件、属性和代码之间的对应关系，统一了设计样式和前端语言，使组件和设计系统可以被快速管理。

Design Token 的优势 基于上述关于 Design Token 的基础解释，可以将 Design Token 的好处可总结为：

设计语义-更易理解 设计方案-更加一致 主题皮肤-一键替换 设计变更-高效维护 设计成果-精准还原

1. 设计语义-更易理解

每一个组件的基础元素都可以用 Token 进行语义化的命名，帮助设计师和开发建立统一的描述语言。例如#91d5ff 这个色值按照传统的设计规范命名的方式，它可能叫 Blue-3。在实际应用的时候，设计师和开发并不能直接通过 Blue-3 来理解这个颜色到底是用在什么具体场景当中。而当我们通过 Token 语义的方式让它达到组件级别的精度时，它会叫：color-primary-brand-light-disable，不同的设计师和开发就能迅速的理解这个颜色应用在什么具体场景当中。

2. 设计方案-更加一致

当使用组件库实际运用到项目当中时，我们有时候会有不同设计师合作产出一个项目的情况。对于一些不熟悉设计规范或新加入的设计师来说，就会困惑，当使用二级文本色的时候，究竟是用 Gray2、还是 Gray3、Gray4。而这个时候，我们定义一个 Token 名称叫：color-text-secondary，这个 Token 嵌套的颜色是 ：Gray3，这样我们设计师在使用的时候，只需要选择 color-text-secondary 这个 Token 变量即可，能选择的颜色就是唯一的，这就能在一定程度上确保不同设计师在同一个场景当中的设计稿保持高度一致性。

3. 主题皮肤-一键替换

主题皮肤的替换可以用在两个维度，一是浅色模式和暗色模式的替换，二是不同品牌色之间的替换。我们可以将不同主题的同一个场景下的颜色使用同一个 Token 命名，例如变量名都叫：color-primary-brand-light-default，蓝色皮肤下对应的值为：#165DFF；红色皮肤对应的值为：#F53F3F。然后通过插件面板的一键操作即可完美切换。同时这种切换模式也可以带入 tokn.josn 代码（后面会具体讲如何输出 json 文件交付开发）中，与开发进行同步。

4. 设计变更 高效维护

还是上面的例子，当我们的二级文字颜色 color-text-secondary 需要进行变更，从 Gray-600 变为 Gray-500。如果没有“color-text-secondary”这个 Token，我们可能需要手动去选中所有用了 Gray-600 的二级文字的图层，一个一个地将它们改为 Gray-500，而当我们有了“color-text-secondary”这么一个 Token 时，我们只需要将 color-text-secondary 的值一键从 Gray-600 变为 Gray-500 便可以完成产品全局的颜色变更。进而设计师可以将 token.json 代码（后面会具体讲如何输出 json 文件交付开发）同步更新给开发 ，开发直接一键替换，线上的界面就能半自动地迅速应用到变更后的色值。

5. 设计成果-精准还原

设计稿能否被开发精准还原，这几乎是每一个设计师在实际项目中会遇到的问题。我们在进行设计验收的时候，即便花了很多时间进行走查，在表格上列举了很多细节问题，但最终的还原效果并不能得到保障。甚至在一些时候会感觉做验收比重新做一遍设计稿还要费劲「emo」，有的时候甚至会直接按 F12 在网页上改代码给开发提示「狗头」。

例如，在常规不使用 Token 的情况下，开发同学使用的是硬代码的模式，代码编辑器无法判断这个颜色是否正确，如果开发不小心输错了一位数，就很可能导致线上运行时候的不一致。而使用了 Token 之后，开发只需要输入这个场景的 Token 名称的前缀，代码编辑器便会自动化地提示有哪几个颜色供选择就可以了，如果不正确，代码编辑器还会给出报错提示，开发同学可以在写代码的过程中完成基础的检验工作，这样一来，设计师的成果便能够一定程度上的精准还原，设计师验收的工作量也会小很多。

在设计系统中应用 Design Token 上面讲了这么多理论，接下来开始实战，准备好～

1. 提炼 Token 组成元素

Design Token 是构成设计语言的基本构建块，是设计系统中最核心、最基础的影响视觉风格的元素。根据 Figma Tokens 插件默认提供的面板中，可以将分别以下组成元素：

Color 颜色、Shadow 投影、Typography 字体样式、Size 尺寸、Space 间距、Border Radius 描边圆角、Border Width 描边宽度、Opacity 透明度等

2. 定义 Token 命名规则

关于 Token 的命名规则，不同的团队有不同的定义方式，但其本质都是为了提高产品的一致性和工作效率。因此在对 Token 命名规则进行分类整理时，设计需要与开发同事达成一致，以确保能够更好地落地。

在制定自己产品的 Token 命名规则前，带大家看一下大厂的 Design Token 都是怎么命名的

腾讯文档 Token 变量表： https://mp.weixin.qq.com/s/sRRPlsxaUZj7220PLoFiRw

腾讯 TDesign 开源设计系统 Token： https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_light.less

:root, :root[theme-mode="light"] { // 文字 & 图标 颜色 --td-font-white-1: rgba(255, 255, 255, 100%); --td-font-white-2: rgba(255, 255, 255, 55%); --td-font-white-3: rgba(255, 255, 255, 35%); --td-font-white-4: rgba(255, 255, 255, 22%); --td-font-gray-1: rgba(0, 0, 0, 90%); --td-font-gray-2: rgba(0, 0, 0, 60%); --td-font-gray-3: rgba(0, 0, 0, 40%); --td-font-gray-4: rgba(0, 0, 0, 26%); // 基础颜色 --td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作 --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告 --td-error-color: var(--td-error-color-6); // 色彩-功能-失败 --td-success-color: var(--td-success-color-5); // 色彩-功能-成功 // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态 --td-brand-color-hover: var(--td-brand-color-7); // hover 态 --td-brand-color-focus: var(--td-brand-color-2); // focus 态，包括鼠标和键盘 --td-brand-color-active: var(--td-brand-color-9); // 点击态 --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态 --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态 // 警告色扩展 --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); // 失败/错误色扩展 --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); // 成功色扩展 --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); // 遮罩 --td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出 --td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用 // 文本颜色 --td-text-color-primary: var(--td-font-gray-1); // 色彩-文字-主要 --td-text-color-secondary: var(--td-font-gray-2); // 色彩-文字-次要 --td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位符/说明 --td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用 --td-text-color-anti: #fff; // 色彩-文字-反色 --td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌 --td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接 // 分割线 --td-border-level-1-color: var(--td-gray-color-3); --td-component-stroke: var(--td-gray-color-3); // 边框 --td-border-level-2-color: var(--td-gray-color-4); --td-component-border: var(--td-gray-color-4); // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边 --td-shadow-inset-top: inset 0 .5px 0 #dcdcdc; --td-shadow-inset-right: inset .5px 0 0 #dcdcdc; --td-shadow-inset-bottom: inset 0 -.5px 0 #dcdcdc; --td-shadow-inset-left: inset -.5px 0 0 #dcdcdc; // table 特定阴影 --td-table-shadow-color: rgba(0, 0, 0, 8%); // 滚动条颜色 --td-scrollbar-color: rgba(0, 0, 0, 10%); }{{{pre> Element-Plus： https://element-plus.org/zh-CN/

--el-bg-color: #ffffff; --el-bg-color-page: #ffffff; --el-bg-color-overlay: #ffffff; --el-text-color-primary: #303133; --el-text-color-regular: #606266; --el-text-color-secondary: #909399; --el-text-color-placeholder: #a8abb2; --el-text-color-disabled: #c0c4cc; --el-border-color: #dcdfe6; --el-border-color-light: #e4e7ed; --el-border-color-lighter: #ebeef5; --el-border-color-extra-light: #f2f6fc; --el-border-color-dark: #d4d7de; --el-border-color-darker: #cdd0d6;{{{pre> Ant Design： https://ant.design/components/overview-cn/

html { --ant-primary-color: #1890ff; --ant-primary-color-hover: #40a9ff; --ant-primary-color-active: #096dd9; --ant-primary-color-outline: rgba(24, 144, 255, .2); --ant-primary-1: #e6f7ff; --ant-primary-2: #bae7ff; --ant-primary-3: #91d5ff; --ant-primary-4: #69c0ff; --ant-primary-5: #40a9ff; --ant-primary-6: #1890ff; --ant-primary-7: #096dd9; --ant-primary-color-deprecated-pure: ; --ant-primary-color-deprecated-l-35: #cbe6ff; --ant-primary-color-deprecated-l-20: #7ec1ff; --ant-primary-color-deprecated-t-20: #46a6ff; --ant-primary-color-deprecated-t-50: #8cc8ff; --ant-primary-color-deprecated-f-12: rgba(24, 144, 255, .12); --ant-primary-color-active-deprecated-f-30: rgba(230, 247, 255, .3); --ant-primary-color-active-deprecated-d-02: #dcf4ff;{{{pre> 以上截取的部分 Token 基本是在 Github 上开源社区能找到相关的代码。如果我们想要找一个非开源的设计系统的 Token 怎么找呢？

这里以飞书为例，个人觉得飞书整体的配色非常舒适，想要研究一下其中的 Token 是怎么制定的。

首先打开飞书网页，按 F12，选中任意元素，便可在“样式”中找到飞书产品所有的 Token 是如何命名，以及可以分析研究其中的色彩运用规律。

飞书 Token： www.feishu.cn

--bg-base: var(--N100); --bg-base-raw: var(--N100-raw); --bg-body: var(--N00); --bg-body-raw: var(--N00-raw); --bg-body-overlay: var(--N50); --bg-body-overlay-raw: var(--N50-raw); --bg-content-base: #f8f9fa; --bg-content-base-raw: 248,249,250; --bg-filler: var(--N200); --bg-filler-raw: var(--N200-raw); --bg-float: var(--N00); --bg-float-raw: var(--N00-raw); --bg-float-base: var(--N100); --bg-float-base-raw: var(--N100-raw); --bg-float-overlay: var(--N50); --bg-float-overlay-raw: var(--N50-raw); --bg-float-push: rgba(var(--N00-raw),0.8); --bg-mask: rgba(0,0,0,0.4); --bg-mask-raw: 0,0,0;{{{pre> Token 命名规则总结

通过上面的大厂 Token 参考我们可以分析出一些普适性的规则：

1. 单词之间用“-”分隔；

2. Token 前缀可自定义添加自己产品的简称，例如：“–el-xx”、“–ant-xx”、“–td-xx”；

3. Token 可以套 Token，例如：–td-brand-color-hover: var(–td-brand-color-7)；

3. 整理 Design Token 资产表

分析完各个大厂的 Token 规则之后，接下来正式开始对自己产品的 Design Token 开始建设，首先便是整理一份 Design Token 资产表，可以用文档、表格等形式整理。

这里以 TDesign 为例，需要包含 3 列：Token、Value、Describe。这份 Token 资产表整理好之后，可以在设计团队内部进行评审，通过之后再与开发进行对齐。

来源： https://tdesign.tencent.com/design/color

通过工具创建 Token 并联动设计文件 以上主要讲的是在思维层面 Design Token 是怎么推导的，接下来重点讲一下怎么借助一些实用的工具将 Design Token 实现自动/半自动化的落地。

这里主要推荐的工具是 Figma Tokens 插件，它是一款基于 Figma 的插件，相对于 Figma 右侧面板原生自带的样式外，能够实现多层级的 Token 管理，同时插件内容能够与 Figma 设计文件实现实时联动。

1. 安装并运行插件

插件安装地址： https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens

安装完成后，在 Figma 文件中打开 Figma Tokens 插件面板，并点击“Get started”，开始创建。

2. 创建 Token 变量

在 Color 分类处点击“+”号，将之前整理的 Design Token 资产表里的内容一个一个录入进插件当中。如何实现 Token “套娃”呢？例如我们需要创建一个“–td-brand-color”，值为“–td-brand-color-8”，只需要在 Color 值的输入框输入“{–td-brand-color-8}”或“$–td-brand-color-8”，这里通过和开发沟通，推荐使用“{ }”大括号的形式进行赋值。全部 Token 创建完成之后，点击“Create Styles”便可将插件中的样式生成到 Figma 右侧的样式面板中。同时，插件中的修改也能够与样式进行实时同步。

3. 通过 JSON 代码快捷导入 Token

上面的方法是需要根据 Token 对照表，通过手动的方式一个一个录入 Token，如果团队的设计师有一点代码功底，或者前端同学能够提前介入进来，直接根据 Token 对照表写一份 JSON 文件，那么也可以直接通过复制 JSON 文件里面对应到代码粘贴到 Figma Tokens 的插件当中，能够直接读取代码生成 Token 样式，并联动 Figma 文件。

4. 导入 Figma 文件中已有的样式

除了使用 Figma Tokens 插件一个一个创建样式以外，插件还支持从我们的 Figma 文件中已经有样式导入，我们也可以点击“Import”，再勾选“Color”、“Text”、“Shadows”一键导入文件中的样式并生成 Token。

向研发交付 Design Token 1. 输出 Token.json 代码文件

点击顶部“JSON”，再点击“Export”，即可将插件面板的创建的 Token 导出为一个 token.json 文件，将 json 文件交付给开发，开发便可使用。若开发不知道如何使用，可以分享这个 Figma Tokens 作者发布在 Github 上的代码稍加学习，便知道如何使用了。

github 地址： https://github.com/six7/figma-tokens-example-tailwindcss

2. 如何更新 Token

当之前定义好的 Design Token 需要增删改时，插件官方推荐的更新同步方式主要有 JSON、 http://JSONBin.io 、URL、GitHub 等几种方式，具体可查阅官方文档： https://docs.tokens.studio/sync/sync 。由于后面集中同步方式涉及到一些小门槛，这里简单介绍第一种最为通俗的更新方式就是直接通过更新 JSON 文件，可以在企业 IM 中和研发创建一个共享空间，每次 Token 有更新只需要将导出的 JSON 文件替换原有的文件即可，开发再应用新的 JSON 文件，便可实现高效便捷的更新 Token。

使用 Design Token 在产品中一键换肤 在一些 To B SaaS 产品当中，产品的主色可能会跟随客户公司的品牌色进行调整。使用 Design Token 便能够便捷高效地实现一键换肤。

1. 首先我们会定义一个“global”基础主题，在这里将所有后面不同皮肤的颜色都写入进来；

2. 在“blue”和“red”主题皮肤下，品牌色命名都为：“tr-color-primary-brand-light-default”，但是他们两个皮肤的值不同，一个是 global 中的“{–color-blue-light-6}”，一个是 global 中的“{–color-red-light-6}”；

3. 在蓝色皮肤下将“blue”勾选，切换至红色皮肤，只需要勾选“red”，即可实现文件内的所有变量全局替换，同时 Figma 右侧的样式也能实时联动。

结语 近几年，越来越多的团队开始搭建自己公司产品的设计系统 Design System 赋能到具体产品中落地。我所在的团队也在建设一套适用于自己公司业务的设计系统，在推动设计系统落地时，便运用了 Design Token 进行落地，极大提高了公司设计和研发团队的协作效率。Design Token 给 Design System 带来了新的方式和新的可能，未来希望能够不断扩大 Design Token 的应用价值，赋能到更多的业务和产品当中，让设计系统的应用变得更便捷、更高效。

我是设计师波波 Bobby He，深耕 B 端体验设计，持续学习输出中，欢迎关注私信与我交流～

参考文章

https://mp.weixin.qq.com/s/9LJT89vqjdVwsafDckh6Pw

https://blog.prototypr.io/design-tokens-with-figma-aef25c42430f

https://didoo.medium.com/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa

https://uxdesign.cc/design-tokens-cheatsheet-927fc1404099

https://docs.tokens.studio

大厂出品！腾讯开源企业级设计体系 TDesign TDesign 是来自腾讯内部近 300 名设计师与开发者共同打造，经由 500+ 项目使用、验证和锤炼过的企业级设计体系， 秉承包容、多元、进化、连接的价值观，TDesign 期望与用户、行业及合作伙伴等一起打造具有竞争力的产品体验。

阅读文章 >

前言 随着近几年 Figma 等一系列在线设计工具的崛起，相信 设计师 对设计系统的都有了更深的了解。其实设计系统的建设是一个非常庞大而复杂的工程。我们通过各种设计规范等对产研流程提效，但还是会经常遇到一些棘手的问题。

1. 开发用的颜色/字体样式/投影等与设计稿存在差距；

2. 颜色选择困难。不同设计师之间在用各种层级的文本颜色时，到底用 Gray1 还是用 Gray2，不知道该选哪一种；

3. SaaS 类的产品需要根据客户的品牌色调整产品的主色，设计和开发都面临巨大的工作量；

4. 设计稿的更新无法及时在开发者的代码中体现，一是因为开发首先需要拿到新的设计稿，再根据标注甚至肉眼判断区别后更新代码；另一方面，设计稿中看似简单的改动可能导致较大范围的代码改动，例如字体大小等；

为了解决和优化上述的问题，Design Token 应运而生。它可以高效地解决产品设计和开发过程中的细节和风格一致性的问题，提高产研团队设计质量和协作效率。

什么是 Design Token “Token”原本的意思是“令牌，指令”，与 Design 连在⼀起指“设计变量”。在工程逻辑中用于用户身份与服务器端进行验证，而在设计体系中，Design Token 则可以简单理解为封装的视觉样式参数。它通过规定样式参数，并通过一套符合设计师、工程师理解的统一的命名规则，为这些样式参数的定义名称。

腾讯出品的 Design Token 应用指南：设计篇 在线设计、研发协作工具和组件概念的普世化，让设计、研发效率大大提升；数字产品发展到今天，数字产品对迭代速度、个性化品质要求也越来越强。

阅读文章 >

原子设计理论提出者 Brad Frost （布拉德 · 弗罗斯特）在《Atomic Design》中提到：原子设计理论从原子（Atoms）、分子（Molecules）、组织（Organisms）、模板（Templates）、页面（Pages）、标准流程（Patterns）再到更完善的 设计体系 （Design Systems），这一切都是为了产品设计、研发效率和一致性提供帮助。同时，它们也是传达设计原则、构成产品独特气质的基石。Design Token 就是原子级的最基础的构成要素。

根据北美顶级 SaaS 企业的开源设计系统 Saleforce Lightning Design System 的解释，Design Token 是设计系统中的可视化原子，是设计属性的命名实体，使用它们代替具体编码值（如颜色的 16 进制、间距的像素值等），以便于维护一套可扩展且一致性的设计系统。

可以说，Token 就是最底层的原子，本质上就是找到了组件、属性和代码之间的对应关系，统一了设计样式和前端语言，使组件和设计系统可以被快速管理。

Design Token 的优势 基于上述关于 Design Token 的基础解释，可以将 Design Token 的好处可总结为：

设计语义-更易理解 设计方案-更加一致 主题皮肤-一键替换 设计变更-高效维护 设计成果-精准还原

1. 设计语义-更易理解

每一个组件的基础元素都可以用 Token 进行语义化的命名，帮助设计师和开发建立统一的描述语言。例如#91d5ff 这个色值按照传统的设计规范命名的方式，它可能叫 Blue-3。在实际应用的时候，设计师和开发并不能直接通过 Blue-3 来理解这个颜色到底是用在什么具体场景当中。而当我们通过 Token 语义的方式让它达到组件级别的精度时，它会叫：color-primary-brand-light-disable，不同的设计师和开发就能迅速的理解这个颜色应用在什么具体场景当中。

2. 设计方案-更加一致

当使用组件库实际运用到项目当中时，我们有时候会有不同设计师合作产出一个项目的情况。对于一些不熟悉设计规范或新加入的设计师来说，就会困惑，当使用二级文本色的时候，究竟是用 Gray2、还是 Gray3、Gray4。而这个时候，我们定义一个 Token 名称叫：color-text-secondary，这个 Token 嵌套的颜色是 ：Gray3，这样我们设计师在使用的时候，只需要选择 color-text-secondary 这个 Token 变量即可，能选择的颜色就是唯一的，这就能在一定程度上确保不同设计师在同一个场景当中的设计稿保持高度一致性。

3. 主题皮肤-一键替换

主题皮肤的替换可以用在两个维度，一是浅色模式和暗色模式的替换，二是不同品牌色之间的替换。我们可以将不同主题的同一个场景下的颜色使用同一个 Token 命名，例如变量名都叫：color-primary-brand-light-default，蓝色皮肤下对应的值为：#165DFF；红色皮肤对应的值为：#F53F3F。然后通过插件面板的一键操作即可完美切换。同时这种切换模式也可以带入 tokn.josn 代码（后面会具体讲如何输出 json 文件交付开发）中，与开发进行同步。

4. 设计变更 高效维护

还是上面的例子，当我们的二级文字颜色 color-text-secondary 需要进行变更，从 Gray-600 变为 Gray-500。如果没有“color-text-secondary”这个 Token，我们可能需要手动去选中所有用了 Gray-600 的二级文字的图层，一个一个地将它们改为 Gray-500，而当我们有了“color-text-secondary”这么一个 Token 时，我们只需要将 color-text-secondary 的值一键从 Gray-600 变为 Gray-500 便可以完成产品全局的颜色变更。进而设计师可以将 token.json 代码（后面会具体讲如何输出 json 文件交付开发）同步更新给开发 ，开发直接一键替换，线上的界面就能半自动地迅速应用到变更后的色值。

5. 设计成果-精准还原

设计稿能否被开发精准还原，这几乎是每一个设计师在实际项目中会遇到的问题。我们在进行设计验收的时候，即便花了很多时间进行走查，在表格上列举了很多细节问题，但最终的还原效果并不能得到保障。甚至在一些时候会感觉做验收比重新做一遍设计稿还要费劲「emo」，有的时候甚至会直接按 F12 在网页上改代码给开发提示「狗头」。

例如，在常规不使用 Token 的情况下，开发同学使用的是硬代码的模式，代码编辑器无法判断这个颜色是否正确，如果开发不小心输错了一位数，就很可能导致线上运行时候的不一致。而使用了 Token 之后，开发只需要输入这个场景的 Token 名称的前缀，代码编辑器便会自动化地提示有哪几个颜色供选择就可以了，如果不正确，代码编辑器还会给出报错提示，开发同学可以在写代码的过程中完成基础的检验工作，这样一来，设计师的成果便能够一定程度上的精准还原，设计师验收的工作量也会小很多。

在设计系统中应用 Design Token 上面讲了这么多理论，接下来开始实战，准备好～

1. 提炼 Token 组成元素

Design Token 是构成设计语言的基本构建块，是设计系统中最核心、最基础的影响视觉风格的元素。根据 Figma Tokens 插件默认提供的面板中，可以将分别以下组成元素：

Color 颜色、Shadow 投影、Typography 字体样式、Size 尺寸、Space 间距、Border Radius 描边圆角、Border Width 描边宽度、Opacity 透明度等

2. 定义 Token 命名规则

关于 Token 的命名规则，不同的团队有不同的定义方式，但其本质都是为了提高产品的一致性和工作效率。因此在对 Token 命名规则进行分类整理时，设计需要与开发同事达成一致，以确保能够更好地落地。

在制定自己产品的 Token 命名规则前，带大家看一下大厂的 Design Token 都是怎么命名的

腾讯文档 Token 变量表： https://mp.weixin.qq.com/s/sRRPlsxaUZj7220PLoFiRw

腾讯 TDesign 开源设计系统 Token： https://github.com/Tencent/tdesign-common/blob/develop/style/web/theme/_light.less

:root, :root[theme-mode="light"] { // 文字 & 图标 颜色 --td-font-white-1: rgba(255, 255, 255, 100%); --td-font-white-2: rgba(255, 255, 255, 55%); --td-font-white-3: rgba(255, 255, 255, 35%); --td-font-white-4: rgba(255, 255, 255, 22%); --td-font-gray-1: rgba(0, 0, 0, 90%); --td-font-gray-2: rgba(0, 0, 0, 60%); --td-font-gray-3: rgba(0, 0, 0, 40%); --td-font-gray-4: rgba(0, 0, 0, 26%); // 基础颜色 --td-brand-color: var(--td-brand-color-8); // 色彩-品牌-可操作 --td-warning-color: var(--td-warning-color-5); // 色彩-功能-警告 --td-error-color: var(--td-error-color-6); // 色彩-功能-失败 --td-success-color: var(--td-success-color-5); // 色彩-功能-成功 // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态 --td-brand-color-hover: var(--td-brand-color-7); // hover 态 --td-brand-color-focus: var(--td-brand-color-2); // focus 态，包括鼠标和键盘 --td-brand-color-active: var(--td-brand-color-9); // 点击态 --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态 --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态 // 警告色扩展 --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); // 失败/错误色扩展 --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); // 成功色扩展 --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); // 遮罩 --td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出 --td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用 // 文本颜色 --td-text-color-primary: var(--td-font-gray-1); // 色彩-文字-主要 --td-text-color-secondary: var(--td-font-gray-2); // 色彩-文字-次要 --td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位符/说明 --td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用 --td-text-color-anti: #fff; // 色彩-文字-反色 --td-text-color-brand: var(--td-brand-color-8); // 色彩-文字-品牌 --td-text-color-link: var(--td-brand-color-8); // 色彩-文字-链接 // 分割线 --td-border-level-1-color: var(--td-gray-color-3); --td-component-stroke: var(--td-gray-color-3); // 边框 --td-border-level-2-color: var(--td-gray-color-4); --td-component-border: var(--td-gray-color-4); // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边 --td-shadow-inset-top: inset 0 .5px 0 #dcdcdc; --td-shadow-inset-right: inset .5px 0 0 #dcdcdc; --td-shadow-inset-bottom: inset 0 -.5px 0 #dcdcdc; --td-shadow-inset-left: inset -.5px 0 0 #dcdcdc; // table 特定阴影 --td-table-shadow-color: rgba(0, 0, 0, 8%); // 滚动条颜色 --td-scrollbar-color: rgba(0, 0, 0, 10%); }{{{pre> Element-Plus： https://element-plus.org/zh-CN/

--el-bg-color: #ffffff; --el-bg-color-page: #ffffff; --el-bg-color-overlay: #ffffff; --el-text-color-primary: #303133; --el-text-color-regular: #606266; --el-text-color-secondary: #909399; --el-text-color-placeholder: #a8abb2; --el-text-color-disabled: #c0c4cc; --el-border-color: #dcdfe6; --el-border-color-light: #e4e7ed; --el-border-color-lighter: #ebeef5; --el-border-color-extra-light: #f2f6fc; --el-border-color-dark: #d4d7de; --el-border-color-darker: #cdd0d6;{{{pre> Ant Design： https://ant.design/components/overview-cn/

html { --ant-primary-color: #1890ff; --ant-primary-color-hover: #40a9ff; --ant-primary-color-active: #096dd9; --ant-primary-color-outline: rgba(24, 144, 255, .2); --ant-primary-1: #e6f7ff; --ant-primary-2: #bae7ff; --ant-primary-3: #91d5ff; --ant-primary-4: #69c0ff; --ant-primary-5: #40a9ff; --ant-primary-6: #1890ff; --ant-primary-7: #096dd9; --ant-primary-color-deprecated-pure: ; --ant-primary-color-deprecated-l-35: #cbe6ff; --ant-primary-color-deprecated-l-20: #7ec1ff; --ant-primary-color-deprecated-t-20: #46a6ff; --ant-primary-color-deprecated-t-50: #8cc8ff; --ant-primary-color-deprecated-f-12: rgba(24, 144, 255, .12); --ant-primary-color-active-deprecated-f-30: rgba(230, 247, 255, .3); --ant-primary-color-active-deprecated-d-02: #dcf4ff;{{{pre> 以上截取的部分 Token 基本是在 Github 上开源社区能找到相关的代码。如果我们想要找一个非开源的设计系统的 Token 怎么找呢？

这里以飞书为例，个人觉得飞书整体的配色非常舒适，想要研究一下其中的 Token 是怎么制定的。

首先打开飞书网页，按 F12，选中任意元素，便可在“样式”中找到飞书产品所有的 Token 是如何命名，以及可以分析研究其中的色彩运用规律。

飞书 Token： www.feishu.cn

--bg-base: var(--N100); --bg-base-raw: var(--N100-raw); --bg-body: var(--N00); --bg-body-raw: var(--N00-raw); --bg-body-overlay: var(--N50); --bg-body-overlay-raw: var(--N50-raw); --bg-content-base: #f8f9fa; --bg-content-base-raw: 248,249,250; --bg-filler: var(--N200); --bg-filler-raw: var(--N200-raw); --bg-float: var(--N00); --bg-float-raw: var(--N00-raw); --bg-float-base: var(--N100); --bg-float-base-raw: var(--N100-raw); --bg-float-overlay: var(--N50); --bg-float-overlay-raw: var(--N50-raw); --bg-float-push: rgba(var(--N00-raw),0.8); --bg-mask: rgba(0,0,0,0.4); --bg-mask-raw: 0,0,0;{{{pre> Token 命名规则总结

通过上面的大厂 Token 参考我们可以分析出一些普适性的规则：

1. 单词之间用“-”分隔；

2. Token 前缀可自定义添加自己产品的简称，例如：“–el-xx”、“–ant-xx”、“–td-xx”；

3. Token 可以套 Token，例如：–td-brand-color-hover: var(–td-brand-color-7)；

3. 整理 Design Token 资产表

分析完各个大厂的 Token 规则之后，接下来正式开始对自己产品的 Design Token 开始建设，首先便是整理一份 Design Token 资产表，可以用文档、表格等形式整理。

这里以 TDesign 为例，需要包含 3 列：Token、Value、Describe。这份 Token 资产表整理好之后，可以在设计团队内部进行评审，通过之后再与开发进行对齐。

来源： https://tdesign.tencent.com/design/color

通过工具创建 Token 并联动设计文件 以上主要讲的是在思维层面 Design Token 是怎么推导的，接下来重点讲一下怎么借助一些实用的工具将 Design Token 实现自动/半自动化的落地。

这里主要推荐的工具是 Figma Tokens 插件，它是一款基于 Figma 的插件，相对于 Figma 右侧面板原生自带的样式外，能够实现多层级的 Token 管理，同时插件内容能够与 Figma 设计文件实现实时联动。

1. 安装并运行插件

插件安装地址： https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens

安装完成后，在 Figma 文件中打开 Figma Tokens 插件面板，并点击“Get started”，开始创建。

2. 创建 Token 变量

在 Color 分类处点击“+”号，将之前整理的 Design Token 资产表里的内容一个一个录入进插件当中。如何实现 Token “套娃”呢？例如我们需要创建一个“–td-brand-color”，值为“–td-brand-color-8”，只需要在 Color 值的输入框输入“{–td-brand-color-8}”或“$–td-brand-color-8”，这里通过和开发沟通，推荐使用“{ }”大括号的形式进行赋值。全部 Token 创建完成之后，点击“Create Styles”便可将插件中的样式生成到 Figma 右侧的样式面板中。同时，插件中的修改也能够与样式进行实时同步。

3. 通过 JSON 代码快捷导入 Token

上面的方法是需要根据 Token 对照表，通过手动的方式一个一个录入 Token，如果团队的设计师有一点代码功底，或者前端同学能够提前介入进来，直接根据 Token 对照表写一份 JSON 文件，那么也可以直接通过复制 JSON 文件里面对应到代码粘贴到 Figma Tokens 的插件当中，能够直接读取代码生成 Token 样式，并联动 Figma 文件。

4. 导入 Figma 文件中已有的样式

除了使用 Figma Tokens 插件一个一个创建样式以外，插件还支持从我们的 Figma 文件中已经有样式导入，我们也可以点击“Import”，再勾选“Color”、“Text”、“Shadows”一键导入文件中的样式并生成 Token。

向研发交付 Design Token 1. 输出 Token.json 代码文件

点击顶部“JSON”，再点击“Export”，即可将插件面板的创建的 Token 导出为一个 token.json 文件，将 json 文件交付给开发，开发便可使用。若开发不知道如何使用，可以分享这个 Figma Tokens 作者发布在 Github 上的代码稍加学习，便知道如何使用了。

github 地址： https://github.com/six7/figma-tokens-example-tailwindcss

2. 如何更新 Token

当之前定义好的 Design Token 需要增删改时，插件官方推荐的更新同步方式主要有 JSON、 http://JSONBin.io 、URL、GitHub 等几种方式，具体可查阅官方文档： https://docs.tokens.studio/sync/sync 。由于后面集中同步方式涉及到一些小门槛，这里简单介绍第一种最为通俗的更新方式就是直接通过更新 JSON 文件，可以在企业 IM 中和研发创建一个共享空间，每次 Token 有更新只需要将导出的 JSON 文件替换原有的文件即可，开发再应用新的 JSON 文件，便可实现高效便捷的更新 Token。

使用 Design Token 在产品中一键换肤 在一些 To B SaaS 产品当中，产品的主色可能会跟随客户公司的品牌色进行调整。使用 Design Token 便能够便捷高效地实现一键换肤。

1. 首先我们会定义一个“global”基础主题，在这里将所有后面不同皮肤的颜色都写入进来；

2. 在“blue”和“red”主题皮肤下，品牌色命名都为：“tr-color-primary-brand-light-default”，但是他们两个皮肤的值不同，一个是 global 中的“{–color-blue-light-6}”，一个是 global 中的“{–color-red-light-6}”；

3. 在蓝色皮肤下将“blue”勾选，切换至红色皮肤，只需要勾选“red”，即可实现文件内的所有变量全局替换，同时 Figma 右侧的样式也能实时联动。

结语 近几年，越来越多的团队开始搭建自己公司产品的设计系统 Design System 赋能到具体产品中落地。我所在的团队也在建设一套适用于自己公司业务的设计系统，在推动设计系统落地时，便运用了 Design Token 进行落地，极大提高了公司设计和研发团队的协作效率。Design Token 给 Design System 带来了新的方式和新的可能，未来希望能够不断扩大 Design Token 的应用价值，赋能到更多的业务和产品当中，让设计系统的应用变得更便捷、更高效。

我是设计师波波 Bobby He，深耕 B 端体验设计，持续学习输出中，欢迎关注私信与我交流～

参考文章

https://mp.weixin.qq.com/s/9LJT89vqjdVwsafDckh6Pw

https://blog.prototypr.io/design-tokens-with-figma-aef25c42430f

https://didoo.medium.com/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa

https://uxdesign.cc/design-tokens-cheatsheet-927fc1404099

https://docs.tokens.studio

大厂出品！腾讯开源企业级设计体系 TDesign TDesign 是来自腾讯内部近 300 名设计师与开发者共同打造，经由 500+ 项目使用、验证和锤炼过的企业级设计体系， 秉承包容、多元、进化、连接的价值观，TDesign 期望与用户、行业及合作伙伴等一起打造具有竞争力的产品体验。

阅读文章 >

多指类手势 之前的文章讲解位移类手势和点击类手势的时候，提到过不同的描述维度会让手势产生不同的变种，比如触发时机、 按下次数、 阈值类型等。我们同样也可以把使用手指的数目看做是一个描述维度，使用的手指数目不同也会产生不同的手势变种，有着不同的应用方式。

万字干货！交互手势全解析（一）：位移类手势 前言 一年前更新了文章《交互手势的容错性和逻辑性》之后，有很多读者朋友询问是否能够做一个详细的讲解交互手势的系列文章，讲解每个手势的不同之处、应用场景以及在工作中如何使用。

阅读文章 >

6000字干货！交互手势全解析二：点击类手势 点击类手势的描述维度 与位移类手势类似，点击类手势也存在着自己的描述维度，它们分别是触发时机、点击次数和时间限制，三者的变化同样会产生不同的变种。

阅读文章 >

使用多指类手势的原因主要有两个：

① 单个界面对于手势的需求量比较大。当可用的 单指类手势 都已经被占用后，通过引入多指的维度来扩充手势，从而满足设计需要，避免产生手势冲突；

② 系统级的全局手势通常使用多指类手势来尽量避免与第三方App的手势冲突。

全局手势如果设计得过于简单很容易引发手势冲突。例如一加手机的某个系统版本中，有一个全局手势是单指连续点击三次触发页面缩放，对于非游戏类的 App 来说基本没有这个手势，不必担心误操作，但是对于游戏类 App 而言，连续点击屏幕上的攻击键是一个很常用的操作，连续点击三次触发页面缩放的设计导致用户游戏过程中极易不小心触发了页面缩放。iOS 系统的做法很巧妙，在点击次数外增加了手指个数的维度，通过三指双击才能够触发页面缩放，从而基本解决了手势冲突问题。

1. 多指点击 特点

多指点击同样有点击次数、触发时机和时间限制这些描述维度，它们的变化会给多指点击带来不同变种。在 App 中多指点击常见的变种一般有多指单击、多指按下，而像多指双击、多指长按这一类更复杂的变种较为少见，一般仅用于系统级的全局手势。

案例

在 iOS 的短信 App 中，可以通过「双指按下」快速选中一个短信。

在 iOS 的设置中开启缩放功能后，任何页面都可以通过「三指双击」触发页面缩放。

2. 多指位移 特点

多指位移同样有控制方式、稳定化效果、以及阈值类型这些描述维度，它们的变化可以实现多指轻扫、多指拖拽、多指甩动这些效果。多指位移通常用来移动受控物或触发某个功能。

案例

在 iOS 的短信 App 中，可以通过「双指拖拽」快速多选短信。

在网易云音乐的播放页，向下「双指轻扫」可以触发黑胶背后的故事。

在笔记应用 GoodNotes 中，浏览模式下可以通过「单指甩动」浏览页面，但是当进入编辑模式时，为避免手势冲突，单指甩动会变为「双指甩动」。

3. 多指缩放

特点

多指缩放与多指位移比较相近，不同之处在于多指缩放的手指移动方向是以某一个点为中心进行汇聚或分散。控制方式、稳定化效果、以及阈值类型这些描述维度同样适用于多指缩放。

案例

iPad 可以通过「四指缩小」快速退出应用。

iOS 的照片 App 中，可以通过「双指缩放」缩小或放大照片。

网易云音乐可以通过「双指缩小」触发抱一抱彩蛋。

4. 多指旋转 特点

多指旋转可以看做是以多指的中心为圆心，通过多指的移动来模拟出围绕这个圆心做旋转的手势。它是对物理世界几乎 100% 的映射，因此一般用于旋转某个物体，调节旋钮等操作。

案例

iOS 的照片 App 中，可以通过「双指旋转」转动照片。

5. 多指特殊手势 有一类特殊的多指手势可以支持更复杂的交互，一般为系统级手势。例如 iOS 中长按桌面的 App 后进行拖拽时，可以同时点击其他 App 一起进行拖拽。

组合类手势 组合类手势由两个或两个以上的手势组成，因此隐蔽性较强，如果不进行引导很难被用户发现，也是由于这种特性，它所触发的功能一般有其他更明显的入口或操作方式，使用它通常是为了增加高频功能的操作效率，服务于专家型用户。组合类手势之所以能够提高效率，是因为它把用户平时需要通过多个步骤才能完成的操作简化为了短时间即可完成的手势组合。虽然初次使用有一定学习成本，但是一旦用户形成肌肉记忆，操作过程会非常快速。

因为组合类手势更加多变，且系统并未直接提供这类手势给设计师调用，需要设计师自己根据需求来组合搭配，因此很考验 设计师 的创新能力。之后的案例展示仅为常见的用法，并不是全部。通过举一反三，我们也可以设计出不同与本文中的案例但更满足需求的组合类手势。

1. 设计模型 下面这个表格里的模型是总结常见的组合类手势而设计的，能够涵盖绝大部分的设计需求，但仅适用于单指的组合类手势设计。

模型将组合类手势的操作过程分为启动、调整和触发三个阶段。每一阶段由一个分支手势构成。比如在第一阶段中，可以选用的手势有长按、双按、轻扫 B。并不是只能选用这三个，而是它们三个作为第一阶段的分支手势体验良好且最常用。

①启动阶段的目的是创建一个新模式，在新模式下，界面原有的手势会失效，系统只能响应②调整阶段的手势，可以选用拖拽和轻扫E。在③触发阶段可以进行抬起、停留来触发最后的功能，如果选择「无操作」，则说明手势在②调整阶段已经达到目的，不需要③触发阶段的手势。

仅解释这个模型可能比较难理解，下面会用一些案例进行演示。

2. 常见案例 长按+轻扫 E+抬起

特点

通过长按激活一个控件，在手指不离开屏幕的情况下将手指移动到某个功能选项的位置上，然后通过抬起触发该功能。功能选项一般出现在手指的附近，从而方便下一步操作。

案例

花瓣 App 中长按某个图片后可以快速进行收藏等操作。

长按+拖拽+停留

特点

通过长按激活一个控件，在不松手的情况下将手指拖动到控件的某个功能选项的位置上，然后停留特定时间触发该功能。

案例

在京东读书 App 中，需要跨页选择文本时，需要长按后拖动手指至页面左下角后，停留一段时间进行翻页。

在 iOS 桌面长按图标将其拖动到边界，停留一段时间后可以将图标移动到下一页。

为什么上面两个案例在触发阶段使用停留而不是抬起？

因为完成了触发阶段的操作后手指仍然需要对受控物保持控制状态，此时不能松开手指，因此这种情况下操作的触发手势使用停留更合适。

轻扫 B+轻扫 E+抬起

特点

通过轻扫 B 激活一个控件，在不松手的情况下将手指往某个方向移动来选中某个功能选项，然后通过抬起触发该功能。

案例

Chrome 浏览器中，下拉页面后将手指左右移动并抬起可以触发其他功能。

双按+拖拽

定义

当一个界面中，上下左右四个方向都已经存在位移类手势了，但是仍然有功能需要新增额外的位移类手势。此时可以将双按看做是一个模式启动，双按后可以立即使用拖拽来触发相应功能。

案例

地图类 App 中，可以通过双按后手指不离开屏幕往上拖拽来放大地图，往下拖拽来缩小地图，从而解决了单手操作时难以放大缩小地图的问题。不足之处在于，这个手势的教育成本较高，只有少部分用户能够发现并持续使用。

3. 根据使用场景进行分类 上文依据操作方式将案例进行了分类。实际上在设计过程中，使用场景分类更能便于我们去选择适合的手势。我将组合类手势通过使用场景的区别分为了四类，它们分别是 ①单个属性的调整、②多个功能选其一、③默认选择主要功能、④同时进行两项操作。由于下面案例的手势在上文已经进行了介绍，所以不做赘述仅罗列更多案例帮助理解。

单个属性的调整

单个属性可以是亮度、大小、位置等，通过双按或长按启动模式后，再使用拖拽来进行调整。

双按+拖拽

每个地图 App 基本都支持这个手势，双按后通过拖拽来对地图大小进行调整。

（上文有动图示例，这里不再重复展示）

长按+拖拽

在快手 App 的拍摄界面中，长按拍摄键后上下拖拽可以调整取景框的大小。

多个功能选其一

通过长按唤起功能菜单，在手指不离开屏幕的情况下移动到某个功能后抬起触发该功能。

长按+轻扫 E+抬起

在 iOS 的桌面长按 App 的图标可以唤起更多功能菜单，移动手指到某个功能后抬起可触发该功能。

默认选择主要功能

使用长按或轻扫 B 后可以直接松手默认触发主要功能，但如果保持手指不离开屏幕使用轻扫 E，则可以选择其他次要的功能，然后抬起触发。

长按+轻扫 E+抬起

微信录制完语音后，抬起默认会触发发送语音，也可以通过移动手指到「取消」或「转文字」上来触发另外两个较为低频的功能。

轻扫 B+轻扫 E+抬起

下面是一个概念案例，来自于一本交互设计相关图书《 交互设计 语言》，非常推荐阅读。在下图案例中，手势的目的是解决微信的多层级导致的返回步骤过多问题。右滑页面后如果直接松手会返回上一页，但是如果上下移动则可选择其他层级的页面，抬起后进行跳转。

同时进行两项操作

部分场景中，长按后手指需要保持接触屏幕的情况下同时操作两个功能，由拖拽和停留分别操作。

长按+拖拽+停留

暂无更多案例展示，可以看上文的京东读书 App 选中更多文字的同时进行翻页、在 iOS 桌面拖动图标的同时进行翻页的案例，在这里就不重复展示了。

以上就是关于多指类和组合类手势的思考总结，后续暂定的更新计划如下。有兴趣的朋友可以持续关注哦~

4000字干货！交互手势全解析：描述维度 交互手势的描述维度是什么？

阅读文章 >

欢迎关注作者微信公众号：「设成于思」

关于我：优设大课堂金牌讲师，高级原画师、插画师。多次参与国内外知名游戏项目； 擅长欧美 CG、Q 版卡通等多种绘画风格。

想看我更多作品可以关注我的小红书@wuli_石头，微博 @wuli_石头 。

之前在小红书上分享了一套按《搞笑一家人》里面的罗文姬女士的形象绘制的人物的表情包，收到了很多朋友的转发点赞，看来大家都挺喜欢的这种风格的人物绘画。

所以决定出一篇文章，给大家分享一下我绘制 人物头像 的 6 大步骤，同时会对相关的知识点和技巧做细致的讲解，希望对大家有所帮助。

对人物外形的抽象概括 传统的人物造型按头部、颈部、肩部、躯干的顺序依次构建，然后再根据透视做进一步刻画。这样画人物会与原照片非常的“像”，但同时也会没有特点，缺少趣味和神韵。

我根据自己长期的绘画经验，总结出一套自己的人物造型方法，概括来说就是大胆抽象，夸张对比。

大胆抽象，首先需要我们对绘画对象有一个细致的观察。要善于利用自己的直觉，抓住人物给我们的第一印象或者印象最深刻的点。发掘其所带有的一种情绪或者“势能”，然后用简单的形状概括出来。

我们看下面 2 张示例，2 张图片虽然都是同一个人物，但是整体神态是不同的。

上图中人物是站立的状态，我们可以观察人物头部与躯干的相对位置，是一个比较舒展挺拔的状态，有往上延展的趋势。结合人物色块在整个图形中所占比例（人物色块与背景色块的区别），我们可以选择用一个直立细长的三角形来概括人物整体外轮廓。

在第二张图中，我们可以看到人物的头部与躯干重叠，缩着脖子耸肩。这样给人的整体感觉比较内收，像是被压缩了。所以我选择用一个四分之一圆的形式概括整体的外形。

确定好主体外形轮廓之后，我们在草稿起形的时候就非常快了。同时我们可以将初步外形做进一步的夸张：将尖锐三角形的进一步拉长，四分之一圆进一步压扁，让形状所代表的气质更加明显。

再多给大家展示几个人物轮廓的概括步骤，帮助大家理解：

虽然图片上人物头部的轮廓是圆的，但是我选择变方为圆，将人物的脸部连同脖子夸张成一个长条形，肩部部分则横向展开为一个梯形。这样的宽窄对比就会让形状更有节奏感，显得有趣。

直接按照图片绘制的话，整体外轮廓会呈现方形， 比较呆板。我们转换一下思路，当人物躺倒的时候，在二维平面上原来的比例都会被压缩，我们可以一个选择扁长的形状，更符合我们直觉中被压缩的感觉。

小结

绘画的第一步不是拿起画笔就照着图片画，而是要带着思考去观察，用直觉感受绘画对象整体“势”的特征，然后用最能体现这种特征的几何形状去概括。我们在这一步确定的几何形状会主导后面人物造型的方向和特点，影响到成图的整体状态。

可能有些同学会觉得，这样夸张的概括有些失真了。但其实这就是夸张的的优势和魅力，只要做到足够夸张，那么就更比照片更能体现人物状态的精髓，也更加生动传神。

头身比例及分形 在确定好整体的人物外形后，下一步就是划分头身比例并分形。

首先需要说明的是，头身比例的划分没有绝对值，看个人风格和习惯。确定好头身比之后，我们就可以进一步划分出第二个几何形。

示例 ①

第一步已经将人物外形概括为一个细长的三角形。确定好头身比之后，根据人物身体色块在图片中的占据的形状，第二个几何形就确定为一个半圆形。

在半圆形之上就是我们头部的位置。我并没有严格依照头骨形状来画，而是按照片上人物皮肤的面积，将其概括成一个椭圆形。然后用线条找出头发的位置，草稿部分就基本完成了。

示例 ②

第一步我们已经将人物外形概括为压扁的四分之一圆。这里我没有将脸部概括为一个椭圆，而是一个倒三角。原因是，仔细观察人物我们会发现，她的眼睛是向上看的，结合整体看有一个斜向上的趋势。而倒三角形就能展现出这样的一种趋势，如果话概括成纯椭圆的话就没有什么特点了。

大家可以再看看下面几张图，多感受一下分形的思路：

第一步我们将整体概括为一个长方形加一个梯形，进一步分形时，我将左右头发概括成两个圆形，头顶的发量压缩，这样在外轮廓上就有一个明确的变化，更加有趣。

我们已经将整体概括了一个扁平的形状。进一步分形时，按照图片中头部皮肤色块呈现的形状，在内部分出一个稍微扁一点的半圆。再简单概括一下头发和手部的形状。

小结

在确定好主体的几何形状后，第二步就是确定头身比例，然后做进一步的大方向分型。在对头部或者躯干进行分型时，不一定要按照很精准的人体比例去理解，但是要对色块、元素及他们之间的关系有一个准确的把握。

基础透视原理与点对点的处理 在前两步的分形阶段，我们用了非常感性的方法对于人物造型进行抽象概括。但想画成一张好看的图，光靠感性和直觉是完全不够的。

在基本的分形确定好之后，我们的思维要转到理性的一面，运用基础的透视理论和点对点知识，帮助我们确定正确的五官位置和头身关系。

① 纵向中心线

人物的分形草稿已经完成，这个时候我们心中需要有几条线：脸部的中心线、脖子的中心线、躯干的中心线。这些都是纵向的线条，分别对应我们的头颅，颈部和身体。只有这三条纵线在垂直方向上是贯通的，我们画出的人才是形体才是正的，不会出现出现形态扭曲。

② 横向位置线

纵向线条标好之后，我们就能在此基础上进行横向线条的划分。

确定眼睛、鼻子、嘴巴的大概位置和互相之间的距离。这是要注意由于透视变化，五官之间距离的变化。透视不对，五官看起来就很怪异。

注意线条的倾斜角度和方向的问题。确定五官位置的时候，要仔细观察人物实际状态，线条呈现出对于倾斜的趋势。

横向的线条确定好之后，我们就可以在标记好的位置上确定五官的位置了。

人体转向角度的不同，中心线的对应位置也会发生变化，眼睛这种原本两侧对称的点位置也会发生偏移。这个时候就要运用「点对点」的方式，以纵向中心线为准，让身体左右两侧的元素保持在同一水平线，并且在透视上保持距离相等。

表情绘制与五官分形 仔细观察五官线条的走向，是塑造人物表情非常重要的点。准确的线条走向让五官的表现力更强，情绪传达更加饱满。

上图中，人物表情是嫌弃、不耐烦。仔细观察五官的线条走向：嘴角下坠，眉毛往中间聚拢，眼睛是向右看。在画草图的时候，就可以把这几个点抓住，用带有方向性的线条标出来，情绪的基本调性就被确定下来了。

这张图中，人物双手捂住耳朵，眼睛紧闭，眉毛皱在一起，整体非常抗拒的姿态。在草图中，我们要用线条表达出这些趋势，且这些线条都是往面部中心收缩。

在基础的线条方向确定好之后，就可以进一步用简单的形状，对五官的进行分形。我这里还对人物的鼻子做了夸张的处理，做成了一个尖锐的三角形，以进一步凸显人物激烈的情绪状态。

小结

不同走向的五官线条，会表达出不一样的情感。在保证五官的整体位置是正确的前提下，暗示出这些重要的方向向性线条，就能为五官的刻画定向正确的基调，塑造最终的表情时就会更加准确。

五官具体刻画与脸部轮廓 确定了五官线条的大体走向，接下来就是五官的具体刻画了。这里给大家分享一个我长期以来使用的画五官的方法：

直接眉毛连鼻子，再连人中和嘴巴。即除了眼睛之外，眉毛、鼻子嘴巴都是一根线。

这样做的好处就是：确定好单边眉毛的位置，我们就通过「点对点」的方法，确定另一侧眉毛的位置，然后沿面部中线，画出鼻子、人中，嘴巴的形状，五官刻画速度非常快。

第四步的时候，我们已经确定好五官线条的大致走向，这里就直接草稿的基础上进一步完善，勾勒出五官的具体形状。此外也可以加入一些睫毛、皱纹等个性化的特色。

另外再说一下脸型设计的问题。第一步进行整体外形概括时，用的是一个简单的几何形状。但是在具体刻画时，我们也要更具人物实际状态来概括。

比如上图中，人物年纪比较大，脸部的肌肉松弛下垂，那么我们在塑造脸部轮廓时，就需要把脸部的下半部分处理的更宽阔圆润一些，形成一个半圆，与左侧的直线和头部较窄的圆弧形成对比，这样形状轮廓的节奏感也更好。

头发的绘制思路 头部、躯干、五官都已经讲完了，接下来为大家讲解一下头发绘制的思路。画头发要注意到 2 方面的问题：透视和外形轮廓。

透视方面，头部转向的不同，头发呈现的状态不一样。照片中人物的脸是向右转的，那么对于左边的头发整体呈现的就更多，右边的呈现的较少且头发会被遮挡。

外轮廓是头部造型的重点，一定要有识别度。如果要表现卷发，那我们就用饱满的半圆形弧线去概括，比软绵绵的弧线来说表现力要强很多。

另外就利用分组来归纳发型的表现。先根据照片，对头发进行分块的概括，块面的大小要有对比变化，这样才能体现蓬松饱满的感觉。

总结 经过以上 6 步，人物头像的线稿就完成了。整个人物头像的绘制思路非常清晰，技巧也并不复杂，在日常联系或者创作中多多运用，肯定会对大家的人物造型有帮助。

今天的分享就是这些，喜欢的话可以点赞收藏，后续我会继续为大家分享更多欧美风格人物插画的知识技巧。同时也欢迎大家关注我的小红书@wuli_石头，上面有我的最新作品和日常创作思路分享。

零基础也没事！大神教你 5 步画出好看的扁平风人物插画 大家好我是花生。

阅读文章 >

我整理了 9 款无版权可商用的儿童节字体，超实用！来拿！

马上就是儿童节啦，谁还不是个宝宝呢~

好身体的详细介绍看这篇：

优设好身体开放下载！优设网出品的第二套免费可商用字体 2020年元旦前一天，我们发布了第一套免费可商用字体《优设标题黑》，点此下载： [link https://www.uisdc.com/uisdc-first-free-font] 字体一经发布便收获了无数好评，从人民日报、观察者网等官方媒体，到说唱新时代、青春有你等娱乐综艺，以

阅读文章 >

我整理了 9 款无版权可商用的儿童节字体，超实用！来拿！

马上就是儿童节啦，谁还不是个宝宝呢~

好身体的详细介绍看这篇：

优设好身体开放下载！优设网出品的第二套免费可商用字体 2020年元旦前一天，我们发布了第一套免费可商用字体《优设标题黑》，点此下载： [link https://www.uisdc.com/uisdc-first-free-font] 字体一经发布便收获了无数好评，从人民日报、观察者网等官方媒体，到说唱新时代、青春有你等娱乐综艺，以

阅读文章 >

多指类手势 之前的文章讲解位移类手势和点击类手势的时候，提到过不同的描述维度会让手势产生不同的变种，比如触发时机、 按下次数、 阈值类型等。我们同样也可以把使用手指的数目看做是一个描述维度，使用的手指数目不同也会产生不同的手势变种，有着不同的应用方式。

万字干货！交互手势全解析（一）：位移类手势 前言 一年前更新了文章《交互手势的容错性和逻辑性》之后，有很多读者朋友询问是否能够做一个详细的讲解交互手势的系列文章，讲解每个手势的不同之处、应用场景以及在工作中如何使用。

阅读文章 >

6000字干货！交互手势全解析二：点击类手势 点击类手势的描述维度 与位移类手势类似，点击类手势也存在着自己的描述维度，它们分别是触发时机、点击次数和时间限制，三者的变化同样会产生不同的变种。

阅读文章 >

使用多指类手势的原因主要有两个：

① 单个界面对于手势的需求量比较大。当可用的 单指类手势 都已经被占用后，通过引入多指的维度来扩充手势，从而满足设计需要，避免产生手势冲突；

② 系统级的全局手势通常使用多指类手势来尽量避免与第三方App的手势冲突。

全局手势如果设计得过于简单很容易引发手势冲突。例如一加手机的某个系统版本中，有一个全局手势是单指连续点击三次触发页面缩放，对于非游戏类的 App 来说基本没有这个手势，不必担心误操作，但是对于游戏类 App 而言，连续点击屏幕上的攻击键是一个很常用的操作，连续点击三次触发页面缩放的设计导致用户游戏过程中极易不小心触发了页面缩放。iOS 系统的做法很巧妙，在点击次数外增加了手指个数的维度，通过三指双击才能够触发页面缩放，从而基本解决了手势冲突问题。

1. 多指点击 特点

多指点击同样有点击次数、触发时机和时间限制这些描述维度，它们的变化会给多指点击带来不同变种。在 App 中多指点击常见的变种一般有多指单击、多指按下，而像多指双击、多指长按这一类更复杂的变种较为少见，一般仅用于系统级的全局手势。

案例

在 iOS 的短信 App 中，可以通过「双指按下」快速选中一个短信。

在 iOS 的设置中开启缩放功能后，任何页面都可以通过「三指双击」触发页面缩放。

2. 多指位移 特点

多指位移同样有控制方式、稳定化效果、以及阈值类型这些描述维度，它们的变化可以实现多指轻扫、多指拖拽、多指甩动这些效果。多指位移通常用来移动受控物或触发某个功能。

案例

在 iOS 的短信 App 中，可以通过「双指拖拽」快速多选短信。

在网易云音乐的播放页，向下「双指轻扫」可以触发黑胶背后的故事。

在笔记应用 GoodNotes 中，浏览模式下可以通过「单指甩动」浏览页面，但是当进入编辑模式时，为避免手势冲突，单指甩动会变为「双指甩动」。

3. 多指缩放

特点

多指缩放与多指位移比较相近，不同之处在于多指缩放的手指移动方向是以某一个点为中心进行汇聚或分散。控制方式、稳定化效果、以及阈值类型这些描述维度同样适用于多指缩放。

案例

iPad 可以通过「四指缩小」快速退出应用。

iOS 的照片 App 中，可以通过「双指缩放」缩小或放大照片。

网易云音乐可以通过「双指缩小」触发抱一抱彩蛋。

4. 多指旋转 特点

多指旋转可以看做是以多指的中心为圆心，通过多指的移动来模拟出围绕这个圆心做旋转的手势。它是对物理世界几乎 100% 的映射，因此一般用于旋转某个物体，调节旋钮等操作。

案例

iOS 的照片 App 中，可以通过「双指旋转」转动照片。

5. 多指特殊手势 有一类特殊的多指手势可以支持更复杂的交互，一般为系统级手势。例如 iOS 中长按桌面的 App 后进行拖拽时，可以同时点击其他 App 一起进行拖拽。

组合类手势 组合类手势由两个或两个以上的手势组成，因此隐蔽性较强，如果不进行引导很难被用户发现，也是由于这种特性，它所触发的功能一般有其他更明显的入口或操作方式，使用它通常是为了增加高频功能的操作效率，服务于专家型用户。组合类手势之所以能够提高效率，是因为它把用户平时需要通过多个步骤才能完成的操作简化为了短时间即可完成的手势组合。虽然初次使用有一定学习成本，但是一旦用户形成肌肉记忆，操作过程会非常快速。

因为组合类手势更加多变，且系统并未直接提供这类手势给设计师调用，需要设计师自己根据需求来组合搭配，因此很考验 设计师 的创新能力。之后的案例展示仅为常见的用法，并不是全部。通过举一反三，我们也可以设计出不同与本文中的案例但更满足需求的组合类手势。

1. 设计模型 下面这个表格里的模型是总结常见的组合类手势而设计的，能够涵盖绝大部分的设计需求，但仅适用于单指的组合类手势设计。

模型将组合类手势的操作过程分为启动、调整和触发三个阶段。每一阶段由一个分支手势构成。比如在第一阶段中，可以选用的手势有长按、双按、轻扫 B。并不是只能选用这三个，而是它们三个作为第一阶段的分支手势体验良好且最常用。

①启动阶段的目的是创建一个新模式，在新模式下，界面原有的手势会失效，系统只能响应②调整阶段的手势，可以选用拖拽和轻扫E。在③触发阶段可以进行抬起、停留来触发最后的功能，如果选择「无操作」，则说明手势在②调整阶段已经达到目的，不需要③触发阶段的手势。

仅解释这个模型可能比较难理解，下面会用一些案例进行演示。

2. 常见案例 长按+轻扫 E+抬起

特点

通过长按激活一个控件，在手指不离开屏幕的情况下将手指移动到某个功能选项的位置上，然后通过抬起触发该功能。功能选项一般出现在手指的附近，从而方便下一步操作。

案例

花瓣 App 中长按某个图片后可以快速进行收藏等操作。

长按+拖拽+停留

特点

通过长按激活一个控件，在不松手的情况下将手指拖动到控件的某个功能选项的位置上，然后停留特定时间触发该功能。

案例

在京东读书 App 中，需要跨页选择文本时，需要长按后拖动手指至页面左下角后，停留一段时间进行翻页。

在 iOS 桌面长按图标将其拖动到边界，停留一段时间后可以将图标移动到下一页。

为什么上面两个案例在触发阶段使用停留而不是抬起？

因为完成了触发阶段的操作后手指仍然需要对受控物保持控制状态，此时不能松开手指，因此这种情况下操作的触发手势使用停留更合适。

轻扫 B+轻扫 E+抬起

特点

通过轻扫 B 激活一个控件，在不松手的情况下将手指往某个方向移动来选中某个功能选项，然后通过抬起触发该功能。

案例

Chrome 浏览器中，下拉页面后将手指左右移动并抬起可以触发其他功能。

双按+拖拽

定义

当一个界面中，上下左右四个方向都已经存在位移类手势了，但是仍然有功能需要新增额外的位移类手势。此时可以将双按看做是一个模式启动，双按后可以立即使用拖拽来触发相应功能。

案例

地图类 App 中，可以通过双按后手指不离开屏幕往上拖拽来放大地图，往下拖拽来缩小地图，从而解决了单手操作时难以放大缩小地图的问题。不足之处在于，这个手势的教育成本较高，只有少部分用户能够发现并持续使用。

3. 根据使用场景进行分类 上文依据操作方式将案例进行了分类。实际上在设计过程中，使用场景分类更能便于我们去选择适合的手势。我将组合类手势通过使用场景的区别分为了四类，它们分别是 ①单个属性的调整、②多个功能选其一、③默认选择主要功能、④同时进行两项操作。由于下面案例的手势在上文已经进行了介绍，所以不做赘述仅罗列更多案例帮助理解。

单个属性的调整

单个属性可以是亮度、大小、位置等，通过双按或长按启动模式后，再使用拖拽来进行调整。

双按+拖拽

每个地图 App 基本都支持这个手势，双按后通过拖拽来对地图大小进行调整。

（上文有动图示例，这里不再重复展示）

长按+拖拽

在快手 App 的拍摄界面中，长按拍摄键后上下拖拽可以调整取景框的大小。

多个功能选其一

通过长按唤起功能菜单，在手指不离开屏幕的情况下移动到某个功能后抬起触发该功能。

长按+轻扫 E+抬起

在 iOS 的桌面长按 App 的图标可以唤起更多功能菜单，移动手指到某个功能后抬起可触发该功能。

默认选择主要功能

使用长按或轻扫 B 后可以直接松手默认触发主要功能，但如果保持手指不离开屏幕使用轻扫 E，则可以选择其他次要的功能，然后抬起触发。

长按+轻扫 E+抬起

微信录制完语音后，抬起默认会触发发送语音，也可以通过移动手指到「取消」或「转文字」上来触发另外两个较为低频的功能。

轻扫 B+轻扫 E+抬起

下面是一个概念案例，来自于一本交互设计相关图书《 交互设计 语言》，非常推荐阅读。在下图案例中，手势的目的是解决微信的多层级导致的返回步骤过多问题。右滑页面后如果直接松手会返回上一页，但是如果上下移动则可选择其他层级的页面，抬起后进行跳转。

同时进行两项操作

部分场景中，长按后手指需要保持接触屏幕的情况下同时操作两个功能，由拖拽和停留分别操作。

长按+拖拽+停留

暂无更多案例展示，可以看上文的京东读书 App 选中更多文字的同时进行翻页、在 iOS 桌面拖动图标的同时进行翻页的案例，在这里就不重复展示了。

以上就是关于多指类和组合类手势的思考总结，后续暂定的更新计划如下。有兴趣的朋友可以持续关注哦~

4000字干货！交互手势全解析：描述维度 交互手势的描述维度是什么？

阅读文章 >

欢迎关注作者微信公众号：「设成于思」

前言 送礼作为一种增进情感的传统表达方式，送什么样的礼物一直是一个重要的命题，同时，随着人们生活方式日益线上化，线上送礼的需求也逐渐增长，相比与线下送礼，线上方式缺少了面对面的沟通交流，那么如何让远方的 TA 更多的感受到你的用心和诚意，让你送的礼物更有仪式感，也成为了本次「惊喜送达」设计项目中重点思考的主题。

如何让用户感到惊喜？ 在生活中，人们通过互赠礼物增进感情。在精心挑选礼物的同时，用心准备贺卡，写满祝福的话语，并选用考究的包装，提前布置好环境，选择一个重要日子送给对方。看到对方惊喜开心的表情，我们也会同样愉悦。

根据期望效应，积极事件的不确定性比确定性会增加人们更持久的愉悦体验，对未来的联想往往会引发进一步情绪感受变化。

在邮寄场景中，当用户选择“惊喜送达”服务时，可自定义添加动态电子贺卡，并且可以在贺卡上写上要说的话。“不确定性”因素中增加动态电子贺卡和内容，让用户获得超预期的情感愉悦体验。同时在用户查看运单时，就会播放带着对方祝福的动态电子贺卡。整个用户旅程中形成体验闭环，强化仪式感让送礼加分，进一步引发用户联想。

优化目标 因此，我们将通过设计惊喜送达动态贺卡来丰富用户参与感和仪式感，营造出礼物寄递过程中的惊喜感，进而提升用户对顺丰品牌温度的感知。

接下来，我们通过「触点」「仪式感」两个方面的设计进行具体说明。

设计策略 1. 触点设计 「惊喜送达入口」—— 吸引用户注意力

“惊喜送达”功能在设计之初不是所有的托寄物品类型都支持，而是系统判定属于礼品的物品才会对用户展示。对于接触过或使用过该功能的用户操作习惯已经养成，所以新增动态电子贺卡要保留原有操作习惯的基础上突出功能亮点来吸引用户注意。

在功能设计上采用上下结构，突出“惊喜送达”功能，保留滑动开关操作方式并增加行动号召 “限时免费” 引导用户开启；而添加个性贺卡功能置于下方，用户点击即可前往选择贺卡，选择完贺卡右侧会生产预览图。上下结构方便用户操作和信息阅读，用户选不选择贺卡都不影响“惊喜送达”功能的选择。

「选择个性化贺卡」—— 让用户参与定制

在设计个性化贺卡功能时，我们想打造出全新的视觉感官体验，采用了动画电子贺卡的形式，通过左右滑动就能快速预览不同动态主题贺卡。同时可以让用户对贺卡的文案进行自定义编辑，让心意传达的方式与众不同。（由于自定义编辑功能尚未对外开放，请小伙伴们敬请期待哦～）

如果上述场景触点都是为寄件用户考虑的，那么查看电子贺卡最重要的就是触达到收件用户，并且可以让收件用户与寄件用户产生互动反馈。

「查看电子贺卡」—— 体验闭环延长愉悦

“惊喜送达”支持用户选择指定派送时间，当运单进入派送状态时，收件人会收到派送短信或微信消息提醒，用户通过消息进入运单信息。这时候我们在用户打开时播放对方为其定制的动态电子贺卡，配合美丽的图形、趣味性动画，还有一句 TA 对你说的话。用户可以选择将贺卡保存本地，也可以分享至微信好友或朋友圈，延长用户愉悦情绪。考虑到寄、收件人都会有查看运单的场景，对于动画展示我们提供了“下次不再展示”的选项，当用户勾选后，进入运单详情则不再展示，可以通过点击贺卡图标进行查看。

2. 仪式感设计 《小王子》书中有提到，“仪式感能让某一天与其他的日子不同，让某一时刻与其他时刻不同”，它能让平静的生活泛起涟漪。

根据“惊喜送达”功能的定位，主要目标用户为年轻客群，他们注重体验，喜欢生活中的仪式感，想要营造浪漫和惊喜。基于该部分的用户特点，以及过往数据表现，我们从节日、纪念日、表达态度三个维度进行创意主题动画延展设计。

「设计探索」

围绕三个维度提炼关键词，筛选出符合使用场景的主题，并对主题进行关键词联想，从而设定创意思路，创建情绪画板，并进行主题创意绘制。

节日氛围设计 —— 情人节

通过使用年轻人熟悉的弹幕形式展示各国语言的“我爱你”，增加趣味性，并契合表达浪漫基调的主题。主视觉使用玫瑰花束，突出情人节的氛围，色调选择蓝粉色调，营造梦幻感，贴合年轻用户群体的审美喜好。

庆祝日氛围设计——生日快乐

视觉构图以生日蛋糕为主体，搭配四周的礼盒元素，表现生日贺卡的主题。背景紫色与蛋糕的黄色，利用对比色更加突出主体蛋糕，紧扣生日主题。在动画设计上，使用全屏幕气球飞起的循环动画形式，烘托生日的热闹气氛，增加活力与趣味性。

感谢主题氛围设计——感谢有你

主视觉以一双手捧起爱心的构图方式，使用手绘风格，搭配手写风格的字体，给人一种见信如见面的亲切感。光影变化使视觉更集中，整体温馨的暖色调，注重主题性、氛围感，与用户产生情感共鸣，传递正能量。

其他主题

截止目前，“惊喜送达”动态贺卡共上线了 7 个主题，包含了 “新年快乐”、“辛苦了”、“谢谢你” 等众多主题供用户选择。

上线效果 新功能上线以来，“惊喜送达”功能点击率提升 505%，其中点击率排名前三的是「生日快乐」、「感恩有你」、「辛苦了」贺卡。「生日快乐」贺卡点击率是 29.7%，最受用户喜爱；其次，「辛苦了」和「感恩有你」贺卡的点击率分别是 19%和 12.8% ，用户也较为喜爱。

写在最后 在「惊喜送达」功能的设计中，我们从线上寄件场景的送礼诉求入手，分析了用户旅程中的关键触点，以动态贺卡的设计形式，将用户的心意与祝福传递给远方的亲友，让寄件行为变得更有仪式感和惊喜感。 设计师 的任务不仅仅是让使功能流程变得简洁高效，还可以让产品体验变得更加愉悦；让用户在体验产品、享受服务的同时，获得更多的惊喜与感动。

用超多案例，帮你掌握产品设计中惊喜感的塑造方法 问题：设计师怎么样才能在产品中为用户塑造「惊喜感」呢？

阅读文章 >