編輯導語：如何做好列表頁的信息展示，讓用戶可以更加清晰地獲取信息，在提供用戶更好的視覺和使用體驗時，推動用戶的下一步操作？你可以利用多種方法，如留白、分割等，搭建合理的視覺展示結構。本文作者便做了相應總結，一起來看一下。

在列表頁設計信息時，面對多種視覺結構時該采用哪種比較合适的疑惑，思考以下了問題：

1. 用戶是如何有效認知信息？
2. 信息使用哪種視覺容器，能更好表現不同信息之間關系的目的，以及在閱讀與使用時能帶給用戶更好的體驗？
3. 由于手機屏幕尺寸有限，怎麼再增加屏效？

筆者接下來會按以下方式來講述：

1. 為什麼需要信息整理；
2. 列表頁信息組織方式有哪些；
3. 設計注意；
4. 總結。

一、為什麼需要信息整理？

思考一下在界面中，當信息以一種無序的排列，和信息以結構化的排列相比，為何大多數的界面都選擇了後者。

設計師在設計信息如何在界面展示時，都在思考如何使用戶更快理解從而産生下一步操作，本篇文章分析與總結了信息如何通過有效結構化展示，來覆蓋各種場景，使用戶體驗更加流暢，來和讀者共同探讨。

用戶如何認知信息？

用戶在看到界面的時候，會無意識在思考“哪裡最重要”，接着就會思考“與它有關聯的信息有哪些？”等等問題，所以我們在設計界面時，應通過建立合适的視覺層級以及不同信息之間的關系，來解決用戶所遇到的問題。

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頁面。

卡片在承載信息上：支持多樣的内容的配置，且信息之間的分類強 在思考樣式時，當考慮了到信息的極限狀态，如果不同卡片放置不同類型的内容，卡片内的留白肯能會有不一樣的狀态，随着産品展示信息的增多或者變化，都可以放在容器内，可拓展性性強。

卡片在與用戶的交互上。點擊區域變大、用戶操作更方便。可以對卡片或者卡片内部信息進行更複雜的手勢操作，比如說對卡片進行拖動等手勢。

卡片容器在結構上，四周多了一段背景留白。卡片與上述組織方式，屏效相對來說降低，同時在頁面中，容器都使用相同标準的卡片樣式時，容器的大小一般都會根據極限承載最多、最少信息的為标準，所以部分卡片容器承載信息就會相對較少，于是就會産生不同程度的留白。比如說：微信讀書頁面。

怎麼在使用時增加屏效呢？

1. 不同信息采用不同标準的容器大小，比如說支付寶的界面。
2. 因為屏幕有限，所以考慮超越屏幕的方式，将信息疊起來，比如說上述提到的容器内輪播等。

6. 背景分割

相比留白能根據内容進行模塊化分類，提高模塊效率，且可以作為标準應用到其他頁面上。對比卡片容器，背景分割面積相對來說并不是固定的，且左右兩邊沒有留白，橫向能承載更多的信息，需根據場景選擇合适的方式。

三、設計補充

在設計時要避免歧義，信息設計時的結構要保持一緻性，優先采用先已有的方式，如果某個新功能不使用，或者版本全新叠代時，再使用新的組織方式，更重要的是理解設計目标，不要盲目使用。

關于強調：本文章雖然是從留白到分割線在到卡片，講述的方式是越來越強調信息，但是在實戰中，相比強調信息來達到突出信息層級的作用，“調低”不重要的信息所達到的效果，反而會更好。因為全都強調等于沒有強調。

四、總結

本文談及到的是大類的信息組織方式的結構化方法，說到的也是使用注意，去思考為什麼使用這種方式，其實不同組織方式，在用戶閱讀時所帶給用的閱讀與使用體驗也是不一樣的，大家如果思考到其它方面也歡迎在評論區補充。

參考：

• 《交互設計精髓4》
• 《認知與設計——理解UI設計的準則》
• 《移動應用UI設計模式》
• Antdesign

本文由 @奶茶是有劇毒的 原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部