（翻译）画廊模式（Gallery）

问题概述

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

示例

用途

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

解决方案

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

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

• 上一张和下一张图片按钮；

• 按以下几种方式排列的一组缩略图：

  – 上一张和下一张图片以及这些图片的链接[2]；

  – 最近的2、3张图片(前2、3张和后2、3张)以及这些图片的链接

  – 将画廊中所有图片的缩略图放置在网格中，通常每行摆3、4或5张图片。

• 图片标题后紧跟着带链接的文本，文本内容为下一张图片、下一张或者是下一张图片的标题；
• 带有图片编号的标签链接到画廊中对应的图片；
• 点击当前图片，造成以下结果：缩放当前图片或跳转到下一张图片；
• 键盘方向键监控器：向左的箭头触发“显示上一张图片”事件，向右的箭头触发”显示下一张图片”事件。

画廊设计建议

提供缩略图和图片编号

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

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

图片自动切换（幻灯片）或手动切换（或两种都支持）

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

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

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

说明

  本模式一直在依赖广告印象维持的媒体网站中广泛使用，以便获得尽量多的页面访问量。一个包含20张图片的画廊，每张图片用单独的页面显示，这在广告印象方面获得的回报比一篇包含20张图片的文章要大得多[5]。但是，随着使用JavaScript开发的画廊越来越流行（其仅加载页面的部分内容），之前那种采用单独页面加载的画廊越来越过时了。如果仍想获得尽量多的广告印象，可以考虑在用户每次浏览新图片的同时更改广告内容。

原文地址：http://ui-patterns.com/patterns/Gallery

[1]原文：Use to enforce a sense of beginning and end.

[2]原文：Previous- and next images with links to these images

[3]原文：The 2 or 3 of the nearest images (previous 2 or 3 and next 2 or 3 images) with links to these images

[4]原文：Thumbnails allow the user to find out where he or she is in the gallery: the context of the current image.

[5]原文： A gallery with 20 images that shows in separate page views yields a much bigger returns in banner impressions than having an article with 20 images beneath each other.