高效的缩略图浏览方式――旋转木马模式

标签: 交互设计 | 发表时间:2013-06-04 23:52 | 作者:百度MUX
出处:http://www.yixieshi.com

  移动产品设计中,图片传达的信息比文字更直白、美观、容易吸引用户注意,所以在产品中引入大量图片资源也成为设计师喜爱的方式之一。

  今天我们在文中要介绍一种高效的缩略图浏览方式——旋转木马模式(Carousel)。

   1.什么是旋转木马(Carousel)模式?

  旋转木马由来已久,在西方的游乐场中经常可以见到,早期的胶片电影灵感即来源于此,将一张张静止的画面快速转动投射到荧幕上,在中国古代也有类似的形式——“跑马灯”,在节日供百姓观赏娱乐。

  在移动产品交互设计中,旋转木马模式可以在一条目内同时呈现多张图片,引导用户通过滑动屏幕浏览更多内容。这种模式的优点在于能够在有限的屏幕空间内,高效的呈现大量图像内容,带给用户更好的聚焦、浏览体验,让原本静止的图片有如播放电影般精彩纷呈。

   2.交互特性

   1)屏幕中只呈现部分内容

  旋转木马模式中通常会展示大量的图片内容,但在手机屏幕的一屏内不会呈现过多图片(根据图片尺寸一般在3-5张)。

   2)引导用户进行滚动

  需要明显的视觉引导,让用户知道可以通过滑动进行浏览,并明确滚动的方向。可以提供滚动条、按钮,或在屏幕任意一侧显示部分额外条目。

   3)浏览进度

  可以通过进度条、百分比等形式让用户知道浏览的当前位置,并为中途退出的用户保留查看进度。

   4)选中状态

  被选中的图片与其他图片要从视觉上明显区分,可以提供边框或将选中图片置于高亮。

   5)”更多”

  当浏览到最后一张图片时,可以提供“更多”按钮,让用户知道图集浏览完成,可以点击浏览更多信息或下一图集。

   3.旋转木马模式的应用

  旋转木马模式在提供大图浏览的同时,也提供浏览导航,并可以呈现更多相关内容。比起传统的瀑布流、缩略图列表,旋转木马模式为用户带来更流畅的图片浏览效果,是一个更高效、易于识别的图片查看方式。该模式广泛应用于以下产品:

   1)照片浏览类产品

  用户通过它来对照片、视频进行浏览,选择感兴趣的内容进行查看。大图的使用比起缩略图列表更容易让用户获得良好的体验,旋转木马可以在用户浏览大图的同时提供导航,方便用户在众多图片中切换。

  例如:优酷,人人网…

   2)电子商务类产品

  旋转木马模式也是电子商务类网站中经常用到的交互形式,产品详情页经常使用旋转木马为用户呈现全方位的产品展示。

  例如:淘宝、京东…

   3)新闻阅读类产品

  新闻图片最容易吸引用户的注意力, 随着视频新闻、图片新闻等多媒体元素更多的应用在新闻阅读类产品中,更多媒体选择使用旋转木马呈现新闻列表,辅以适量文章摘要,为用户带来更高效、直观的阅读体验。

  例如:BBC、华盛顿邮报…

   4.注意事项

   1)减少认知负担

  iTunes的媒体封面流由一张处于屏幕中心的大图和罗列在两侧的缩略图组成,这种组成模式要注意图片滚动的速度。由于这些图片不断变换着,用户也许无法在快速切换的图片中聚焦对象,从而尝试及时停止滚动来获得焦点。因此,在设计旋转木马时要谨慎处理图片的滚动速度、滑动时的加速度,以及滑动停止的减速,不要添加过多动画效果增加用户的认知负担。

   2)滚动的方向和终点

  开始滚动的方向经常让用户产生疑惑:“旋转木马是循环播放吗?”,“我是否已经看过某些内容?” Android 4.0使用“blue parallax”视觉元素提示用户滚动的方向和终点。

   3)图片数量

  长时间的浏览会使用户感到无聊和疲倦,所以在设计时要注意旋转木马承载图片的数量,一般控制在20张以内,减少用户持续浏览产生的疲劳。如果希望用户继续浏览,可以在内容浏览结束后增加“查看更多”,让用户在浏览完成后通过点击跳转到其他内容。

   结语

  在网站设计中,旋转木马模式已广泛应用于众多网站。在移动互联网时代,随着移动设备的高端化、多元化发展,设计师可以通过应用旋转木马模式为用户创造更好的浏览体验,如何利用该模式结合更多交互手势、怎样合理利用平台特性,为设计师留下了广阔的想象空间。

  参考文献

  [1] Greg Nudelman. A Definitive Guide To The Android Carousel Design Pattern. February 1st, 2013

  [2] http://developer.yahoo.com/ypatterns/selection/carousel.html

相关 [旋转木马 模式] 推荐:

