列表頁是APP中常見的頁面類型之一，它是承接導航頁與詳情頁的中間頁。列表頁用來展示多條信息條目，雖然看起來十分簡單，但也是不可或缺非常重要的頁面。本文以APP列表頁為例，詳述APP列表的設計原則與技巧，對于入門的新手有一定的幫助。

不論是新手還是部分有一定工作經驗的產品經理在做一個產品功能時或者畫一個頁面時，都沒有想清楚：為什么要做這個功能或者頁面？這個頁面或者功能的目的究竟是什么？然后，就開始動手畫原型了。

又或者接到需求后，直接照搬別人的產品，卻沒有思考這樣照搬是否是正確的。知其然還必須知其所以然，所以我們首先要學會從產品本質來分析一個頁面的功能具體是什么。再從業務角度分析這個頁面，然后再逐層分解，具體到該頁面的元素、頁面內容的布局以及細節性的斟酌。

一、從產品功能角度分析

為什么要設計列表頁，列表頁的核心功能及價值在于什么地方。

1. 列表頁的核心功能是什么，列表頁是什么？

簡而言之，列表頁的核心目的就是展示同類信息的部分信息，方便用戶進行快速地瀏覽及篩選。

列表頁是放置多條信息入口的容器，使用戶可以快速瀏覽并找到自己的目標信息，進而達到快速轉化的目的。

用戶在這里的主要需求有兩個：“快速瀏覽”和“快速區分”，瀏覽眾多的信息，快速找到自己需要的信息。

那么，列表展示什么內容才能方便用戶快速篩選呢？

2. 用戶想要看到什么信息，怎么來確定用戶的接受度、喜好度？

既然列表頁是給用戶瀏覽的，所以要解決的問題就是用戶想要看到什么信息。產品經理要通過訪談方式、AB測試看數據表現、借鑒成功產品經驗等方式來看用戶的反饋。如果產品在前期沒有做詳細的用戶調研，那只能根據同理心，想象目標用戶的使用場景。

以懶飯APP列表頁為例，場景：周末，畢業參加工作不久的上班族小小吃膩了快餐，想自己做一頓容易做又好吃又省時不一樣的飯菜，苦于不會做，于是打開了懶飯APP。

作為廚房新手，好吃簡單容易做就是他需要的，所以在查看列表時，他需要的就是能夠快速找到那些難度低、省時間不太費力的菜譜，所以菜譜列表中的圖片要用成品圖，要有誘惑力。

因此，懶飯APP提取出兩個最重要的因素：做菜時長、做菜難度，如下圖：

二、從視覺實現角度分析

1. 列表頁的頁面元素有哪些？ 有多少種展示樣式？

列表分為：常規型列表、營銷型會場列表以及個性化推薦列表。

常規列表內容主要包括導航欄、卡片內容以及篩選項。

以下圖為例：導航欄主要包括返回、搜索以及定位三個功能；篩選項包括位置篩選、租金篩選等；卡片內容包括租住房子主圖、租房標題、月租價格、樓層/面積大小、距離、標簽。

營銷列表又叫會場列表，會場營銷列表的樣式豐富多樣，可以一排兩個，也可以一排三個，多種形式糅合在一起。比如：雜糅了活動、排行榜、熱門推薦、會員專享、秒殺專區等等多種多樣的形式。

個性化推薦列表只是一個單獨的模塊，與列表頁詳情頁雜糅在一起，比如：購物車。

2. 卡片內容的考慮

在列表中，卡片承載了列表頁中的主要內容，卡片內容很大程度決定了用戶想要快速瀏覽的內容及篩選的選項。

卡片的展現方式多種多樣，有瀑布流樣式、一排一個，一排兩個，一排三個及宮格式的展現樣式，瀑布流樣式的好處就在于不會壓縮圖片，看起來更美觀。

此外，在做卡片內容時，需要思考的核心是給用戶提供什么樣的內容，用戶關注的點是什么，怎么去收集用戶這些關注的點。假如要做一款菜譜APP，在前期內容少時，你會選取哪幾個字段作為你的卡片內容。在第一版的時候，一定要考慮好

3. 列表頁要注意哪些細節性的內容？

既然列表頁在APP中承擔著非常重要的角色，那么列表頁中的頁面元素有哪些？

列表頁中除了導航欄、卡片內容以及篩選項外，列表頁還有哪些細節需要注意。列表的狀態、列表的加載機制以及排序也是非常重要的內容。

列表的狀態，比如：購物車中的商品列表就有上架中、下架、售罄等狀態，就需要用不同的樣式來進行區分。

此外，列表為空怎么展現，這也屬于列表的狀態。列表的加載機制是怎樣的，屬于整體加載還是部分加載，每次加載多少條等等細節需要考慮清楚。除此之外，排序也是列表中最常見的一個功能，列表究竟按時間還是權重排序，要結合具體業務來進行排序。

4. 列表頁的需求文檔怎么標注呢？需要注意哪些細節性內容？

總結&后記

剛入門的產品經理最喜歡功能堆砌，但是沒有想清楚每個細小功能背后的深層邏輯。內容越少，越考驗產品經理的設計能力，一個簡單的列表頁后也有它的邏輯。

作者：鴻鵠學社，微信號：xiechengdl001。大廠高級產品經理，熟悉擅長領域：新零售電商，7年互聯網產品設計經驗。

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

題圖來自Unsplash，基于CC0協議