Design Pattern 組合實例 - 列表頁設計思考
上周我們通過「用戶通知與中斷」再次分析了如何去拆分、抽象 Pattern 的設計思路和過程，很多同學表示對這種形式很感興趣，希望能夠繼續沿著這個方向講下去。
這裡其實可以和大家提前預告一下，Patterns 作為 Design System 中最為實用的一部分在這個系列中是會持續的做下去的，晚些時候也會和大家分享一張 Patterns 的整體邏輯大圖，我會基於這個大圖繼續給大家進行講解。
Patterns 作為一個問題的解決方案其實還是具備一定的複雜性的，為了更好解決問題我們很多時候會使用多個 Patterns 進行組合，來討論一個實質性的問題。所以今天我們討論的 Pattern 是 List（列表頁面），同時基於這個案例來和大家介紹一下組合 Patterns。
曾經有位設計師同學拿著一個列表頁的設計稿來尋求一些意見。雖然做了很多的前期思考、分析工作，但對於當前的方案是不是好還是拿不定注意。總覺得看到的案例都很有好，但怎麼將這些優點融入到自己的設計中十分的頭疼。
這個案例其實也挺普遍的。就像下圖一樣，List 列表頁作為一個基礎功能模塊幾乎在每個產品中都能看到，我們總能看到很多優秀的案例（如下圖）。
很多時候大家看待一個好的案例時更多的關注點是放在了設計本身，忽略了它對業務特性的體現以及和客觀述求的融合，這也就導致了大家回到自己的設計時反而不知道該如何抉擇。
所以，回到之前總是提到那個觀點，商業產品的設計還是需要關注在解決實際的用戶和業務的問題。所以設計的好壞不僅僅關乎其本身，更重要的要看是否為解決實際問題而服務。
既然我們今天聊得是一個 Design Pattern，那麼我們也還是需要回歸到問題的本質，先來思考一下 List 列表頁究竟解決的是什麼問題？
List 究竟解決什麼問題？
我們回到 System 的角度，List 的本質其實是為用戶提供一系列同類數據信息的展示。當然，僅僅到這一步是不夠的，展示信息的目的是什麼？解決什麼問題呢？
對於大多數產品來說 List 大多數時候只是某個任務的一個中間環節。比如在電商環節，list 列表頁是到達詳情頁的信息瀏覽；批處理過程中的數據選擇。
這說明 List 列表頁在很多情況下只是一個過程，用戶的最終目標並不停留在此。所以再回過頭來思考 List 究竟解決的是什麼問題，我會給出以下定義：
List 的本質是為用戶提供一系列的同類信息展示，通過有效的信息組織，幫助用戶快速找到感興趣的信息並引導進入下一步的操作。
下圖中的三個案例基本可以代表我們經常看到的不同 list 類型。
第一個是純信息展示，用戶來到這裡的目的就是獲取信息，所以這裡不提供操作；
第二個屬於信息的縮略展示，用戶通過基礎信息找到感興趣的內容進入下一級詳情頁面進行下一步操作；
第三個是帶具體 action 的信息展示，不過對於下一級詳情（或是該流程的最終目標）很清晰，所以從效率角度考慮，將重要的 action 直接前置到了 list 上。
基於以上這個對 List 列表頁的定義和分析，我們再回頭來看上面的那一排 List 的案例，大家應該稍微有點感覺了吧。我們可以先不必糾結於那些各式各樣的設計形式，按照這個思路再找一個合適的維度來將 list 列表頁分拆開進行分析。
List 是如何組成的
在早前的周刊中我們介紹過一個「摺疊設計法」（第 50 期），對於那些複雜的界面設計如果我們不知道如何下手，不妨先將所有的「設計」先褪掉，將頁面信息還原成最原始的狀態。
這就像將頁面的 CSS 和 JS 去掉一樣，將排版、隱藏交互都去掉，所有的信息都從上至下依次排列。如果用一個電商產品列表頁作為案例，那麼每一個商品的所有信息沒有摺疊、沒有縮略，都按照順序一個接一個全部展示在一個頁面上。
當然，按照一個正常的產品邏輯這樣做顯然是不合適的。為了能夠有效的組織信息，我們需要對 list 列表頁上的信息做縮減，給出足夠的信息引導用戶進入下一個流程即可。
所以，那些看上去眼花繚亂的 list 列表無非都是一系列信息（圖/文）和行為（操作/手勢）的組合。
信息是對 list 列表頁上信息展示的有效組織，行為是為幫助用戶快速找到感興趣的信息並引導進入下一步的操作提供幫助。想要達成這個目的，我們有三個重點需要關註：
- List 列表頁上應該提供哪些信息，提供多少信息足以幫助用戶進行判斷？
- 為了幫助用戶快速找到感興趣的內容，list 列表頁應該提供哪些工具進行幫助？
- 為了提升整體的操作效率，list 列表頁中的每一個 item 應該配備什麼樣的操作？
接下來我們將圍繞著這三個問題進行進一步的 list 列表頁拆解分析。
List 應該提供哪些信息
下面這張圖是一個關於信息/效率的曲線圖。信息欄位是能夠有助於用戶判斷選擇的效率，但它始終有一個度。當信息量大到一定程度的時候，判斷選擇的效率會開始衰減。
我們在日常工作中涉及到的 List 列表頁大部分都會對應一個詳情頁，想要幫助用戶做出有效的挑選判斷。List 列表頁上的每一個 item 放置多少欄位、哪些欄位就變得非常的重要了。
上面的這個曲線是一個通用概念，但其實落在不同的行業領域中這個波峰出現在哪裡是有差異的。
比如一個社交類產品，在 list 列表中只需要用戶的頭像、昵稱、關係數、發布數就能夠幫助用戶進行選擇判斷；但如果切換到電商領域，除了圖片標題、銷量、評價、價格、折扣、運費、庫存等等欄位則都會影響到用戶的選擇判斷。
所以對於信息的組成我們首先需要明確一個觀點，list 列表頁上的信息展示是為了給用戶在一系列同類信息中進行對比判斷提供幫助，對此沒有幫助的信息在這裡沒有出現的必要，應該留在詳情頁中進行展示。同時這根線劃在哪裡，對於不同的行業領域是有差異的，重點還是在於提供對比判斷的幫助。
信息的梳理是 list 列表頁的第一步工作，正如前面所說它可能只是用戶流程中的一個環節。任務還沒有結束，為了能夠讓用戶最高效、方便的完成任務，我們可以給 items 提供一些操作給予幫助，接下來我們再來看看對於操作的設計我們應該如何入手。
以上是 Design System 系列的第 7 期的節選內容，在餘下的全文內容中（付費部分）我們將繼續接著討論針對信息的操作匹配以及如何提供功能幫助用戶快速定義感興趣的信息，同時我們還將就 list 列表頁講解組合 Pattern 的訂閱和使用。
加入 PinDesign 會員，獲取本期主題「Design Pattern 組合實例 - 列表頁設計思考」的全文內容及本系列前 2 期周刊的贈送。
Design System 是 PinDesign 周刊的一個新系列，基於「Design Systems」這本書結構框架的讀書筆記和經驗總結。希望將自己的感受和經驗分享給大家，輔助大家的閱讀。
點擊領取 PinDesign 會員計劃 50 元優惠券
Design System 系列已更新：
5key：什麼是 Design System
5key：Design Systems 02 - 什麼是 Design Principles
5key：Components 與 Patterns 究竟有什麼區別
5key：你該為產品設計怎樣的氣質
5key：Design System 中的 Design Token
5key：Design Pattern 實例 - 用戶通知與中斷
5key：Design Pattern 組合實例 - 列表頁設計思考
點擊下方鏈接，了解 PinDesign 會員計劃詳細信息：
PinDesign 互聯網產品設計周刊推薦閱讀：
※一些體驗很好但是很小眾的軟體，盈利點在哪？
※為用戶設計產品
※這個節目講述了各種溫暖人心的設計細節
※UX研究方法「小抄」
TAG:DesignThinking | 设计模式 | 用户体验设计 |