列表頁信息展示,如何搭建視覺結構?

5 評論 12302 瀏覽 49 收藏 17 分鐘

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

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

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

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

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

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

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

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

用戶如何認知信息?

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

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

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

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

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

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

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

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

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

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

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

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

操作提示可分為:按鈕、按鈕加文字、文字或沒有,可根據內容目的采用對應方式,比如說,當在營銷活動時,可采用:文字:“立即購買”、或者文字“立即購買”?icon,或者內容區信息過多可采用:icon,或者不用按鈕暗示,因為卡片的結構形式已經暗示用戶可點擊的操作行為。

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

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

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

1. 留白

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

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

留白使用的方式:

1)容器的結構有信息?留白、或者留白?信息的大小,減少留白面積,提高屏效。

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

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

在考慮到留白大小時,“圖/icon”內部可能會出現白色部分過多等極限情況,其結果可能會使用戶在閱讀時,對于信息所屬容器產生歧義,比如說:商品列表頁。

留白作為固釘的適用:將頁面元素釘在可視范圍。當頁面內容過長,需要滾動頁面時,這部分內容對應的操作或者導航需要在滾動范圍內始終展現。比如說:支付寶基金排行頁面“篩選按鈕容器”。

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

2. 線

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

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

水平直線分割容器結構:容器?線、線?容器、線?容器?線(注意:線在容器內部,頂對齊或者底對齊)。

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

部分線切割容器,部分切一般適用于子層級或更小層級的區分。 線分割容器作為固釘的使用的案例有微信的:當定制群數量超過一屏時,“折疊頂置聊天”的容器就固定在來底部,用線來明確區分不同容器。

3. 虛線分割

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

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

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

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

營銷頁面會轉化使用,比如說:京東的百億補貼界面。

4. 顏色容器

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

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

5. 卡片容器

結構:四周留白?卡片容器,最基礎的卡片容器,可承載文字、列表、圖片、段落,常用于概覽頁面??ㄆ哪K清晰的展示了容器的視覺邊界,用戶很容易區分不同的信息,在系統概覽頁面常常和柵格進行配合。

卡片分區可承載一個層級分區、多個層級列表等結構。相比于上兩個信息展示方式、卡片會更容易識別卡片內容。

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

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

卡片在與用戶的交互上。點擊區域變大、用戶操作更方便??梢詫ㄆ蛘呖ㄆ瑑炔啃畔⑦M行更復雜的手勢操作,比如說對卡片進行拖動等手勢。

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

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

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

6. 背景分割

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

三、設計補充

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

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

四、總結

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

參考:

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

 

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

題圖來自 Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 很??

    來自北京 回復
  2. 可以講講WEB頁面的列表設計嗎…

    來自山東 回復
    1. 可以試試找前端頁面的表格框架看看 ant design pro開箱即用可以看看

      來自浙江 回復
    2. 嗯,日常在看,還是想聽專業的朋友更詳盡的講解,以及基于效果外的擴展知識…

      來自山東 回復
  3. 確實好的簡潔美觀的列表頁會讓我更喜歡這個軟件,有時候我甚至會因為這些小細節去選擇某一個軟件

    來自河南 回復