网站设计中的跟踪器设计实例和做法.
 

设计一个大型网站，特别是一个商店，你可能会被要求设计一个系统，网上订购，或一个多步骤的过程，另一种。走用户可以通过这个过程，很容易和直观的是，有助于提高转换率的关键。任何前进的道路上的挫折，可能会导致他们离开，并寻求其他选择。进展跟踪的目的是帮助用户通过一个多步骤的过程，这是非常重要的，这种跟踪器经过精心设计，以让用户了解什么部分，他们目前的，什么节，他们已经完成了，什么任务保持。

在这篇文章中，我们将着眼于各种用途的进度跟踪，看看他们是如何被执行，什么他们都做得很好，他们做得还不够好。
进度跟踪是什么？

你可能不熟悉的“进度追踪器，也被称为”进度指示器“ - 但有很好的机会，你遇到了一个在同一时间或其他。它们被用来在网上商店在订货时，签署了一个在线的产品或服务，甚至在网上预订度假。为了完成一个指定的进程，进度跟踪指导用户完成一系列步骤。

进度跟踪示例
例如在游戏的进度跟踪
进度跟踪和面包的区别

正如我们前面介绍的网页设计：实例和最佳做法的面包屑，面包屑是一种方法，通过显示用户的当前位置，提高导航。最初，面包屑和进度跟踪可能看起来非常相似，然而，在许多方面，他们是有显着的差异。

面包屑告诉你，只有在你已经（或部分高于目前的应用程序的层次结构中的部分），而进度跟踪指定一组用户的路径如下，以完成特定的任务。进度跟踪显示你不仅你目前所在的地方，但也什么步骤，您以前，你是采取什么步骤。

面包屑例
例如在Coolspotters面包屑

进度跟踪是最好的，当有一个具体的目标来实现的。他们是同义转换，用于提高可用性的一种方式- 优化转换率时，这是关键。转换是所有关于网上销售，以便以某种形式在几乎每一个网上商店，你会看到一个进度跟踪。

现在，我们已经检讨进度跟踪器是什么，让我们来看看在的情况下，要求，甚至受益于一个精心设计的实施进度跟踪。
利用进度跟踪

正如前面提到的，进展跟踪器可以用在各种上下文中。下面的三个是最常见的。

1。
到目前为止，最常见的应用进展情况跟踪的在线订购与网上购买，因为这通常涉及多个步骤。

HMV网上订单进度跟踪
HMV的进度跟踪。

Etsy的进展跟踪
在Etsy的进度跟踪。

2。功能导游的
进展跟踪器也用来引导用户通过在线产品和服务的特点，主要表现在下面的例子：

里面搜索视频的进度跟踪
进度跟踪所使用的视频搜索里面。

Flickr的页游
Flickr的页游的特点，看看他们的服务。

3。多步的形式，
如果一个表单需要大量的用户输入，它可能是最好的，分裂成多个步骤。

Livestream频道创建表单
Livestream的的进度跟踪器设计。

Buffalo的项目规划表
使用Buffalo的项目规划形式的进度跟踪
进展跟踪设计的最佳实践

表示一个合乎逻辑的发展
进度跟踪，从左至右显示的步骤。大部分土地，由左到右的人阅读，因此它是有道理的，进度跟踪，模式。这不是足够的，虽然-必须有东西，通知用户他们正在执行一个多步骤的过程。

Blockbuster的进度跟踪
重磅炸弹包括两个箭头和数字在他们的进度跟踪，从而清楚地传达一个合乎逻辑的发展。

让用户了解他们的位置
的一个重要方面取得良好进展跟踪设计让用户了解用户是在这个过程中。这补充了合乎逻辑的发展，因为用户会知道他们在哪里的地方，他们已经和哪些部分是遵循。

城市原生的进度跟踪
史密斯夫妇表示用户当前的位置，明确强调当前的步骤和转向箭头向下。

定位
进度跟踪导航的一种形式，它是最好的，把它们放在下面的一级和二级导航（如面包屑）及以上的进度跟踪涉及到的内容。另外，在一个进度跟踪器可以作为一个网页的标题，它是最好放置在当前节的标题下方的进度跟踪，以巩固当前的位置。

Gamestation的进度跟踪
Gamestation他们的进度跟踪，明显低于小学和中学的导航。
进度跟踪器的实现

纯文本
下面是一个例子，一个纯文本进度跟踪媒体寺的网站上。一个纯文本进展跟踪器的一个好处是，它可以容易地进行编辑。

媒体寺的进展跟踪

雪碧为基础的
主权采用了时下流行的CSS sprites的技术建立自己的进度跟踪和减少HTTP请求，通过网上预订的过程中。

主权sprite图像
设计应该避免的错误

从面包屑
TypePad等的设计助手，可以非常容易混淆的面包屑导航系统没有什么区别。

TypePad等设计助理

没有足够的信息
easyJet的酒店预订路径的旧进度跟踪执行错误的。虽然它给了你总人数的步骤，在这个过程中，它并没有表明你已经完成了哪些步骤或其余。

easyJet的老预订路径

，在过去的几个星期内推出他们的新进展跟踪，是一个很大的进步，这表明目前的位置，过去步骤和步骤来。现在，他们也很好地利用页面的标题具有描述性的文字，以配合目前的进度跟踪标签。

EasyJet的预订路径

没有意义的进展
daniblack错误地使用了他们的进度跟踪标签系统。这个问题是标签不提供任何进展的可视化表示。数字或箭头的添加将使至少某种形式的指示在这个例子中的进展。

上daniblack进度跟踪


重庆网络公司