免费实时预览Adobe XD UI设计稿的神器——标记狮

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

我们都知道在UI设计的过程中,实时预览自己的设计稿是非常重要的

并且要放置在真实的设备中预览才能更好地确保我们设计稿的准确性


使用标记狮可以免费实时预览Adobe XD设计稿,并且不限制访问的设备,下面说一说使用的技巧:


01 移动端预览


我们先来说下移动端UI如何使用标记狮在手机或Pad中预览你的设计稿(以苹果手机为例)

首先打开左侧的实时预览菜单,打开你的XD文件,开启列表上的实时预览开关就会看到左侧出现的预览二维码。(划重点:查看预览的手机wifi要和电脑同处一个局域网内噢!)


96E23EF0-0B49-492D-9B42-7A3295F1D679.png


然后拿出手机的相机应用扫描图上的二维码就可以在手机浏览器端打开你的预览界面,

这个时候你可以在手机上左右滑动来切换你设计的页面,或者在XD中点击你要预览的那个画板就可以了。

iOS系统直接在浏览器中预览不能全屏,所以为了全屏预览,需要在浏览器中将这一预览网页添加到主屏幕,点开这个主屏幕的快捷方式就可以进行全屏预览了。






如果你的局域网未更换,每次新的预览不需要再重新扫码,直接点开这个快捷方式就可以继续预览了。

安卓手机直接在浏览器中就能全屏预览的。

要记住先要在标记狮软件中开启文件的预览开关喔,这可以节省设备的资源开销,所以大家只开启需要预览的文件,会使得预览更加顺畅。

标记狮的实时预览功能是基于同一个局域网的,所以只要在同一个局域网内,你的主管你的产品都可以预览你的设计稿,只要将二维码分享给他们就可以了。


02 PC网页预览


接下来说说网页设计师如何预览设计稿,同样的,开启实时预览开关,在二维码下方会有一个链接,你可以点击浏览器直接打开预览的网址


6D9A97CA-58D3-432C-9D8E-F1EA866DA46C.png


这样就可以在浏览器中预览自己设计的网页了,这一功能充分考虑到了网页设计预览的真实性,全屏没有任何多余菜单的干扰



大家可以在浏览器中完整地看到自的设计稿,相信这一出发点对网页设计师是非常受用的。

以上是用标记狮实时预览Adobe XD的UI设计稿的全攻略, sketch预览的方法也是一样的,你get了吗?