Axure9数字加减交互案例

这篇具有很好参考价值的文章主要介绍了Axure9数字加减交互案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

数字加减交互效果在Axure案例中很常用,在移动端最常见的形式就是购买商品时选择添加数量,下面就按照移动端购买商品时添加或减少来做案例。

这是实际案例

axure9怎么实现加1,交互,axure,ux

             axure9怎么实现加1,交互,axure,ux

    首先我们要实现的交互效果是当点击“+”时,文本框内数字加1,当点击“-”号时文本框内数字减1。

这里我们可以用三种方法来实现这个效果,每种方法都有不同的使用场景

第一种方法

打开Axure9新建一个文件需要的组件就是两个圆形,一个文本框。

设置圆形尺寸为30*30,两个圆形分别命名为加和减,文本尺寸为80*32,命名为数量。 axure9怎么实现加1,交互,axure,ux 

 

在文本框内输入数字0,可调整边距使文字居中axure9怎么实现加1,交互,axure,ux

 

 选择Axure导航栏中项目列表中的全局变量,新增全局变量 num   默认值填为 0。axure9怎么实现加1,交互,axure,ux

axure9怎么实现加1,交互,axure,ux 

 然后设置圆形“加”的交互效果,选中圆形“加”新建交互>选择单击时>设置文本>选择原件为数量,点击fx设置变量值,清空原有的数据点击插入变量和函数,选择全局变量“num”点击确定。然后再添加动作设置变量值,选择变量“num”点击fx设置变量值,清空原有的数据点击插入变量和函数,选择全局变量“num”,手动在双括号内输入+1点击确认,在交互效果页面让设置变量值在设置文本前。

交互逻辑是当鼠标点击“加号”时,使文本框的内容等于全局变量“num”的值(之前默认全局变量的值为0)因为要让文本框的数值增加,所以还要设定变量“num”的值加1   [[num+1]] ,但是要先让变量“num”+1,再使变量“num” 赋值于文本框,所以交换两个交互效果的位置。

axure9怎么实现加1,交互,axure,ux axure9怎么实现加1,交互,axure,uxaxure9怎么实现加1,交互,axure,uxaxure9怎么实现加1,交互,axure,ux

 

 同理可得点击“—”号时,使文本框的数值减1,可以根据“加号”的设置方法来设置“减号”。axure9怎么实现加1,交互,axure,ux

演示效果 axure9怎么实现加1,交互,axure,uxaxure9怎么实现加1,交互,axure,ux

但是还会出现一个问题就是当文本框内数值为0时,再点击“减号”会出现负数axure9怎么实现加1,交互,axure,ux

 

这就需要添加判断条件, 判断当就是文本框的内容大于0时才能使文本框数值减1,因为文本框的数值是变量“num”赋予的所以选择变量值axure9怎么实现加1,交互,axure,ux

这样完整的交互效果就完成了。但是这第一种方式存在一个弊端就是使用的全局变量,当把组件复制到其他的文件中使用时,如果没有设置全局变量,这个组件就没有效果,接下来看第二个方法。

第二种方法

第二种方法和第一种方法类似,刚才使用的是全局变量,现在我们使用局部变量,使用局部变量的好处是当我们在其他文件中使用这个组件时,直接粘贴复制就行效果不会丢失。

同样新建一个文件还设置跟“方法一”一样的原件两个圆形,一个文本框。这时我们点击加号新建交互>单击时>设置文本,选择数量文本框点击fx设置变量值,添加局部变量选择数量,再插入变量或函数选择局部变量[[LVAR1]],在变量内设置+1 [[LVAR1+1]]。然后同理再设置“减号”的交互效果,再给减号设置判断条件。axure9怎么实现加1,交互,axure,ux

axure9怎么实现加1,交互,axure,ux axure9怎么实现加1,交互,axure,ux

这里判断条件值选择局部变量axure9怎么实现加1,交互,axure,ux

第三种方法

