axure原型图案例模板（原型图axure教程）
展开全文
https://img.axure9.com/static/axure/images/logo-new.png
我们讲解了一些关于交互的基本理论知识，比如交互定义、交互事件、交互用例、交互动作。下面是一些实际应用案例，帮助你加深对交互的理解。axure原型模板https://www.axure9.comAxure模板网为产品经理提供各种软件开发Axure RP产品原型模板下载，Axure组件及素材免费下载,为产品经理提高设计效率，保持产品一致性。
一、导航菜单样式
我们以简书导航为例，来说明所涉及的交互风格和交互事件的设置。
01观察交互效果。
通过观察，我们可以看到简书的导航有以下两种交互效果:
鼠标悬停在导航上方时，填充色变为灰色鼠标点击导航时，文字变为红色，打开新页面
02画线图
首先，从目录中拖动三个文本标签到设计区域，设置文本中心，编辑三个文本标签的内容:发现、注意和消息。三个文本标签在水平方向上等距离分布。
03设置互动事件
谁什么时候做了什么？这是上一篇文章中流行的交互定义。我们总结了主体、事件和动作是交互的三个基本结构。那么这个案例的交互中这三个基本结构是什么呢？我们来拆解分析一下。通过观察，我们很容易看出有三种交互:鼠标悬停、选择和鼠标点击。
鼠标悬停样式
交互分析
谁:发现、关注、新闻
当:鼠标点击时。
你做了什么？打开链接并在当前页面加载新页面。
设置:选择文本导航，点击新建交互，在事件列表中选择样式交互“鼠标经过”，将弹出窗口的填充颜色设置为灰色。
鼠标悬停样式
选定的样式
交互分析
谁:发现、关注、新闻
何时:选中时。
你做了什么？导航文本颜色变为红色。交互设置:选择文本导航，点击新建交互，在事件列表中选择样式交互“检查”，在弹出窗口中设置文本颜色为红色。
为了保证同一时间只选择一个导航，我们需要提前将三个导航菜单设置为一组。选择三个导航菜单，右键选择设置选项组，命名为navigation。
选定的样式
鼠标点击事件
交互分析
谁:发现、关注、新闻
当:鼠标点击时。
你做了什么:打开链接，在当前页面加载新页面交互设置:选择文本标签，点击新建交互，在事件列表中选择组件事件“鼠标点击时”，选择目标组件，添加打开链接的动作，选择打开的页面，选择“在页面中打开”作为打开方式。
鼠标点击
二、显示/隐藏对话框
点击一个组件，切换另一个组件或一组组件的可加性，这在Axure中也很容易实现。我们以表单中常见的删除确认框为例。
01观察交互效果。
点击“删除”按钮时，页面弹出对话框，提示：确认删除该条信息？（弹框下方一般有确认和删除两个按钮）点击“确认”按钮，对话框关闭，信息删除；点击“取消”按钮，对话框关闭，信息保留
02画线图
从目录中拖动一个按钮到设计区，将按钮文本编辑为“删除”；将一个矩形元素拖动到设计区域，调整其大小，将一个文本标签和两个按钮拖动到设计区域，编辑文本内容(确认删除此消息)和按钮文本(确认/取消)。调整这些组件的位置，选择矩形、文本和两个按钮，然后单击工具栏中的组合按钮，将这些组件设置为一个组合并隐藏该组合。
03互动设置
我们需要为三个按钮设置鼠标点击事件:删除、确认和取消。
删除按钮-鼠标点击事件
谁:删除按钮。
当:鼠标点击时。
你做了什么:显示删除确认对话框窗口。
设置:选择删除按钮，点击新建交互，选择“鼠标点击事件”，选择删除按钮作为目标元素，选择显示/隐藏动作，设置显示。
显示删除确认对话框。
确认按钮-鼠标点击事件
谁:确认按钮。
当:鼠标点击时。
你做了什么:隐藏“删除确认”对话框。设置:选择确认按钮，点击新建交互，选择“鼠标点击事件”，选择确认按钮作为目标元素，选择显示/隐藏动作，设置隐藏。
隐藏确认对话框
删除按钮的交互设置与确认按钮基本相同(此处不考虑表单数据的删除)，只是目标组件不同。
三、页面载入
我们以简书导航为例。
观察效果:页面默认选择推荐，显示推荐文章列表。
线框图表:线框图表的绘制和所选样式的设置在上面的“导航菜单样式”中已有说明，这里不再赘述。
交互式设置
交互分析
谁:简介的第一页
何时:页面加载时。
你做了什么:选择推荐的导航。
设置:在不选择任何组件的情况下，点击页面的白色部分空，点击新建交互，在页面加载时选择事件，在动作中选择，找到目标组件“推荐”导航。 真是 收益 匪浅 没看完~~~~~~ 先顶，好同志 不错不错，楼主您辛苦了。。。 过来看看的 过来看看的 帮你顶下哈！！
页:
[1]