用超多案例，帮你掌握symbol设计基础知识

什么是symbol设计？什么是symbol组件的自适应？本文用超多案例帮你掌握！

一、引言

symbol 在设计中处处都可以运用，其可批量修改、可自适应的特性，对设计提效非常有帮助。举个例子：做用户体验地图的时候，我可以利用 symbol 批量修改图层的样式，写痛点的时候，容器可以被自动撑高，不用手动调节。Sketch 模板搭建出来后，所有使用者均能受益。

symbol 特别厉害的特性在于“自适应”这个点，包括拉伸自适应和内容自适应。

一方面，拉伸自适应。拿可视化图表组件来说，可视化页面中，各个模块大小都不一样的，里面放入图表的话，图表经常需要拉伸去适应模块大小，手动调整过程很是耗时。而大多数可视化组件，直接拉伸会变形跑偏。

通过在 sketch 中给组件设置自适应属性，它就能实现下面这样子的效果，作图效率直线上升。要是再搭配上切换 symbol 控件，就能方便地切换图表分组数目和切换图表种类，设计效率更是翻倍。

另一方面，是内容自适应。设计师使用 symbol 组件时会很方便，更改字符后不用再手动调间距。

所以市面上的组件库，很多都做了设计侧的 symbo 化封装。好处就是基于 symbol 的这些特性，能方便地对组件进行全局修改，比如升级品牌色等等，设计师使用组件库搭建页面也会更方便。

但不少组件库或设计规范，仍然仅仅停留在只提供一个样式的层面上，没有封装“组件实际使用时期望达到的自适应效果”，所以设计师运用时仍非常不便。

所以本文想聚焦于“自适应”这个点，去谈 symbol 组件库的使用和封装。对 symbol 特性、自适应功能的介绍，也能帮助设计团队的小伙伴深入了解 symbol 的概念，更正确和轻松地使用已封装好的组件库，达到 symbol 化的最大价值。

二、什么 symbol？

1. symbol

symbol 即可多场景复用控件。所谓封装，即创建 symbol 的操作。

symbo 有以下 5 个特性：

（1）可多处复用：支持多个画板和多个文档间的复用。当你在一个文档中创建了一个 symbol，不仅可以在此文档中重复引用此 symbol，并且也可以通过置入控件功能，在其他设计文档中引用此 symbol 控件。图示的就是在其他作图文档中调用控件的过程。

（2）可批量修改：创建 symbol 后，可在页面中置入创建好的 symbol 控件。后期只需要对 symbol 本体进行修改，就可以一次性对页面中所有应用此 symbol 分身的地方完成批量修改。图示就是对本体修改后，所有引用它的地方都会同步修改。

（3）可替换：Symbol 可通过“替换控件”功能，替换为已经制作好的同组的其他 Symbol，如可从默认态按钮组件切换为禁用态按钮组件。图示我们可以将菜单栏组件从选中一级菜单改为选中二级菜单状态、或改为带徽标样式菜单栏。

PS：替换时有 2 个选择，可选择“替换成相同尺寸”和“替换为原始尺寸”。替换，就是用 B 替换 A。替换为相同尺寸，即置入的 B 要自适应变成和 A 控件一样大的尺寸，不去管 B 本身的大小，我需要 B 放大或缩小去自适应 A 的显示区域；而替换为原始尺寸，即置入的 symbol B 保持本身原始尺寸。这个功能自己实际操作一下会更好理解。

（4）可嵌套：Symbol 内可以嵌套多个 Symbol。例如图标按钮，就是在按钮中嵌套了一个图标控件。（图示就是我们修改图标控件本体，带 icon 按钮控件也会自动修改）叠加上 symbol 可批量修改、可替换的特性，嵌套能保证全局一起修改，也能更方便地通过 symbol 切换组合成多样的组件形态。

