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/

作者：维度
转载请注明出处： http://weidublog.com/index.php/2017/04/05/297/