列表頁就是以展示列表 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ù)表格對列表的影響包含下面幾個要素:
- 屬性字段
- 字段值
- 字段狀態(tài)
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ù)降诙寥ァK阅壳暗脑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