MasterGo实时镜像预览功能详解与使用技巧

最近好几个做UI的朋友问我，MasterGo那个实时镜像预览到底怎么用，说每次改完设计稿还得手动导出、发微信、再在手机上看，来回折腾特别浪费时间。其实这个功能藏得不算深，但官方说明写得比较官方，很多人扫一眼就略过了。我自己用下来最大的感受就是：一旦习惯了实时镜像预览，真的回不去了，改一个按钮颜色，手机平板上的画面立马跟着变，这种即时反馈对做移动端项目的同学来说太重要了。下面我就按自己实际使用的顺序，把这个功能的开启方式、适用场景和几个容易踩坑的地方一次讲清楚。

实时镜像预览到底是个啥，能解决什么问题

简单说，MasterGo - 实时镜像预览就是把你在电脑上正在编辑的设计稿，实时投到手机、平板或者其他浏览器窗口里。你在PC端动一下，被镜像的设备上几乎同步刷新，不需要保存、不需要导出切图、更不用重新扫码。以前我们做移动端界面，设计师改完一版丢到群里，前端同学拉下来跑真机，发现间距不对再截图回去，一来一回半小时没了。有了实时镜像预览，设计师自己就能在真机上看到实际效果，字号在小屏上会不会太小、点击区域够不够大，当场就能判断。尤其是做适配的时候，iPhone SE和Pro Max的显示差异一眼就能对比出来，不用反复问开发“这个在真机上长啥样”。

具体怎么开启，手把手走一遍

打开MasterGo桌面端或者网页版，进入你的设计文件，在右上角找到那个像小电视或者投屏一样的图标，点一下会弹出一个面板。面板里会生成一个链接或者二维码，手机扫码、或者把链接复制到手机浏览器打开，镜像就建立了。这里有个小细节：手机和电脑最好连同一个WiFi，不然偶尔会卡顿或者连不上，我刚开始用的时候就吃过这个亏，以为是功能坏了，其实是网络不在一个段。连上之后，你在电脑上选中哪个画板，手机端默认就显示哪个画板，也可以手动在手机上切换。另外，如果你想让镜像画面固定在某个画板上不跟着电脑的选中状态跑，面板里有个“锁定当前画板”的选项，勾上就行，调试单个页面的时候特别省心。

几个我踩过坑才总结出来的使用技巧

第一个，实时镜像预览对原型交互的支持是有限度的。如果你在MasterGo里做了页面跳转、点击热区这些交互，镜像端基本能正常触发，但像一些复杂的滚动吸顶、手势滑动，镜像端的表现和真机原生还是有细微差别，别完全依赖它来测交互，最终还是要上真机跑一遍。第二个，镜像画面偶尔会延迟一两秒，尤其是画板内容特别多、图层特别复杂的时候，这时候别急着刷新，等一等就好，频繁断开重连反而更慢。第三个，多人协作的时候，如果你开着实时镜像预览，别人改了同一个文件，镜像端也会跟着刷新，有时候会突然跳一下，这是正常的，不是bug。第四个，做长页面设计的时候，镜像端默认是整页缩放的，想看细节得手动放大，建议配合“适应宽度”和“实际大小”两个按钮切换着看，效率会高很多。

哪些人最该把这个功能用起来

如果你是做移动端UI的设计师，MasterGo - 实时镜像预览几乎是你每天都会点开的功能，比导图省事太多。如果你是前端开发，想快速核对设计稿在真机上的还原度，也可以让设计师开个镜像链接给你，你直接在手机上看，不用等切图。还有做产品经理或者运营的同学，需要快速评审页面效果，镜像预览也能让你在手机上直接看最新稿，不用等人发截图。总之，这个功能不是什么花哨的噱头，就是实打实省时间的工具，用顺了之后你会发现，以前那些“改完等导出”的碎片时间，加起来其实挺可观的。建议你今天就打开一个旧文件，扫码连一下试试，感受一次实时同步的爽快感，基本就离不开了。