映射工具:Figma、XMind
在擁有壹輛車後體驗該APP的過程中，我們發現應用中存在大量各種類型的列表頁面，如信息列表、帖子列表、口碑列表、評論列表等。，而這些列表頁面都給我們同樣的感覺:亂，密，全是字。當我們把這些界面給其他同事看的時候，得到的反饋是:看起來很亂，不知道往哪裏看。
把這句話翻譯成設計語言，可以發現這些界面最大的問題就是信息層次混亂，沒有形成良好的視覺流。
但這樣的界面對用戶的影響是無法定位界面的第壹視覺焦點，瀏覽過程費力，關鍵信息和內容的獲取效率低，難以理解。
我們再進壹步思考，現有的哪些設計細節造成了這樣的問題，從而產生了相應的體驗問題。同時找到相應的優化方案。
以上主要是從視覺表達的角度，去思考界面中的細節以及相應的優化方案。例如，視覺元素通過它們的大小、顏色、位置和距離來組織，以便為用戶提供清晰的視覺信息結構。
但在此之前，更重要的是，我們需要對界面中的信息進行歸納整理，明確信息層次。否則可能導致信息傳遞不準確。下面我們以信息列表為例，梳理頁面的信息層次，輸出優化方案。
用戶在信息列表頁面的核心行為是“瀏覽”，發現感興趣的內容後產生下壹步(進入詳情頁查看文章或跳轉到相關信息欄)。我們的體驗目標是幫助用戶快速獲取和理解有用和有趣的信息。
頁面中的信息比較簡單，我們從“必要性”和“重要性”兩個維度逐壹分析。我們需要思考每條信息的用途是什麽，起什麽作用，能不能去掉，會有什麽影響，影響有多大等等，從而去衡量和判斷。
基於以上所有分析，我們可以得出以下優化思路。
效果圖上，我把熱評的火和背景結合起來。背景框左上角不僅是火的形狀，還指向評論數，加強了其與評論數的邏輯聯系。但是因為顏色是灰色的，元素尺寸太小，整體效果不是很好，需要調整優化。
以下效果圖並非最終設計，僅供參考。
這種優化頁面信息層次的嘗試還是遵循之前的思路，先了解現狀，發現問題，再找到相應的優化方案。在具體的頁面中，就是明確頁面定位和設計目標，梳理信息層次，總結優化點，最後輸出視覺效果圖。
以前我們在優化界面設計的時候，總是以“體驗不好”為理由，以“界面改版”為解決方案，然後開始設計視覺效果圖。這次嘗試把“不好的體驗”分解成各種體驗細節，總結出壹些經驗和方法，希望能在後續的設計中應用，繼續優化和改進。