列表頁的設計要點（列表頁信息展示）

2023-04-22 22:05:34

編輯導語：如何做好列表頁的信息展示，讓用戶可以更加清晰地獲取信息，在提供用戶更好的視覺和使用體驗時，推動用戶的下一步操作？你可以利用多種方法，如留白、分割等，搭建合理的視覺展示結構。本文作者便做了相應總結，一起來看一下。
在列表頁設計信息時，面對多種視覺結構時該採用哪種比較合適的疑惑，思考以下了問題：
用戶是如何有效認知信息？信息使用哪種視覺容器，能更好表現不同信息之間關係的目的，以及在閱讀與使用時能帶給用戶更好的體驗？由於手機屏幕尺寸有限，怎麼再增加屏效？
筆者接下來會按以下方式來講述：
為什麼需要信息整理；列表頁信息組織方式有哪些；設計注意；總結。一、為什麼需要信息整理？
思考一下在界面中，當信息以一種無序的排列，和信息以結構化的排列相比，為何大多數的界面都選擇了後者。
設計師在設計信息如何在界面展示時，都在思考如何使用戶更快理解從而產生下一步操作，本篇文章分析與總結了信息如何通過有效結構化展示，來覆蓋各種場景，使用戶體驗更加流暢，來和讀者共同探討。
用戶如何認知信息？
用戶在看到界面的時候，會無意識在思考「哪裡最重要」，接著就會思考「與它有關聯的信息有哪些？」等等問題，所以我們在設計界面時，應通過建立合適的視覺層級以及不同信息之間的關係，來解決用戶所遇到的問題。
1）建立層級：主要通過字體、字體大小、粗細、顏色來區分層級（文章通過會結合具體實例來解釋）。
2）建立關係：為了傳達信息之間的關係，比如說上下屬關係：菜單欄標籤A與標籤下方的內容a就是上下屬關係，可以通過視覺上的組織與空間上的組織進行設計。
視覺上的組織：視覺上感受信息之間的關係主要是通過接近性、相似性、連續性，共同背景等方式。空間上的組織：單頁面空間裡，人一般有從左至右、從上至下的閱讀習慣的順序。二、列表頁信息組織方式有哪些？
1）列表頁單個容器內信息的組成部分有標題、輔助信息、圖片/icon、操控按鈕、提示信息等。
標題與輔助信息在信息層級上，一般通過設計規範的不同字號、顏色和粗細來區分層級。
信息關係上主要利用格式塔原理之一——接近法則，進行信息分組。接近性原理是指：物體之間的相對距離會影響我們感知它們是否以及如何組織在一起。互相靠近（相對其他物體）的物體看起來屬於一組，那些距離較遠的就不是。
輔助信息在使用時，為了提高屏效會有字數最長限制規範，當超過時，採用的縮略方式有：末尾截斷、中間截斷。
末尾截斷：當超過限制時，超過字數常用「…」來替代隱藏內容，比如段略文本常採用方式。中間截斷：保留開頭和結尾，在文字結尾規範字數處截斷，除了縮略文本外，還對於過長且名稱前部分類似的信息，通過末尾部分的文字進行區分。
輔助信息：也還可以通過不同的對齊方式與標題文字進行區分，展示內容一般是來對跳轉的二級界面進行解釋說明，以免用戶對於標題的產生誤解，而產生的不點擊行為或者誤操作。
操控按鈕：一般是提示用戶，這部分是可點擊交互的模塊，不是靜態信息。所以操作提示一般可作為中性、或積極操作暗示。
操作提示可分為：按鈕、按鈕加文字、文字或沒有，可根據內容目的採用對應方式，比如說，當在營銷活動時，可採用：文字：「立即購買」、或者文字「立即購買」➕icon，或者內容區信息過多可採用：icon，或者不用按鈕暗示，因為卡片的結構形式已經暗示用戶可點擊的操作行為。
2）多個容器的組織方式在列表頁，當多個容器平鋪在一個界面時，內容之間的區分主要通過明確信息所屬容器，從而達到區分與組織不同信息的目的，常用的方法有：
留白：利用了不同的間距來組織不同的信息，其所帶來的閱讀的沉浸感強。線：主要通過明確了容器的邊界，從而達到信息區分的效果。顏色容器：相比於用線，顏色顏色會更明顯來區分不同的容器本身。卡片：利用容器形成獨立主題，來區分信息，適用於信息層的多的，能更突出卡片內的信息。背景分割：使多樣的信息能組織成模塊，提高視覺信息效率。
詳解（信息組織方式實際使用時，常常是混著使用，但筆者為了更好講述，以下講述是單獨適用的案例）：
1. 留白
通過留白來分割不同的容器，主要是利用上述提到的接近行法則。屬於同一容器內的信息，相對距離就會近一些，不同容器的信息就會相對遠些，比如說：阿里雲盤頁面。
留白來組織容器在被閱讀時，用戶注意力將更多的放在信息上，而更少會注意到容器的存在，只有個別容器在滑動時才能看到容器邊界，閱讀時的沉浸感更強。視覺上帶來的感受也是簡潔的，信息呈現的更偏扁平。
留白使用的方式：
1）容器的結構有信息➕留白、或者留白➕信息的大小，減少留白面積，提高屏效。
2）留白➕信息➕留白，這是最常見的使用方式。
當留白分割的容器內信息層級較多時，一般會用「圖/icon」來組織每個容器的信息，容器之間的留白距離要大於信息與「圖/icon」的距離，一般來說，大於等於2倍距離時，才會產生比較明確的區分。
在考慮到留白大小時，「圖/icon」內部可能會出現白色部分過多等極限情況，其結果可能會使用戶在閱讀時，對於信息所屬容器產生歧義，比如說：商品列表頁。
留白作為固釘的適用：將頁面元素釘在可視範圍。當頁面內容過長，需要滾動頁面時，這部分內容對應的操作或者導航需要在滾動範圍內始終展現。比如說：支付寶基金排行頁面「篩選按鈕容器」。
當頁面信息層級過多時，留白會隨著信息層級的增多而增多，屏效也會隨之降低，如果減少留白面積，信息的結構又會出現不清晰，所以可能會使用第二類組織方式。
2. 線
為了避免上述問題，也會通過分割線來明確容器邊界，以達到區分不同容器的目的。
線分割有：直線、虛線、文字➕直線。
水平直線分割容器結構：容器➕線、線➕容器、線➕容器➕線（注意：線在容器內部，頂對齊或者底對齊）。
一般為了達到更少吸引用戶注意力目的，通常用較淺的顏色，更輕量的分割樣式。在營銷界面使用時，則可能不會這樣使用。
部分線切割容器，部分切一般適用於子層級或更小層級的區分。線分割容器作為固釘的使用的案例有微信的：當定製群數量超過一屏時，「摺疊頂置聊天」的容器就固定在來底部，用線來明確區分不同容器。
3. 虛線分割
為了減輕直線在閱讀時吸引注意力的現象，尤其但容器在很多容器高度較小，如果都採用了明顯的分割線，虛線分割或許是更少分散用戶注意力的組織方式。但常見的界面裡用直線分割較多，筆者認為：
1）虛線在生活中一般常用於暗示可裁剪的部分，所以對於虛線的感知相比於直線，會使用戶產生其它理解。比如說：B站年度知識分享官評選界面。
2）當使用虛線後，如何區別於直線的使用規則，尤其是其它組件已經使用直線的情況下。筆者分析如果會使用虛線時，可能就作為特定時間點出現的功能模塊，並且會在一定時間後消失，而不是與直線一樣作為常出現的分割方式。
3）當容器內信息以文本為主時，當虛線採用部分切割，對齊文字開頭而不是界面邊緣時，虛線反而沒有起到區分容器的作用，看起來像是段落的分割。帶文字的分割線：可分為居中，或者左對齊、右對齊，比如說支付寶「基金轉換頁面」。
營銷頁面會轉化使用，比如說：京東的百億補貼界面。
4. 顏色容器
在留白界面使用顏色明確能展示了信息所屬容器，信息在顏色容器裡擁有了一個共同的背景，視覺層級上更能吸引用戶的注意力，在使用時要思考顏色使用的目的。
展示同級但更重要的信息，與留白區分。比如說：微信「頂置聊天」。展示重要信息，比如說：支付寶基金「持倉頁面」。也常用於偏營銷頁面的表頭，來引導界面信息。比如說：支付寶基金的「新發基金」警告提示，當某個頁面需要向用戶顯示警告的信息時。在交互行為上，顏色也常用於選中狀態。
5. 卡片容器
結構：四周留白➕卡片容器，最基礎的卡片容器，可承載文字、列表、圖片、段落，常用於概覽頁面。卡片的模塊清晰的展示了容器的視覺邊界，用戶很容易區分不同的信息，在系統概覽頁面常常和柵格進行配合。
卡片分區可承載一個層級分區、多個層級列表等結構。相比於上兩個信息展示方式、卡片會更容易識別卡片內容。
卡片的大小根據信息來設定標準樣式，比如說支付寶「投資熱點」，把熱點信息，用統一的卡片來承載不同的熱點信息。卡片因為設定了標準樣式，如果是採用輪播切換內容，卡片以下跟隨內容在輪播時就不會產生抖動，比如說支付寶：用固定的卡片大小，來承載不同的banner頁面。
卡片在承載信息上：支持多樣的內容的配置，且信息之間的分類強在思考樣式時，當考慮了到信息的極限狀態，如果不同卡片放置不同類型的內容，卡片內的留白肯能會有不一樣的狀態，隨著產品展示信息的增多或者變化，都可以放在容器內，可拓展性性強。
卡片在與用戶的交互上。點擊區域變大、用戶操作更方便。可以對卡片或者卡片內部信息進行更複雜的手勢操作，比如說對卡片進行拖動等手勢。
卡片容器在結構上，四周多了一段背景留白。卡片與上述組織方式，屏效相對來說降低，同時在頁面中，容器都使用相同標準的卡片樣式時，容器的大小一般都會根據極限承載最多、最少信息的為標準，所以部分卡片容器承載信息就會相對較少，於是就會產生不同程度的留白。比如說：微信讀書頁面。
怎麼在使用時增加屏效呢？
不同信息採用不同標準的容器大小，比如說支付寶的界面。因為屏幕有限，所以考慮超越屏幕的方式，將信息疊起來，比如說上述提到的容器內輪播等。
6. 背景分割
相比留白能根據內容進行模塊化分類，提高模塊效率，且可以作為標準應用到其他頁面上。對比卡片容器，背景分割面積相對來說並不是固定的，且左右兩邊沒有留白，橫向能承載更多的信息，需根據場景選擇合適的方式。
三、設計補充
在設計時要避免歧義，信息設計時的結構要保持一致性，優先採用先已有的方式，如果某個新功能不使用，或者版本全新迭代時，再使用新的組織方式，更重要的是理解設計目標，不要盲目使用。
關於強調：本文章雖然是從留白到分割線在到卡片，講述的方式是越來越強調信息，但是在實戰中，相比強調信息來達到突出信息層級的作用，「調低」不重要的信息所達到的效果，反而會更好。因為全都強調等於沒有強調。
四、總結
本文談及到的是大類的信息組織方式的結構化方法，說到的也是使用注意，去思考為什麼使用這種方式，其實不同組織方式，在用戶閱讀時所帶給用的閱讀與使用體驗也是不一樣的，大家如果思考到其它方面也歡迎在評論區補充。
參考：
《互動設計精髓4》《認知與設計——理解UI設計的準則》《移動應用UI設計模式》Antdesign
本文由 @奶茶是有劇毒的原創發布於人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基於 CC0 協議
,