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

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

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

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

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

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

思考一下在界面中，當信息以一種無序的排列，和信息以結(jié)構(gòu)化的排列相比，為何大多數(shù)的界面都選擇了后者。

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

用戶如何認知信息？

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

1）建立層級： 主要通過字體、字體大小、粗細、顏色來區(qū)分層級（文章通過會結(jié)合具體實例來解釋）。

2）建立關(guān)系： 為了傳達信息之間的關(guān)系，比如說上下屬關(guān)系：菜單欄標簽A與標簽下方的內(nèi)容a就是上下屬關(guān)系，可以通過視覺上的組織與空間上的組織進行設計。

• 視覺上的組織：視覺上感受信息之間的關(guān)系主要是通過接近性、相似性、連續(xù)性，共同背景等方式。
• 空間上的組織：單頁面空間里，人一般有從左至右、從上至下的閱讀習慣的順序。

二、列表頁信息組織方式有哪些？

1）列表頁單個容器內(nèi)信息的組成部分有標題、輔助信息、圖片/icon、操控按鈕、提示信息等。

標題與輔助信息在信息層級上，一般通過設計規(guī)范的不同字號、顏色和粗細來區(qū)分層級。

信息關(guān)系上主要利用格式塔原理之一——接近法則，進行信息分組。 接近性原理是指：物體之間的相對距離會影響我們感知它們是否以及如何組織在一起?；ハ嗫拷ㄏ鄬ζ渌矬w）的物體看起來屬于一組，那些距離較遠的就不是。

輔助信息在使用時，為了提高屏效會有字數(shù)最長限制規(guī)范，當超過時，采用的縮略方式有：末尾截斷、中間截斷。

• 末尾截斷：當超過限制時，超過字數(shù)常用“…”來替代隱藏內(nèi)容，比如段略文本常采用方式。
• 中間截斷：保留開頭和結(jié)尾，在文字結(jié)尾規(guī)范字數(shù)處截斷，除了縮略文本外，還對于過長且名稱前部分類似的信息，通過末尾部分的文字進行區(qū)分。

輔助信息：也還可以通過不同的對齊方式與標題文字進行區(qū)分，展示內(nèi)容一般是來對跳轉(zhuǎn)的二級界面進行解釋說明，以免用戶對于標題的產(chǎn)生誤解，而產(chǎn)生的不點擊行為或者誤操作。

操控按鈕：一般是提示用戶，這部分是可點擊交互的模塊，不是靜態(tài)信息。所以操作提示一般可作為中性、或積極操作暗示。

操作提示可分為：按鈕、按鈕加文字、文字或沒有，可根據(jù)內(nèi)容目的采用對應方式，比如說，當在營銷活動時，可采用：文字：“立即購買”、或者文字“立即購買”?icon，或者內(nèi)容區(qū)信息過多可采用：icon，或者不用按鈕暗示，因為卡片的結(jié)構(gòu)形式已經(jīng)暗示用戶可點擊的操作行為。

2）多個容器的組織方式 在列表頁，當多個容器平鋪在一個界面時，內(nèi)容之間的區(qū)分主要通過明確信息所屬容器，從而達到區(qū)分與組織不同信息的目的，常用的方法有：

• 留白：利用了不同的間距來組織不同的信息，其所帶來的閱讀的沉浸感強。
• 線：主要通過明確了容器的邊界，從而達到信息區(qū)分的效果。
• 顏色容器：相比于用線，顏色顏色會更明顯來區(qū)分不同的容器本身。
• 卡片：利用容器形成獨立主題，來區(qū)分信息，適用于信息層的多的，能更突出卡片內(nèi)的信息。
• 背景分割：使多樣的信息能組織成模塊，提高視覺信息效率。

詳解（信息組織方式實際使用時，常常是混著使用，但筆者為了更好講述，以下講述是單獨適用的案例）：

1. 留白

通過留白來分割不同的容器，主要是利用上述提到的接近行法則。屬于同一容器內(nèi)的信息，相對距離就會近一些，不同容器的信息就會相對遠些，比如說：阿里云盤頁面。

留白來組織容器在被閱讀時，用戶注意力將更多的放在信息上，而更少會注意到容器的存在，只有個別容器在滑動時才能看到容器邊界，閱讀時的沉浸感更強。 視覺上帶來的感受也是簡潔的，信息呈現(xiàn)的更偏扁平。

留白使用的方式：

1）容器的結(jié)構(gòu)有信息?留白、或者留白?信息的大小，減少留白面積，提高屏效。

2）留白?信息?留白，這是最常見的使用方式。

當留白分割的容器內(nèi)信息層級較多時，一般會用“圖/icon”來組織每個容器的信息，容器之間的留白距離要大于信息與“圖/icon”的距離，一般來說，大于等于2倍距離時，才會產(chǎn)生比較明確的區(qū)分。

在考慮到留白大小時，“圖/icon”內(nèi)部可能會出現(xiàn)白色部分過多等極限情況，其結(jié)果可能會使用戶在閱讀時，對于信息所屬容器產(chǎn)生歧義，比如說：商品列表頁。

留白作為固釘?shù)倪m用：將頁面元素釘在可視范圍。當頁面內(nèi)容過長，需要滾動頁面時，這部分內(nèi)容對應的操作或者導航需要在滾動范圍內(nèi)始終展現(xiàn)。比如說：支付寶基金排行頁面“篩選按鈕容器”。

