AxureRP教程–新浪相册效果

新浪的相册效果大家可以去新浪网站上看一下,感觉对用户浏览的便捷性方面做的还是比较好的,再一个高清图片的浏览速度也比较快,至少比QQ的相册加载速度要快很多,缩略图也比QQ相册的要大,可以较为方便的找寻自己喜欢的图片,个人比较喜欢,这里用AxureRP来实现了一下,并做了一些改进,比原有的相册功能要更好一些,与大家分享。

这个相册功能与QQ相册等的效果差不多,点小图看大图的功能基本上每个相册都有,百度的相册现在也改成类似的模式的,只不过是百度的是纵向的,新浪的是横向的,就算都是横向的,QQ的和新浪的相互间也有差异,主要功能是差不多的,因此这个原型效果可以应用在大多数网站的相册功能模块上,除非是有特殊的个性化的要求的,那就另当别论了,毕竟创意无限的,我这个只是模仿某个既有效果的原型实现而已。

这个相册效果主要实现了三个功能:一个是缩略图左右轮换;第二个是点击小图查看大图;第三个是图片焦点框的跟随移动。新浪相册在第三点功能上,当左右滚动缩略图列表的时候,会出现图片焦点框丢失的情况,并且大图是不动的,直到用户再次点击,这样做的好处是只显示用户喜欢看的,不足是用户会找不到当前聚焦的位置。可以试着改成每次缩略图列表滚动之后,都聚焦在所显示列表的第一张图片上,这样用户看起来就很清楚了。

用AxureRP来做这个效果的原理是每次固定移动一格或者两格(这个最好固定,否则后面其他的功能不好实现),然后用一个变量来记录当前的位移量,即左移了几次或者右移了几次,以此来判断当前缩略图列表所显示的内容及对应的位置,再依据这个去判断当鼠标单击小图显示大图的时候,图片聚焦框要怎么移动。整个原型设计的难点就在这里,就是要设置正确图片聚焦框的移动位置,缩略图列表的左右移动依靠的时候动态面板组件的移动动作,大图显示是通过一个动态面板的多个属性页来实现的,根据所点击的小图不同,显示不同的大图。

主要还是要理清楚左移或者右移了之后,某个缩略图所显示的位置发生了改变,此时鼠标单击事件要控制图片聚焦框的正确移动才行,通过变量来记录每次移动,就能计算出某个缩略图在每次移动后所处的位置,从而进行移动。

这个效果大概就是这样,还有改进的空间,比如鼠标的移入移出事件,当左移或者右移到头的时候增加提示等,后面这个实现起来比较简单,大家可至IT民工论坛一起交流。

示例在AxureRP 5.6下调试通过。

 

点此查看演示

点此下载源文件? 发布在IT民工论坛–高级技巧下

“AxureRP教程–新浪相册效果”8 条评论

commenter

很喜欢你的文章,受用了….欢迎回访我的网站www.shanggan5.cn 希望能够认识博主!

commenter

很喜欢来看博主的文章,也推荐给了不少的朋友。不错。赞一个!顶一下!

commenter

好长时间没来,今天过来看看,喜欢你的博客,记得回访哦!

commenter

博主好啊 顶下!

commenter

很喜欢你的文章,受用了….欢迎回访我的网站www.shanggan5.cn 希望能够认识博主!

commenter

真不孬,值得玩味!

invest | 2012-03-23 04:56 |
commenter

很不错,学习了

meite | 2012-11-28 14:51 |

呵呵,我可以转载吗?