編輯導(dǎo)讀：在C端產(chǎn)品設(shè)計(jì)中，數(shù)據(jù)列表頁是非常常見的頁面，它一般用來展示多條信息條目。雖然看起來十分簡(jiǎn)單，但也是不可或缺非常重要的頁面。本文作者從產(chǎn)品使用場(chǎng)景出發(fā)，對(duì)列表頁設(shè)計(jì)的設(shè)計(jì)重點(diǎn)和步驟展開了梳理分析，供大家一同參考和學(xué)習(xí)。

一、場(chǎng)景描述

作為產(chǎn)品的設(shè)計(jì)者，我們想象以下幾個(gè)常見的場(chǎng)景：

1. 一款電商產(chǎn)品，在搜索框中輸入手機(jī)，系統(tǒng)會(huì)反饋回來很多個(gè)手機(jī)相關(guān)的內(nèi)容，且每個(gè)內(nèi)容的信息較多，如何將這些內(nèi)容“同時(shí)”展示給用戶？
2. 一個(gè)外賣平臺(tái)，入駐了很多不同的餐廳提供不同的菜品，當(dāng)用戶打開軟件定食物時(shí)，如何將合適的餐廳“同時(shí)”展示給用戶？
3. 策劃一個(gè)特賣活動(dòng)，對(duì)很多個(gè)商品進(jìn)行打折促銷，策劃者希望活動(dòng)頁面能夠讓用戶盡可能多的看到商品有哪些，如何將這些商品“同時(shí)”展示給用戶？

上述場(chǎng)景在產(chǎn)品中經(jīng)常發(fā)生：產(chǎn)品中存在很多內(nèi)容，在一些場(chǎng)景下需要“同時(shí)”反饋給用戶，供用戶瀏覽，但頁面空間是及其有限的，而每一條內(nèi)容的信息量通常又較大，“沒辦法”在同一個(gè)頁面展示每一個(gè)內(nèi)容的全部信息。

二、解決方法

為了解決這個(gè)問題，我們引入一個(gè)頁面。在這個(gè)頁面，通過減少每一個(gè)內(nèi)容所展示的信息量，來增加展示的內(nèi)容數(shù)量，用戶對(duì)某條內(nèi)容產(chǎn)生興趣后，再點(diǎn)擊查看該內(nèi)容的全部詳情。這樣，就在同一個(gè)頁面空間中將多條內(nèi)容展示在了用戶面前。通常我們把這個(gè)中間頁面稱為列表頁。

如圖，圖一的列表頁面中，展示了多個(gè)文章，但對(duì)每個(gè)文章，只展示了標(biāo)題，如果用戶對(duì)某一個(gè)文章感興趣，可點(diǎn)擊查看文章詳情。

列表頁在產(chǎn)品中十分常見，基本存在于產(chǎn)品的各個(gè)功能版塊，是連接用戶與內(nèi)容詳情的關(guān)鍵頁面，對(duì)于列表頁面的設(shè)計(jì)不可掉以輕心。

三、如何設(shè)計(jì)列表頁面？

產(chǎn)品將內(nèi)容展示給用戶，是希望用戶會(huì)根據(jù)內(nèi)容進(jìn)行一些對(duì)產(chǎn)品有價(jià)值的操作，如購買、關(guān)注等，通常，用戶對(duì)內(nèi)容了解的越多，越可能產(chǎn)生這些行為。

但由于列表頁的特性，使得每一條內(nèi)容只展示很少部分信息，因此，如何能夠盡可能的讓用戶產(chǎn)生點(diǎn)擊查看詳情的沖動(dòng)是設(shè)計(jì)列表頁面要考慮的重點(diǎn)?？梢詮膬煞矫婵紤]：

1. 展示哪些信息以及如何展示
2. 列表頁面采用哪種風(fēng)格

1. 展示哪些信息以及如何展示

用戶是否會(huì)對(duì)內(nèi)容產(chǎn)生興趣進(jìn)而查看詳情，取決于內(nèi)容在列表頁所展示的信息，因?yàn)?，這是用戶在列表頁唯一可以了解內(nèi)容的途徑?？梢酝ㄟ^以下3個(gè)步驟來確定展示的信息：

（1）結(jié)合產(chǎn)品定位和內(nèi)容類型選出用戶更關(guān)注的信息

不同的產(chǎn)品，有不同的定位，影響著用戶對(duì)于產(chǎn)品的認(rèn)知，也因?yàn)楫a(chǎn)生的認(rèn)知，吸引著目標(biāo)用戶群體。通過向用戶傳遞出產(chǎn)品的定位，可以更好的吸引用戶，留住用戶。

