Created with Pixso. Created with Pixso.
Created with Pixso. Created with Pixso.
用户指南
视频教程
常见问题
快速入门
工具栏
图层面板
属性面板
画布
选择图层
图层父子级关系
观察者模式
文件封面
分享与权限
图片、形状和工具
图片
形状和工具
导入导出
导入文件
组件库迁移
导出文件
文本
文本属性
创建文本
添加 Emoji
文本超链接
创建和应用文本样式
查找和替换文本
转换文本为矢量路径
字体
字体库
使用字体
字体缺失
使用设备中的本地字体
第三方字体工具
图层属性
图层布局设置
属性类型
属性设置
图层搜索
组件和样式
组件
样式
资源库
原型和动画
滚动溢出
原型事件设置
创建原型
原型交互流程
原型播放
图片功能
调整图片的填充属性
图片导入及粘贴
批量添加图片
将图片上传为填充
裁剪图片
交付与协作
设计系统管理(DSM)
设计稿转代码 (D2C)
研发模式
历史版本
分区
聚光灯模式
开发标注面板
切图
形状和工具
形状工具
容器
组合
布尔运算
缩放工具
蒙版工具
矢量编辑
插件
插件侧边栏
工作台
团队
文件夹
快捷键
常用快捷键
工具
缩放和移动
视图
文本
形状和编辑变换
选择图层
鼠标
排列
组件
字段编辑
数字运算
Pixso AI
生成设计稿
编辑设计稿
生成图片
编辑图片
Pixso MCP
AI 调用自定义设计系统

原型播放



原型播放的入口


可以通过以下三种方式开始预览原型:


  • 在编辑页面界面的右上角点击「播放」按钮
  • 原型模式下的右侧面板中的流程列表,鼠标悬停后的播放按钮
  • 画板的左上角的「交互流程」播放按钮



设备模型


演示模式支持添加设备模型,还原更真实的实机效果,设计界面右侧 Tab 栏【原型】模块下,在【演示模型】内点击设备模型下拉菜单,选择各种类型的设备模型


Tip: 同样还可以切换设备模型的横屏或者竖屏效果



聚光灯模式


演示模式下,可以使用聚光灯模式让所有在该文件演示模式下的访问者聚焦于您所在的页面。

开启聚光灯模式后,演示参与者将自动跟随您的页面浏览,轻松实现多人演示时的进度同步。


启动方式:

在顶部 Tab 栏下,悬停在自己的头像下,会出现弹窗并显示按钮【跟随我的视角】,单击即可对演示模式下的其他访客发起聚光灯模式。


🔔提示:点击其他用户头像,也可跟随其他用户的视角。



演示分享


在演示界面右上方点击「分享」按钮即可打开分享弹窗,点击「复制链接」发送给其他人,对方可以通过链接直接访问该文件的演示界面



演示预览比例


原型演示预览支持三种不同的预览比例,以及三个独立设置项,你可以根据自己的预览偏好进行设置

  • 「全览」:顶部或宽度对齐的方式,显示画板内所有的内容,边缘处会自动保留间距
  • 「真实尺寸(100%)」:完全按照画板的实际尺寸100%显示大小
  • 「适应窗口」:根据宽度和高度比例自动适配,若是长页面则高度与预览显示区域对齐,若是宽页面则宽度与预览显示区域对齐
  • 「高亮可交互区域」:演示页面中可以设置可交互的图层区域,可切换为不显示、单击时、或保持高亮状态
  • 「隐藏操作界面」:将直接隐藏演示页面中的所有操作界面
  • 「离线演示缓存」:将该文件内容缓存在浏览器中,适合在一些网络不稳定或即将脱机的场景下使用

Tip:点击右上角的「全屏」按钮,即可进入全屏预览模式,最大化浏览的宽口全屏显示内容



预览画板切换


鼠标点击预览区域顶部的左右箭头时(快捷键:←→),即可进行演示画板的左右切换,点击重新播放按钮(快捷键:R),可以快速回到第一个画板



高亮可交互区域


关闭

交互热区在任何时候都不会显示高亮提示。


闪烁

鼠标点击演示预览区域非交互区域的任意位置,添加原型交互事件的热区会高亮闪烁,帮助你快速查看画板中的交互热区位置。


常亮

支持交互的热区会一直显示高亮,适用于首次进行演示交互,不确定交互热区的用户。

TIP:快捷键 Shift + 8,可以切换热区的高亮显示状态



交互流程


在原型播放预览界面下,界面左侧 Tab 栏可切换至「流程」,您可以在这里选择查看「交互流程」中的某个「流程」,也可查看「流程」下的「画板」,点击既可以切换你所需要的画板



隐藏操作界面


在顶部右侧下拉菜单中,选择【隐藏操作界面】,会直接进入沉浸模式,隐藏界面上所有的操作界面,减少预览时的干扰,单击 Esc,即可唤醒操作界面。

Tip:快捷键

Windows:Ctrl + \

macOS:Command + \

可以快速启动隐藏状态,更沉浸的预览内容



本文是否有帮助?

{{ prePage.title }} 上一篇
原型交互流程
下一篇 {{ nextPage.title }}
调整图片的填充属性