我最近在Twitter上閱讀了一項(xiàng)關(guān)于如何顯示使用數(shù)量過(guò)濾器更改過(guò)的分頁(yè)項(xiàng)目的調(diào)查（例如，每頁(yè)查看20、30、40個(gè)項(xiàng)目等），通過(guò)選擇更高或更低的數(shù)量，它會(huì)改變根本上是列表的初始用戶(hù)體驗(yàn)。發(fā)生這種情況時(shí)，您已經(jīng)失去了方向感和位置感。這種行為幾乎是互聯(lián)網(wǎng)上的標(biāo)準(zhǔn)行為，令人驚訝的是，很少有網(wǎng)站在邏輯上對(duì)其進(jìn)行修復(fù)。以下只是我的觀點(diǎn)和可能的解決方案（作為電子商務(wù)站點(diǎn)的常規(guī)客戶(hù)），因此，我尚未與實(shí)際客戶(hù)一起實(shí)施，也不知道設(shè)計(jì)解決方案是否是最佳方案，但其目的是制定邏輯規(guī)則，使設(shè)計(jì)系統(tǒng)有意義并可以在現(xiàn)場(chǎng)進(jìn)行測(cè)試。

假設(shè)我們的客戶(hù)使用我們的電子商務(wù)網(wǎng)站并搜索可以返回許多結(jié)果的內(nèi)容。該列表在每500頁(yè)中每頁(yè)返回25個(gè)項(xiàng)目，客戶(hù)開(kāi)始瀏覽它，共完成3頁(yè)（見(jiàn)圖1）。我們的客戶(hù)開(kāi)始查看所有項(xiàng)目（圖1上的青色），然后開(kāi)始移至以下頁(yè)面，然后在第3頁(yè)停止。這是當(dāng)客戶(hù)認(rèn)為每頁(yè)25個(gè)項(xiàng)目不足以瀏覽項(xiàng)目時(shí)，因此使用顯示內(nèi)容過(guò)濾器，然后將分頁(yè)更改為每頁(yè)100個(gè)項(xiàng)目。在下面的圖形中，您可以看到淺青色，客戶(hù)已經(jīng)看到的項(xiàng)目和深青色是客戶(hù)正在看到的當(dāng)前項(xiàng)目，灰色項(xiàng)目是我們的客戶(hù)尚未審查的項(xiàng)目：

如果我們的客戶(hù)更改每頁(yè)項(xiàng)目選項(xiàng)會(huì)怎樣？通常的事情是對(duì)整個(gè)列表進(jìn)行完全重新加載（圖2），這會(huì)使我們的客戶(hù)返回到第一頁(yè)，在那一刻，用戶(hù)再次觀看已經(jīng)看到的列表的前3到4個(gè)項(xiàng)目。一切都必須再次看到。太遺憾了。我過(guò)去也遇到過(guò)其他變種，它們甚至更痛苦：例如，將您留在同一頁(yè)面上（圖3），其中有100個(gè)項(xiàng)目，但是前一頁(yè)也有100個(gè)項(xiàng)目，因此最后一頁(yè)您現(xiàn)在看到的項(xiàng)目在前幾頁(yè)上，中間有大量未經(jīng)審核的項(xiàng)目。您會(huì)進(jìn)入第3頁(yè)，但看不到任何項(xiàng)目。無(wú)論哪種情況，您都會(huì)迷路，必須再次瀏覽所有內(nèi)容，但是在最后一個(gè)示例中（圖3），

這種方法帶來(lái)了網(wǎng)頁(yè)列表中最流行的問(wèn)題之一。這是一個(gè)不為人知的壞習(xí)慣，使我們的客戶(hù)感到沮喪，后者不得不浪費(fèi)時(shí)間來(lái)回想一下清單上的所有項(xiàng)目，這也使客戶(hù)立即失去了瀏覽位置。例如，如果客戶(hù)正在查看第5頁(yè)上的項(xiàng)目223，那么現(xiàn)在該項(xiàng)目在第3頁(yè)上，因此，客戶(hù)必須瀏覽第2或3頁(yè)并搜索該項(xiàng)目以繼續(xù)檢查所有內(nèi)容。人們沒(méi)有時(shí)間進(jìn)行數(shù)學(xué)運(yùn)算以計(jì)算最后查看的項(xiàng)目在哪一頁(yè)上以及該項(xiàng)目當(dāng)前的順序。

