在日常工作中，我們也會將列表頁稱為List頁，就是把若干內(nèi)容以某維度集合起來的聚合頁。本文主要給大家整理一下關(guān)于列表頁的設(shè)計歸納，以及應(yīng)該注意的一些細(xì)節(jié)問題。

列表頁的設(shè)計，一直被大家所忽略。感覺沒什么可做，亦或沒什么發(fā)力點，設(shè)計側(cè)內(nèi)部給到的排期時間也不充裕，提需求的也不看重。自然，設(shè)計師輸出的過程中就少了一些思考和仔細(xì)。最后進(jìn)入開發(fā)或上線后，可能就會暴露問題。

今天給大家整理一下關(guān)于列表頁的設(shè)計歸納，以及應(yīng)該注意的一些細(xì)節(jié)問題。

概念

什么是列表頁？日常工作中，我們也會叫List頁，就是把若干內(nèi)容以某維度集合起來的聚合頁。

類型

主要常見的列表頁大類我們可以劃分為以下三種：

當(dāng)然內(nèi)容&功能list不僅僅只有微信這樣的形式，這里只是示例，比如：攜程的APP首頁也是相同類型的列表頁。篩選結(jié)果list，我們暫且定義為：從某些入口進(jìn)入的，不需要用戶輸入任何內(nèi)容的列表頁。

搜索結(jié)果list和篩選結(jié)果list，除了結(jié)果內(nèi)容的多少之外，貌似看上去都一樣。我們聚焦在頁面頂部，就會發(fā)現(xiàn)有兩個地方不同：一個是搜索框內(nèi)是否有關(guān)鍵詞；一個是“更多篩選”的選項是否高亮。

對于搜索結(jié)果list搜索框展示關(guān)鍵詞，大家應(yīng)該都毋庸置疑。但篩選結(jié)果list，用戶沒有輸入，是從某個入口進(jìn)來的，順推這里增設(shè)搜索框的話，搜索框內(nèi)應(yīng)該是沒有任何內(nèi)容的。如果考慮到告知用戶當(dāng)前是根據(jù)什么樣條件展示的內(nèi)容，應(yīng)在頁面標(biāo)題欄告知。

但實際上，一些平臺篩選結(jié)果list的搜索框依然有關(guān)鍵詞。比如：天貓，從分類中女鞋-板鞋進(jìn)入，如圖：

我們大膽猜測兩種可能：

• 一是為了節(jié)約資源，直接復(fù)用了搜索結(jié)果list；
• 另一個，為了節(jié)省屏幕空間，呈現(xiàn)更多內(nèi)容，去掉了頂部的標(biāo)題欄，間接告知用戶當(dāng)前頁面的主題內(nèi)容是什么。

但不管原因怎樣，我個人覺得，這樣做不是特別嚴(yán)謹(jǐn)，原因如下：

• 其一：前面提到搜索框是用戶輸入關(guān)鍵詞的地方。雖然平臺將若干關(guān)鍵詞組合成某個入口，但實際用戶并沒有輸入關(guān)鍵詞，不應(yīng)該以這樣的形式呈現(xiàn)。
• 其二：試想，用戶來到篩選結(jié)果list，想在當(dāng)前的品類或內(nèi)容下，再細(xì)分，在搜索框輸入了關(guān)鍵詞，如：紅色，但實際天貓的搜索池是全站，出現(xiàn)的是紅色的裙子，并非鎖定在當(dāng)前的品類，造成結(jié)果懵逼。

因此個人建議：篩選結(jié)果頁，若考慮提供搜索框，應(yīng)該是鎖定在當(dāng)前品類下或者某些條件的，如前面圖所示的京東房產(chǎn)篩選結(jié)果列表，亦或告知用戶此搜索的搜索范疇。

下圖是當(dāng)時做TOPLIFE的篩選列表頁的時候，考慮到以上問題，沒有提供搜索框，同時還有另一個原因，一期上線的時候，SKU數(shù)量相對較少。

再簡單說下“更多篩選”高亮的問題，因為在入口處，已經(jīng)鎖定了一些“篩選”內(nèi)的一些選項，搜索結(jié)果頁和篩選結(jié)果頁的底層邏輯是一樣的，故這里選擇了高亮狀態(tài)，來告知用戶，“篩選”中有被選中的選項。

搜索結(jié)果list和篩選結(jié)果list是很像，但他們的確不一樣。

作用

如下圖，列表頁背后的終極目標(biāo)就是提高效率，解決問題。

我們舉例電商平臺的列表頁，來到列表頁，就是想快速找到我想要購買的商品，完成湊單、查找商品等任務(wù)。其中對比，包含不同緯度的排名對比，以及內(nèi)容之間的對比。而篩選是讓結(jié)果能夠更精準(zhǔn)，減少對比內(nèi)容的數(shù)量。

大多數(shù)的列表頁都是某個流程上的重要中間環(huán)節(jié)，并不是用戶的最終目的。故此，我們在設(shè)計中，應(yīng)該將效率作為整個列表頁的KPI來進(jìn)行考核。

主要結(jié)構(gòu)

圍繞作用，我們再來看看列表頁都應(yīng)該提供哪些內(nèi)容。

主要分為兩個大模塊，如圖：

內(nèi)容是主體，功能是提高效率的工具，兩者也有著相互關(guān)系。主體有內(nèi)容時，工具才能發(fā)揮作用，工具也會影響內(nèi)容的呈現(xiàn)。

