Axure之交互样式&事件&动作及情形(详细案例分析)

这篇具有很好参考价值的文章主要介绍了Axure之交互样式&事件&动作及情形(详细案例分析)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一.交互样式

  1.1 交互样式的作用

   1.2 案例

二.交互事件 

 2.1交互事件的作用

 2.2 案例

 2.3 独属事件

三.交互动作

    3.1 案例

 四.情形

 4.1 以分数等级为例

4.1.2 案例 

   4.2 下拉列表的情形案例 

五.案例

5.1 erp登录的跳转 

5.2 erp的界面跳转

5.3 省市联动

5.4 滚动面板

5.5下拉刷新


一.交互样式

        在Axure中,交互样式是一种用于定义交互元素在不同状态下的外观和行为的功能。通过交互样式,您可以为元素定义不同的外观和动画效果,以模拟用户与应用程序的交互过程。

  1.1 交互样式的作用

  1.  规范化交互元素:通过交互样式,您可以为按钮、链接、文本框等交互元素定义一致的外观和行为,使其在不同页面和状态下保持统一的风格和效果。
  2. 提升用户体验:通过交互样式,您可以为交互元素添加动画效果、状态变化等,提升用户与应用程序的交互体验,增加用户的参与感和满意度。
  3.  模拟应用程序行为:通过交互样式,您可以模拟应用程序中的各种交互行为,如按钮点击、下拉菜单展开、弹出窗口等,让用户能够更好地理解应用程序的功能和操作方式。
  4.  便于交互设计和评审:通过交互样式,您可以快速创建和修改交互元素的外观和行为,便于团队内部的交互设计和评审,提高工作效率。

     1.2 案例

              在交互样式里上面一排是事件,可以选择什么情况下出现不同的样式,下面的样式没有勾选那就是默认;如果想要修改就需要勾选前面的复选框接着点击后面的进行选择,最后点击确认即可

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axureAxure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

这里我运用的是按下的一种情况

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

二.交互事件 

        在Axure中,交互事件是一种用于定义交互元素在特定触发条件下所触发的行为和效果的功能。通过交互事件,您可以为元素添加各种交互行为,如点击、悬停、滚动等,以模拟用户与应用程序的交互过程。  

        2.1交互事件的作用

  1.  触发交互行为:通过交互事件,您可以定义当用户与交互元素进行特定操作时所触发的行为,如显示/隐藏元素、跳转到其他页面、执行动画效果等。
  2. 模拟应用程序行为:通过交互事件,您可以模拟应用程序中的各种交互行为,如按钮点击、下拉菜单展开、表单提交等,让用户能够更好地理解应用程序的功能和操作方式。
  3. 增强用户体验:通过交互事件,您可以为交互元素添加动态效果、状态变化等,提升用户与应用程序的交互体验,增加用户的参与感和满意度。
  4.  用户测试和验证:通过交互事件,您可以创建交互式原型,让用户参与测试和验证应用程序的交互流程和功能,以收集反馈和改进设计。 

 2.2 案例

        右边的交互事件,在Axure中还是比较丰富的,点击一个交互事件,就可以去改变一个点击后的样式

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axureAxure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

 效果:

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

         2.3 独属事件

                面板切换事件、复选框的选中事件以及下拉改变事件不是所有的元件都有这些事件

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

        三.交互动作

        打开交互编辑器,就可以给元件添加事件和动作了

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

    3.1 案例

                一些常用动作

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

 四.情形

        4.1 以分数等级为例

设置事件时,我们点击交互编辑器的启用情形 

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

点击启用情形之后,在里面输入条件,而且下面会随着输入的条件改变而发生改变,这样就可以更好的理解那个条件是否有逻辑     

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

添加完情形之后,可以选择某个情形的结果,比如改变文本框的文本 

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

当然,也可以改变情形条件是否则如果(一步一步的,当条件满足时,就不会进行到下面去)还是如果

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

        4.1.2 案例 

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

   4.2 下拉列表的情形案例 

                 同样的,也是给下拉列表设置情形

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

五.案例

        5.1 erp登录的跳转 

                上一篇已经分享了如何绘制可以切换的登录页面,现在和大家分享点击跳转以及判断

                ①在输入框下面加一个文本标签,比如:账号密码错误,将其隐藏

                ②给按钮设置情形,当密码和账号不等于正确的时候,就显示文本标签,等于的话就跳转页面                

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

       5.2 erp的界面跳转

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

        5.3 省市联动

        这里是两个一个是省一个是市区,市区随着省的改变而改变,

           ① 首先省一个动态面板,市区一个动态面板 

           ②  将省里面的数据输入好  

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

                ③接着在输入市区里面的数据,和上面一样,并且那个省的给其下拉框命好名字 ,给每一个省下市区弄一个下拉框,输入对应的数据    

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

                ④ 给省的下拉框,设置情形和交互事件

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

最后看看效果吧

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

5.4 滚动面板

         ①首先添加一个动态面板,在里面添加一个矩形,这个矩形要比动态面板长,在矩形内加入内容

         ②选中内容右击,选中滚动条/垂直滚动

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

         效果展示:

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure

