首先,说说《原子设计理论》。在网上搜了一圈关于搭建UI组件库的文章,基本上百分之八十都会搬出这套理论。每篇文章都会告诉你,原子设计是什么,有多好,却很少有文章说怎样做才能达到高效的原子化。
原子设计不就是抽取最小的设计元素,然后对这些小元素进行拼合,形成一个个组件么?
没错,这是原子设计最基础的理论。根据这个我们搭建出了这样一个庞大的style guide。
但是,这套设计规范真的好用吗?怎样才能提高这套规范的利用效率,让它升级成一个设计系统呢?
1."设计系统"与"设计规范"
设计系统是什么?模块化,组件化,原子化 。当你改动任何一个原子,跟他相关的组件是会全部自动更新的,只有满足了这一点,才能够达到提升效率,解放生产力的目的,这也是原子设计理论被提出的初衷。
先来看一下,目前各大厂公开对外分享的设计系统。
ant-design 可以看出来,并不是所有的组件都通过 library 共享了样式。也许是通过其他方法实现同步的?
还有非常受前端欢迎的 element ,基本上对设计师提效没啥太多作用,只提供了一个style guide罢了
saleforce 大概80%的样式都是共享的,修改一个地方,基本上会同步更新到所有组件。
我认为一个灵活的设计系统需要做到
- 全局更新样式
- 调整整体尺寸不影响元件布局,以便在调整组件尺寸时不会乱
以上两点已经有比较多的文章说过怎样实现了,链接我放到末尾。
这里我说一下关于颜色覆盖的问题,目前基本上实现全局更新颜色的方法分为两种。
- 将颜色设置为symbol,然后通过mask覆盖到元件上。达到选取全局更换颜色的效果。
- 利用sketch自带的“共享图层样式“功能,实现全局更新颜色。
对比下这两种方法的优缺点吧:
Mask覆盖
通过mask的形式进行颜色覆盖,在遇到描边就会变得比较复杂。
通过symbol进行颜色覆盖后,会把整个蒙版都填充颜色,而不是只覆盖有效像素部分。
复杂一点的操作方法,可以通过裁切蒙版达到效果。
如果你的系统还涉及到圆角与直角,那就需要你重新再做一份圆角的~
另外通过symbol覆盖还需要注意,mask不能填充颜色,不然在遇到透明度的时候会出现颜色污染。( 当然你也可以直接隐藏 )
共享样式
如果是通过共享样式就会比较简单,并且不需要单独画一套直角与圆角。
不过因为不是继承symbol,所以维护起来会比较麻烦。
这里我的做法是,在组件全部完成之后,设置一个专门存放色板的地方,并且罗列出有哪些地方使用了这些颜色。然后在样式库一个个更新相关的颜色,这步操作就比较繁琐了。推荐用find and replace color 一键替换。
如何让设计系统更高效?
在体验了十多套组件库之后,我发现这些组件在实际调用中,还是挺不方便的。
比如拖出来一个按钮,默认的按钮只能够支撑固定字数。但往往字数长度是不固定的,这时就会这样。
所以我需要一个能够自动调整元件边距的工具,通过sketch官网的插件库,发现能够设置padding的插件大概有这几个:
compo 已经很久不更新了,而且功能太简陋,达不到“自动调整“的效果。
kitchen 的自动排版可以支持大部分功能,但是在包含icon之后就会极大概率的出现 bug ,虽然已经反馈了,但是迟迟没有结果~
paddy 牛的一批,完美解决问题,可是傲娇的作者已经不再继续更新插件了,我用的 sketch 55 版本已经无法运行
不过paddy的作者在git上推荐了anima toolkit这个工具,可以完美解决自动调整 padding 的问题。
anima toolkit 主要功能有
- Auto-Layout ( 自动布局 ) 免费
- High-Fidelity Prototypes ( 原型 ) 收费
- Collaborate ( 协作 ) 收费
制作动态组件只需要用到Auto-Layout的功能,后面两个也很强大,有需要朋友可以尝试一下,我就不赘述了。
下面会根据 Auto-Layout 的三个主要功能,结合实际案例帮助理解。
1.通过padding制作一个可以动态调整边距的按钮
最终效果:
建立一个文字层,如果已经有定义文本使用规范的话可以直接关联上去
点击anima-layout 下的padding,输入你想要设置的padding值,会自动生成一个组,并且新增一个background形状。
如果已经有定义颜色使用规范的话可以直接关联上去,然后创建symbol。就可以直接调用了,文本可以在右侧直接修改(sketch 56版本已经支持可以直接在元件上修改,更加方便)
同理可以制作出一个带图标的按钮
因为懒,我就直接在上一步的基础上做了。如果不需要图标可以直接选择none,然后就出来了一个纯文本的图标。
另外还可以使用padding制作toggle按钮,解决有的toggle带文本,有的不带文本的问题
效果如下:
过程就不写了,跟制作按钮是同样的道理。这里需要注意一下文本的对齐方式,圆圈在文字的哪边,文本就往哪边对齐。因为stack ( 往下翻,会运用到 ) 和padding结合使用的时候,会出现一些奇怪的问题,所以我这里并没有给圆圈跟文字设置stack(固定间距)。如果设置了固定间距就不用管这个问题~
2.通过stack结合padding 制作一个可以动态排版的tab切换
跟制作按钮一样,设置一个自动调整padding的小方块。因为tab切换是有选中和未选中两种状态的,所以在这里需要弄两层文字并且重叠在一起。
然后复制几个tab元件,点击anima中的stack,可以自动排列每个元件之间的间距。
创建为symbol之后就可以直接调用啦
PS.这里可以看出这种方法比较蛋疼的地方,只是五个tab,右侧的信息列表已经非常的长了。希望以后sketch能够对symbol的信息管理进一步优化吧~
3.通过pins功能 制作带下划线的tab
延续上面的思路,画出两个文字图层和一个小短线,把小短线设置为symbol。
之所以设置为symbol是为了在外部选择是否显示小短线的时候可以直接选择none;当然也可以想上面的tabbar一样,通过设置小短线的样式来达到效果:选中时填充颜色,不选中时填充透明,结果是一样的。
选中小短线,打开pins功能版,使小短线永远距离左侧和右侧为0,这么做是为了让小短线的长度永远等于文本的宽度。这样一个tab元件就完成了。
复制几个,stack打包设置好间距。转化为symbol,完成!
如果想要把小短线设置成比文本短一些,只需要把pins左右的数值设置一下就好了。
目前想要直接通过偏移量来设置比文本长的下划线,会产生bug,不推荐。
思考:
在使用 anima 制作动态组件时,一直在思考从使用者 ( 懒癌设计师 ) 的角度出发,怎样才能通过设计系统来提升工作效率?
比如现在需要添加一个带搜索图标的搜索框,以 ant-design 为例,我需要从组件库中找到input,然后从组建分离,接着放入搜索的图标,把图标放到input里面,同时还要去查看一下图标的间距是不是正确的。特意记了一下时间,像我这种手残星人花了73s。
为了解决这种低效问题 ( 其实是因为自己懒得找 ) ,结合平时自己的操作场景和使用习惯,我将所有以 input 框为主体的组件进行归类。包括:文本框、时间选择框、日期选择框、搜索框、下拉选择框、登录界面常用的密码输入框 ( 就是有小眼睛的那个 ) 、以及项目中常用的几个特殊输入框。再加上图标显示位置:前、后、前+后、无图标。再加上输入框状态:正常、hover、disable、报错、提醒。
按照最大化组件的方式,做了一个包含图标、文字、状态的input框,朴素的它长这样:
但是从这个 original 框到将它变成一个搜索框,只用了 15s。
同样的,我还把各种形式的tab、按钮、气泡弹窗、radio、checkbox、面包屑全都做成了动态组件甚至是可通过一个original组件简单几步快速变化得到的symbol。
最后
在利用 sketch 做组件时,最好用 sketch 本来就提供的功能来解决问题。除非是像自动调整边距这种无法解决的问题,再考虑用插件。因为本身sketch版本迭代就挺频繁的,插件不一定跟更上,有可能会导致非常严重的后果。( 我就是因为 sketch 版本升级之后 paddy 完全失效,导致重新来过 ) 希望 sketch 能多看看人家 Axure ~
关于如何通过 sketch 搭建组件库:
Sketch 进阶教程!利用Symbol 建立一套设计规范组件库?www.uisdc.com最最后,悄悄放一个我做好的demo。想要个赞也是不容易
https://pan.baidu.com/s/1mz910IKdshaYfbOad44Rdwpan.baidu.com提取码: 78ru