搜索引擎现在越来越注重图像搜索了,很多搜索引擎都有自己的图库,比如百度,搜狗,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/
作者:维度