《Axure制作商品规格》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,动态面板,原型等多维度案例或实操来进行更多的学习;此教程是由福到家在2021-11-26发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
下面就由北极熊素材库的小编给大家详细的介绍一下如何用Axure实现规格效果,教程从预览图,到所需原件,再到操作步骤小编都为大家一一介绍了一番,感兴趣的小伙伴一起来看一看吧。
尚未选择规格时的显示:
选择“比卡丘”后的显示:
选择“蓝色”后的显示:
选择“比卡丘”“蓝色”后的显示:
取消选择“比卡丘”后的显示:
原型预览地址:https://mwb2of.axshare.com
所需元件就10个(但还是要命好名),其中6个是纯文本,需要设置交互的元件就只有三个:(黄色)矩形、(蓝色)矩形、(比卡丘)矩形。
(1)将(黄色)矩形、(蓝色)矩形放在一个选项组“颜色”。
将两个元件放在设置选项组的作用是它们之间只有一个选中状态为true。
(2)设置三个矩形的交互样式——选中
这里的交互样式我参考的是某宝的交互样式。
(3)设置三个矩形的交互——鼠标单击时
1)这个原型的难点在于要将三个设置了交互的矩形的条件考虑周到,所以我使用了Excel表格将所有情况都列了出来。
将所有情况都列好了之后我们就开始根据表格一个一个去对应地增加交互和交互的条件。
2)“比卡丘”矩形的前3个Case。
3)“比卡丘”矩形的后3个Case。
4)“蓝色”矩形的4个Case。
5)“黄色”矩形的4个Case。
这里可以看到“蓝色”矩形的交互和“黄色”矩形的交互基本相同,所以我们设置好“蓝色”矩形的交互后可以直接把“蓝色”矩形的交互粘贴到“黄色”矩形的交互,然后再修改一些小细节,这样就可以省下很多时间了。
(4)第三步都搞定后就可以按F5预览原型看看效果了。
赠人玫瑰,手有余香
< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例
> 下一篇 Axure实现商品规格选择功能
2022-08-24 09:29
2022-05-09 10:55
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论