高效的缩略图浏览方式――旋转木马模式

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  移动产品设计中,图片传达的信息比文字更直白、美观、容易吸引用户注意,所以在产品中引入大量图片资源也成为设计师喜爱的方式之一.   今天我们在文中要介绍一种高效的缩略图浏览方式——旋转木马模式(Carousel).    1.什么是旋转木马(Carousel)模式.   旋转木马由来已久,在西方的游乐场中经常可以见到,早期的胶片电影灵感即来源于此,将一张张静止的画面快速转动投射到荧幕上,在中国古代也有类似的形式——“跑马灯”,在节日供百姓观赏娱乐.

Adobe 推出云端影像软件与服务「旋转木马」

- EinVerne - Engadget 中国版
想摆脱实体硬盘的束缚,却仍苦寻不着理想的云端影像软件吗. 现在您将多出一个选项,Adobe 全新的影像云端服务「旋转木马」(Carousel),将于本月底推出支持 iOS 与 Mac OS X Lion 的专用软件(Windows 与 Android 的版本将于明年发表). 此服务主要着眼于实时同步支持装置间的照片,并且可以随时编辑.

9 款超棒的jQuery“旋转木马”插件和教程推荐

- - ITeye资讯频道
Web设计技术日新月异,开发者和设计师都应该了解最新的设计趋势. 目前,“旋转木马”是一种比较流行的图片切换效果,这是一个在水平/垂直方向上动态滚动的列表,能让用户方便地访问到不同的内容,使用这个效果既可以提高网站的可用性,又能吸引用户. 使用jQuery就可以实现各种各样的旋转木马效果,而且在很多方面都优于Flash,这对于Web设计师来说非常值得尝试.

等死模式与穿越模式

- Rady - 左岸读书_blog
她去年本想考自己喜欢的研究生,结果失败,却出乎意料地遇到了一份不错的工作. 她害怕考了又考不上,浪费时间;但是不考又不安心,已经纠结半年了. 我问她,去年你每天花多少时间学习. 她说我去年每天大概4个小时,学了3个月,考前一周突击了一下,就差3分. 我又问她,现在你每天烦这件事情大概花你多少时间. 她说从过年到现在(6个月)每天都在想,上班下班都想,烦死了.

加州模式还是德州模式?

- kuangyue - 鲁克 - luke51 - 和讯博客
http://hexun.com/LUKEPOST > 复制 > 收藏 | 手机看个人门户. 路客邮报 LUKEPOST BLOG. 是否公开三公 外交部说的不算. 乘京沪高铁:有些事亲历才知道. 宝洁员工爆料:食品包装有玄机. 南京地税部门不能“趁火打劫”. 和讯个人门户 v1.0 | 和讯家园 | 意见反馈.

设计模式之代理模式(Proxy)

- - 博客园_首页
这段时间一直忙于期末考试,好久没来博客园了,现在好了,终于考完了,也该过上正常的日子了. 开学就是大四的学生了,时间过的可是真快啊,转眼间大学四年已经接近尾声了. 回想大学这三年,成绩还可以吧(年级前10%),参加过各种竞赛(acm,数学建模等等),学生会也呆过(打了一年的酱油),好哥们也有那么五六个(希望以后能在一个城市发展,大学期间的宝贵财富啊),另外所谓的大学生创新实践项目也搞了一个(就算开阔一下视野吧,大学能生有什么创新呢.

Apache的prefork模式和worker模式

- - 编程语言 - ITeye博客
apache常用的工作模式有prefork和worker模式. 运行命令httpd -l 或者apache2 -l ,输出的结果中如果含有prefork.c,那就是prefork模式,如果结果中含有worker.c,那就是worker模式. 原文: http://www.ccvita.com/339.html.

模式与逻辑

- - 所有文章 - UCD大社区
有一次我在豆瓣提到,逻辑并不是最重要的,有朋友就很激动反对. 确实,在许多理性的人看来,逻辑几乎是最重要的东西. 其实,我并没有想过否定逻辑的价值,只是对于逻辑的看法,经历了一个肯定-否定-肯定的过程. 在我看来,人类有许多智慧是存在于右脑的,右脑有一个非常重要的功能就是模式的判断和识别(参考《非理性市场与蜥蜴式大脑思维》),善用这一点,常常能极大的提高自己的能力.

Scala设计模式

- - ITeye博客
       我的话: 在国外网站上看到一篇文章,里面详细描述了很多设计模式,并且用Java及Scala两种语言描述,清晰的让我们看到各种常规的设计模式,在Scala中是如何在语言特性层面直接支持的. 基于文章很nice,我利用今天的空闲时间将其翻译,希望大家能一起学习,讨论. 翻译比较倡促,也就两小时左右,有何不当,请在下面留言指出.

hive严格模式

- - CSDN博客数据库推荐文章
         hive提供了一个严格模式,可以防止用户执行那些可能产生意想不到的不好的效果的查询.         如果在一个分区表执行hive,除非where语句中包含分区字段过滤条件来显示数据范围,否则不允许执行. 就是用户不允许扫描所有的分区. 进行这个限制的原因是,通常分区表都拥有非常大的数据集,而且数据增加迅速.