設(shè)計一個大型網(wǎng)站，特別是一個商店，你可能會被要求設(shè)計一個系統(tǒng)，網(wǎng)上訂購，或一個多步驟的過程，另一種。走用戶可以通過這個過程，很容易和直觀的是，有助于提高轉(zhuǎn)換率的關(guān)鍵。任何前進(jìn)的道路上的挫折，可能會導(dǎo)致他們離開，并尋求其他選擇。進(jìn)展跟蹤的目的是幫助用戶通過一個多步驟的過程，這是非常重要的，這種跟蹤器經(jīng)過精心設(shè)計，以讓用戶了解什么部分，他們目前的，什么節(jié)，他們已經(jīng)完成了，什么任務(wù)保持。
在這篇文章中，我們將著眼于各種用途的進(jìn)度跟蹤，看看他們是如何被執(zhí)行，什么他們都做得很好，他們做得還不夠好。
進(jìn)度跟蹤是什么？
你可能不熟悉的“進(jìn)度追蹤器，也被稱為”進(jìn)度指示器“ - 但有很好的機(jī)會，你遇到了一個在同一時間或其他。它們被用來在網(wǎng)上商店在訂貨時，簽署了一個在線的產(chǎn)品或服務(wù)，甚至在網(wǎng)上預(yù)訂度假。為了完成一個指定的進(jìn)程，進(jìn)度跟蹤指導(dǎo)用戶完成一系列步驟。
例如在游戲的進(jìn)度跟蹤
進(jìn)度跟蹤和面包的區(qū)別
正如我們前面介紹的網(wǎng)頁設(shè)計：實例和最佳做法的面包屑，面包屑是一種方法，通過顯示用戶的當(dāng)前位置，提高導(dǎo)航。最初，面包屑和進(jìn)度跟蹤可能看起來非常相似，然而，在許多方面，他們是有顯著的差異。
面包屑告訴你，只有在你已經(jīng)（或部分高于目前的應(yīng)用程序的層次結(jié)構(gòu)中的部分），而進(jìn)度跟蹤指定一組用戶的路徑如下，以完成特定的任務(wù)。進(jìn)度跟蹤顯示你不僅你目前所在的地方，但也什么步驟，您以前，你是采取什么步驟。
例如在Coolspotters面包屑
進(jìn)度跟蹤是最好的，當(dāng)有一個具體的目標(biāo)來實現(xiàn)的。他們是同義轉(zhuǎn)換，用于提高可用性的一種方式-?優(yōu)化轉(zhuǎn)換率時，這是關(guān)鍵。轉(zhuǎn)換是所有關(guān)于網(wǎng)上銷售，以便以某種形式在幾乎每一個網(wǎng)上商店，你會看到一個進(jìn)度跟蹤。
現(xiàn)在，我們已經(jīng)檢討進(jìn)度跟蹤器是什么，讓我們來看看在的情況下，要求，甚至受益于一個精心設(shè)計的實施進(jìn)度跟蹤。
利用進(jìn)度跟蹤
正如前面提到的，進(jìn)展跟蹤器可以用在各種上下文中。下面的三個是最常見的。
1。
到目前為止，最常見的應(yīng)用進(jìn)展情況跟蹤的在線訂購與網(wǎng)上購買，因為這通常涉及多個步驟。
HMV的進(jìn)度跟蹤。
在Etsy的進(jìn)度跟蹤。
2。功能導(dǎo)游的
進(jìn)展跟蹤器也用來引導(dǎo)用戶通過在線產(chǎn)品和服務(wù)的特點，主要表現(xiàn)在下面的例子：
進(jìn)度跟蹤所使用的視頻搜索里面。
Flickr的頁游的特點，看看他們的服務(wù)。
3。多步的形式，
如果一個表單需要大量的用戶輸入，它可能是最好的，分裂成多個步驟。
Livestream的的進(jìn)度跟蹤器設(shè)計。
使用Buffalo的項目規(guī)劃形式的進(jìn)度跟蹤
進(jìn)展跟蹤設(shè)計的最佳實踐
表示一個合乎邏輯的發(fā)展
進(jìn)度跟蹤，從左至右顯示的步驟。大部分土地，由左到右的人閱讀，因此它是有道理的，進(jìn)度跟蹤，模式。這不是足夠的，雖然-必須有東西，通知用戶他們正在執(zhí)行一個多步驟的過程。
重磅炸彈包括兩個箭頭和數(shù)字在他們的進(jìn)度跟蹤，從而清楚地傳達(dá)一個合乎邏輯的發(fā)展。
讓用戶了解他們的位置
的一個重要方面取得良好進(jìn)展跟蹤設(shè)計讓用戶了解用戶是在這個過程中。這補(bǔ)充了合乎邏輯的發(fā)展，因為用戶會知道他們在哪里的地方，他們已經(jīng)和哪些部分是遵循。
史密斯夫婦表示用戶當(dāng)前的位置，明確強(qiáng)調(diào)當(dāng)前的步驟和轉(zhuǎn)向箭頭向下。
定位
進(jìn)度跟蹤導(dǎo)航的一種形式，它是最好的，把它們放在下面的一級和二級導(dǎo)航（如面包屑）及以上的進(jìn)度跟蹤涉及到的內(nèi)容。另外，在一個進(jìn)度跟蹤器可以作為一個網(wǎng)頁的標(biāo)題，它是最好放置在當(dāng)前節(jié)的標(biāo)題下方的進(jìn)度跟蹤，以鞏固當(dāng)前的位置。
Gamestation他們的進(jìn)度跟蹤，明顯低于小學(xué)和中學(xué)的導(dǎo)航。
進(jìn)度跟蹤器的實現(xiàn)
純文本
下面是一個例子，一個純文本進(jìn)度跟蹤媒體寺的網(wǎng)站上。一個純文本進(jìn)展跟蹤器的一個好處是，它可以容易地進(jìn)行編輯。
雪碧為基礎(chǔ)的
主權(quán)采用了時下流行的CSS sprites的技術(shù)建立自己的進(jìn)度跟蹤和減少HTTP請求，通過網(wǎng)上預(yù)訂的過程中。
設(shè)計應(yīng)該避免的錯誤
從面包屑
TypePad等的設(shè)計助手，可以非常容易混淆的面包屑導(dǎo)航系統(tǒng)沒有什么區(qū)別。
沒有足夠的信息
easyJet的酒店預(yù)訂路徑的舊進(jìn)度跟蹤執(zhí)行錯誤的。雖然它給了你總?cè)藬?shù)的步驟，在這個過程中，它并沒有表明你已經(jīng)完成了哪些步驟或其余。
，在過去的幾個星期內(nèi)推出他們的新進(jìn)展跟蹤，是一個很大的進(jìn)步，這表明目前的位置，過去步驟和步驟來?，F(xiàn)在，他們也很好地利用頁面的標(biāo)題具有描述性的文字，以配合目前的進(jìn)度跟蹤標(biāo)簽。
沒有意義的進(jìn)展
daniblack錯誤地使用了他們的進(jìn)度跟蹤標(biāo)簽系統(tǒng)。這個問題是標(biāo)簽不提供任何進(jìn)展的可視化表示。數(shù)字或箭頭的添加將使至少某種形式的指示在這個例子中的進(jìn)展。
進(jìn)度跟蹤展示
現(xiàn)在，我們知道一個進(jìn)度跟蹤器是什么，它是如何被使用的，而最好的方法，它的設(shè)計，讓我們來看看目前在使用的一些精心設(shè)計的進(jìn)度跟蹤。
Battle.net使用的方法逐步填補(bǔ)了吧，你的進(jìn)步，通過他們的注冊表單中的步驟。
宜家（Ikea）
亞馬遜有一個購物車，穿越他們的進(jìn)度跟蹤，標(biāo)志著它已經(jīng)在那里留下一條橙色的線。
有機(jī)超市
Threadless的
城市原稿
Firebox的
蘋果
Vitradirect
鼠標(biāo)Minx的
CafePress
Topshop的
約翰·劉易斯使用圖像的一輛卡車沿著自己的進(jìn)度跟蹤。
彗星蜱關(guān)閉部分已經(jīng)完成。
靴子的進(jìn)展跟蹤橫跨頁面的寬度。
網(wǎng)絡(luò)醫(yī)學(xué)博士使用一個進(jìn)度條和百分比值作為對他們的健康檢查問卷調(diào)查方式，跟蹤進(jìn)展情況。
雅高
Altrec
SurfRide
iWorkwear
Zumiez
玩具“反”斗城
eBags
Foot Locker的
終極綠色商店
Crate and Barrel公司
手槍服裝
美國服裝
PC世界
阿貝爾與科爾
愛步美國
設(shè)計公共
Golfsmith結(jié)合使用的數(shù)字和箭頭的進(jìn)度條。
PETCO
足球癡迷者
人居公司
沃爾頓園林建筑
lookfantastic使用圖標(biāo)直觀地提高他們的進(jìn)度跟蹤。
B＆Q
本文作者來自北京傳誠信，轉(zhuǎn)載請注明出處：北京傳誠信（m.saddlebargains.com）
選擇北京網(wǎng)站建設(shè)公司-傳誠信，優(yōu)質(zhì)服務(wù)，絕對不容錯過 ！
