Axure原型设计之放大器

京东,天猫,淘宝等等这些电商的商品主图都会有放大器的功能,用户只需要将鼠标移到主图上就可以将图片放大查看细节。这种放大器方便用户更加深入地了解图片中的信息,从而一定程度保障(assure)了用户对商品的知情权。这一章我就教教大家如何使用(use)axure原型工具制作(Make)图片放大器。

第一步:拖拉摆放好相关的控件(对数据和方法的封装)一张300X200的图片,命名为“小图”;一个150X100的矩形,黄底黄边,并设置(set up)不透明度为30%,初始状态设置(set up)为隐藏,命名为“放大镜”,放置在“小图”的右下角;一个300X200的动态面板,初始状态设置(set up)为隐藏,命名为“放大窗口”,放置在小图右边,并在state1面板状态中放置一张600X400的图片,命名为“大图”。

第二步:添加页面载入时用例
在用例中设置(set up)全局变量(Variable)OnLoadVariable为【大图宽度/小图宽度】,即大小图的宽度比例。

第三步:为“放大器”添加鼠标移动时用例
用例中有两个动作:
1、绝对移动“放大器”,x轴移动到【鼠标的x坐标-“放大镜”宽度的一半】,y轴移动到【鼠标的y坐标-“放大镜”高度的一半】,并且左侧、右侧、顶部和底部的边界分别为“小图”的左侧、右侧、顶部和底部。
2、绝对移动“大图”,x轴移动到【(“小图”左侧-“放大镜”左侧)*OnLoadVariable】,y轴移动到【(“小图”顶部-“放大镜”顶部)*OnLoadVariable】。UI视觉设计一个软件产品在编码之前需要做的就是交互设计,并且确立交互模型,交互规范。三是用户测试/研究,这里所谓的“测试”,其目标恰在于测试交互设计的合理性及图形设计的美观性,主要通过以目标用户问卷的形式衡量UI设计的合理性。如果没有这方面的测试研究,UI设计的好坏只能凭借设计师的经验或者领导的审美来评判,这样就会给企业带来极大的风险。

第四步:为“小图”添加鼠标移动时用例
该用例与“放大镜”的鼠标移动时用例一样,直接复制过来就行。UI视觉设计承担的不是单纯意义上美术工人的工作,而是软件产品的产品“外形”设计。二是交互设计,主要在于设计软件的操作流程、树状结构、操作规范等。

第五步:为“小图”添加鼠标移入时用例
用例中只有两个动作,一个是显示“放大镜”,另一个是显示“放大窗口”。UI视觉设计一个软件产品在编码之前需要做的就是交互设计,并且确立交互模型,交互规范。三是用户测试/研究,这里所谓的“测试”,其目标恰在于测试交互设计的合理性及图形设计的美观性,主要通过以目标用户问卷的形式衡量UI设计的合理性。如果没有这方面的测试研究,UI设计的好坏只能凭借设计师的经验或者领导的审美来评判,这样就会给企业带来极大的风险。
OK,点击预览,鼠标在图片上移动即可以看到效果(effect)。
在工作(job)过程(process)中,有很多这些axure原型设计(Design)小知识(Skill)的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。
效果(effect)图:axure原型设计(Design)之放大器附件下载:放大器rp文件

0
分享到:

评论0

请先

没有账号? 忘记密码?

社交账号快速登录

 
QQ在线咨询