对于设计师而言,在创作过程中实时预览设计稿可以快速了解呈现效果,针对性修改;对于团队其他成员而言,预览功能可以减弱各个工具栏的干扰,排除设计稿中画板以外的草稿或手动标注等内容,操作成本更低,团队效率更高。
预览功能入口
在编辑页顶栏右上角处可找到「预览」功能入口。
在创建任意画板后,即可从该入口进入预览页。

预览页结构
预览页包括「顶栏」和「预览区域」。

顶栏结构
为了简化预览页的操作流程,需要用到的功能都放在了顶栏。操作型功能包括查看、文件编辑入口、热区提示、修改预览比例、分享、全屏预览等。

编辑入口
点击 「编辑」 按钮可以进入编辑页,主要便于从分享链接进入预览页的团队成员快速进入。
热区提示
如果给设计稿添加了原型交互事件,「热区提示」可帮助快速查看画板中设置交互事件的图层。单击当前页任意位置,热区提示都将以淡蓝区域闪烁提示。

分享
点击 「分享」 功能可以复制文件链接给他人查看。

全屏预览
点击 「全屏」 功能可立即最大化浏览器窗口将内容全屏显示,以便完整预览设计内容。
画板预览顺序
画板的默认预览顺序为目录中从上到下排列的顺序。
在编辑页选中某个画板点击预览时,将默认从该画板的位置开始预览。
切换方式
鼠标悬停在预览区域时,可点击页面左右侧切换按钮切换;
也可以直接使用键盘快捷键切换:
① 方向键←
、→
可控制上一个、下一个画板切换;
② 按空格键Space
可以连续切换查看下一个画板;
③ 按R
键可以快速回到第一个画板。
还可以在底部页码处点击展开「缩略图列表」按钮,通过缩略图形式可以查看所有画板;点击可快速切换显示该画板。

修改预览比例
你可以通过个人的预览习惯调整预览比例。点击右上角预览比例或直接按快捷键Z
可以快速切换四种预览尺寸类型:
完全按照原画板的 100% 大小显示。

未超出显示区域时,按画板原大小显示;超出预览区域时,缩放到预览区域大小显示。

未超出显示区域时,等比放大到显示区域大小;超出显示区域时,等比缩小到显示区域大小。

超出显示区域宽度的将缩放到显示区域宽度显示;未超出显示区域宽度的将按原宽度正常显示。
