編輯導讀：在C端產品設計中，數據列表頁是非常常見的頁面，它一般用來展示多條信息條目。雖然看起來十分簡單，但也是不可或缺非常重要的頁面。本文作者從產品使用場景出發，對列表頁設計的設計重點和步驟展開了梳理分析，供大家一同參考和學習。

一、場景描述

作為產品的設計者，我們想象以下幾個常見的場景：

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

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

二、解決方法

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

如圖，圖一的列表頁面中，展示了多個文章，但對每個文章，只展示了標題，如果用戶對某一個文章感興趣，可點擊查看文章詳情。

列表頁在產品中十分常見，基本存在于產品的各個功能版塊，是連接用戶與內容詳情的關鍵頁面，對于列表頁面的設計不可掉以輕心。

三、如何設計列表頁面？

產品將內容展示給用戶，是希望用戶會根據內容進行一些對產品有價值的操作，如購買、關注等，通常，用戶對內容了解的越多，越可能產生這些行為。

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

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

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

用戶是否會對內容產生興趣進而查看詳情，取決于內容在列表頁所展示的信息，因為，這是用戶在列表頁唯一可以了解內容的途徑?？梢酝ㄟ^以下3個步驟來確定展示的信息：

（1）結合產品定位和內容類型選出用戶更關注的信息

不同的產品，有不同的定位，影響著用戶對于產品的認知，也因為產生的認知，吸引著目標用戶群體。通過向用戶傳遞出產品的定位，可以更好的吸引用戶，留住用戶。

對于已經到達產品中的用戶，通過將能夠傳達出產品定位的信息融入到用戶的使用路徑中，不斷的觸達用戶，強化用戶的印象。

用來強化產品定位的信息，需要能夠讓用戶快速且“正確”的理解。用戶在瀏覽時，不會停下來，調動大腦深度思考，需要讓用戶第一反應就能理解；而正確，則是指：這個信息表達的含義是產品想要傳達給用戶，不能產生歧義或者無法理解。比如：

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

產品的定位更多的是從整個產品或者業務線的維度思考，而不同的產品或者業務線，會有不同類型的內容。不同的內容類型，用戶對于內容的關注點也會有所不同，能吸引用戶的信息自然也不同。例如：

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

在思考列表頁內容展示哪些信息時，根據產品定位明確對目標用戶的吸引點，進而篩選出對用戶有吸引力的信息；根據內容類型，可以明確不同的內容用戶會關注的信息有哪些。這樣，我們可以初步選出一批需要展示的信息。

（2）根據列表的使用場景，選出該場景下重要的信息

不同的展示場景，用戶所關注的信息會有所不同，所展示的信息自然也需要不同。

如圖，是同一個電商產品的商品列表，但在限時秒殺的商品列表頁和搜索結果頁所展示的信息卻不同。

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

在考慮場景的時候，可以考慮用戶進入列表的前置動作，在該場景下的心理期望，會關注的點有哪些，同時也考慮在這個場景下，產品的目標是什么，如何能夠引導用戶朝著產品期望的目標操作。根據這兩方面的考慮，來選出該場景下，哪些信息對促進用戶進入詳情頁有幫助。

（3）對選出的信息進行優先級排序，明確信息的級別關系

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

優先級排列，可以依據每個信息對于用戶的吸引力度進行打分，最好的方法是進行用戶調研，了解真實用戶對每個信息的關注度；如果沒有條件進行調研，可以根據過往經驗或對比相關競品。

對信息進行優先級排序有兩個用途：

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

例如，在設計課程列表頁時，對課程選出了一批通用類信息：課程標題、課程時間、課程老師、課程價格、購課人數。

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

由此，對于這些信息，大致分為3個層級：課程標題為第一層級；課程老師、售價為第二層級；課程時間、購課人數為第三層級。隨著層級的降低，信息在列表頁的視覺權重也隨之低。

通過上面的三個步驟，我們可以確定每個場景下，不同內容在列表頁面所應該展示的信息以及信息間的展示級別關系。

2. 列表頁面采用哪種風格？

確定了展示的信息后，設計者還需要考慮列表頁面的風格。在不同的場景，產品所希望呈現給用戶的感知是不同的，有的希望展示格調、有的希望營造“逛”的體驗，還有的會希望明了一些，而列表頁面的樣式風格，會直接影響用戶的感知。

比如下邊三個常見的列表樣式

圖一的卡片形式：視覺效果很好，顯得很有格調。但單個內容占用的頁面空間比較大一些，且為了營造好的視覺效果，對于內容的配圖要考究很多，多用在傳遞格調的場景中，比如精品圖片社區、大牌服裝的自有APP等；

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

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

設計者需要根據列表的使用場景，確定所希望傳遞給用戶的感知，來進行整體風格的確定。

總結

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

作者：海先生，公眾號：慢言錄

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

題圖來自Unsplash，基于CC0協議