axure新手入门教程|互联网产品经理如何制作类360百度搜狗图库的?

axure 教程

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

axure 教程 axure 教程

第一步:准备好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的白色矩形,文本分别为“<”和“>”,并且分别命名为“左移”和“右移”。

axure 教程

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

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

axure 教程

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

axure 教程

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

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

axure 教程

axure 教程

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

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

axure 教程

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://niubipm.cn/a/chanpinsheji/Axure/2018/0610/222.html