对于我这种记忆力不好的人来说,经常记不得规范细则,每次做项目得同时开着规范文档,需要的时候时刻复制。一旦设计图发生改动,就需要浪费大量的时间去进行全局调整。
使用Symbol搭建的组件库后,不仅解决了记忆力问题,还能一键修改,灵活的改变样式,快速的填充文字、更换图片等等,大幅提高了设计效率。

在我看来,一份好的规范文档不仅要清晰的解释设计规则及标准,更要易用、方便迭代。今天就来跟大家分享下我做规范组件库时的一点小心得~

首先,你需要了解 Sketch Symbol 提供了哪些功能,在这儿我给大家推荐一篇文章,详细的讲解了 Symbol功能及使用方式。https://www.uisdc.com/sketch-symbol-for-improved-design-efficiency

接着,你就可以开始着手做组件库了,先以一个“按钮组件”为例。

第一步:梳理“按钮”这个组件包含了哪些内容,特别要考虑一些边界问题

梳理这部分工作非常重要,因为这关系到后续的一系列操作。在我们的APP规范里按钮主要包括了三种形式,而这三种按钮分别对应不同的状态,同时还支持2种颜色的按钮(默认蓝&商城红),如果全部展开就会如下图所示:

在这边要考虑的边界问题就是:按钮文字需居中,且文字长度会有限制。

第二步:注意命名规范,有顺序将你的“组件”嵌套

Symbol 对组件的命名规范有相当严格的要求,使用斜杠「 / 」 符号,可以将你的组件按层级嵌套,且会按照字母顺序排列,PS: 官方会推荐英文命名。

所以在这,我的命名就是 :按钮/01一级按钮 、按钮/02二级按钮 、按钮/03 三级按钮。(04置底按钮是我为了方便iPhoneX适配提供的,包含了需适配的边距,不用设计师再去记忆高度,但是分类逻辑里其实不包含。)

第三步:制作每个”按钮“包含的状态,并调整图层顺序

一般按钮主要包含文字及背景两部分,可改变的是文字内容、颜色及背景颜色三部分,由于我们还包含了不同状态,所以这边还需分别嵌套文字颜色和背景颜色。

  • 按钮/_/颜色/默认
  • 按钮/_/颜色/按下
  • 按钮/_/文本/默认
  • 按钮/_/文本/按下
  • 按钮/_/文本/不可点击

完成后,你就能看到如下效果:

你肯定会问我除了「 / 」,怎么还多了个「 _ 」符号,这是为了将一些状态“藏起来”,如果不用「 _ 」,你的二三级菜单都会跑到一级菜单里,这样就会非常混乱。不信你可以试试~

之后还需要调整下图层顺序,Symbol里的组件图层顺序是与外部使用Symbol 时的状态顺序会一一对应。我在这边的逻辑是,输入内容优先,从左至右,从前至后。

第四步:确认及校对

最后,确认你的“按钮”组件按一定的逻辑顺序排列,并可以按你要求改变文字内容及背景色时,才算是成功了!你肯定觉得怎么这么“麻烦”,但是“确认”这一步是必不可少的,毕竟做规范是一个相当严谨的工作~

通过以上的方法加以复制,你就可以得到一套完整的设计规范组件库Library。当然要是想你的组件库更灵活,还需考虑控件的自适应,Library同步迭代、更新等,由于篇幅问题下回再跟大家分享。

最后附一个Library的有趣应用方式:https://www.humaaans.com/