Sketch组件库

1、配色

这个是很重要的部分。如果已经有成型的产品,可以从产品中总结配色,如果没有的话,还是要根据公司业务拼装几个典型页面来检查你的配色,再制定配色规范。

可以参考antdesign的配色规则,它有一套配色算法,可以制定一个标准色,然后自动生成色彩梯度。我在制作的过程中使用的方法是设定一个深色,然后使用透明度来设定标题色、正文色、辅助色、失效色、边框色、分割线、背景色,当然,这种做法可能没有基于算法来的结果符合一定的规则,完全靠感觉。不过制作Sketch规范文件的好处就是如果你对你的配色不满意,你可以任意更新。

1

2.字体

为了保证文件的可同步性,首先要将用到的全部字体和字色都排列出来,为了方便后期一键更新字体及样式。这里需要注意的是,制作中文规范需要制作中文和英文两个文件,制作左对齐、中对齐和右对齐的文本。

2

完成文字样式之后再把文字样式做成组件。

3

3、拼装

Sketch规范文件的基础除了字体和颜色都是以描边、容器、下拉和状态组成的,将基础组件拼装成样式的时候考虑后期修改及复用性。

4

5

举例:如果是左中右结构的button,可以将他们分解,分别制作左圆角,中直角和右圆角,也可以做一个左圆角,右侧镜像使用。

6

举例二:如果是列表的话,可以根据实际应用内容预先组合好几种常用单元组合,这样下次使用的时候就可以直接组合自己想要的列表内容。

7

8

4、Resizing 智能缩放

Sketch的Resizing功能,可以让你的文件更利于后期编辑和使用。

Resizing又叫做智能缩放,可以对组内或者symbol内的元素进行位置和尺寸的约束,从而实现组件的弹性化。

9

Resizing的搭配用法:

1.什么都不选,表示正常的拉伸,和PS拉伸效果一致,但是具有破坏性质。

10

2.边缘位置不固定,宽高固定,表示浮动。logo没被破坏,但是位置不对。

11

3.边缘位置固定,宽高不固定,表示边缘吸附缩放。上下左右的间距都对,但是logo被拉伸破坏了。

12

4.边缘左上角固定,宽高固定,表示logo固定在左上角,实现了我们所需要的效果。

13

 

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/4479.html

发表评论

登录后才能评论