UI patterns 翻译 ： 幻灯片

对UI patterns.com 的一篇文章翻译，幻灯片模式

 

 

Slideshow

Problem summary

The user needs to skim through stories without scrolling or any other unnecessary mouse movements.

Example

 

Usage

(1) Use when you need to tease multiple stories, but want to save screen real estate

(2) Use when you need to direct users’ attention toward stories that you have highlighted

(3) Use when you want to allow users to skim several stories without scrolling, doing any other mouse movements, or use any other input devise.

(4) Do not use if you want users to view all stories at the same time.

(5) Beware of over-usage and combination with other animations, which can lead to making a website seem too busy and attention-demanding.

Solution

A slideshow shows several stories with images, one at a time. After a specific set time interval one story is replaced by another – often with an animated transition.

Transitions

Transitions between images are most often a sliding effect although a simple fade is also a popular choice. The most important design choice when it comes to transitions is to make it seem natural. Animations should never be used for showing off; only to support the usability and understandability of UI.

Numbers, bullets, or thumbnails

Use numbers, bullets, squares, or thumbnails to represent all the images in the slideshow. These provide a way of letting the user have a sense of where he or she is in the slideshow and help set expectations as to how many stories are left and available.

Use numbers if it’s important to let the user now exactly how many stories a slideshow has. Use bullets if it doesn’t matter, and thumbnails if you want to inspire the user to jump past the sequential order of stories that you’ve chosen beforehand.

Focus attention

Slideshows steal attention! Especially if they are combined with animated transitions. Put slideshows together with blinking advertisement and other bright, animated or otherwise attention-stealing elements on the page and you have mayhem. If more than one element screams for attention, the user will get lost. If you have multiple elements that scream for attention other than the slideshow, the slideshow will only help diffuse users’ attention instead of focusing it.

Consider whether your slideshow is going to represent the main and most important stories of your site – if it doesn’t, then leave out the slideshow. A slideshow directs attention towards itself. Don’t overdo it.

Buttons and good callout texts

Increase the effectiveness of your slideshow by adding buttons for each story that calls out for attention. Buttons help users know what to click. However, be careful not to fall in the common trap of just labeling your button with “Read more”, unless that is really the only action the user can do by clicking on that button. Texts like “Support”, “Donate”, “Buy”, and “Watch video” are much more effective in getting users to click and set expectations of what they will get.

Navigation

Common navigation elements include:

(1)  Previous and next buttons

(2)  Bullets, numbers, or thumbnails

(3)  Callout buttons

In order not to present the user with too many options at first, consider hiding navigational elements (such as “previous” and “next” buttons) until users hover the slideshow image. Too many options at first can confuse users and make them go away before they even got started. Reveal their options as their interest is sparked.

Full image or tabs with title

Slideshows seem to go one of two ways:

(1)   Either the image of the story fills the entire slideshow. The current story is represented by a big image that acts as a background with text on top. This version provide the biggest sensory experience as it focuses on as large images as possible.

(2)   Or the stories in the slideshow is listed either horizontally or vertically on the side or below or on top of the image. This version focus on conveying titles and text more than a visual sensory experience. Use this type if the title of a story is so important that the user can’t wait till that one story is up.

Rationale

Slideshows highlight several different stories on the same screen real estate. They allow users to quickly skim through stories without scrolling, moving the mouse or in any other way use navigation options. Users at the same time save attention as they don’t have to concentrate on navigation but at the same time calls for attention every time the slideshow switches to a new image. Slideshows focus users’ attention sharply on the content instead of interacting with the browser.

 

 

 

 

 

 

 

 

 

 

 

 

译文：

 

幻灯片

问题总结

 

用户在浏览图片新闻的时候不用滚动鼠标或任何其他不必要的鼠标操作。

例子

 

 

 

使用场景

(1)  当你想展示多个图片新闻，但又想节省屏幕空间时的时候使用

(2)  当你想吸引用户眼球，让用户第一时间浏览到头条新闻的时候使用

(3)  当你想让用户在浏览图片新闻的时候不用鼠标操作或很少的鼠标操作的时候使用

(4)  当你想让用户在同一时间看到所以图片的时候不要使用

(5)  谨防过度使用幻灯片或者其与其他动画的组合。过度使用幻灯片或者其与其他动画的组合，这可能会导致制作一个网站花费很多精力在这些特效上

解决方案

图片新闻会在一段时间轮流展示。在一定的时间间隔，一个新闻会被另一个新闻来替代，经常以动画效果的形式来切换。

切换

在图像之间的切换最流行也最简单的方式是用滑动来实现。最重要的设计原则是让图片切换的时候非常自然。动画不应仅用于展示，并且还致力于优秀的UI体验。

数字，小圆点，或者缩略图

用数字，小圆点，或者缩略图表示当前幻灯片里所有的图片的信息，可以让用户了解到预期有几个图片。

用数字可以让用户了解当前幻灯片里所有的图片的个数。如果这不太重要的话也可以用小圆点。用缩略图的话可以由用户绕过我们设定的顺序自由的选择他们想要看的那一张图片。

集中注意力

幻灯片可以潜移默化的让用户集中注意力，特别是在你加上切换动画的话。如果是幻灯片加上闪烁的广告又加上其他动画的时候就会让用户感到困惑，一致感觉你的网站不好用，用户则有可能流失。如果你有比幻灯片更重要的信息要展示，幻灯片只会起反作用让用户分散注意力。

要考虑网站整体最主要的展示信息是什么，如果不是幻灯片里的信息，那就不要用幻灯片。幻灯片会吸引别人的眼球，但也不要太过：)。

按钮和良好的标注文字

在你的幻灯片上添加在增加效果，按钮可以让用户知道可以点击什么。不过，也要警惕这些按钮，除非用户点击按钮可以唯一的可执行操作。如果用户有需求的话，可以加一点一下按钮，比如：像“支持”，“捐赠”，“买入”和“观看视频”。

导航

常见的导航元素包括：

(1) 前一个和后一个按钮

(2) 小圆圈，数字或缩略图

(3) 调出按钮

为了不给用户太多选择，建议如果用户鼠标移出幻灯片或者进入的时候就隐藏导航元素（比如上一个下一个），太多的选项也可能让永恒影院感到不舒服而离开。适当的导航可以激发他们的兴趣。

完整的图像或标题标签

有一下两种方式：

(1) 只有图片填充到幻灯片。当前的新闻是由一个大图片作为背景。这个方式提供最大的感官体验，因为它集中在尽可能大的图片。

(2) 在图片下面加上标题。水平尺或垂直的在图像的顶部或下方。这个方式重点传达标题和文本的视觉感官体验。使用这种类型可以很好的给用户介绍图片的主要内容让用户判断是否进入浏览。

基本原理

幻灯片突出了不同的故事在同一屏幕。大幅幻灯片将用户的注意力集中于重要内容。 在同一画面真实几种不同的故事房地产（房地产）。它们允许用户在不滚动鼠标的情况下快速阅读。用户自己可以移动鼠标或以任何其他方式使用导航选项。同时用户节省关注，因为他们不必自己集中注意力找网站提供的重要，只需注意幻灯片的自动切换。幻灯片主要功能是吸引用户的注意力，使得用户不需要与浏览器进行交互。