網(wǎng)站設(shè)計(jì)中的跟蹤器設(shè)計(jì)實(shí)例和做法.

申請(qǐng)免費(fèi)試用、咨詢電話：400-8352-114

設(shè)計(jì)一個(gè)大型網(wǎng)站，特別是一個(gè)商店，你可能會(huì)被要求設(shè)計(jì)一個(gè)系統(tǒng)，網(wǎng)上訂購(gòu)，或一個(gè)多步驟的過(guò)程，另一種。走用戶可以通過(guò)這個(gè)過(guò)程，很容易和直觀的是，有助于提高轉(zhuǎn)換率的關(guān)鍵。任何前進(jìn)的道路上的挫折，可能會(huì)導(dǎo)致他們離開，并尋求其他選擇。進(jìn)展跟蹤的目的是幫助用戶通過(guò)一個(gè)多步驟的過(guò)程，這是非常重要的，這種跟蹤器經(jīng)過(guò)精心設(shè)計(jì)，以讓用戶了解什么部分，他們目前的，什么節(jié)，他們已經(jīng)完成了，什么任務(wù)保持。

在這篇文章中，我們將著眼于各種用途的進(jìn)度跟蹤，看看他們是如何被執(zhí)行，什么他們都做得很好，他們做得還不夠好。

進(jìn)度跟蹤是什么？

你可能不熟悉的“進(jìn)度追蹤器，也被稱為”進(jìn)度指示器“ - 但有很好的機(jī)會(huì)，你遇到了一個(gè)在同一時(shí)間或其他。它們被用來(lái)在網(wǎng)上商店在訂貨時(shí)，簽署了一個(gè)在線的產(chǎn)品或服務(wù)，甚至在網(wǎng)上預(yù)訂度假。為了完成一個(gè)指定的進(jìn)程，進(jìn)度跟蹤指導(dǎo)用戶完成一系列步驟。

例如在游戲的進(jìn)度跟蹤

進(jìn)度跟蹤和面包的區(qū)別

正如我們前面介紹的網(wǎng)頁(yè)設(shè)計(jì)：實(shí)例和最佳做法的面包屑，面包屑是一種方法，通過(guò)顯示用戶的當(dāng)前位置，提高導(dǎo)航。最初，面包屑和進(jìn)度跟蹤可能看起來(lái)非常相似，然而，在許多方面，他們是有顯著的差異。

面包屑告訴你，只有在你已經(jīng)（或部分高于目前的應(yīng)用程序的層次結(jié)構(gòu)中的部分），而進(jìn)度跟蹤指定一組用戶的路徑如下，以完成特定的任務(wù)。進(jìn)度跟蹤顯示你不僅你目前所在的地方，但也什么步驟，您以前，你是采取什么步驟。

例如在Coolspotters面包屑

進(jìn)度跟蹤是最好的，當(dāng)有一個(gè)具體的目標(biāo)來(lái)實(shí)現(xiàn)的。他們是同義轉(zhuǎn)換，用于提高可用性的一種方式- 優(yōu)化轉(zhuǎn)換率時(shí)，這是關(guān)鍵。轉(zhuǎn)換是所有關(guān)于網(wǎng)上銷售，以便以某種形式在幾乎每一個(gè)網(wǎng)上商店，你會(huì)看到一個(gè)進(jìn)度跟蹤。

現(xiàn)在，我們已經(jīng)檢討進(jìn)度跟蹤器是什么，讓我們來(lái)看看在的情況下，要求，甚至受益于一個(gè)精心設(shè)計(jì)的實(shí)施進(jìn)度跟蹤。

利用進(jìn)度跟蹤

正如前面提到的，進(jìn)展跟蹤器可以用在各種上下文中。下面的三個(gè)是最常見的。

1。
到目前為止，最常見的應(yīng)用進(jìn)展情況跟蹤的在線訂購(gòu)與網(wǎng)上購(gòu)買，因?yàn)檫@通常涉及多個(gè)步驟。

HMV的進(jìn)度跟蹤。

在Etsy的進(jìn)度跟蹤。

2。功能導(dǎo)游的
進(jìn)展跟蹤器也用來(lái)引導(dǎo)用戶通過(guò)在線產(chǎn)品和服務(wù)的特點(diǎn)，主要表現(xiàn)在下面的例子：

進(jìn)度跟蹤所使用的視頻搜索里面。

Flickr的頁(yè)游的特點(diǎn)，看看他們的服務(wù)。

3。多步的形式，
如果一個(gè)表單需要大量的用戶輸入，它可能是最好的，分裂成多個(gè)步驟。

Livestream的的進(jìn)度跟蹤器設(shè)計(jì)。

使用Buffalo的項(xiàng)目規(guī)劃形式的進(jìn)度跟蹤

進(jìn)展跟蹤設(shè)計(jì)的最佳實(shí)踐

表示一個(gè)合乎邏輯的發(fā)展
進(jìn)度跟蹤，從左至右顯示的步驟。大部分土地，由左到右的人閱讀，因此它是有道理的，進(jìn)度跟蹤，模式。這不是足夠的，雖然-必須有東西，通知用戶他們正在執(zhí)行一個(gè)多步驟的過(guò)程。

重磅炸彈包括兩個(gè)箭頭和數(shù)字在他們的進(jìn)度跟蹤，從而清楚地傳達(dá)一個(gè)合乎邏輯的發(fā)展。

