起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識最簡單的列表頁，卻也最難做好
在日常工作中，我們也會將列表頁稱為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 協議
微信值得深入研究分享下