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

原型事件设置



了解原型事件


「触发」「操作」「目标」「动画」四者结合就会组成一个完整的原型事件,我们可以这样简单去理解

触发:事件在什么情况下会发生

操作:事件发生后会进行什么行为

目标:行为的目标对象是谁

动画:丰富事件发生行为的多样性




原型触发


触发:决定了在发生什么动作下事件会被激活开始生效


  • 「单击/双击」:鼠标点击/双击热点

    Tip:单击/双击通常用于常规的作用,例如打开链接,或者单击按钮的场景)


  • 「悬停时」:将鼠标悬停在热点上时触发操作

    Tip:悬停时通常用于按钮的功能提示展示,或者通过悬浮时的状态变化提示用户该区域可交互


  • 「拖拽」:将鼠标按住在热点上进行某个方向拖拽时触发操作

    Tip:悬停时通常用于轮播图或者抽屉的侧边栏


  • 「按下时」:当用户点击并按住鼠标在热点时触发该操作

    Tip:按下时通常用于移动端的场景,例如在iOS上使用3D Touch


  • 「鼠标移入」:当鼠标进入热点区域时,将触发该操作

    Tip:鼠标移入通常提示用户该热区可交互,或者不需要鼠标点击确认就切换信息场景,例如查看日期时,随着鼠标在日期上移动,对应动态展示该日期的信息


  • 「鼠标移出」:当鼠标离开热点区域时,将触发该操作

    Tip:鼠标移出的使用场景和鼠标移出相识,一般二者会结合起来一起使用


  • 「按下」:当鼠标按下热点时就会触发操作

     Tip:按下通常是在可点击热气可产生变化的场景下使用,例如windows系统,点击桌面上任意程序图标时,会进入一个选中状态


  • 「松开」:当鼠标松开热点时就会触发操作

    Tip:松开通常时结合按下的场景来一起使用,例如拖动滚动条的场景,用户需要按下滚动条进行拖动,完成拖动时松开鼠标离开选中状态


  • 「延时」:类似一个计时器,但倒计时归0时,自动触发事件发生

    Tip:延时适应自动轮播图的情况,例如banner图就会自动滚动至下一页的效果就可以用延时实现



原型操作


操作反馈设置

操作:事件发生后会进行什么行为

原型操作决定着事件被触发后,会进行什么样的行为


  • 「跳转到」:触发交互事件后,跳转至指定画板
  • 「打开弹窗」:指定的画板作为弹窗的形式在当前页面中打开
  • 「切换到弹窗」:从A弹窗切换到B弹窗使用,一般是结合「打开弹窗」一起使用
  • 「关闭弹窗」:关闭当前弹窗
  • 「返回」:返回至上一个画板中
  • 「打开链接」:打开新的窗口访问输入的网址



重置目标容器状态

在部分操作及目标图层类型下支持重置目标容器的状态,包含

重置滚动位置:将目标容器的滚动状态重置为默认状体;

重置组件状态:将目标容器内的所有组件重置为初始状态;

重置视频状态:将目标容器内的视频重置为默认的播放状态及进度;




多重交互事件设置

Pixso 支持为单一触发设置多个操作反馈,以达到一些加载、连续操作、视觉体验上的效果


添加方式

在已设置单交互事件的弹窗上方,单击【 + 】新增交互操作事件


新增操作后,只需要像正常设置交互操作反馈一样设置内容即可



原型目标


目标:触发操作的目标对象是谁,目标决定事件最终的目的地在哪里


Tip:仅可以选择当前页面下的画板,暂不支持跨页面进行跳转



原型动画


动画:丰富事件发生行为的多样性


原型动画默认为「即时」,并且支持多种动画效果,不同的动画效果组合可以生产多种不同的动画表现

Tip:每一种动画下都有动态的效果预览,辅助您更好的去了解动画的实际效果

本文是否有帮助?

{{ prePage.title }} 上一篇
滚动溢出
下一篇 {{ nextPage.title }}
创建原型