还在用23年前的技术做设计？——基于组件的视觉管理规范技巧

本文适合读者：视觉设计师、UI设计师、sketch初级使用者

如果有人问什么软件做UI设计比较好，答案十居其九是Sketch。适逢Sketch 47 版本增加“共享库”功能，以及之前41版本已经出现的“组件”覆盖功能，今天和大伙分享一下基于Sketch中组件的特性建立和管理视觉规范的小技巧。

技巧一：把图层都“扔掉”吧！

不说不知道，原来“图层”这东西已经有23年历史了：1994年， Photoshop 3.0首次引入图层的概念，内容破天荒地可以进行分层调整。这一发明甚至对出版行业产生了革命性的影响。

======这个是but分割线======

但，面对重复性强，且各自又有不同状态的UI视觉设计，只有纵深维度的图层显得有点力不从心：例如要将界面中的警示色从橙色换成红色，或将所有跳转卡片换成按钮。把重复的图层“扔掉”是建立高效实用的视觉规范的第一个技巧。

图层应该怎么”扔”？小编笑而不语并掏出了又黄又硬的东西

开玩笑啦，不是真的要扔掉图层，而是将图层“收纳”起来：将零碎的图层转成组件。

选中组件的各种零碎的图层或图层组，点击Create Symbol(创建组件)按钮

提示说，选中的图层会转化成单独占一个图层的组件。组件的母版一旦被修改，他的所有副本都会同步被更新。不管，点击OK即可。

小编等等，都变成组件，会不会修改起来很麻烦？

不会呢！可以通过右边的属性栏改写副本的文字以及位图内容，这不会影响母版和其他副本。而属性名称如上图的“主标题”则是母版中对应文本所在的图层名称。

Sketch的组件系统引入了【封装】的编程概念：组件内部的图层分成两类：一类是【私有图层】不允许外部进行修改，另一类是 【公有图层】内容允许被改写（Override

能够被改写的图层有：文字图层（只可改写文本内容，字号、颜色、字体不能改）、位图图层、子组件（组件内的其他组件可以替换，优先替换原始尺寸相同的组件）。

组件化可高效复用已有的元素，通过改写，可以赋予母版不一样的视觉展现形态。

上图的四个卡片，其实都是由同一个布局母版，利用改写与替换生成的副本。

技巧二：让内容自觉站好队（适配）

我们从组件外很难影响组件内部元素的布局，这很好地保护了组件以及规范的安全性。要规划好“半封闭”式的组件，建立一套组件内部的布局规则是十分重要的。这套内部布局规则只能在母版中设置，不能被外部修改。这需要用到Resizing（智能缩放）。

智能缩是对当前选中的物体设置在其容器中对齐或者拉伸的方式。可以理解成“当包含这个元素的容器大小发生改变时，这个元素会怎样怎样”

Fix Width：选中，元素宽度始终固定。没选，元素宽度按照当前比例随着容器拉伸而按比例拉伸。

Fix Height：与Fix Width同理，只是Height针对的是高度。

而那个白色方框的不同方向的T字型表示的是元素到容器的边距是否固定。逻辑与Fix Width相同。只是针对的是边距

如按钮组件在整个大组件母版中，设置成固定顶边距以及右边距，所以当母版的组件大小发生变化时，绿色的按钮会按照事先设定的规则重新设置自身的大

有了适配，组件才可以保证规范的正确性。不会像传统图层那样，一不小心便将尺寸大小等设置打乱。

技巧三：一目了然的组件图层命名

Sketch的组件机制中，外部属性名称是根据内部元素所在图层的名称以及顺序决定的。为保证属性面板参数的可读性，在设计组件时需要考虑图层名称。

内部叫什么名称，外部就显示什么属性名称。合理的命名可以提高规范的易用性。

在布局组件中，习惯将需要被整体替换的组件所在的图层名前加上十分明显的图形“██”。因为这是作为接下来很多属性的起点，明显的前缀装饰可以让用户快速定位。而一般的整体替换组件的图层前缀使用较弱的“”。这是经过多次优化的结果，当然你也可以根据个人习惯或者项目需要调整前序使用的规则。

技巧四：让一切组件化！

最后的一个技巧就是让一切都尽可能地组件化。技巧一中提及过，组件可以复写或替换的元素不多，但Sketch给我们留了一个后门：可以替换子组件。那么之前不能改变的字号，字体等属性，都可以通过替换包含不同字号与其他复杂属性的子组件来实现形态的变化。因此，让一切组件化的意义在于，让一切都变得可以重用。

最后对于利用组件搭建规范的这个方式用Sketch官方的话概括就是：Design once.Reuse anywhere.Update easily。（嗯，同样十分编程， 借鉴了java的口号，对方产品经理一定是个程序大神 : ）