對(duì)于這些類(lèi)型的案例，理想的行為應(yīng)該是什么呢？為此，我們必須分析客戶(hù)的最初意圖：在列表中或多或少地看到當(dāng)前項(xiàng)目中的項(xiàng)目。如果我們仔細(xì)審查此前提，我們可以理解，理想的情況是，在[客戶(hù)]所在的點(diǎn)，我們必須顯示x項(xiàng)商品才能完成所需樣本的抽樣。換句話(huà)說(shuō)：如果您每頁(yè)看到25個(gè)項(xiàng)目，現(xiàn)在說(shuō)要100個(gè)項(xiàng)目，則應(yīng)在正在查看的當(dāng)前頁(yè)面上再添加75個(gè)項(xiàng)目（圖4），以前的項(xiàng)目應(yīng)保持在25，而除非客戶(hù)再次改變主意，否則為100。

在此示例（圖4）中，我們可以看到可能的解決方案：您重新加載（或不加載）頁(yè)面結(jié)果，但是您只是將客戶(hù)留在了與以前相同的位置?？蛻?hù)有很多有趣且顯而易見(jiàn)的選擇：可以回頭查看確切瀏覽的內(nèi)容，或者可以繼續(xù)瀏覽新添加的內(nèi)容并保持每頁(yè)瀏覽100個(gè)項(xiàng)目。因此，在理想情況下，客戶(hù)永遠(yuǎn)不會(huì)看到完整的重新加載，但是對(duì)于這種情況，向頁(yè)面中注入更多項(xiàng)目正在瀏覽以完成100。即使客戶(hù)要?jiǎng)h除它，也應(yīng)這樣做，將100縮小為每頁(yè)25，以前的頁(yè)面完全不變。

這種交互有很多好處，原因有很多：客戶(hù)不會(huì)遇到任何“完全重置”現(xiàn)象。它將不會(huì)被帶到具有100個(gè)結(jié)果的頁(yè)面1，它將看到與第3頁(yè)相同的但具有100個(gè)項(xiàng)目的頁(yè)面?？蛻?hù)在查看所有內(nèi)容時(shí)已經(jīng)記住了兩頁(yè)項(xiàng)目，我們對(duì)此沒(méi)有任何更改，因此可以自由返回并在頁(yè)面中查看相同的項(xiàng)目，每頁(yè)有25個(gè)項(xiàng)目，而前進(jìn)則為每頁(yè)100個(gè)?？蛻?hù)可以隨時(shí)更改過(guò)濾條件，例如加載100個(gè)項(xiàng)目，然后再次返回到25，我們應(yīng)該使用正確數(shù)量的項(xiàng)目重新加載該頁(yè)面。如果客戶(hù)在任何時(shí)候再次重新過(guò)濾列表，則該頁(yè)面和下一頁(yè)將顯示正確數(shù)量的項(xiàng)目。

要繼續(xù)學(xué)習(xí)如何創(chuàng)建良好的列表瀏覽體驗(yàn)，請(qǐng)執(zhí)行以下操作：

永遠(yuǎn)不要完全重置客戶(hù)的進(jìn)度。

始終在當(dāng)前頁(yè)面上注入或重置帶有選定數(shù)量的項(xiàng)目。

始終使用舊選項(xiàng)顯示以前的選項(xiàng)。

始終根據(jù)新的過(guò)濾器顯示下一頁(yè)。

對(duì)過(guò)濾器的任何更改將僅更新以下頁(yè)面。

當(dāng)然，這些規(guī)則不適用于其余過(guò)濾器。我們將必須進(jìn)行完全重置，這里沒(méi)有邏輯選項(xiàng)。如果您位于第3頁(yè)，則更改價(jià)格過(guò)濾器后就無(wú)法停留在該頁(yè)面上，您需要從0開(kāi)始，因?yàn)槟枰蚝蠡仡櫲魏涡碌母摹４诉壿嬕?guī)則集僅適用于每頁(yè)過(guò)濾器項(xiàng)。