首页 > 编程知识 正文

axure原型图案例(界面原型设计axure)

时间:2023-05-05 00:36:57 阅读:102719 作者:812

JD.COM、天猫、淘宝等。都会在电子商务的主画面中起到放大器的作用。用户只需要将鼠标移动到主图放大图片即可看到细节。这种放大器方便用户更多地了解图片中的信息,从而在一定程度上保证了用户对商品的知情权。在本章中,我将教你如何使用axure原型工具制作图像放大器。

00-1010一张300X200的图片,命名为“小图片”;一个150X100的矩形,背景为黄色,边缘为黄色,不透明度设置为30%,初始状态设置为隐藏,命名为“放大镜”,放置在缩略图右下角;初始状态设置为隐藏的300X200动态面板被命名为“放大窗口”,放置在缩略图的右侧,名为“大图片”的600X400图片被放置在状态1面板的状态下。

00-1010在用例中将全局变量OnLoadVariable设置为[大图片宽度/小图片宽度],即大图片和小图片的宽度比。

00-1010用例中有两个动作:

1.绝对移动放大器,X轴移动到【鼠标X坐标-放大镜宽度的一半】,Y轴移动到【鼠标Y坐标-放大镜高度的一半】,左、右、上、下的边界分别是缩略图的左、右、上、下。

2.绝对移动大图,X轴移动到【(小图左侧-放大镜左侧)*OnLoadVariable】,Y轴移动到【(小图顶部-放大镜顶部)*OnLoadVariable】

第一步:拖拉摆放好相关的控件

这个用例与鼠标移动时“放大镜”的用例相同。直接抄就行了。

00-1010用例中只有两个动作,一个是显示放大镜,一个是显示放大窗口。

好的,点击预览,将鼠标移到图片上查看效果。

在工作过程中,axure原型设计的这些小技巧的例子有很多,所以我会不断分享,希望对大家有所帮助。你对我的关注是我的动力。

效果图:放大器附件的axure原型设计下载:放大器rp文件作者:尺寸。个人博客:http://weidublog.com/

本文最初由@ Dimension发布。每个人都是产品经理。未经允许禁止转载。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。