AxureRP教程–相册效果

现在各个图片网站上的相册应用效果很多,基本上很多SNS或者社交类网站都提供了相册管理功能,不过各个站的相册功能都不尽一样,但大部分还是一样的。这里介绍几种相册展示效果和展示方式,以及如何用AxureRP来实现效果的设计。

首先插入介绍一下相册功能里面相片上传成功之后的改名,一般默认都是会带入相片的名字的,然后允许修改,也即点击修改的效果。这种效果表面上看上去是不能修改的,但鼠标移入的时候会变更底色及给出提出可点击修改,修改页面可以保存修改也可以取消修改。实现原理是通过动态面板的两个状态,设置第一个状态为不可更改的名称显示页面,设置第二个页面为单行输入框的可改页面,这样通过点击第一状态页切换至第二页,而点击第二状态页得保存则将修改值传至第一页,且回到第一页,点取消也回到第一页。

相册里面有一种展示形式就是通过点击小图查看大图,一般这种小图都是以列表的形式出现,例如QQ相册就是这样的,在查看相片的页面上方会有小图列表的导航条,方便用户切换。这种效果的实现原理是通过两个动态面板来控制,一个做大图的显示,即每张大图做一个状态页,另一个做小图的导航条,需有翻页滚动的功能效果。大图的比较简单,小图导航条的设计可以有两种方式,一种就是以固定的展示形式和大小做成几个状态页,如一个状态页上放置两个小图,另一种方式是动态面板内嵌入动态面板,然后以移动动态面板的形式来实现。翻页滚动效果通过两个按钮来控制,使状态页切换或者是面板移动固定的位移,然后设置每张小图的单击事件控制大图的状态页切换即可。

?

还有一种展示形式就是通过点击缩略图查看大图,现在微博上应用的都是这种效果,点缩略图会先放大一点,继续点击查看大图才会查看到原图。这种效果的实现原理是在缩略图上面设置单击事件,控制大图的显示的。大图显示用动态面板来实现,默认隐藏,点击后展示。这中间可以加一个加载中效果的状态页缓冲一下,页面展示的就更逼真了。见示例page1,点击之后会有一个加载页面先出来,然后才是显示真正的内容,两个状态页之间设置较为恰当的等待时间即可,展示效果可更贴近实际。

?

Page2和page3中的例子是第一种小图导航条效果的补充,可以方便的进行翻页滚动,其中page3中的还带有拖拽功能,这两个例子放在这里供参考,实现原理和上面所述的是一样的。拖拽效果需要在原来的基础上再加上一层图片映射控件来控制,只是要控制好触发滚动事件的左右区域大小。

现在各种相册功能都有,这里只是演示了其中的一种,大家可以尝试设计其他的相册功能,交流学习。

示例在AxureRP 5.5版本下调试通过

《原型设计》微电子杂志? 点此订阅

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

评论已关闭!