Axure教程:商品对比\关注\购物车

访客4年前黑客工具491

为了方便用选购商品,现在的电商网站,通常都会有对比、关注、加入购物车这三个功能。我们以京东商城为例,看看如何通过Axure实现这三个功能。

Axure教程:商品对比\关注\购物车

图例如下所示:

Axure教程:商品对比\关注\购物车

【需求分析】

通过我们对京东商城的观察,得出如下需求:

Axure教程:商品对比\关注\购物车

当鼠标移入“ 对比 ”框的时候,文字和边框变成红色,当鼠标移出的时候,恢复默认样式黑色;

当鼠标移入“ 关注 ”框的时候,关注和边框变成红色,并且黑色的心型图标向上滑动,切换为红色,当鼠标移出的时候,回复默认样式;

当鼠标移入“ 加入购物车 ”框的时候,边框变成红色,移出以后,边框颜色恢复为黑色。

【原型设计】

(1)先往画布放置宝贝图片、价格、名称、评价数量等元件,这里请各位同学自己完成,小猿不做赘述;

(2) *** 对比框:拖入两个矩形,调整尺寸为一大一小,在大的矩形里面录入文字 “ 对比 ”;

(3) *** 关注框:拖入两个矩形,调整为一大一小,对于小的矩形框,点击右键,在弹出菜单里面点 “ 选择形状 ”,然后选择心形,就可以把矩形框调整为心形框。

Axure教程:商品对比\关注\购物车

(4)选中心形,把这个形状转换为动态面板,为该动态面板添加状态2,状态2里面复制同样的心形元件,只是把原色改成红色;

(5) *** 加入购物车框:拖入一个矩形和购物车图标,矩形里面写上 “ 加入购物车 ”;

(6)到此,原型设计完成,效果如下所示:

Axure教程:商品对比\关注\购物车

【交互设计】

(1)对比框交互:把对比框的两个矩形框组合,设置该组合的交互样式,当鼠标悬停的时候,设置矩形的边框为红色,字体为红色;这里要注意一点,就是要设置该组能够 “ 触发内部元件鼠标交互样式 ”。

Axure教程:商品对比\关注\购物车

(2)关注对比框:同样把对比框的动态面板和矩形组合,设置该组合的鼠标事件:

设置对比框的选中交互样式,当选中的时候,设置字体和边框为红色;

当鼠标移入时,设置选中对比框,并且设置动态面板的状态为2(红色),设置切换效果为向上移动;

当鼠标移出时,设置取消选中对比框,并且设置动态面板的状态为1(黑色),设置切换效果为向上移动;

Axure教程:商品对比\关注\购物车

(3)加入购物车交互:与“ 对比 ”框类似设置加入购物车框的悬停效果,鼠标悬停的时候,设置边框为红色。

到了这里,商品的对比\关注\购物车功能就算做好了,同学们赶紧去试试吧。

相关文章

VR产品经理之路:VR产品设计思考和Oculus quest产品体验

VR产品经理之路:VR产品设计思考和Oculus quest产品体验

对VR产品经理来说,设计一款VR产品之前需要掌握哪些基础知识呢?设计过程中又有哪些注意要点呢?本文将详细介绍这些内容,并以Oculus quest产品为例,分享VR产品的产品体验。 前言 最近体验了...

构建经营人的营销体系,寻找你的超级用户

构建经营人的营销体系,寻找你的超级用户

这篇文章从经营模式出发,分析了经营用户思维和经营商品思维是两个不同的经营理念,告诉我们企业要构建经营用户的新营销体系,调整现有的营销模式。让我们一起去学习新的营销体系吧。 经营用户思维和经营商品思维...

微信视频号的市场分析与体验总结

微信视频号的市场分析与体验总结

最近关于微信视频号的讨论又重新卷土而来,而笔者也针对视频号展开市场分析与体验总结两方面展开探讨。 2018年,微信上线“看一看”刚上线的时候,很多人认为这是微信准备用来对标抖音、快手的短视频信息流,...

微信和飞书掐架,绝不是抢用户这么简单

微信和飞书掐架,绝不是抢用户这么简单

不巧言中,只能说各个社交大佬开始真正触及到用户价值背后最敏感的软肉。 1. 事情是这样的:微信把飞书禁了,疑拉取微信用户「关系链」 2 月 29 日,字节跳动旗下办公套件飞书发布官方公告称,飞书相关...

各大移动端应用市场APP排行的情况

各大移动端应用市场APP排行的情况

本文作者翻阅了2015年到2020年移动应用市场app前十的变化情况,粗浅的可以看出移动app在应用市场中,随着人们的需求变化而变化,最终将整理的内容留个备份,也分享给有需要小伙伴。 2020年是一...

产品运营终极指标:用户生命周期价值LTV

产品运营终极指标:用户生命周期价值LTV

对于从事移动互联网产品商业化工作的人来说,如何衡量产品的变现效率至关重要。一般在讨论商业化效率的时候我们会讨论的指标有Gross Profit、ARPU、eCPM、CAC。但是有一个终极运营指标,那就...