對(duì)于已經(jīng)到達(dá)產(chǎn)品中的用戶，通過將能夠傳達(dá)出產(chǎn)品定位的信息融入到用戶的使用路徑中，不斷的觸達(dá)用戶，強(qiáng)化用戶的印象。

用來強(qiáng)化產(chǎn)品定位的信息，需要能夠讓用戶快速且“正確”的理解。用戶在瀏覽時(shí)，不會(huì)停下來，調(diào)動(dòng)大腦深度思考，需要讓用戶第一反應(yīng)就能理解；而正確，則是指：這個(gè)信息表達(dá)的含義是產(chǎn)品想要傳達(dá)給用戶，不能產(chǎn)生歧義或者無法理解。比如：

同樣是做服飾電商的產(chǎn)品，前者主打折扣吸引用戶，折扣的信息是及其重要的，越快讓用戶感知到越好，因此，在列表頁面，會(huì)著重突出折扣相關(guān)的信息；而后者，主打高端，雖也有商品會(huì)打折，但卻不會(huì)像前者這樣著重突出。

產(chǎn)品的定位更多的是從整個(gè)產(chǎn)品或者業(yè)務(wù)線的維度思考，而不同的產(chǎn)品或者業(yè)務(wù)線，會(huì)有不同類型的內(nèi)容。不同的內(nèi)容類型，用戶對(duì)于內(nèi)容的關(guān)注點(diǎn)也會(huì)有所不同，能吸引用戶的信息自然也不同。例如：

對(duì)于外賣餐廳，用戶在選擇的時(shí)候，會(huì)關(guān)心口味、配送的時(shí)間、優(yōu)惠力度，因此，展示如商家的評(píng)分，人均消費(fèi)，滿減折扣、配送方式、距離等信息，可以更好的幫用戶作出判斷；
而對(duì)于視頻內(nèi)容，用戶會(huì)關(guān)注內(nèi)容的看點(diǎn)，因此，可以展示如劇情類型，或者劇中明星等來吸引用戶。

在思考列表頁內(nèi)容展示哪些信息時(shí)，根據(jù)產(chǎn)品定位明確對(duì)目標(biāo)用戶的吸引點(diǎn)，進(jìn)而篩選出對(duì)用戶有吸引力的信息；根據(jù)內(nèi)容類型，可以明確不同的內(nèi)容用戶會(huì)關(guān)注的信息有哪些。這樣，我們可以初步選出一批需要展示的信息。

（2）根據(jù)列表的使用場(chǎng)景，選出該場(chǎng)景下重要的信息

不同的展示場(chǎng)景，用戶所關(guān)注的信息會(huì)有所不同，所展示的信息自然也需要不同。

如圖，是同一個(gè)電商產(chǎn)品的商品列表，但在限時(shí)秒殺的商品列表頁和搜索結(jié)果頁所展示的信息卻不同。

對(duì)用戶來講，看到限時(shí)秒殺進(jìn)入頁面，除了查看秒殺的商品有哪些，還會(huì)關(guān)注秒殺的商品價(jià)格是否足夠的合適，而產(chǎn)品運(yùn)營(yíng)者則希望能夠通過價(jià)格信息和剩余時(shí)間來刺激用戶，快速下單，因此，在秒殺列表頁面，著重突出了商品近期的最低價(jià)格以及剩余數(shù)量。而搜索列表則對(duì)這些信息沒有過多展示。

在考慮場(chǎng)景的時(shí)候，可以考慮用戶進(jìn)入列表的前置動(dòng)作，在該場(chǎng)景下的心理期望，會(huì)關(guān)注的點(diǎn)有哪些，同時(shí)也考慮在這個(gè)場(chǎng)景下，產(chǎn)品的目標(biāo)是什么，如何能夠引導(dǎo)用戶朝著產(chǎn)品期望的目標(biāo)操作。根據(jù)這兩方面的考慮，來選出該場(chǎng)景下，哪些信息對(duì)促進(jìn)用戶進(jìn)入詳情頁有幫助。

（3）對(duì)選出的信息進(jìn)行優(yōu)先級(jí)排序，明確信息的級(jí)別關(guān)系

通過上面兩步驟，選出了一批需要展示的信息，但不同信息對(duì)用戶的吸引度是不同的，還需對(duì)篩選出的信息進(jìn)行優(yōu)先級(jí)的排列。