5.5下拉刷新

        ① 我们先准备好,一个刷新图标,和一张刷新界面,以及文本标签(刷新成功)

        ② 给刷新图标和文本标签设置隐藏

        ③给刷新界面设置交互事件---向下拖动

        Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure       

效果:

Axure之交互样式&事件&动作及情形(详细案例分析),产品经理的必备工具使用以及项目流程,axure文章来源地址https://www.toymoban.com/news/detail-763744.html

到了这里,关于Axure之交互样式&事件&动作及情形(详细案例分析)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Axure的交互与情形

    1.用户需求与行为的了解:在进行交互设计之前,我们需要深入了解用户的需求和行为模式。通过用户研究和分析,我们可以得到关于用户喜好、行为习惯和心理需求的重要信息,从而指导设计决策。 2.创造简洁直观的交互体验:在设计交互原型时,我们应追求简洁和直观的

    2024年02月03日
    浏览(35)
  • Axure之中继器的使用(交互&动作&reperter属性&Item属性)

    目录 一.中继器的基本使用  二.中继器的动作(增删改查) 2.1 新增 2.2 删除  2.3 更新行  2.4 效果展示   2.5 模糊查询 三.reperter属性 在Axure中,中继器(Repeater)是一种功能强大的组件,用于 创建重复的数据集合或列表 。它允许原型中快速 生成多个相似的元素 ,并根据数据

    2024年02月04日
    浏览(39)
  • 【OSG案例详细分析与讲解】之五:【3D交互式动画】

           OpenSceneGraph是一个强大的3D图形引擎,用于创建高质量、交互式的3D图形应用程序。其中一个常见的应用场景是 创建动画效果 。本节文章将介绍如何使用OSG和 osgWidget 库创建一个 交互式的3D动画程序 ,包括创建动画几何体、定义动画更新、具有鼠标事件的颜色标签、具

    2024年02月01日
    浏览(36)
  • 超详细Axure交互原型移动端元件库,APP高保真UI组件(手机移动端交互素材)

    原型组件对于产品经理或者UI设计师来说事半功倍,现整理了一批新款原型图 Axure 8 组件库、高保真UI手机移动端交互素材。帮助产品经理更高效地制作高保原型。(如需 Axure 9 组件请详见文末) 文末可下载完整原型组件包~ , 包括常用组件、微信原生元件库、微信/支付宝小

    2024年02月04日
    浏览(65)
  • HarmonyOS鸿蒙开发指南:基于ArkTS开发 轻量级智能穿戴 体验应用、构建布局、绘制样式​​​​​​​和交互事件

    目录 体验应用 构建布局 绘制样式​​​​​​​ 交互事件 HelloWorld工程目录如下图所示: 图1  目录结构 pages/index/index.hml

    2024年02月01日
    浏览(38)
  • 【12JavaScript 事件】掌握JavaScript事件:详细教程、实例演示,打造交互动感网页!

    JavaScript事件是指页面或元素上发生的交互动作,例如点击按钮、鼠标移动、键盘输入等。了解和处理事件是构建交互式Web应用程序的重要基础。本教程将详细介绍JavaScript事件的基本概念、事件处理程序、事件类型以及常见的事件用法。 事件处理程序是处理事件的函数,它会

    2024年02月08日
    浏览(57)
  • 【微信小程序开发】小程序的事件处理和交互逻辑(最详细)

    在微信小程序中,事件处理和交互逻辑是开发过程中非常重要的环节,它们直接影响到用户体验和功能实现。今天为大家继续详解小程序的事件处理和交互逻辑 事件处理和交互逻辑在小程序开发中扮演着至关重要的角色。以下是几个原因: 提升用户体验:良好的事件处理和

    2024年02月08日
    浏览(61)
  • Axure中的样式

    如下图: 还有一个办法是我们选中我们的按钮,如上图,然后打开右边的样式,可以看按钮的x,y属性,类似于游戏中unity软件的x,y属性,类似于html中的right和bottom,其中x表示向左偏移量,而y表示的是向右偏移量。如下图: 可以看到此时x和y都是0,说明我们的按钮就是在原

    2024年04月28日
    浏览(27)
  • 【小程序教程】微信小程序的事件处理和交互逻辑(tap logpress touchmove input submint事件&冒泡与捕捉最详细讲解)

    为什么要学习事件处理和交互逻辑? 事件处理和交互逻辑在小程序开发中扮演着至关重要的角色。以下是几个原因: 提升用户体验:良好的事件处理和交互逻辑可以使小程序更加易用和友好,提升用户体验。通过合理设置事件触发条件和交互效果,可以使用户操作更加顺畅

    2024年02月04日
    浏览(42)
  • Axure教程—菜单滚动切换交互

    本文接受的是用Axure中的动态面板和热区制作菜单滚动切换交互 效果 预览地址:https://u5ircj.axshare.com 功能 页面滚动到某一内容部分,显示其相应的菜单。 制作 一、所需元件 矩形、动态面板、热区 二、制作过程 拖入一个矩形元件,其大小设置为1000×92,命名为”导航“ 在导

    2024年02月12日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包