教你把復雜金融數據設計得清晰易懂

一、系統梳理體驗現狀，明確優化方向

首先，設計團隊以百度搜索 PC 結果頁的金融場景為出發點，從結構層級與交互流程兩方面系統排查并歸納出核心問題：

1. 金融信息體量龐大，頁面結構松散，信息顆粒度模糊，缺乏有效的信息組織與引導機制，導致用戶在關鍵內容的獲取上效率低下。
2. 內容密度過高，信息節奏單一，易造成閱讀疲勞，主動互動和深入瀏覽的意愿不高。
3. 各內容模塊之間缺乏有效的邏輯串聯，信息孤島現象突出，用戶難以構建完整認知鏈。
4. 視覺風格滯后，層級不清晰，核心數據不突出，整體體驗與當前主流金融平臺設計脫節，難以支撐百度金融“專業性”與“權威感”的品牌認知。

二、明確策略方向，構建系統性體驗升級

圍繞核心問題，設計團隊從以下三個維度展開系統優化：

1. 提升信息效率：打造清晰有序的內容組織框架
2. 強化數據聚合：構建層次分明的結構呈現結構
3. 塑造視覺亮點：增強沉浸專業的視覺表達體系

1. 重構內容框架，提升信息承載與閱讀效率

為提升股票信息的展現維度，我們結合 PC 端的大屏特性，將單列流式結構升級為全屏展示，對頁面頭部進行整體改造，構建高聚合的信息看板，增強沉浸感與瀏覽連貫性。同時，針對舊版信息權重模糊、關鍵數據不突出的痛點，我們對內容結構進行重組優化（如名稱、代碼、市場、報價、漲跌幅、匯率等）核心數據聚合展示于首屏，強化首屏表達，幫助用戶第一時間進行有效判斷。

2. 引入 Bento 設計風格，打造高聚合、高感知的瀏覽體驗

基于股票數據強邏輯、高密度的特點，我們重構了原有內容的組織結構與頁面布局，采用 Bento（便當式）設計方式，將原本零散分布的信息按主題聚合成模塊化分區。Bento 設計強調“結構清晰、模塊獨立”，就像便當盒將不同食材分格盛放一樣，在界面上能夠有效劃分信息類型、增強層次感，使用戶更容易在視覺上快速抓取重點、在認知上形成清晰的內容框架。

信息結構化

以百度股票 PC 搜索結果頁為例，我們將行情數據、公司信息、走勢圖表等內容進行合理編排與聚合，通過 Bento 設計方式，既強化了數據結構與條理，也提升了用戶對核心數據的識別效率和整體頁面的瀏覽流暢感。

輕量交互

內容聚合后，核心信息默認呈現，便于快速瀏覽。結合 PC 端 hover 操作支持模塊展開，滿足用戶深入瀏覽訴求，提升交互效率與信息獲取深度。

3. 升級視覺語言，強化專業感知與品牌信任

針對舊版存在的設計風格老化、視覺噪點過多、結構混亂等問題，我們從視覺體系入手，提升頁面的清晰度與專業感。通過減少視覺噪點、強化重點信息、優化閱讀節奏，構建更清爽、沉浸的數據場景，提升信息傳達效率。

透傳專業感知

金融場景對色彩更敏感，用戶更偏好穩定、克制的視覺氛圍。相對搜索其他產品，我們對紅綠色進行了優化調整，讓整體色彩更沉穩，進一步增強頁面的專業感與用戶的信任感。

趨勢圖優化舊版趨勢圖采用單一藍色，缺乏漲跌表現力。新版以開盤價為中軸，采用紅、灰、綠三色及雙向漸變重構圖表，幫助用戶更直觀、快速地識別股票的走勢方向與變化幅度。

流暢閱讀體驗

為進一步優化頁面的閱讀體驗，我們從基礎視覺樣式入手，全面優化基礎視覺樣式與信息排布方式，降低用戶認知負擔：

① 字體與行距優化：收斂字號，做好信息分級，并通過增設段落間距與合理行距，提升文本的可讀性與信息塊的識別效率。

