axure原型图案例模板（原型图axure教程）

liukai · 发表于 2024-3-1 09:48:13

　　展开全文

　　我们讲解了一些关于交互的基本理论知识，比如交互定义、交互事件、交互用例、交互动作。下面是一些实际应用案例，帮助你加深对交互的理解。axure原型模板https://www.axure9.comAxure模板网为产品经理提供各种软件开发Axure RP产品原型模板下载，Axure组件及素材免费下载,为产品经理提高设计效率，保持产品一致性。

　　一、导航菜单样式

　　我们以简书导航为例，来说明所涉及的交互风格和交互事件的设置。

　　01观察交互效果。

　　通过观察，我们可以看到简书的导航有以下两种交互效果:

　　鼠标悬停在导航上方时，填充色变为灰色鼠标点击导航时，文字变为红色，打开新页面

　　02画线图

　　首先，从目录中拖动三个文本标签到设计区域，设置文本中心，编辑三个文本标签的内容:发现、注意和消息。三个文本标签在水平方向上等距离分布。

　　03设置互动事件

　　谁什么时候做了什么？这是上一篇文章中流行的交互定义。我们总结了主体、事件和动作是交互的三个基本结构。那么这个案例的交互中这三个基本结构是什么呢？我们来拆解分析一下。通过观察，我们很容易看出有三种交互:鼠标悬停、选择和鼠标点击。

　　鼠标悬停样式

　　交互分析

　　谁:发现、关注、新闻

　　当:鼠标点击时。

　　你做了什么？打开链接并在当前页面加载新页面。

　　设置:选择文本导航，点击新建交互，在事件列表中选择样式交互“鼠标经过”，将弹出窗口的填充颜色设置为灰色。

　　鼠标悬停样式

　　选定的样式

　　交互分析

　　谁:发现、关注、新闻

　　何时:选中时。

　　你做了什么？导航文本颜色变为红色。交互设置:选择文本导航，点击新建交互，在事件列表中选择样式交互“检查”，在弹出窗口中设置文本颜色为红色。

　　为了保证同一时间只选择一个导航，我们需要提前将三个导航菜单设置为一组。选择三个导航菜单，右键选择设置选项组，命名为navigation。

　　选定的样式

　　鼠标点击事件

　　交互分析

　　谁:发现、关注、新闻

　　当:鼠标点击时。

　　你做了什么:打开链接，在当前页面加载新页面交互设置:选择文本标签，点击新建交互，在事件列表中选择组件事件“鼠标点击时”，选择目标组件，添加打开链接的动作，选择打开的页面，选择“在页面中打开”作为打开方式。

　　鼠标点击

　　二、显示/隐藏对话框

　　点击一个组件，切换另一个组件或一组组件的可加性，这在Axure中也很容易实现。我们以表单中常见的删除确认框为例。

　　01观察交互效果。

　　点击“删除”按钮时，页面弹出对话框，提示：确认删除该条信息？（弹框下方一般有确认和删除两个按钮）点击“确认”按钮，对话框关闭，信息删除；点击“取消”按钮，对话框关闭，信息保留

　　02画线图

　　从目录中拖动一个按钮到设计区，将按钮文本编辑为“删除”；将一个矩形元素拖动到设计区域，调整其大小，将一个文本标签和两个按钮拖动到设计区域，编辑文本内容(确认删除此消息)和按钮文本(确认/取消)。调整这些组件的位置，选择矩形、文本和两个按钮，然后单击工具栏中的组合按钮，将这些组件设置为一个组合并隐藏该组合。

　　03互动设置

　　我们需要为三个按钮设置鼠标点击事件:删除、确认和取消。

　　删除按钮-鼠标点击事件

　　谁:删除按钮。

　　当:鼠标点击时。

　　你做了什么:显示删除确认对话框窗口。

　　设置:选择删除按钮，点击新建交互，选择“鼠标点击事件”，选择删除按钮作为目标元素，选择显示/隐藏动作，设置显示。

　　显示删除确认对话框。

　　确认按钮-鼠标点击事件

　　谁:确认按钮。

　　当:鼠标点击时。

　　你做了什么:隐藏“删除确认”对话框。设置:选择确认按钮，点击新建交互，选择“鼠标点击事件”，选择确认按钮作为目标元素，选择显示/隐藏动作，设置隐藏。

　　隐藏确认对话框

　　删除按钮的交互设置与确认按钮基本相同(此处不考虑表单数据的删除)，只是目标组件不同。

　　三、页面载入

　　我们以简书导航为例。

　　观察效果:页面默认选择推荐，显示推荐文章列表。

　　线框图表:线框图表的绘制和所选样式的设置在上面的“导航菜单样式”中已有说明，这里不再赘述。

　　交互式设置

　　交互分析

　　谁:简介的第一页

　　何时:页面加载时。

　　你做了什么:选择推荐的导航。

　　设置:在不选择任何组件的情况下，点击页面的白色部分空，点击新建交互，在页面加载时选择事件，在动作中选择，找到目标组件“推荐”导航。