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

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

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

筆者接下來會(huì)按以下方式來講述：

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

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

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

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

用戶如何認(rèn)知信息？

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

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

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

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

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

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

標(biāo)題與輔助信息在信息層級(jí)上，一般通過設(shè)計(jì)規(guī)范的不同字號(hào)、顏色和粗細(xì)來區(qū)分層級(jí)。

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

輔助信息在使用時(shí)，為了提高屏效會(huì)有字?jǐn)?shù)最長(zhǎng)限制規(guī)范，當(dāng)超過時(shí)，采用的縮略方式有：末尾截?cái)?、中間截?cái)唷?/p>

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

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

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

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

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

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

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

1. 留白

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

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

留白使用的方式：

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

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

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

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

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

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

2. 線

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

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

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

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

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

3. 虛線分割

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

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

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

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

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

4. 顏色容器

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

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

5. 卡片容器

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

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

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

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

卡片在與用戶的交互上。點(diǎn)擊區(qū)域變大、用戶操作更方便?？梢詫?duì)卡片或者卡片內(nèi)部信息進(jìn)行更復(fù)雜的手勢(shì)操作，比如說對(duì)卡片進(jìn)行拖動(dòng)等手勢(shì)。

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

怎么在使用時(shí)增加屏效呢？

1. 不同信息采用不同標(biāo)準(zhǔn)的容器大小，比如說支付寶的界面。
2. 因?yàn)槠聊挥邢?，所以考慮超越屏幕的方式，將信息疊起來，比如說上述提到的容器內(nèi)輪播等。

6. 背景分割

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

三、設(shè)計(jì)補(bǔ)充

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

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

四、總結(jié)

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

參考：

• 《交互設(shè)計(jì)精髓4》
• 《認(rèn)知與設(shè)計(jì)——理解UI設(shè)計(jì)的準(zhǔn)則》
• 《移動(dòng)應(yīng)用UI設(shè)計(jì)模式》
• Antdesign

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

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