猿型库：Axure小练习之商品对比\关注\购物车

为了方便用选购商品，现在的电商网站，通常都会有对比、关注、加入购物车这三个功能。

我们以京东商城为例，看看如何通过Axure实现这三个功能。

 

 

效果预览：http://www.axurestudy.cn/pr/index.html

【需求分析】

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

 

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

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

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

【原型设计】

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

2、制作对比框：拖入两个矩形，调整尺寸为一大一小，在大的矩形里面录入文字 “ 对比 ”；

3、制作关注框：拖入两个矩形，调整为一大一小，对于小的矩形框，点击右键，在弹出菜单里面点 “ 选择形状 ”，然后选择心形，就可以把矩形