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

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

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

一、從產(chǎn)品功能角度分析

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

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

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

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

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

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

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

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

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

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

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

二、從視覺實現(xiàn)角度分析

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

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

常規(guī)列表內(nèi)容主要包括導航欄、卡片內(nèi)容以及篩選項。

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

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

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

2. 卡片內(nèi)容的考慮

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

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

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

3. 列表頁要注意哪些細節(jié)性的內(nèi)容？

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

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

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

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

4. 列表頁的需求文檔怎么標注呢？需要注意哪些細節(jié)性內(nèi)容？

總結(jié)&后記

剛?cè)腴T的產(chǎn)品經(jīng)理最喜歡功能堆砌，但是沒有想清楚每個細小功能背后的深層邏輯。內(nèi)容越少，越考驗產(chǎn)品經(jīng)理的設計能力，一個簡單的列表頁后也有它的邏輯。

作者：鴻鵠學社，微信號：xiechengdl001。大廠高級產(chǎn)品經(jīng)理，熟悉擅長領域：新零售電商，7年互聯(lián)網(wǎng)產(chǎn)品設計經(jīng)驗。

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

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