讓用戶了解他們的位置
的一個(gè)重要方面取得良好進(jìn)展跟蹤設(shè)計(jì)讓用戶了解用戶是在這個(gè)過(guò)程中。這補(bǔ)充了合乎邏輯的發(fā)展，因?yàn)橛脩魰?huì)知道他們?cè)谀睦锏牡胤剑麄円呀?jīng)和哪些部分是遵循。

史密斯夫婦表示用戶當(dāng)前的位置，明確強(qiáng)調(diào)當(dāng)前的步驟和轉(zhuǎn)向箭頭向下。

定位
進(jìn)度跟蹤導(dǎo)航的一種形式，它是最好的，把它們放在下面的一級(jí)和二級(jí)導(dǎo)航（如面包屑）及以上的進(jìn)度跟蹤涉及到的內(nèi)容。另外，在一個(gè)進(jìn)度跟蹤器可以作為一個(gè)網(wǎng)頁(yè)的標(biāo)題，它是最好放置在當(dāng)前節(jié)的標(biāo)題下方的進(jìn)度跟蹤，以鞏固當(dāng)前的位置。

Gamestation他們的進(jìn)度跟蹤，明顯低于小學(xué)和中學(xué)的導(dǎo)航。

進(jìn)度跟蹤器的實(shí)現(xiàn)

純文本
下面是一個(gè)例子，一個(gè)純文本進(jìn)度跟蹤媒體寺的網(wǎng)站上。一個(gè)純文本進(jìn)展跟蹤器的一個(gè)好處是，它可以容易地進(jìn)行編輯。

雪碧為基礎(chǔ)的
主權(quán)采用了時(shí)下流行的CSS sprites的技術(shù)建立自己的進(jìn)度跟蹤和減少HTTP請(qǐng)求，通過(guò)網(wǎng)上預(yù)訂的過(guò)程中。

設(shè)計(jì)應(yīng)該避免的錯(cuò)誤

從面包屑
TypePad等的設(shè)計(jì)助手，可以非常容易混淆的面包屑導(dǎo)航系統(tǒng)沒有什么區(qū)別。

沒有足夠的信息
easyJet的酒店預(yù)訂路徑的舊進(jìn)度跟蹤執(zhí)行錯(cuò)誤的。雖然它給了你總?cè)藬?shù)的步驟，在這個(gè)過(guò)程中，它并沒有表明你已經(jīng)完成了哪些步驟或其余。

，在過(guò)去的幾個(gè)星期內(nèi)推出他們的新進(jìn)展跟蹤，是一個(gè)很大的進(jìn)步，這表明目前的位置，過(guò)去步驟和步驟來(lái)?，F(xiàn)在，他們也很好地利用頁(yè)面的標(biāo)題具有描述性的文字，以配合目前的進(jìn)度跟蹤標(biāo)簽。

沒有意義的進(jìn)展
daniblack錯(cuò)誤地使用了他們的進(jìn)度跟蹤標(biāo)簽系統(tǒng)。這個(gè)問題是標(biāo)簽不提供任何進(jìn)展的可視化表示。數(shù)字或箭頭的添加將使至少某種形式的指示在這個(gè)例子中的進(jìn)展。

進(jìn)度跟蹤展示

現(xiàn)在，我們知道一個(gè)進(jìn)度跟蹤器是什么，它是如何被使用的，而最好的方法，它的設(shè)計(jì)，讓我們來(lái)看看目前在使用的一些精心設(shè)計(jì)的進(jìn)度跟蹤。

Battle.net使用的方法逐步填補(bǔ)了吧，你的進(jìn)步，通過(guò)他們的注冊(cè)表單中的步驟。

宜家（Ikea）

亞馬遜有一個(gè)購(gòu)物車，穿越他們的進(jìn)度跟蹤，標(biāo)志著它已經(jīng)在那里留下一條橙色的線。

有機(jī)超市

Threadless的

城市原稿

Firebox的

蘋果

Vitradirect

鼠標(biāo)Minx的

CafePress

Topshop的

約翰·劉易斯使用圖像的一輛卡車沿著自己的進(jìn)度跟蹤。

彗星蜱關(guān)閉部分已經(jīng)完成。

靴子的進(jìn)展跟蹤橫跨頁(yè)面的寬度。

網(wǎng)絡(luò)醫(yī)學(xué)博士使用一個(gè)進(jìn)度條和百分比值作為對(duì)他們的健康檢查問卷調(diào)查方式，跟蹤進(jìn)展情況。

雅高

Altrec

SurfRide

iWorkwear

Zumiez

玩具“反”斗城

eBags

Foot Locker的

終極綠色商店

Crate and Barrel公司

手槍服裝

美國(guó)服裝

PC世界

阿貝爾與科爾

愛步美國(guó)

設(shè)計(jì)公共

Golfsmith結(jié)合使用的數(shù)字和箭頭的進(jìn)度條。

PETCO

足球癡迷者

人居公司

沃爾頓園林建筑

lookfantastic使用圖標(biāo)直觀地提高他們的進(jìn)度跟蹤。

B＆Q

本文作者來(lái)自北京北京信，轉(zhuǎn)載請(qǐng)注明出處：北京北京信（http://52tianma.cn/）

選擇北京網(wǎng)站建設(shè)公司-北京信，優(yōu)質(zhì)服務(wù)，絕對(duì)不容錯(cuò)過(guò) ！