如何用sketch设计自动适应不同屏幕分辨率的UI

如何让一套设计自适应不同屏幕？相信每个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了！