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

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

今天給大家整理一下關于列表頁的設計歸納，以及應該注意的一些細節問題。

概念

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

類型

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

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

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

對于搜索結果list搜索框展示關鍵詞，大家應該都毋庸置疑。但篩選結果list，用戶沒有輸入，是從某個入口進來的，順推這里增設搜索框的話，搜索框內應該是沒有任何內容的。如果考慮到告知用戶當前是根據什么樣條件展示的內容，應在頁面標題欄告知。

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

我們大膽猜測兩種可能：

• 一是為了節約資源，直接復用了搜索結果list；
• 另一個，為了節省屏幕空間，呈現更多內容，去掉了頂部的標題欄，間接告知用戶當前頁面的主題內容是什么。

但不管原因怎樣，我個人覺得，這樣做不是特別嚴謹，原因如下：

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

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

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

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

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

作用

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

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

大多數的列表頁都是某個流程上的重要中間環節，并不是用戶的最終目的。故此，我們在設計中，應該將效率作為整個列表頁的KPI來進行考核。

主要結構

圍繞作用，我們再來看看列表頁都應該提供哪些內容。

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

內容是主體，功能是提高效率的工具，兩者也有著相互關系。主體有內容時，工具才能發揮作用，工具也會影響內容的呈現。

內容模塊，根據平臺或者業務屬性不同，需要展示的信息也不同。但所有的列表頁都要明確告知用戶，當前頁面是根據什么條件展示的內容。

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

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

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

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

設計細節

1. 盡量減少用戶輸入

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

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

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

2. 合理解決異常流

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

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

3. 尊重需求

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

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

4. 合理布局及結構

1）突出主體

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

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

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

如下圖所示：

3）分組分類

列表頁往往都是內容豐富的，合理的模塊化，會讓頁面內容更清晰。如微信中的“發現”，iPhone的系統設置，對信息都是進行了歸類。

5. 主體內容呈現形式盡量多樣化

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

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

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

由于邏輯復雜，內容較多，下期可以再細聊。

結語

以上是對日常工作對列表頁的設計進行的歸納總結，關于列表頁，個人認為實際還是有很多可以探索，仍有不足，感謝各位前輩能夠補充討論。

作者：天琦，公眾號：未知素設計

本文由 @天琦 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議