第三种方法在第一种方法的基础上进行更改,把文本框取消掉换成文本标签,命名为文本,把文本标签内容改成0个,使数值后面增加单位。这时只需要把设置文本后面函数添加单位,只能添加到双括号外面。axure9怎么实现加1,交互,axure,ux

axure9怎么实现加1,交互,axure,ux 

axure9怎么实现加1,交互,axure,ux 

 

以上是三种正确的案例如果是直接是使用第二种方法在函数外面增加单位,会出现错误,所以只能根据方法一进行更改,错误如下:

axure9怎么实现加1,交互,axure,ux 

axure9怎么实现加1,交互,axure,ux 

总结:案列的三种方法能实现Axure中增加或减少的效果文章来源地址https://www.toymoban.com/news/detail-786717.html

到了这里,关于Axure9数字加减交互案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 诚意满满的奉上2000套Axure原型图设计源文件UI UX交互设计案例

    网络上的Axure教程看了很多,大多数都是讲软件如何操作,讲交互逻辑和用户体验的却寥寥无几,而实际项目中却非常重交互逻辑和用户体验。把这2000套原型文件一一拆解,慢慢分析作者的设计思路,会发现,互联网产品交互设计真的很有意思,很容易掌握。 可谓是产品经理

    2024年02月11日
    浏览(48)
  • 【Axure】交互&情形

    目录 一. 交互          1.1 概念         1.2 交互样式         1.3 交互事件         1.3.1 常用的元件交互事件         1.3.2 动态面板独有的事件          1.3.3 复选框和下拉列表的交互事件         1.4 交互动作 二. 情形         2.1 概念         2.2 效果演示 三. 案例

    2024年02月04日
    浏览(44)
  • Axure的交互与情形

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

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

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

    2024年02月12日
    浏览(82)
  • Axure的交互样式和情形

    Axure是一个流行的原型设计工具,它允许您创建交互式原型,模拟应用程序或网站的功能和用户界面。在Axure中,您可以设置各种交互样式来使原型更加生动和真实。 链接触发器 :通过给一个元素添加链接触发器,您可以指定当用户点击该元素时发生什么动作,比如导航到另

    2024年02月03日
    浏览(42)
  • Axure中如何使用交互样式&交互事件&交互动作&情形

                                                             🎬 艳艳耶✌️:个人主页                                                         🔥 个人专栏 :《产品经理如何画泳道图流程图》                                                            

    2024年02月03日
    浏览(37)
  • Axure的交互与情形,事件,动作

    交互样式 交互样式是指当用户与原型进行交互时,元素所呈现出的视觉效果。在Axure中,可以通过设置交互样式来调整元素在交互过程中的外观,例如改变颜色、大小、位置等。 交互事件 交互事件是指在用户与原型进行交互时触发的动作。在Axure中,有多种交互事件可供选择

    2024年02月04日
    浏览(48)
  • Axure 折叠面板(手风琴)动态交互效果制作

    什么是折叠面板? 折叠面板可能是响应式设计中的最重要主力。这是一个非常有用的逐步呈现的模型——突出显示每个部分的重要细节,必要时利用点击来显示更多详细信息。因此,设计始终集中在最先显示的关键信息上,以便其他一切都易于访问。 效果预览地址:http://

    2024年02月05日
    浏览(52)
  • 做为一个产品经理带你了解--Axure交互和情境

                           📚📚 🏅我是bing人,一个在CSDN分享笔记的博主。📚📚                                                                  🌟在这里,我要推荐给大家我的专栏《Axure》。🎯🎯 🚀无论你是编程小白,还是有一定基础的程序员,这个专栏都

    2024年02月04日
    浏览(47)
  • Axure电商产品移动端交互原型,移动端高保真Axure原型图(RP源文件手机app界面UI设计模板)

    本作品是一套 Axure8 高保真移动端电商APP产品原型模板,包含了 用户中心、会员成长、优惠券、积分、互动社区、运营推广、内容推荐、商品展示、订单流程、订单管理、售后及服务 等完整的电商体系功能架构和业务流程。 本模板由 一百三十多个界面上千个交互元件及事件

    2024年02月04日
    浏览(49)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包