列表頁就是以展示列表 List 為主的頁面，所以我們需要先理解列表是什么。
列表源自編程術(shù)語，是一種數(shù)據(jù)結(jié)構(gòu)，即按照線性順序排列的數(shù)據(jù)項集合（有限序列）。說人話，就是按照一定順序展示數(shù)據(jù)的形式。
我們再用UI設(shè)計的角度來理解它，可以把它分為 “列” 和 “表” 兩個部分。我們先理解表，表就是“表格”的意思，這也是計算機中存儲數(shù)據(jù)最基礎(chǔ)的形式（關(guān)系型），我們在頁面中看見的多數(shù)內(nèi)容都以這種形式記錄。
列則是動詞 “排列” 的意思，用一定的邏輯、方法、順序?qū)⒈砀衽帕谐鰜怼＿@種排列是要經(jīng)過設(shè)計和調(diào)整的，不會和原來的表格完全一致。
也就是說，列表設(shè)計是種對表格的轉(zhuǎn)換，是種對數(shù)據(jù)的可視化呈現(xiàn)形式。
之所以要強調(diào)這個，就是因為想要做好列表設(shè)計就離不開對數(shù)據(jù)的理解，一個專業(yè)的列表設(shè)計不是做一個好看整齊的重復(fù)性組件，而是將數(shù)據(jù)表格清晰有效的反映出來。
數(shù)據(jù)表格對列表的影響包含下面幾個要素：
1. 屬性字段的影響
屬性字段就是列表內(nèi)要放的具體信息點，也就是數(shù)據(jù)表格中的表頭。比如一個商品列表中，要放商品圖片、商品名、品牌標(biāo)簽、節(jié)日標(biāo)簽、營銷標(biāo)簽、銷售量、好評率、價格、原價……每個獨立的信息就是一個字段。
而一個真實的項目列表內(nèi)，往往會包含非常多的字段，所以開始設(shè)計前要先搞清楚數(shù)量和明細(xì)，以及它們各自的含義。一方面是設(shè)計中不能有字段的缺失，另一方面是字段中包含對應(yīng)的權(quán)重、分類，是設(shè)計前必須要確定的信息。
比如下面的列表內(nèi)容，就包含了大量的字段信息，而這些字段既有權(quán)重的強弱，也有分類的整理，是經(jīng)過設(shè)計師的專業(yè)分析和設(shè)計的結(jié)果。
2. 屬性值的影響
屬性值就是每個屬性具體放什么內(nèi)容，有什么限制。比如商品名，肯定是放商品名稱的文本，但文本一般是什么樣的，最長支持多少字，這些就是屬性值的基本信息。
屬性值在開發(fā)環(huán)境中只能是文本（字符串），但在設(shè)計中這個值就不一定只是文本，可能還是圖片、圖標(biāo)、符號等內(nèi)容，中間會有轉(zhuǎn)化過程。比如用戶列表中，用戶有不同的 VIP 等級，數(shù)據(jù)中記錄的等級肯定是文本性質(zhì)的，而展示出來卻可能是專屬的黃金、白銀、青銅圖標(biāo)。
屬性值的認(rèn)識同樣非常重要，決定了列表的設(shè)計是否準(zhǔn)確，符合產(chǎn)品的規(guī)劃。
3. 字段狀態(tài)的影響
最后字段的狀態(tài)，就是字段展示的邏輯，簡單解釋起來就是字段什么情況下出現(xiàn)，什么時候隱藏，出現(xiàn)的時候顯示什么內(nèi)容這三個問題。
比如美團的列表中，有美團商家列表中，運輸標(biāo)簽有美團快送、專送、全城送、商家自配等不同類型，而下方的配送時間也在樣式上會有差異，這就是對字段狀態(tài)的表達。
而越是復(fù)雜的列表，包含的字段狀態(tài)差異就越大，往往會直接影響列表的樣式，所以設(shè)計過程中就要體現(xiàn)盡可能多的樣式狀態(tài)，也就是設(shè)計它的不同變體，確保在各種場景中它們能正確顯示。
想要設(shè)計好列表，就要面對上面提到的三個問題。優(yōu)秀的列表不止是一種視覺結(jié)果，而是一種能兼容相關(guān)數(shù)據(jù)展示的容器規(guī)則。
接著我們來理解列表頁的主要框架和布局形式，入門它的基本設(shè)計要點。
首先列表頁不是只有列表一種組件，多數(shù)還會包含對列表數(shù)據(jù)進行搜索、篩選、排序的組件。
除此之外，部分重要的列表頁還可能在頂部放運營模塊，用來展示一些熱門推薦內(nèi)容或單純作為廣告位。
運營內(nèi)容放頂部且篇幅較小是因為頁面形式的限制，不能在頂部放太多內(nèi)容讓列表被頂?shù)降诙寥ァＫ阅壳暗脑O(shè)計為了更好的塞入內(nèi)容，就會選擇在列表中插入其它數(shù)據(jù)，比如純運營廣告，也可能是內(nèi)容推薦，或者是模塊入口等。
總結(jié)起來，列表頁的主要框架就是頂部搜索欄、特殊模塊、篩選排序欄、列表區(qū)域的組合。
而最關(guān)鍵的列表區(qū)域，可以使用不同的列表來展示信息，我們可以簡單分成“單列”和“多列”兩個布局大類。下面我們就分別對這兩個分類類型做個解析。
1. 單列列表
單列列表就是一行只有一個數(shù)據(jù)對象的列表形式。而單列列表模式中還區(qū)分兩種類型的列表，一種是引導(dǎo)型，一種是展示型。
引導(dǎo)型就是引導(dǎo)用戶點擊進入查看詳情，比如商品列表、酒店列表，是為了讓我們在列表中找到感興趣的內(nèi)容點擊進入詳情頁面。
而展示型，就是直接在列表中展示主要信息，讓用戶直接順著列表的順序查看主要的內(nèi)容，而不是進入到詳情頁查看。最有代表性的展示型列表，就是朋友圈這類動態(tài)列表了。
單列列表對單個數(shù)據(jù)對象的展示空間較大，但是單屏瀏覽數(shù)據(jù)量就會減少，適用于數(shù)據(jù)對象字段較多的場景。
2. 多列列表
多列列表就是一行會展示多個數(shù)據(jù)對象的列表形式。通常移動端的多列列表只有兩列，在少數(shù)情況下才會出現(xiàn)三列。而兩列模式中，也包含兩種布局形式，一種是等高展示，一種是瀑布流。
等高展示就是列表內(nèi)數(shù)據(jù)對象的高度是保持一致的，每個數(shù)據(jù)對象的尺寸統(tǒng)一左右對齊，適用于字段類型、內(nèi)容相對統(tǒng)一變化小的場景。
而瀑布流，則是數(shù)據(jù)對象高度不一致的多列布局形式，相對更靈活適用面更廣，適合字段類型、內(nèi)容變化較大，不同數(shù)據(jù)對象的差異極大的場景。
多列列表在單屏內(nèi)展示的效率比單列高，可以提供更高的瀏覽效率。具體應(yīng)該使用哪種得設(shè)計師自己根據(jù)場景來判斷做出選擇，沒有絕對準(zhǔn)確的方式。
列表頁整體的框架基本就這些標(biāo)準(zhǔn)，想要完成列表頁設(shè)計就要先確定布局框架，然后再進一步深入到組件設(shè)計和細(xì)節(jié)樣式中去。而一個項目中可以使用多種列表布局形式，所以這也是我們在原型階段就可以做出決策的部分。
轉(zhuǎn)載自：https://www.uisdc.com/ui-list-guide
