<li id="g3zqm"></li>
2026-6-4 之晨 移動端UI設計文章及欣賞
列表頁就是以展示列表 List 為主的頁面，所以我們需要先理解列表是什么。
列表源自編程術語，是一種數據結構，即按照線性順序排列的數據項集合（有限序列）。說人話，就是按照一定順序展示數據的形式。
我們再用UI設計的角度來理解它，可以把它分為 “列” 和 “表” 兩個部分。我們先理解表，表就是“表格”的意思，這也是計算機中存儲數據最基礎的形式（關系型），我們在頁面中看見的多數內容都以這種形式記錄。
列則是動詞 “排列” 的意思，用一定的邏輯、方法、順序將表格排列出來。這種排列是要經過設計和調整的，不會和原來的表格完全一致。
也就是說，列表設計是種對表格的轉換，是種對數據的可視化呈現形式。
之所以要強調這個，就是因為想要做好列表設計就離不開對數據的理解，一個專業的列表設計不是做一個好看整齊的重復性組件，而是將數據表格清晰有效的反映出來。
數據表格對列表的影響包含下面幾個要素：
1. 屬性字段的影響
屬性字段就是列表內要放的具體信息點，也就是數據表格中的表頭。比如一個商品列表中，要放商品圖片、商品名、品牌標簽、節日標簽、營銷標簽、銷售量、好評率、價格、原價……每個獨立的信息就是一個字段。
而一個真實的項目列表內，往往會包含非常多的字段，所以開始設計前要先搞清楚數量和明細，以及它們各自的含義。一方面是設計中不能有字段的缺失，另一方面是字段中包含對應的權重、分類，是設計前必須要確定的信息。
比如下面的列表內容，就包含了大量的字段信息，而這些字段既有權重的強弱，也有分類的整理，是經過設計師的專業分析和設計的結果。
2. 屬性值的影響
屬性值就是每個屬性具體放什么內容，有什么限制。比如商品名，肯定是放商品名稱的文本，但文本一般是什么樣的，最長支持多少字，這些就是屬性值的基本信息。
屬性值在開發環境中只能是文本（字符串），但在設計中這個值就不一定只是文本，可能還是圖片、圖標、符號等內容，中間會有轉化過程。比如用戶列表中，用戶有不同的 VIP 等級，數據中記錄的等級肯定是文本性質的，而展示出來卻可能是專屬的黃金、白銀、青銅圖標。
屬性值的認識同樣非常重要，決定了列表的設計是否準確，符合產品的規劃。
3. 字段狀態的影響
最后字段的狀態，就是字段展示的邏輯，簡單解釋起來就是字段什么情況下出現，什么時候隱藏，出現的時候顯示什么內容這三個問題。
比如美團的列表中，有美團商家列表中，運輸標簽有美團快送、專送、全城送、商家自配等不同類型，而下方的配送時間也在樣式上會有差異，這就是對字段狀態的表達。
而越是復雜的列表，包含的字段狀態差異就越大，往往會直接影響列表的樣式，所以設計過程中就要體現盡可能多的樣式狀態，也就是設計它的不同變體，確保在各種場景中它們能正確顯示。
想要設計好列表，就要面對上面提到的三個問題。優秀的列表不止是一種視覺結果，而是一種能兼容相關數據展示的容器規則。
接著我們來理解列表頁的主要框架和布局形式，入門它的基本設計要點。
首先列表頁不是只有列表一種組件，多數還會包含對列表數據進行搜索、篩選、排序的組件。
除此之外，部分重要的列表頁還可能在頂部放運營模塊，用來展示一些熱門推薦內容或單純作為廣告位。
運營內容放頂部且篇幅較小是因為頁面形式的限制，不能在頂部放太多內容讓列表被頂到第二屏去。所以目前的設計為了更好的塞入內容，就會選擇在列表中插入其它數據，比如純運營廣告，也可能是內容推薦，或者是模塊入口等。
總結起來，列表頁的主要框架就是頂部搜索欄、特殊模塊、篩選排序欄、列表區域的組合。
而最關鍵的列表區域，可以使用不同的列表來展示信息，我們可以簡單分成“單列”和“多列”兩個布局大類。下面我們就分別對這兩個分類類型做個解析。
1. 單列列表
單列列表就是一行只有一個數據對象的列表形式。而單列列表模式中還區分兩種類型的列表，一種是引導型，一種是展示型。
引導型就是引導用戶點擊進入查看詳情，比如商品列表、酒店列表，是為了讓我們在列表中找到感興趣的內容點擊進入詳情頁面。
而展示型，就是直接在列表中展示主要信息，讓用戶直接順著列表的順序查看主要的內容，而不是進入到詳情頁查看。最有代表性的展示型列表，就是朋友圈這類動態列表了。
單列列表對單個數據對象的展示空間較大，但是單屏瀏覽數據量就會減少，適用于數據對象字段較多的場景。
2. 多列列表
多列列表就是一行會展示多個數據對象的列表形式。通常移動端的多列列表只有兩列，在少數情況下才會出現三列。而兩列模式中，也包含兩種布局形式，一種是等高展示，一種是瀑布流。
等高展示就是列表內數據對象的高度是保持一致的，每個數據對象的尺寸統一左右對齊，適用于字段類型、內容相對統一變化小的場景。
而瀑布流，則是數據對象高度不一致的多列布局形式，相對更靈活適用面更廣，適合字段類型、內容變化較大，不同數據對象的差異極大的場景。
轉載自優設網
蘭亭妙微（藍藍設計）www.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
