aure8.0 快速入门新手教程:图库

搜索引擎现在越来越注重图像搜索了,很多搜索引擎都有自己的图库,相比于上一章的《axure8.0快速入门新手教程:电子相册》,这章的图库对图像的展示方式更加便捷直观。

搜索引擎现在越来越注重图像搜索了,很多搜索引擎都有自己的图库,比如百度,搜狗,360等,但大家可以发现,不管什么平台的图库,它的交互方式都差不多,都是图像幻灯片切换式的相册,相比于上一章的《axure8.0快速入门新手教程:电子相册》,这章的图库对图像的展示方式更加便捷直观。以下为如何制作图库原型的步骤。

第一步:准备好8张大的风景图

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

1、一个750X450的动态面板放在上方,命名为“大图面板”,并添加state1~state8八个面板状态,每个面板状态放一张风景图,大小都拉至750X450。

2、一个750X150的动态面板放在下方,命名为“小图视窗面板”,在该面板的state1面板状态中的(0,0)和(750,0)这两个位置都放置一个高为150的垂直线,分别命名为“左边界”和“右边界”,同时也要在(0,0)的位置放置一个高150宽适当(放的下8张小图即可)的动态面板,命名为“小图面板”。

3、在“小图面板”的state1面板状态中,等距放置8张150X90的小图,每张小图上方再放置一个150X150的灰框透明底的矩形。

4、在“小图视窗面板”的两边都放置一个40X150的白色矩形,文本分别为“”,并且分别命名为“左移”和“右移”。

第三步:为“左移”和“右移”添加鼠标单击时用例

点击“左移”时,相对移动“小图面板”x轴-300的距离,动画为线性,时间为500毫秒,右侧大于等于“右边界”的x轴坐标;

点击“右移”时,相对移动“小图面板”x轴300的距离,动画为线性,时间为500毫秒,左侧小于等于“左边界”的x轴坐标。

第四步:设置“小图面板”state1中每个透明矩形的交互样式

设置所有的透明矩形选项组均为“小图”,所有的透明矩形交互样式中的“鼠标悬停”,“鼠标按下”和“选中”均为蓝色边框。

第五步:设置“小图面板”state1中每个透明矩形的鼠标点击时用例

点击哪一个透明矩形,就切换“大图面板”到相对应的面板状态,并设置该透明矩形为选中状态。

点击预览,然后点击左移,右移,或者小图,就可以看到图库的效果了。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之图库
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

作者:维度

关键字:产品经理, Axure, 面板

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部