一、列表頁(yè)的基本認(rèn)識(shí)

列表頁(yè)就是以展示列表 List 為主的頁(yè)面，所以我們需要先理解列表是什么。

列表源自編程術(shù)語(yǔ)，是一種數(shù)據(jù)結(jié)構(gòu)，即按照線性順序排列的數(shù)據(jù)項(xiàng)集合（有限序列）。說(shuō)人話，就是按照一定順序展示數(shù)據(jù)的形式。

我們?cè)儆肬I設(shè)計(jì)的角度來(lái)理解它，可以把它分為 “列” 和 “表” 兩個(gè)部分。我們先理解表，表就是“表格”的意思，這也是計(jì)算機(jī)中存儲(chǔ)數(shù)據(jù)最基礎(chǔ)的形式（關(guān)系型），我們?cè)陧?yè)面中看見(jiàn)的多數(shù)內(nèi)容都以這種形式記錄。

列則是動(dòng)詞 “排列” 的意思，用一定的邏輯、方法、順序?qū)⒈砀衽帕谐鰜?lái)。這種排列是要經(jīng)過(guò)設(shè)計(jì)和調(diào)整的，不會(huì)和原來(lái)的表格完全一致。

也就是說(shuō)，列表設(shè)計(jì)是種對(duì)表格的轉(zhuǎn)換，是種對(duì)數(shù)據(jù)的可視化呈現(xiàn)形式。

之所以要強(qiáng)調(diào)這個(gè)，就是因?yàn)橄胍龊昧斜碓O(shè)計(jì)就離不開(kāi)對(duì)數(shù)據(jù)的理解，一個(gè)專業(yè)的列表設(shè)計(jì)不是做一個(gè)好看整齊的重復(fù)性組件，而是將數(shù)據(jù)表格清晰有效的反映出來(lái)。

數(shù)據(jù)表格對(duì)列表的影響包含下面幾個(gè)要素：

1. 屬性字段
2. 字段值
3. 字段狀態(tài)

1. 屬性字段的影響

屬性字段就是列表內(nèi)要放的具體信息點(diǎn)，也就是數(shù)據(jù)表格中的表頭。比如一個(gè)商品列表中，要放商品圖片、商品名、品牌標(biāo)簽、節(jié)日標(biāo)簽、營(yíng)銷標(biāo)簽、銷售量、好評(píng)率、價(jià)格、原價(jià)……每個(gè)獨(dú)立的信息就是一個(gè)字段。

而一個(gè)真實(shí)的項(xiàng)目列表內(nèi)，往往會(huì)包含非常多的字段，所以開(kāi)始設(shè)計(jì)前要先搞清楚數(shù)量和明細(xì)，以及它們各自的含義。一方面是設(shè)計(jì)中不能有字段的缺失，另一方面是字段中包含對(duì)應(yīng)的權(quán)重、分類，是設(shè)計(jì)前必須要確定的信息。

比如下面的列表內(nèi)容，就包含了大量的字段信息，而這些字段既有權(quán)重的強(qiáng)弱，也有分類的整理，是經(jīng)過(guò)設(shè)計(jì)師的專業(yè)分析和設(shè)計(jì)的結(jié)果。

2. 屬性值的影響

屬性值就是每個(gè)屬性具體放什么內(nèi)容，有什么限制。比如商品名，肯定是放商品名稱的文本，但文本一般是什么樣的，最長(zhǎng)支持多少字，這些就是屬性值的基本信息。

屬性值在開(kāi)發(fā)環(huán)境中只能是文本（字符串），但在設(shè)計(jì)中這個(gè)值就不一定只是文本，可能還是圖片、圖標(biāo)、符號(hào)等內(nèi)容，中間會(huì)有轉(zhuǎn)化過(guò)程。比如用戶列表中，用戶有不同的 VIP 等級(jí)，數(shù)據(jù)中記錄的等級(jí)肯定是文本性質(zhì)的，而展示出來(lái)卻可能是專屬的黃金、白銀、青銅圖標(biāo)。

屬性值的認(rèn)識(shí)同樣非常重要，決定了列表的設(shè)計(jì)是否準(zhǔn)確，符合產(chǎn)品的規(guī)劃。

3. 字段狀態(tài)的影響

最后字段的狀態(tài)，就是字段展示的邏輯，簡(jiǎn)單解釋起來(lái)就是字段什么情況下出現(xiàn)，什么時(shí)候隱藏，出現(xiàn)的時(shí)候顯示什么內(nèi)容這三個(gè)問(wèn)題。

