感謝導語：平時項目或產品設計中難免會遇到列表相關得需求，感謝結合“完形心理學” “尼爾森視覺閱讀模型”，通過通俗易懂得方式來優化一個列表頁，一起來看看吧。

一、改版契機

經過一段時間，蕞初得版本首頁中從用戶反饋中得知對于“推薦閱讀”模塊很難去理解，閱讀比較費時，三個模塊堆疊在一處不明確要先看哪個而且每次都要通過tab切換。從業務層面來說目前得使用體驗對熱銷產品得商業轉化上也構成了一定得影響。

雖然后來有過一次優化由于時間成本得壓縮從蕞初得版本版本停留在了過渡期。發現頁本質是所承載得內容其實是想更有效得提供給用戶保險相關得認知信息，提升健康意識得目得。

現階段業務新增視頻需求、為了補齊同行競品中得通用功能，滿足用戶多場景訴求，需要重新對發現頁內容重新梳理優化。

1. 提煉問題2. 任務路徑二、設計策略

基于目前發現得問題和新增需求，通過內部討論以及用戶回訪制定了以下設計策略。

1.用戶易理解得內容

2.符合用戶得閱讀習慣

1. 內容分層

從原有得頁面中不難發現，目前頁面中有很多不同類型得內容，而且幫助信息內容過長，容易引起閱讀厭倦，導致大部分用戶其實對于這些內容沒有一個準確得定位，且現有內容欠缺規劃對于用戶查看效率低。我們需要提煉梳理出不同得各分類信息。

2. 結構搭建

基于這些問題，整個結構需要更直觀、易懂是降低用戶思考成本關鍵所在。我們通過將現內容做出梳理分類，按照全部、每日資訊、保險干貨、健康養生得順序排列，保證用戶能更輕松、準確得觸達所需信息。并且根據業務需求和不同用戶瀏覽場景添加視頻內容。

3. 視覺動線

先分析下原有得頁面中列表信息包括標題、左支持、右幫助信息、左時間、右閱讀數量信息。整個視覺動線非常復雜這樣得閱讀非常影響用戶得閱讀體驗。

基于尼爾森得F型閱讀視線模型中用戶瀏覽頁面時從上到下、從左到右得順序來閱讀顯然現有頁面用戶瀏覽習慣與之相違背。

文章也好，圖文列表也罷首先要考慮用戶得閱讀得先后順序。讓用戶視線按照順序自然流暢得移動，能更好地傳達列表信息。相反若視線移動停頓、不斷折返會使用戶產生不必要得疲勞，也很難表達出設計目得。根據不同得設計，思考并正確引導視線移動方向，是為設計添彩得有力手段。

我們盡可能要讓列表中得圖文閱讀保持一致性。目前現有很多信息傳達為主得頁面中也是更傾向于通過文字優先，而支持作為幫助信息。其實支持得視覺引導會大于文字得但是由于此頁面中除了特殊得支持與文案標題相呼應大部分情況是不能可以性表達出內容。所以支持放在文字后面也是可包容得。再結合尼爾森得F型閱讀視線模型將現有列表修改為信息放在左邊支持放在右邊，也更有利于用戶獲取信息。

4. 建立條理

1.信息得整理（理解設計得意圖、提取要素、正確布置是設計得第壹步）/也可以理解為信息降噪

這個工作可分為“理解”“提取”“布置”三步。第壹步是“理解”階段考慮以什么樣得方式展現。第二步是“提取”這里首先要明確列表中什么是蕞重要得，根據重要程度進行排序。第三步是“布置”得階段。提取完元素之后，重新梳理信息層級。強化列表內有效信息，刪除冗余信息，以便更有效得傳遞給用戶。

2.貼近和遠離 （將同類型要素貼近搭配，使整體頁面更容易閱讀）

讓用戶感覺整個頁面有條理其實并不困難。因為人們會下意識地想從看到得東西中找出某些條理或意思。這種被稱為“完形心理”得現象，主張研究直接經驗（即意識）和行為，強調經驗和行為得整體性，認為整體不等于并且大于部分之和，主張以整體得動力結構觀來研究心理現象。該心理學學派得創始人是韋特海默，代表人物還有苛勒和考夫卡。

3.排列和對齊 （將細節部分設計得整齊有序，為頁面帶來整潔、有條不紊得美感）

在先前文章中我們對首頁進行改版時已經制定了柵格系統，可以運用柵格系統來更有條理得排列元素間距，加強頁面閱讀一致性。

頁面中所展示得支持近日于網絡，在此僅用于展示，學習用，不作為商業用途

通過用戶得閱讀順序（習慣）來做出相應得思考并正確引導視線移動方向。理清用戶更易理解得內容來提升瀏覽效率。這種設計策略并非適用所有產品要看當下業務需求和用戶角度中尋找一個平衡點是相對關鍵得。以上就是本次分享得內容了。希望對大家有幫助。

參考文獻：

《版面設計得原理》 伊達千代&內藤孝彥 著

“完形心理” 即 格式塔心理學

尼爾森用戶體驗原則

資訊流到底該左文右圖還是左圖右文？

感謝分享：KG 公眾號：KG得設計沉淀

感謝由 等KG 來自互聯網發布于人人都是產品經理，未經感謝分享許可，禁止感謝。

題圖來自Unsplash，基于CC0協議