（5）可自适应：自适应是 symbol 最为神奇的一个特性，包括两种自适应形式，一是子级元素跟随父级拉伸所产生的自适应变化，二是父级随着子级元素字符变化而产生自适应变化。下面会重点说明 symbol 可以自适应的特性。

symbol 的这 5 种特性，支撑了我们封装和使用 symbol 组件库。尤其是自适应特性，会有助于我们高效地使用组件库。

三、什么是 symbol 组件的自适应？

1. 什么是自适应？

笼统地来说，在界面设计中，自适应也称为响应式。指的是系统对不同的显示设备及浏览器视窗所产生的适应变化，也可以说是子级元素跟随父级容器的变化，所产生的适应变化。（图片来源：《不藏不掖着，响应式网页大揭秘来了！》-白泽、牧子）

2. 什么是组件的自适应？

组件的自适应和页面的响应式，类似但略有不同。组件主要有两种自适应形式。

组件拉伸自适应：在响应式页面中，视窗缩小时，图片、icon、组件不会变形失真，会有序变化。同理，组件自适应，即组件拉伸不会变形失真，组件中子级元素跟随父级容器尺寸变化所产生的适应性变化。例如拉伸弹窗，弹窗内元素遵循既定规律变化，不会变形不会混乱。

拉伸自适应效果对于可视化图表组件库来说也非常好用。可视化页面中模块大小都不一样的，里面放入图表，图表经常需要拉伸去适应模块的大小，但手动调整过程很是耗时。经过自适应设置，各类型图表能轻松实现拉伸自适应的效果。（关于图表组件的自适应封装，后面的文章会提到）

（2）组件输入自适应，指组件尺寸随内容变化而灵活变化：即父级组件的尺寸随子级元素字符内容的变化而变化，且组件中“各层之间的间距保持不变”。例如随文字撑大的标签、自动撑的文本域等。

因为 symbol 有这样的属性。所以，symbol 也可叫做“可适配控件”，即通过设定属性（做适配处理，实现理想的自适应效果。理想的自适应效果，即按照预期实现“变与不变”。

因此，我个人觉得，组件的自适应封装，也可以理解为“将组件的响应规则进行封装”。

3. 封装自适应效果的好处

未封装自适应效果的组件库，使用体验糟糕，低效且容易出错。组件使用过程中，改变字符、改变尺寸、减少元素数量，是高频且必不可少的操作。而一旦涉及到组件内文字信息的变更、组件尺寸的调整，未封装的组件就非常难用，我可能需要将组件解组，还要注意间距规则，进行拉伸、调间距等多个步骤才能完成。

而封装后的组件直接更改文字就可以，不用手动手动调间距，所有间距会完美自适应。对于相对复杂的组件而言，设置自适应效果后的组件，使用起来更是方便，例如 tab，如果再配合上 symbol 的切换，就能实现大大提升作图效率。图示就是线条式 tab 组件，我可以变更 tab 标题名称，将 tab1 选中变为 tab2 选中，整个过程轻松完成。

4. 各家组件库自适应封装效果评测

大部分组件库仅已做到基础的 symbol 封装，但很多组件的自适应封装效果仍不理想。

试了一下 AntD、Arco、TD 等的 Sketch 组件库文档，有的没封装，有的简单封装了，但若需要对组件进行变更文字内容、减少元素数量等操作的话，效果同样很糟糕。其中，AntD 的组件库整体封装效果较好，但自适应封装仍未覆盖全局。

举个栗子，下图是 AntD 的弹窗组件的使用情况。对于对话框底部右对齐的操作按钮组，希望的是一个按钮字符宽度变化后，两按钮之间仍保持固定间距，按钮组在对话框内始终右对齐。但实际使用效果欠佳。

此外，若是我想要减少一个操作按钮，我只能解除组件链接，层层解组。

综上，希望组件库能从设计师实际使用的角度来考虑，进行自适应封装，同时对实际使用时会存在的各种场景做针对性的封装。实际作图过程中，复合组件调整起来往往是更费时的，对于复合型组件也要多加考虑自适应效果。