比如美團(tuán)的列表中，有美團(tuán)商家列表中，運(yùn)輸標(biāo)簽有美團(tuán)快送、專送、全城送、商家自配等不同類型，而下方的配送時(shí)間也在樣式上會(huì)有差異，這就是對(duì)字段狀態(tài)的表達(dá)。

而越是復(fù)雜的列表，包含的字段狀態(tài)差異就越大，往往會(huì)直接影響列表的樣式，所以設(shè)計(jì)過(guò)程中就要體現(xiàn)盡可能多的樣式狀態(tài)，也就是設(shè)計(jì)它的不同變體，確保在各種場(chǎng)景中它們能正確顯示。

想要設(shè)計(jì)好列表，就要面對(duì)上面提到的三個(gè)問(wèn)題。優(yōu)秀的列表不止是一種視覺(jué)結(jié)果，而是一種能兼容相關(guān)數(shù)據(jù)展示的容器規(guī)則。

二、列表頁(yè)的框架布局

接著我們來(lái)理解列表頁(yè)的主要框架和布局形式，入門(mén)它的基本設(shè)計(jì)要點(diǎn)。

首先列表頁(yè)不是只有列表一種組件，多數(shù)還會(huì)包含對(duì)列表數(shù)據(jù)進(jìn)行搜索、篩選、排序的組件。

 

除此之外，部分重要的列表頁(yè)還可能在頂部放運(yùn)營(yíng)模塊，用來(lái)展示一些熱門(mén)推薦內(nèi)容或單純作為廣告位。

運(yùn)營(yíng)內(nèi)容放頂部且篇幅較小是因?yàn)轫?yè)面形式的限制，不能在頂部放太多內(nèi)容讓列表被頂?shù)降诙寥ァＫ阅壳暗脑O(shè)計(jì)為了更好的塞入內(nèi)容，就會(huì)選擇在列表中插入其它數(shù)據(jù)，比如純運(yùn)營(yíng)廣告，也可能是內(nèi)容推薦，或者是模塊入口等。

總結(jié)起來(lái)，列表頁(yè)的主要框架就是頂部搜索欄、特殊模塊、篩選排序欄、列表區(qū)域的組合。

而最關(guān)鍵的列表區(qū)域，可以使用不同的列表來(lái)展示信息，我們可以簡(jiǎn)單分成“單列”和“多列”兩個(gè)布局大類。下面我們就分別對(duì)這兩個(gè)分類類型做個(gè)解析。

1. 單列列表

單列列表就是一行只有一個(gè)數(shù)據(jù)對(duì)象的列表形式。而單列列表模式中還區(qū)分兩種類型的列表，一種是引導(dǎo)型，一種是展示型。

引導(dǎo)型就是引導(dǎo)用戶點(diǎn)擊進(jìn)入查看詳情，比如商品列表、酒店列表，是為了讓我們?cè)诹斜碇姓业礁信d趣的內(nèi)容點(diǎn)擊進(jìn)入詳情頁(yè)面。

而展示型，就是直接在列表中展示主要信息，讓用戶直接順著列表的順序查看主要的內(nèi)容，而不是進(jìn)入到詳情頁(yè)查看。最有代表性的展示型列表，就是朋友圈這類動(dòng)態(tài)列表了。

單列列表對(duì)單個(gè)數(shù)據(jù)對(duì)象的展示空間較大，但是單屏瀏覽數(shù)據(jù)量就會(huì)減少，適用于數(shù)據(jù)對(duì)象字段較多的場(chǎng)景。

2. 多列列表

多列列表就是一行會(huì)展示多個(gè)數(shù)據(jù)對(duì)象的列表形式。通常移動(dòng)端的多列列表只有兩列，在少數(shù)情況下才會(huì)出現(xiàn)三列。而兩列模式中，也包含兩種布局形式，一種是等高展示，一種是瀑布流。

等高展示就是列表內(nèi)數(shù)據(jù)對(duì)象的高度是保持一致的，每個(gè)數(shù)據(jù)對(duì)象的尺寸統(tǒng)一左右對(duì)齊，適用于字段類型、內(nèi)容相對(duì)統(tǒng)一變化小的場(chǎng)景。

而瀑布流，則是數(shù)據(jù)對(duì)象高度不一致的多列布局形式，相對(duì)更靈活適用面更廣，適合字段類型、內(nèi)容變化較大，不同數(shù)據(jù)對(duì)象的差異極大的場(chǎng)景。

轉(zhuǎn)載自優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.payeee.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。