優(yōu)先級(jí)排列，可以依據(jù)每個(gè)信息對(duì)于用戶的吸引力度進(jìn)行打分，最好的方法是進(jìn)行用戶調(diào)研，了解真實(shí)用戶對(duì)每個(gè)信息的關(guān)注度；如果沒有條件進(jìn)行調(diào)研，可以根據(jù)過往經(jīng)驗(yàn)或?qū)Ρ认嚓P(guān)競(jìng)品。

對(duì)信息進(jìn)行優(yōu)先級(jí)排序有兩個(gè)用途：

1. 判斷選出的信息哪些可以刪減。通過上邊的兩步驟，我們可能會(huì)選出較多的想要在列表頁面展示的信息，但列表頁的空間是寶貴的，這時(shí)，通過信息的優(yōu)先級(jí)排序，可以對(duì)選出的信息再次刪減，以達(dá)到節(jié)省空間的目的。
2. 對(duì)信息進(jìn)行視覺權(quán)重的設(shè)計(jì)。不同級(jí)別的信息，在進(jìn)行視覺設(shè)計(jì)時(shí)，是有不同的權(quán)重的。

例如，在設(shè)計(jì)課程列表頁時(shí)，對(duì)課程選出了一批通用類信息：課程標(biāo)題、課程時(shí)間、課程老師、課程價(jià)格、購課人數(shù)。

課程標(biāo)題，通過這個(gè)信息，用戶能大概理解內(nèi)容，判斷出這個(gè)課程是否適合，定為最重要的信息；其次是老師、價(jià)格。老師是對(duì)學(xué)生很有吸引力的信息，尤其是行業(yè)內(nèi)的名師，而價(jià)格也是學(xué)生在選擇課程時(shí)會(huì)考慮的主要因素；課程時(shí)間和購課人數(shù)，這兩個(gè)信息是輔助功能，相對(duì)的關(guān)注度沒有前幾者這么高。

由此，對(duì)于這些信息，大致分為3個(gè)層級(jí)：課程標(biāo)題為第一層級(jí)；課程老師、售價(jià)為第二層級(jí)；課程時(shí)間、購課人數(shù)為第三層級(jí)。隨著層級(jí)的降低，信息在列表頁的視覺權(quán)重也隨之低。

通過上面的三個(gè)步驟，我們可以確定每個(gè)場(chǎng)景下，不同內(nèi)容在列表頁面所應(yīng)該展示的信息以及信息間的展示級(jí)別關(guān)系。

2. 列表頁面采用哪種風(fēng)格？

確定了展示的信息后，設(shè)計(jì)者還需要考慮列表頁面的風(fēng)格。在不同的場(chǎng)景，產(chǎn)品所希望呈現(xiàn)給用戶的感知是不同的，有的希望展示格調(diào)、有的希望營(yíng)造“逛”的體驗(yàn)，還有的會(huì)希望明了一些，而列表頁面的樣式風(fēng)格，會(huì)直接影響用戶的感知。

比如下邊三個(gè)常見的列表樣式

圖一的卡片形式：視覺效果很好，顯得很有格調(diào)。但單個(gè)內(nèi)容占用的頁面空間比較大一些，且為了營(yíng)造好的視覺效果，對(duì)于內(nèi)容的配圖要考究很多，多用在傳遞格調(diào)的場(chǎng)景中，比如精品圖片社區(qū)、大牌服裝的自有APP等；

圖二網(wǎng)格類型：通過圖片+標(biāo)題的密集排列和較為明顯的分割留白，更容易營(yíng)造出“逛”的場(chǎng)景感，在推薦以及首頁中經(jīng)常使用；使用這種樣式，需要產(chǎn)品內(nèi)有足夠多的內(nèi)容支撐；

圖三平鋪類型：應(yīng)該是最常見的，優(yōu)點(diǎn)是信息量的展示和空間的占用比較平衡，適用于高效瀏覽，如搜索結(jié)果頁面、新聞列表等信息較多的場(chǎng)景下。

設(shè)計(jì)者需要根據(jù)列表的使用場(chǎng)景，確定所希望傳遞給用戶的感知，來進(jìn)行整體風(fēng)格的確定。

總結(jié)

列表頁作為產(chǎn)品中最常見的頁面之一，是用戶瀏覽產(chǎn)品中內(nèi)容的主要頁面，承載著“說服”用戶到內(nèi)容詳情。本文通過確定列表頁展示的信息和確定列表頁面風(fēng)格兩方面，為列表頁面的設(shè)計(jì)提供一些思路。

作者：海先生，公眾號(hào)：慢言錄

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

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