Axure 原型设计三步进阶法

2023年1月21日10:50:41原型设计评论58 views字数 1455阅读模式

跟很多同学朋友的交流过程中,对于axure的需要做到怎样,众说纷纭。总结了一下大家的意见,分别有以下几种:

1、掌握基本的搭建方法即可,不需要做交互;

2、既然做就要做到尽善尽美,页面和交互都是比较重要的,必须做到

3、做到何种程度因人因项目而异,但是需要会做,以免需要做时无从下手。

这三种观点明显比较更受大家支持的是第三种。

有一位学员,是一位女孩子,我们暂时称呼为S同学吧,也是持这种观点。

在学习的过程当中,原来与其他同学一样,她在学习的前半段也是只学习了较为基础的内容:包括页面的搭建、部件元素的使用和设置、简单交互的设置等等。

在没有接触进一步的学习之前,觉得axure的使用就是这样了,再进一步的使用也是与原来学习过的基础的内容无异。

但在进行了进一步的学习之后,刷新了对于axure的认知,知道了axure原来也可以这么做。

这里以S同学做的一个作业作为例子给大家看看,共同来体验一下S同学当时的感受。

这个作业是这样子的,在输入框输入内容,在列表当中做出筛选。这个交互,也是随着学习的深入和认识的逐渐加深,有一个变化的过程。

1.简单交互完成

用简单的显示隐藏动作去做设置,例如要筛选出“交通银行”的话,就设置当输入框的文字为“交通银行”的时候,隐藏其他银行的名字。

 

 

Axure 原型设计三步进阶法

 

 

Axure 原型设计三步进阶法

 

 

这个设置方法有比较大的缺陷是:只能输入指定的文字,这里给它设定的是输入“交通银行”,也可以设定为“交”/“通”/“交通”等等。并且是认为决定它显示哪一个或者哪几个银行的名称。如果被筛选的内容数量多了,就会造成时间的浪费以及可能的错误产生如显示的名字选择错等情况。

如果你的数量非常少,并且搜索的内容不复杂,可以考虑用这种方式来设置,比较简单。

2.中继器的简单动作设置

接触过中继器的朋友应该都知道,中继器动作里边有一个动作叫做“添加筛选”,看这个名字马上就能知道,这个动作的主要作用就是用来做筛选。

所以S同学在学习到这里的时候,发现之前的例子可以用中继器的这个动作来做。所以就有了第二种的做法。

将被筛选的列表,这里是银行logo和名称,用中继器进行制作。在搜索的输入框中输入内容,判断输入的哪个银行的名字,则筛选出该银行的名字。

 

 

Axure 原型设计三步进阶法

 

 

Axure 原型设计三步进阶法

 

 

Axure 原型设计三步进阶法

 

从查看效果和设置方法,大家可以看出这种方法的优缺点在什么地方吗?与前面一种方法相比,有点很明显,是进行自动筛选的,这样筛选的准确性高很多,设置上也不需进行很多步操作,被筛选对象是多个。

但是缺点跟第一种类似,这里只能输入完整的银行名称。因为它的筛选是根据数据集中的内容进行判断筛选的。这里数据集是“XX银行”,所以条件就是“XX银行”,如果数据集是“交通”、“平安”等,那么,筛选条件就是“交通”、“平安”等。

 

Axure 原型设计三步进阶法

 

如果你的筛选数量较多,又是需要进行完整输入的,选择S同学这个第二种方式也是很不错的。

3.中继器的复杂交互设置

再往后学习的过程中,S同学接触到了函数,结合上一种中继器的做法,最后有了一个比较灵活的筛选交互的做法。

找到适合的函数,只要输入的内容能在数据集中被检索到,包含这个内容的对象就会被筛选出来。

 

Axure 原型设计三步进阶法

 

 

Axure 原型设计三步进阶法

 

 

Axure 原型设计三步进阶法

 

这种方法做出来的这个交互效果,完美避开了前面两种做法的确定,是最灵活、最有效的搜索方法。

也难怪S同学会觉得神奇,Axure居然可以做到现在这样。在一步步的学习当中,加深了对于axure的应用的认识。

我们要知道,Axure确实是可以做到这样的,并且我们最好是能够知道应该怎么做到,这样在日后的工作中如果需要,上手就可以做,这样也减少了在忙碌的工作中寻求做法的时间。

Andy 知乎

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/30516.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定