幻灯片(Slideshow)。

一、问题概述

用户要查看一组高质量图片。

二、截图示例

image.png

三、参考用途

  • 用于用户要顺序浏览一组图片时。
  • 用于加强开始和结束图片浏览时的感觉。
  • 用于当用户想用尽可能多的屏幕区域显示高分辨率图片时。
  • 如果是想让用户一次速览多个图片,不要使用本模式。

四、解决方案

画廊包含多张图片,采用导航方式一张接着一张浏览,一次只能浏览一张图片。通常提供多种画廊导航方式,以便适应不同类型用户的浏览习惯。画廊模块通常会显示当前图片的上下文,例如「18张图片中的第2张」,短一点的形式是「18之2」,或仅仅显示「2/18」。

4.1 画廊中通常包含的导航选项

  • 上一张和下一张图片按钮。
  • 按以下几种方式排列的一组缩略图。
    • 上一张和下一张图片以及这些图片的链接。
    • 最近的2、3张图片(前2、3张和后2、3张)以及这些图片的链接。
    • 将画廊中所有图片的缩略图放置在网格中,通常每行摆3、4或5张图片。
  • 图片标题后紧跟着带链接的文本,文本内容为下一张图片、下一张或者是下一张图片的标题。
  • 带有图片编号的标签链接到画廊中对应的图片。
  • 点击当前图片,造成以下结果:缩放当前图片或跳转到下一张图片。
  • 键盘方向键监控器:向左的箭头触发「显示上一张图片」事件,向右的箭头触发「显示下一张图片」事件。

4.2 画廊设计建议

4.2.1 提供缩略图和图片编号

缩略图让用户知道其在画廊中的位置,通过当前图片的上下文来了解。缩略图也是一种让用户继续浏览下一张图片的优秀方法。如果图片的缩略图看起来很吸引人,那在用户看来就值得点进去看看。

将画廊中的图片以编号方式列出,这样利于快速导航。突出显示当前图片的编码,让用户通过当前图片的上下文来了解其在画廊中的位置。

4.2.2 图片自动切换(幻灯片)或手动切换(或两种都支持)

画廊的工作方式为以下两种之一:在设定的时间间隔后自动切换图片,或者是用户手动点击按钮或其它导航元素来浏览图片。有些画廊提供暂停按钮,这是上述两种方式的混用。

4.2.3 重新加载整个页面或只更改重要部分

新的画廊使用 JavaScript 开发,用户每次浏览新图片时,只有图片、图片上下文、标题和评论发生变化,不用重新加载整个页面内容。使用 JavaScript 开发的画廊能够更快的在图片间导航,给用户更加流畅和愉悦的体验。

五、相关说明

本模式一直在依赖广告印象维持的媒体网站中广泛使用,以便获得尽量多的页面访问量。一个包含20张图片的画廊,每张图片用单独的页面显示,这在广告印象方面获得的回报比一篇包含20张图片的文章要大得多。

但是,随着使用 JavaScript 开发的画廊越来越流行(其仅加载页面的部分内容),之前那种采用单独页面加载的画廊越来越过时了。如果仍想获得尽量多的广告印象,可以考虑在用户每次浏览新图片的同时更改广告内容。

附录

查看原文