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

申請免費試用、咨詢電話：400-8352-114

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

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

進度跟蹤是什么？

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

例如在游戲的進度跟蹤

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

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

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

例如在Coolspotters面包屑

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

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

利用進度跟蹤

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

1。
到目前為止，最常見的應(yīng)用進展情況跟蹤的在線訂購與網(wǎng)上購買，因為這通常涉及多個步驟。

HMV的進度跟蹤。

在Etsy的進度跟蹤。

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

進度跟蹤所使用的視頻搜索里面。

Flickr的頁游的特點，看看他們的服務(wù)。

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

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

使用Buffalo的項目規(guī)劃形式的進度跟蹤

進展跟蹤設(shè)計的最佳實踐

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

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

讓用戶了解他們的位置
的一個重要方面取得良好進展跟蹤設(shè)計讓用戶了解用戶是在這個過程中。這補充了合乎邏輯的發(fā)展，因為用戶會知道他們在哪里的地方，他們已經(jīng)和哪些部分是遵循。

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

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

Gamestation他們的進度跟蹤，明顯低于小學和中學的導航。

進度跟蹤器的實現(xiàn)

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

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

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

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

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

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

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

進度跟蹤展示

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

Battle.net使用的方法逐步填補了吧，你的進步，通過他們的注冊表單中的步驟。

宜家（Ikea）

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

有機超市

Threadless的

城市原稿

Firebox的

蘋果

Vitradirect

鼠標Minx的

CafePress

Topshop的

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

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

靴子的進展跟蹤橫跨頁面的寬度。

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

雅高

Altrec

SurfRide

iWorkwear

Zumiez

玩具“反”斗城

eBags

Foot Locker的

終極綠色商店

Crate and Barrel公司

手槍服裝

美國服裝

PC世界

阿貝爾與科爾

愛步美國

設(shè)計公共

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

PETCO

足球癡迷者

人居公司

沃爾頓園林建筑

lookfantastic使用圖標直觀地提高他們的進度跟蹤。

B＆Q

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

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