即时设计教程 • 预览

对于设计师而言,在创作过程中实时预览设计稿可以快速了解呈现效果,针对性修改;对于团队其他成员而言,预览功能可以减弱各个工具栏的干扰,排除设计稿中画板以外的草稿或手动标注等内容,操作成本更低,团队效率更高。

预览功能入口

在编辑页顶栏右上角处可找到「预览」功能入口。
在创建任意画板后,即可从该入口进入预览页。


 

预览页结构

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

 

顶栏结构

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



 

编辑入口

点击 「编辑」 按钮可以进入编辑页,主要便于从分享链接进入预览页的团队成员快速进入。

热区提示

如果给设计稿添加了原型交互事件,「热区提示」可帮助快速查看画板中设置交互事件的图层。单击当前页任意位置,热区提示都将以淡蓝区域闪烁提示。

 

分享

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


 

全屏预览

点击 「全屏」 功能可立即最大化浏览器窗口将内容全屏显示,以便完整预览设计内容。

画板预览顺序

画板的默认预览顺序为目录中从上到下排列的顺序。

在编辑页选中某个画板点击预览时,将默认从该画板的位置开始预览。

切换方式

鼠标悬停在预览区域时,可点击页面左右侧切换按钮切换;
也可以直接使用键盘快捷键切换:
① 方向键可控制上一个、下一个画板切换;
② 按空格键Space可以连续切换查看下一个画板;
③ 按R键可以快速回到第一个画板。
还可以在底部页码处点击展开「缩略图列表」按钮,通过缩略图形式可以查看所有画板;点击可快速切换显示该画板。


 

修改预览比例

你可以通过个人的预览习惯调整预览比例。点击右上角预览比例或直接按快捷键Z可以快速切换四种预览尺寸类型:

  • 实际尺寸

完全按照原画板的 100% 大小显示。

 

  • 最佳尺寸,主要用于预览完整画板

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

 

  • 填充画布,可优化切换上下页时画板尺寸跳跃的体验

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

 

  • 宽度适配,主要用于预览长页面。

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