當頁面信息層級過多時，留白會隨著信息層級的增多而增多，屏效也會隨之降低，如果減少留白面積，信息的結(jié)構(gòu)又會出現(xiàn)不清晰，所以可能會使用第二類組織方式。

2. 線

為了避免上述問題，也會通過分割線來明確容器邊界，以達到區(qū)分不同容器的目的。

線分割有：直線、虛線、文字?直線。

水平直線分割容器結(jié)構(gòu)：容器?線、線?容器、線?容器?線（注意：線在容器內(nèi)部，頂對齊或者底對齊）。

一般為了達到更少吸引用戶注意力目的，通常用較淺的顏色，更輕量的分割樣式。在營銷界面使用時，則可能不會這樣使用。

部分線切割容器，部分切一般適用于子層級或更小層級的區(qū)分。 線分割容器作為固釘?shù)氖褂玫陌咐形⑿诺模寒敹ㄖ迫簲?shù)量超過一屏時，“折疊頂置聊天”的容器就固定在來底部，用線來明確區(qū)分不同容器。

3. 虛線分割

為了減輕直線在閱讀時吸引注意力的現(xiàn)象，尤其但容器在很多容器高度較小，如果都采用了明顯的分割線，虛線分割或許是更少分散用戶注意力的組織方式。但常見的界面里用直線分割較多，筆者認為：

1）虛線在生活中一般常用于暗示可裁剪的部分，所以對于虛線的感知相比于直線，會使用戶產(chǎn)生其它理解。 比如說：B站年度知識分享官評選界面。

2）當使用虛線后，如何區(qū)別于直線的使用規(guī)則，尤其是其它組件已經(jīng)使用直線的情況下。筆者分析如果會使用虛線時，可能就作為特定時間點出現(xiàn)的功能模塊，并且會在一定時間后消失，而不是與直線一樣作為常出現(xiàn)的分割方式。

3）當容器內(nèi)信息以文本為主時，當虛線采用部分切割，對齊文字開頭而不是界面邊緣時，虛線反而沒有起到區(qū)分容器的作用，看起來像是段落的分割。帶文字的分割線：可分為居中，或者左對齊、右對齊，比如說支付寶“基金轉(zhuǎn)換頁面”。

營銷頁面會轉(zhuǎn)化使用，比如說：京東的百億補貼界面。

4. 顏色容器

在留白界面使用顏色明確能展示了信息所屬容器，信息在顏色容器里擁有了一個共同的背景，視覺層級上更能吸引用戶的注意力，在使用時要思考顏色使用的目的。

• 展示同級但更重要的信息，與留白區(qū)分。比如說：微信“頂置聊天”。
• 展示重要信息，比如說：支付寶基金“持倉頁面”。
• 也常用于偏營銷頁面的表頭，來引導界面信息。比如說：支付寶基金的“新發(fā)基金”
• 警告提示，當某個頁面需要向用戶顯示警告的信息時。
• 在交互行為上，顏色也常用于選中狀態(tài)。

5. 卡片容器

結(jié)構(gòu)：四周留白?卡片容器，最基礎的卡片容器，可承載文字、列表、圖片、段落，常用于概覽頁面?？ㄆ哪K清晰的展示了容器的視覺邊界，用戶很容易區(qū)分不同的信息，在系統(tǒng)概覽頁面常常和柵格進行配合。

卡片分區(qū)可承載一個層級分區(qū)、多個層級列表等結(jié)構(gòu)。相比于上兩個信息展示方式、卡片會更容易識別卡片內(nèi)容。

卡片的大小根據(jù)信息來設定標準樣式，比如說支付寶“投資熱點”，把熱點信息，用統(tǒng)一的卡片來承載不同的熱點信息?？ㄆ驗樵O定了標準樣式，如果是采用輪播切換內(nèi)容，卡片以下跟隨內(nèi)容在輪播時就不會產(chǎn)生抖動，比如說支付寶：用固定的卡片大小，來承載不同的banner頁面。

卡片在承載信息上：支持多樣的內(nèi)容的配置，且信息之間的分類強 在思考樣式時，當考慮了到信息的極限狀態(tài)，如果不同卡片放置不同類型的內(nèi)容，卡片內(nèi)的留白肯能會有不一樣的狀態(tài)，隨著產(chǎn)品展示信息的增多或者變化，都可以放在容器內(nèi)，可拓展性性強。

卡片在與用戶的交互上。點擊區(qū)域變大、用戶操作更方便?？梢詫ㄆ蛘呖ㄆ瑑?nèi)部信息進行更復雜的手勢操作，比如說對卡片進行拖動等手勢。

卡片容器在結(jié)構(gòu)上，四周多了一段背景留白?？ㄆc上述組織方式，屏效相對來說降低，同時在頁面中，容器都使用相同標準的卡片樣式時，容器的大小一般都會根據(jù)極限承載最多、最少信息的為標準，所以部分卡片容器承載信息就會相對較少，于是就會產(chǎn)生不同程度的留白。比如說：微信讀書頁面。

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

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

6. 背景分割

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

三、設計補充

在設計時要避免歧義，信息設計時的結(jié)構(gòu)要保持一致性，優(yōu)先采用先已有的方式，如果某個新功能不使用，或者版本全新迭代時，再使用新的組織方式，更重要的是理解設計目標，不要盲目使用。

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

四、總結(jié)

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

參考：

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

本文由 @奶茶是有劇毒的 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議