② 色彩節奏調控：在非重點區域大幅弱化顏色使用，采用灰度、留白等方式制造呼吸空間，讓用戶聚焦于關鍵數據，減少視覺干擾。

③ 動態引導設計：在交互層面加入微動效（如圖表加載過渡、hover 高亮等）輔助引導信息層級切換，提升界面節奏感與可感知性。

這些策略協同作用，不僅顯著改善了頁面的可讀性與舒適度，也讓用戶獲得更專注、舒適的閱讀感受。

三、構建專業信任的金融生態—百度股市通系統優化

新版上線后，頁面停留、點擊與瀏覽量等核心指標顯著提升，用戶普遍認可新版設計在專業感知與信息效率上的提升?；?PC 結果頁的成功實踐，我們將體驗優化進一步延展至百度股市通（百度金融官網）全站，結合平臺特性與行業頭部垂類平臺的調研，重點聚焦內容呈現效率與響應式適配兩大維度，探索沉浸式體驗在多端場景下的有效延展。

1. 結構重構

百度股市通原有灰底卡片結構已顯陳舊，固定寬度也未能發揮大屏優勢，結構層級冗余，信息展示受限。對標當前主流競品均已采用通欄沉浸式布局，我們對整體結構進行重構，釋放內容空間，強化頁面一體感與信息獲取效率。

聚合概覽頁

新增概覽頁，復用 PC 結果頁經驗，構建一站式數據看板，使用戶在單頁即可全面掌握一支股票的核心信息，實現從“分散獲取”到“集中洞察”的體驗躍遷。

2. 響應式設計

在大尺寸設備逐漸普及的背景下，響應式能力已成為多端體驗一致性的關鍵。我們構建了統一的響應式策略：通過柵格系統建立布局規則，打通設計規范與開發規則，實現一次設計、多端適配。在實際落地中，結合不同終端特性，采用拉伸、等比縮放、擴展、固定、分欄五類布局方式，已覆蓋 80–90%的頁面內容，剩余場景則通過差異化策略持續探索優化空間與體驗突破。

以平板分辨率為例：PC 瀏覽器作為基準適配尺寸，當內容映射至平板端時，受限于屏幕縮小與可視區域壓縮，需重新調整信息疏密度。我們在平板中采用單列或雙列布局，通過響應式斷點動態調整模塊結構。例如，PC 端橫向并列的圖表與公司信息在平板中垂直堆疊，圖表橫向壓縮并保留關鍵數據，確保閱讀流暢。同時針對 hover 不適配的問題，增設點擊展開等交互方式，提升信息獲取效率與操作便捷性。

以寬窄屏為例：不同終端在比例與分辨率上差異明顯，內容排布需具備高度靈活性。我們基于統一柵格系統設定多組斷點，并為核心模塊設定寬度適配策略和展示優先級。在超寬屏上自動擴展為三欄布局，提升信息密度與空間利用；在窄屏中切換為單列視圖，聚焦核心內容，其余信息以折疊或收起形式展現，保障重點不被淹沒。這類策略增強了多端體驗一致性，也為后續模塊拓展提供了更大彈性空間。

總結與展望

新版金融結果頁與百度股市通官網同步上線后，核心指標如頁面停留、點擊與瀏覽量均顯著提升，用戶普遍認可新版設計在專業感知與信息效率上的提升。也推動了用戶從“看價格”向“理解結構”的行為轉變，激發了用戶對股票多維數據的主動探索，進一步驗證了本次從搜索結果頁到落地頁的全鏈路體驗優化上的成效，也為復雜數據場景下的信息組織與體驗設計提供了可借鑒的實踐方向。

最后，此次改版不僅是一次視覺與結構的優化，更是對平臺內容表達方式與用戶認知路徑的深度重塑。我們以設計為驅動，在兼顧專業表達與用戶體驗的基礎上，探索出更契合金融場景的產品形態與交互模式。

未來，我們將持續關注用戶需求，不斷迭代設計語言與體驗細節，打造更加清晰、可信的金融服務體驗。

歡迎關注作者的微信公眾號：「百度MEUX」

轉載自：https://www.uisdc.com/data-dense-design