> ## 文章索引
> 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt
> 这是 lrd.im 的个人博客，记录设计、技术与思考。

# Sketch Tips — 2个技巧让你在 Mirror 上更好地预览设计稿

![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-03-31-15e000d5832/01.jpg "Photo by Max Nelson on Unsplash")

用 Sketch 做 UI 设计的小伙伴都会用 Mirror App 来实时预览设计稿，看看设计稿在手机上的显示效果，方便调整设计稿。这里列出小伙伴们在用 Mirror App 时可能遇到的两个问题（起码我遇到过😄），并提供解决方案，让你在 Mirror App 上更好地预览设计稿！

注：本文插图中出现的 UI 页面来自 [D5im](https://www.uplabs.com/d5im) 在 Uplabs 上的源文件分享。

## 一、在 Mirror 中画面与手机屏幕尺寸不匹配

通常我们都希望设计稿在手机上能满屏显示，以期望获得最佳预览效果。但是如果没有设置好，可能会出现这样一下两种情况：

![Mirror App 和 Sketch 画板设置截图对比：右侧显示画板预设为 iPhone 8，画布尺寸为 750×2806，左侧为 Mirror App 预览界面，设计稿在预览界面中没有填充满整个屏幕，说明画板与设备尺寸不匹配的问题。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-03-31-15e000d5832/02.gif "图1–1 设计稿与屏幕尺寸不匹配")

![Mirror App 和 Sketch 画板设置截图对比：右侧显示画板预设为 iPhone 8，画布尺寸为 750×2809，左侧为 Mirror App 预览界面，设计稿在预览界面中没法正常滚动查看 UI 界面，说明画板与设备尺寸不匹配的问题。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-03-31-15e000d5832/03.gif "图1–2 长页面无法正常滚动")

这种情况通常出现在 Plus 或 X 系列机型，原因大概率是这两个：

1. 没有选择与你机型一致的画板预设。比如图 1–1 中我的画板选择了 iPhone8 的预设，再相应地调整画板参数使其成为通用的两倍图尺寸 750×1624px，但是在 iPhone Xʀ 中没有满屏显示。
2. 新建画板的方式不恰当。在新建画板时你使用了快捷键 “A” 去拖动出一个画板，然后在右侧栏上输入相应的尺寸（或直接拖拽改尺寸），使之成为一个符合你手机分辨率的画板。

### 解决方法

想要在 Mirror App 上完美预览设计稿，这里我的方法是用自定义的画板预设来新建画板（如图 1–3）。自定义画板预设的宽高必须是你设备逻辑像素的某个倍数 。

![Sketch 画板新建预设流程：点击 Create Custom Size 之后在输入框内，将 Size 的宽高设置为与你想预览的设备的逻辑像素的某个倍数，比如我想在 iPhone Xʀ 中预览，我就设置为 750×1624px](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-03-31-15e000d5832/04.gif "图 1–3 通过预设新建画板可以获得更好的预览效果")

具体操作：

1. 按下 “A” 键呼出右侧画板预设侧栏，点击画板预设侧栏下方的的 “Create Custom Size…” 创建一个自定义画板预设；
2. 在弹出的对话框的 “Name” 栏上设定一个预设名称，然后在 “Size” 中设定宽度为 750px，高度为 1624px¹，点击 “Save” 保存该预设。
3. 在侧栏中点选刚刚设定好的画板预设，在 Sketch 中新建一个画板。
4. 把设计稿放上去打开手机上的 Mirror App，仔细端详自己的设计稿。

说明¹：如果你的设备不是 X 系列，请将 “Size” 上的高度设定为 1334px。

那通过上面的方法我们新建好画板后以后可以复制该画板，或是拖动/设置画板的高度，都不会影响设计稿在 Mirror App 上的预览。

上面的例子提到 “自定义画板预设的宽高必须是你设备逻辑像素的某个倍数”，有的小伙伴可能不明白，这里我举个栗子：

假如我手上有一台逻辑像素宽高为 414pt*896pt 的 iPhone Xʀ ，而公司大佬规定必须用 720px 的宽度来做设计稿，那么我想在 Mirror App 中完美预览设计稿。那么画板预设的宽度要填写 720px，高度应设定为 **720px × 设备逻辑高度 ÷ 逻辑宽度**，即 1558px（取整数）。设定好相应的宽高就能在手机上完美呈现设计稿。

## 二、在可滚动的长页面中固定某些控件

有些时候可能想看第二屏、第三屏的页面所展示的内容，在 Sketch 中拉长了画布使其在 Mirror 中可以滚动时，通常顶部的状态栏或底部的悬浮控件都会随着屏幕的滚动而移动，这不是我们想要的效果。如图 2–1 所示：

![Mirror App 中滚动长图页面效果图：展示 UI 设计中的底部 Tab 栏没有在滚动时冻结到底部的问题。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-03-31-15e000d5832/05.gif "图2–1 顶部状态栏、导航栏和底部悬浮控件的位置没有固定")

但是在实际情况中这些组件肯定是固定不变的，如果想要模拟更真实的情况，我们要简单进行设置。

具体操作：

1. 在 Sketch 里选中要固定位置的图层或组，勾选右侧栏上的固定位置选项 “Fix position when scrolling”；
2. 打开手机上的 Mirror App，仔细端详自己的设计稿。如图 2–2 所示：

![Mirror App 与 Sketch 设置面板对比图：右侧是 Sketch 设置面板，勾选了 Fix position when scrolling 的选项；左侧是在 Mirror App 预览的效果，底部 Tab 栏在滚动时固定住了。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-03-31-15e000d5832/06.gif "图2–2 设置后状态栏、导航栏和底部悬浮控件的位置不受屏幕滚动而变化")

## 番外：安卓机怎么预览 Sketch 上的设计稿？

Sketch 在安卓端没有官方的 App 用于预览设计稿，但是安卓用户使用 Crystal 同样可以通过 WIFI 或USB 来进行实时预览。下载地址：[Crystal](https://crystal.smithy.productions/)

我也有一台安卓手机，所以用过这款软件，Crystal 不管画板怎么设置，都能自动默认宽度 100% 撑满整个屏幕，不用像 iOS 中需要设置。但是 “Fix position when scrolling” 功能不会起作用。

以上是我在工作时的一些发现，以笔记文章的方式记录下来，欢迎探讨。