內(nèi)容模塊，根據(jù)平臺或者業(yè)務(wù)屬性不同，需要展示的信息也不同。但所有的列表頁都要明確告知用戶，當(dāng)前頁面是根據(jù)什么條件展示的內(nèi)容。

以上三種類型的列表頁功能可以大致歸為如圖以下內(nèi)容：

以上歸納了幾種常見功能，不同場景下的列表頁，選用的功能也是根據(jù)自身實際情況來決定，當(dāng)然也要根據(jù)用戶的實際需求來設(shè)定，如電商平臺列表頁的功能和社交平臺的列表承載的一定是不一樣的。

但是要遵循一點：平衡效率和內(nèi)容呈現(xiàn)量。如果一股腦子全露出，必定會影響用戶的實際效率，優(yōu)先級一定要理清楚。

我們可以參考天貓，搜索結(jié)果list，當(dāng)用戶向下瀏覽的時候，頂部所有內(nèi)容，會向上隱藏，屏幕留出最大區(qū)域來展示主體。

設(shè)計細(xì)節(jié)

1. 盡量減少用戶輸入

搜索容易出錯，篩選路徑拉長，兩者如果體驗不佳，都會造成用戶流失。關(guān)于列表頁內(nèi)的搜索，減少輸入一般策略有，用戶點擊搜索框，就會出現(xiàn)熱搜、歷史搜索。用戶輸入內(nèi)容時，就會出現(xiàn)聯(lián)想搜索等等，甚至有些自動幫你填好熱門的關(guān)鍵詞，只要點擊確認(rèn)就可以。

這里提供一個建議，如果用戶輸入的關(guān)鍵詞涉及到多個品類時，結(jié)果列表頁中是否可以能夠外露出品不同品類名稱，讓用戶去點擊。實際就是將重要的篩選項外露出來，減少用戶再次輸入或減短篩選的路徑。

如用戶搜索”咖啡“，則會在結(jié)果頁上呈現(xiàn)出：速溶咖啡、咖啡粉、咖啡豆、咖啡利口酒等。同時也存在不同品類，涉及到內(nèi)容也不盡相同，是否能夠在資源充足的情況下，能夠針對性的提供對應(yīng)方案。

2. 合理解決異常流

出錯是永遠(yuǎn)避免不了的，用戶出錯的”智慧”也是無窮的，我們只能盡量減少。針對出錯，我們應(yīng)該怎樣讓用戶找到“正確”結(jié)果 。

搜索是最容易出現(xiàn)出錯的， 下圖為京東房產(chǎn)搜索異常的處理，列表頁并非全以空狀態(tài)展示，而是即便你出錯，我也能給你內(nèi)容。

3. 尊重需求

用戶的需求是多樣化的，如：我需要這個功能，但是我不常用，不過你要在我能輕易找到的地方出現(xiàn)。其實對于篩選列表頁的搜索框有著類似的需求。實際案例中，微信首頁頂部的搜索欄就是這樣設(shè)計的，打開APP時，默認(rèn)搜索欄被移到標(biāo)題欄的后面隱藏起來，下拉才會出現(xiàn)。

其次，對于列表頁的篩選及排序，也是應(yīng)該根據(jù)平臺特性及用戶需求定義的。如咸魚的綜合排序內(nèi)有“離我最近”的排序項，這是需要我們設(shè)計時注意的。

4. 合理布局及結(jié)構(gòu)

1）突出主體

無論什么類型的列表頁，內(nèi)容才是重頭戲，功能只是輔助，更多的篇幅應(yīng)該是留給主體。

2）結(jié)合平臺實際情況，選擇合理的布局

移動端布局，大部分都是上下結(jié)構(gòu)，一些擴(kuò)展功能會選擇抽屜形式。 我們再看PC，PC的列表頁樣式就多種多樣了。搜索結(jié)果list和篩選結(jié)果list主要有兩種，一種左右結(jié)構(gòu)，一種上下結(jié)構(gòu)。

如下圖所示：

3）分組分類

列表頁往往都是內(nèi)容豐富的，合理的模塊化，會讓頁面內(nèi)容更清晰。如微信中的“發(fā)現(xiàn)”，iPhone的系統(tǒng)設(shè)置，對信息都是進(jìn)行了歸類。

5. 主體內(nèi)容呈現(xiàn)形式盡量多樣化

列表頁內(nèi)的主體內(nèi)容，建議多樣化。電商平臺一般都提供兩種模式：一種偏列表形式，一種偏宮格形式，意在讓用戶選擇，自己更傾向看哪種信息。

6. 注意PC篩選器與面包屑的相輔相成

如今很多網(wǎng)站已經(jīng)看不到了面包屑，大部分電商平臺仍在保留，意在能夠讓用戶明確當(dāng)前頁面所處的位置，以及快速的返回到之前的頁面。這里不僅僅呈現(xiàn)的是用戶選擇的內(nèi)容，也代表著層級關(guān)系，設(shè)計過程中不可忽略。

由于邏輯復(fù)雜，內(nèi)容較多，下期可以再細(xì)聊。

結(jié)語

以上是對日常工作對列表頁的設(shè)計進(jìn)行的歸納總結(jié)，關(guān)于列表頁，個人認(rèn)為實際還是有很多可以探索，仍有不足，感謝各位前輩能夠補(bǔ)充討論。

作者：天琦，公眾號：未知素設(shè)計

本文由 @天琦 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議