Resizing 智能缩放

Sketch提供了Resizing的功能。从基础结构来看仅有6个选项,可以通过不同的组合来实现更多基础适配方式,而在此基础上还可以搭配一些嵌套规则来实现更多的适配效果。

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

1

前四个从图标就可以看出分别是固左、固右、固顶、固底,后两个分为为固高、固宽;对一个元素设置了固左、固宽后,执行左右拉伸操作时设置的元素就有了左对齐的适配效果;对一个元素设置了固顶、固底后,执行上下拉伸操作时设置的元素就有了固定间距的适配效果;除此以为也有一些组合是相冲的,比如设置了固左、固右后,是不能再这种固宽的,这两个也是一种相反的效果。

如果一个组件需要同时支持上下左右同时拉伸时,设置项就相对复杂了一些,

2

上面提到的组件归类、颗粒化都需要命名作为基础,细分后的模块如何查找、区分,设计稿如何调用组件,这些都离不开合理的命名引导。因此命名可以说是构建组件库非常重要的一个环节,合理的命名会让整个组件库布局条理清晰、结构缜密,实际使用时能够帮助我们快速定位。

组件库经过一系列的操作搭建完成后,后续如何通过它来运作:

3

1. 区分组件类别,并在此类别区进行操作

2. 进行组件布局,模块搭建

3. 布局同时不要忘记设置Resizing

4. 对命名再进行一次梳理

5. 保存

6. 设计稿更新调用

7. 模块拼合,选取需要用的样式

8. 调整文案、图片、图标等

9. 完成

 

 

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

发表评论

登录后才能评论