【Axure绘制原型】图片切割、交互动效、热区、动态面板、元件显示隐藏、表单元件、表格、内联框架

切割

功能:将图片切成多部分。

通过移动鼠标可以调整两条虚线的位置,点击。虚线相当于切割刀,被虚线分离的部分将变成单独的图

切割后的图片:

交互

交互动效的构成:

  1. 目标:谁触发交互(元件)
  2. 事件:什么动作触发(单击、显示等)
  3. 动作:触发后执行什么(跳转、显示等)
  4. 情形:触发的条件(变量值大于xxx)
    选中目标 - 左侧菜单栏点击"交互" - 新建交互 - 选择触发事件(如鼠标单击)- 选择动作(如打开链接)
    设置情形:


    删除交互:选中DELETE即可

热区

点击热区区域内都会触发交互

热区可以复制

交互选中也可以复制

当有多级的时候,可以设置"返回上一级"

动态面板

定义:

  • 一个用来存放多个元件的容器
  • 其中包含多个状态,但同时只能显示一个
  • 状态之间,可以通过交互动作控制切换和动画

创建动态面板

方法一:在元件里直接拖

方法二:在已经创建的元件上右击:

双击动态面板,点击复制图标,可以在同一个位置建立一个同样的动态面板

面板建立好后关闭,点击动态面板,新建交互-设置为下一个状态。

设置滚动:

设置banner鼠标点击左右切换的动作:

元件的显示/隐藏

弹窗

设置隐藏:选中图片,点击右上角图标 / 右键图片-设为隐藏

在控制的区域设置一个热区,对热区新建交互,如下:

可以在隐藏的输入框内添加一个热区,将热区和输入框组合,设置热区交互为单击隐藏,更新原来"热门"控制的目标名,可以实现点击输入框关闭的效果。

元件的交互样式

1.鼠标悬停、按下

2.元件选中、禁用

3.元件焦点获取

设置交互样式:

Web表单元件

表单元件位置如下:

文本框设置

文本框内文本类型和提示文本设置:

文本框内提示文字样式设置:

设置提示字体样式:

下拉框设置

双击下拉框,可以通过添加删除来更新选项,或"编辑多项"进入文本编辑选项。

单选按钮

经过如下步骤,按钮只能选中一个

设置单选按钮选中后的颜色:



制作表格

Axure自带表格

新建表格

给所有单元格批量设置为同一高度

矩形表格

新建表格

拖动四个矩形,全选可以统一调整长高

插入内容

拖入三级标题/文本等,编辑字体样式

看矩形多高,例如37,则调整字体的字间距为37

内联框架

  1. 嵌入外部:网页(视频、网页、演示效果)
  2. 嵌入内部:框架切换

    双击"内联框架",输入网址即可

    热区设置框架中打开链接:

内部链接-实现页面切换

内联框架-选择链接目标

选中要跳转的内容-新建交互-单击时-框架中打开链接

相关推荐
Data_agent3 天前
Pantherbuy模式淘宝 / 1688 代购系统(欧美市场)搭建指南
大数据·python·产品经理
职业码农NO.14 天前
产品经理的 AI 工作流
产品运营·产品经理·产品设计
产品人卫朋4 天前
「产品、IPD、战略、流程」知识图谱速查清单.v7.0
人工智能·知识图谱·产品经理·需求分析·创业·ipd流程·华为ipd
向懒羊羊学习的大猫4 天前
【互联网产品助理的成长之路(7)】需求中止的判断方法
产品经理
rolt4 天前
软件需求设计方法学全程实例剖析幻灯片02-愿景[202512更新]
产品经理·需求分析·架构师·uml
rolt4 天前
软件需求设计方法学全程实例剖析幻灯片03-业务用例图和业务序列图[202601更新]
产品经理·需求分析·uml
前端阿森纳6 天前
toB系统如何提升系统质量?
产品经理·产品
产品设计大观6 天前
数据分析后台/移动端设计要点梳理,附AI生成原型图实战案例
大数据·人工智能·数据分析·产品经理·墨刀·数据分析后台·ai生成原型图
产品人卫朋7 天前
卫朋:IPD流程市场管理篇 - 业务模式vs盈利模式vs交易模式
大数据·产品经理·创业·ipd流程·流程咨询·华为ipd