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

切割

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

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

切割后的图片:

交互

交互动效的构成:

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


    删除交互:选中DELETE即可

热区

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

热区可以复制

交互选中也可以复制

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

动态面板

定义:

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

创建动态面板

方法一:在元件里直接拖

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

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

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

设置滚动:

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

元件的显示/隐藏

弹窗

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

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

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

元件的交互样式

1.鼠标悬停、按下

2.元件选中、禁用

3.元件焦点获取

设置交互样式:

Web表单元件

表单元件位置如下:

文本框设置

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

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

设置提示字体样式:

下拉框设置

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

单选按钮

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

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



制作表格

Axure自带表格

新建表格

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

矩形表格

新建表格

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

插入内容

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

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

内联框架

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

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

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

内部链接-实现页面切换

内联框架-选择链接目标

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

相关推荐
Tim00712 小时前
别再全文检索了:Smart Connections 让相关笔记自己跳出来
产品经理
辜月知时16 小时前
研发转产品,到底应该怎么转?
产品经理·研发·产品思维·研发转岗
结构化知识课堂16 小时前
Axure产品原型设计:AI能画原型了,为什么你还得懂这些术语?
人工智能·axure·原型设计·ai产品经理
卿卿的产品经理日记1 天前
【AI产品经理实战】Day 34|计算机科学速成②:从水流开关到 Unicode,把整个电脑拆成一长串 0 和 1
人工智能·笔记·科技·学习·产品经理
卿卿的产品经理日记2 天前
【AI产品经理实战】Day 37|拆开 JSON 与 EXE:数据都有格式
人工智能·笔记·python·json·产品经理
cspttty2 天前
2027校招AI产品经理准备指南:数据科学专业如何从模型走向产品
人工智能·产品经理
凌云若寒2 天前
BarTender官网下载打印机驱动
运维·服务器·前端·网络·产品经理
rolt2 天前
[重写]《软件方法》全流程引领AI第1章-1.3为什么要使用标准建模语言(202610更新)
软件工程·产品经理·架构师·uml·本体·fde
Water_based2 天前
滚喷机转起来的时候,水性漆在做什么
经验分享·产品经理
领麦微红外3 天前
多视场档位灵活适配 W系列搭建中距离红外测温矩阵
产品经理·智能硬件