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

一、引言

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

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

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

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

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

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

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

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

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

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

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

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

二、什么 symbol?

1. symbol

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

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

symbo 有以下 5 个特性:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 什么是自适应?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

点赞 33
收藏 21

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。