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

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

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

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

為什么要設(shè)計(jì)列表頁，列表頁的核心功能及價(jià)值在于什么地方。

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

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

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

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

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

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

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

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

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

因此，懶飯APP提取出兩個(gè)最重要的因素：做菜時(shí)長(zhǎng)、做菜難度，如下圖：

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

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

列表分為：常規(guī)型列表、營銷型會(huì)場(chǎng)列表以及個(gè)性化推薦列表。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)&后記

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

作者：鴻鵠學(xué)社，微信號(hào)：xiechengdl001。大廠高級(jí)產(chǎn)品經(jīng)理，熟悉擅長(zhǎng)領(lǐng)域：新零售電商，7年互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)。

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

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