如何让一套设计自适应不同屏幕？相信每个UI都有这样的需求。你还在自己一个一个屏幕尺寸去慢慢调整像素值吗？太慢啦~ 其实用sketch自带的symbol/reszing，再加上一个超好用的插件：Auto-Layout，就能很高效的解决这个问题。下次甲方说：我想看看这个设计在 ipad/网页/iphone7 plus 上是什么效果？ 你就可以瞬间生成设计图啦！
先看一下最终的效果：
auto1.gif
不论如何改变当前sketch中artboard的大小，其中的UI都会按照我设置的要求自适应的变化，并且不会出现图片被拉伸或者位置没有居中之类的错误。
如果你不觉得这很神奇，请在自己的sketch artboard上拖拽一下试试：
haha.gif
下面具体介绍下我是如何实现的，整个过程分为三步：
Step1. 整理UI将其中重要组件设置为symbol
可以下载我的sketch-demo文件 ，demo页面结构如下：
Artboard 3.png
所有symbol如下：
Screen Shot 2017-04-25 at 6.03.26 PM.png
其中cover由user，icon和bg这三个更小的symbol构成。我很喜欢这种symbol中套symbol的结构，可以无限复用重组~
2. 给Symbol中的元素选择合适的resizing选项
好像很多人都没用过sketch中的resizing，甚至没注意到它的存在。resizing的位置如下图（选中symbol时会出现）：
Artboard.jpg
resizing这个选项的意义就是，当symbol的大小变化的时候，其中的元素位置如何变化，比如我给底部导航栏中的每个图标的resizing都设置为 float in place，那么当底部导航栏宽度变化的时候，图标会保持自己的大小和百分比位置不变：
Artboard 2.jpg
效果：
tab.gif
给每个元素都设置好，具体如下：
setting.jpg
pin to corner就是元素大小不变，位置固定在相对距离最近的corner处。具体可以看看sketch官网解释，基本上试用一下就会明白了。
3. 使用auto-layout插件让整个UI自适应
最后一步就是用大名鼎鼎的auto layout插件啦，下载地址：Auto Layout for Sketch
这个插件使用非常简单，插件安装完成后，会在sketch上出现一个选项栏：
Screen Shot 2017-04-25 at 6.26.50 PM.png
我们从cover开始，给其设置对应的autolayout参数。我们希望不论屏幕如何变化，cover都要100%的宽度，所以：
cover.jpg
而底部的tab栏，我们希望它始终保持在距离屏幕底部为0的地方，左右距离也为0。如图使用pin的功能即可。
Screen Shot 2017-04-25 at 6.37.50 PM.png
关于更多autolayout的高级使用方法，可以看看官网的说明和视频 guide
完成这三步，你的sketch设计稿已经变成完全的自适应UI了！
网友评论