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

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

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

概念

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

類型

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

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

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

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

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

我們大膽猜測(cè)兩種可能：

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

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

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

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

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

再簡(jiǎn)單說(shuō)下“更多篩選”高亮的問(wèn)題，因?yàn)樵谌肟谔?，已?jīng)鎖定了一些“篩選”內(nèi)的一些選項(xiàng)，搜索結(jié)果頁(yè)和篩選結(jié)果頁(yè)的底層邏輯是一樣的，故這里選擇了高亮狀態(tài)，來(lái)告知用戶，“篩選”中有被選中的選項(xiàng)。

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

作用

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

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

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

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

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

主要分為兩個(gè)大模塊，如圖：

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

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

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

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

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

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

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

1. 盡量減少用戶輸入

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

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

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

2. 合理解決異常流

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

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

3. 尊重需求

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

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

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

1）突出主體

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

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

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

如下圖所示：

3）分組分類

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

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

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

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

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

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

結(jié)語(yǔ)

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

作者：天琦，公眾號(hào)：未知素設(shè)計(jì)

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

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