上期回顧：

一、列表頁的頂部設計

開始列表頁的設計要先完成頂部欄的設計，主要包括搜索、篩選、排序等標準內容。簡單的列表頁可能頂部只是個標題欄或是只有搜索，這種最基本的模式就不用多加解釋。

更進一步，就是添加了基本篩選或排序的功能，通常它們會在標題欄外獨占一行。

在這類設計中，額外增加的篩選或排序欄通常和頂欄是連接在一起的，且它的高度通常也小于頂欄。然后下方的選項可以是等分的，也可以是左右滾動的。

移動端的空間小，所以為了盡可能利用空間，篩選和排序的操作選項往往就非常多樣。包含單選、開關、下拉按鈕、喚起彈窗等四種類型，它們往往會組合出現。

而在這些操作選項中，有個非常值得注意的小細節，就是排序和下拉菜單控件的沖突，因為排序有上下箭頭指示，下拉菜單也有上下箭頭指示，所以為了避免沖突，單一排序選項我們會同時放上下箭頭用于點亮，多排序選項就只放下拉菜單，用文字將排序條件全部羅列出來。

再往更復雜的場景推進，除了常規篩選和排序外，這類頁面往往還會增加額外的選項，尤其是標簽選項。從而讓頂欄變成有三、四行的 “漢堡包”形態。

這些多欄的操作和布局由產品需求決定，而在設計中我們要注意的，就是每欄內選項的樣式要有差異，上一欄用普通文字按鈕，下一欄就用標簽按鈕。如果沒有非常顯著的權重對比，可以直接使用相同的欄高和接近的選項視覺大小。

頂部欄因為內容多，往往會占據屏幕很大的區域，阻礙用戶瀏覽下方的信息流，所以這類頂欄通常還會在上滑后縮小，隱藏一部分選項，通過下拉會重新顯示。

以上就是頂欄設計的相關思路，如果要添加運營模塊就是另一個議題，不在這個討論范圍內了。

二、列表頁的列表設計

接下來我們就要展開對列表組件的設計了，而在設計單一列表項之前，我們需要先確定整個組件的基本架構。除了單列和多列的差異之外，還有在視覺中的卡片與通欄效果之分。

卡片效果即每個列表項是以卡片形式呈現的，不同列表項是不同的卡片，相互之間有間距，且有背景色來突出分隔間距。

通欄則是列表之間沒有間距，且橫向填滿整個區域的做法（數量少的時候下方就有背景），列表項之間通常使用分割線來做區分。

使用哪種類型由項目整體的視覺風格決定，但不管選哪種我們還要確定一個設計細節，就是頁面左右內間距的大小。

原則上一個項目內除了全屏圖片、視頻等場景外，會統一一般頁面的內間距尺寸，但在真實的設計場景中，列表頁的內間距往往和其它頁面不一致。

造成這個差異的主要原因，就是列表作為信息流，是最吸引用戶注意力的頁面類型，為了放大它的效果就要盡量增加它的面積，讓內容可以看的更清晰，提供更沉浸的瀏覽體驗。所以重要的信息流頁面，往往只會使用8以下的內間距。

接下來，我們就分別解釋單列和多列列表設計的細節。

三、單列列表

單列列表的設計先確定框架的樣式，基本上就下面幾種模式。

而單一列表項內的設計邏輯，遵循先上下、后左右的順序。

上下即確認該列表項內從上到下分成幾個模塊，比如常見的動態列表項，從上到下會包含用戶、內容、操作三個部分。外賣或商品訂單列表項，從上到下會包含店鋪、訂單信息、操作三個部分。

上下模塊是由字段的不同類型拆分而來，不同產品需求會拆分出不同的分類形成不同的模塊，也可能不需要拆分出上下模塊只有一個即可。這就需要設計師自己分析字段做決策了。

完成上下模塊的劃分后，再分別定義每個模塊內的左右內容布局。以商品服務卡片為例，通常左側是圖片右側是文字信息，而一些新聞資訊類信息流中，可能就會倒過來。

設計中最主要的難點，就是單個列表項應該做多高，圖片應該用多大。這里的設計邏輯，就是先完成文本信息的布局和設計，再決定左側圖片的高度。

而包含了大量字段的信息區域，設計的邏輯其實并不復雜，也遵循先上下再左右的邏輯，比如酒店列表項中，先確定標題、數據、位置、特色、介紹、價格等欄，然后再確定每個欄內左右的布局。

具體每個字段應該用什么樣式和顏色，就要根據項目實際場景決定了，沒有絕對的限制。而信息部分最高發的問題，就是使用了過小的字號和過多的字重，建議在卡片內最小字號不低于10，且主要使用regular字重，沒有絕對的必要不加粗。

四、多列列表

多列列表的設計，同樣也要先去確定框架，基本就下面這幾種模式。要注意的是，只有卡片模式會用瀑布流，而通欄模式只適合做等高。

接下來就是設計單個列表項的內容了，雙列列表的設計會相對更容易一些，因為它是由上下布局主導的，左右布局的考慮因素非常少。

以常見的雙列商品列表為例，從上到下分別是圖片/視頻、信息、銷量評價、商家。動態卡片常見的做法則是圖片/視頻、信息、用戶。

如果雙列卡片中出現圖片或視頻，那么就需要重點考慮它們使用的高度。一種情況是由我們設置一個固定的長寬比例來生成高度（適配需要），比如16:9、2:3、4:3 等。

另一種情況，則是由內容的比例決定，即用戶上傳什么比例的圖，展示什么比例，比如花瓣這樣。但在這種情況下，還需要決定它的最小和最大尺寸。

而下方的文本信息布局，邏輯就和上面提到的基本一致，只要向下羅列展開即可。

完成上面這些內容的定義，也就完成了該頁面UI元素的設計。但是，對于作品集設計或者完整的方案來說還沒有結束。我們還需要為了最終展示效果服務，所以這里還有個列表頁設計最關鍵的步驟 ——?配圖。

列表要保證觀看的體驗，就需要配圖也是流暢統一的，需要盡量按一個標準、構圖、風格來完成圖片封面的填充，而不是完全隨心所欲的往里貼，最終的展示效果一定特別差。下面我們直接用線上的真實圖例來做個對比。

同時，一個優秀的設計案例必然是包含有效的細節在里面，而列表中除了配圖外最值得關注的細節，就是不同列表項是有狀態上的差異的。在最終設計稿中，我們可以盡量展示不同的狀態，才能讓這個列表看起來更生動、真實，而不是很應付的復制黏貼。

列表頁設計的難度并不大，視覺性也不強，主要關注的是對布局規則的制定邏輯，以滿足用戶體驗和項目的實際需要。想要做好它就必須要先積累對它的正確認識，強烈建議你們對比同類型列表截圖并分析它們之間的差異和優劣（真實項目做競品分析中會干的）。

結尾

下一篇應該會圍繞在個人主頁或我的頁面的設計來做介紹，也可能是表盤類頁面，想要什么類型的可以留言或在社群中發出來。

我們下篇再賤~