大厂案例 | 高密度数据场景的设计实践

本文授权转自：百度MEUX（ID：baidumeux）

前言

随着投资人群的年轻化与多元化，股票类产品正从功能导向的交易工具，逐步演进为集数据洞察、策略支持与情绪连接于一体的综合服务平台。面对更加理性、自主的用户群体，平台不仅需提供清晰可信的信息表达与高效流畅的交互体验，更需通过系统化的设计语言与内容策略，持续传递专业性与可信度，构建用户对平台价值观的高度认同与情感归属。

为应对这一变革挑战，设计团队从百度搜索结果页到百度股市通（百度金融官网），展开覆盖搜索结果卡片至落地页的全链路体验重构，系统梳理金融场景下的用户需求与产品逻辑，通过统一设计语言与响应式策略驱动体验革新，全面提升百度金融在多端多场景下的专业表达与用户信任感。

一、系统梳理体验现状，明确优化方向

首先，设计团队以百度搜索PC结果页的金融场景为出发点，从结构层级与交互流程两方面系统排查并归纳出核心问题：

1、金融信息体量庞大，页面结构松散，信息颗粒度模糊，缺乏有效的信息组织与引导机制，导致用户在关键内容的获取上效率低下。

2、内容密度过高，信息节奏单一，易造成阅读疲劳，主动互动和深入浏览的意愿不高。

3、各内容模块之间缺乏有效的逻辑串联，信息孤岛现象突出，用户难以构建完整认知链。

4、视觉风格滞后，层级不清晰，核心数据不突出，整体体验与当前主流金融平台设计脱节，难以支撑百度金融“专业性”与“权威感”的品牌认知。

二、明确策略方向，构建系统性体验升级

围绕核心问题，设计团队从以下三个维度展开系统优化：

a. 提升信息效率：打造清晰有序的内容组织框架

b. 强化数据聚合：构建层次分明的结构呈现结构

c. 塑造视觉亮点：增强沉浸专业的视觉表达体系

1、重构内容框架，提升信息承载与阅读效率

为提升股票信息的展现维度，我们结合PC端的大屏特性，将单列流式结构升级为全屏展示，对页面头部进行整体改造，构建高聚合的信息看板，增强沉浸感与浏览连贯性。同时，针对旧版信息权重模糊、关键数据不突出的痛点，我们对内容结构进行重组优化（如名称、代码、市场、报价、涨跌幅、汇率等）核心数据聚合展示于首屏，强化首屏表达，帮助用户第一时间进行有效判断。

2、引入Bento设计风格，打造高聚合、高感知的浏览体验

基于股票数据强逻辑、高密度的特点，我们重构了原有内容的组织结构与页面布局，采用 Bento（便当式）设计方式，将原本零散分布的信息按主题聚合成模块化分区。Bento 设计强调“结构清晰、模块独立”，就像便当盒将不同食材分格盛放一样，在界面上能够有效划分信息类型、增强层次感，使用户更容易在视觉上快速抓取重点、在认知上形成清晰的内容框架。

信息结构化

以百度股票 PC 搜索结果页为例，我们将行情数据、公司信息、走势图表等内容进行合理编排与聚合，通过 Bento 设计方式，既强化了数据结构与条理，也提升了用户对核心数据的识别效率和整体页面的浏览流畅感。

轻量交互

内容聚合后，核心信息默认呈现，便于快速浏览。结合PC端hover操作支持模块展开，满足用户深入浏览诉求，提升交互效率与信息获取深度。

3、升级视觉语言，强化专业感知与品牌信任

针对旧版存在的设计风格老化、视觉噪点过多、结构混乱等问题，我们从视觉体系入手，提升页面的清晰度与专业感。通过减少视觉噪点、强化重点信息、优化阅读节奏，构建更清爽、沉浸的数据场景，提升信息传达效率。

透传专业感知

金融场景对色彩更敏感，用户更偏好稳定、克制的视觉氛围。相对搜索其他产品，我们对红绿色进行了优化调整，让整体色彩更沉稳，进一步增强页面的专业感与用户的信任感。

趋势图优化旧版趋势图采用单一蓝色，缺乏涨跌表现力。新版以开盘价为中轴，采用红、灰、绿三色及双向渐变重构图表，帮助用户更直观、快速地识别股票的走势方向与变化幅度。

流畅阅读体验

为进一步优化页面的阅读体验，我们从基础视觉样式入手，全面优化基础视觉样式与信息排布方式，降低用户认知负担：

① 字体与行距优化：收敛字号，做好信息分级，并通过增设段落间距与合理行距，提升文本的可读性与信息块的识别效率。

② 色彩节奏调控：在非重点区域大幅弱化颜色使用，采用灰度、留白等方式制造呼吸空间，让用户聚焦于关键数据，减少视觉干扰。

③ 动态引导设计：在交互层面加入微动效（如图表加载过渡、hover 高亮等）辅助引导信息层级切换，提升界面节奏感与可感知性。

这些策略协同作用，不仅显著改善了页面的可读性与舒适度，也让用户获得更专注、舒适的阅读感受。

三、构建专业信任的金融生态—百度股市通系统优化

新版上线后，页面停留、点击与浏览量等核心指标显著提升，用户普遍认可新版设计在专业感知与信息效率上的提升。基于PC结果页的成功实践，我们将体验优化进一步延展至百度股市通（百度金融官网）全站，结合平台特性与行业头部垂类平台的调研，重点聚焦内容呈现效率与响应式适配两大维度，探索沉浸式体验在多端场景下的有效延展。

1.结构重构

百度股市通原有灰底卡片结构已显陈旧，固定宽度也未能发挥大屏优势，结构层级冗余，信息展示受限。对标当前主流竞品均已采用通栏沉浸式布局，我们对整体结构进行重构，释放内容空间，强化页面一体感与信息获取效率。

聚合概览页

新增概览页，复用PC结果页经验，构建一站式数据看板，使用户在单页即可全面掌握一支股票的核心信息，实现从“分散获取”到“集中洞察”的体验跃迁。

2.响应式设计

在大尺寸设备逐渐普及的背景下，响应式能力已成为多端体验一致性的关键。我们构建了统一的响应式策略：通过栅格系统建立布局规则，打通设计规范与开发规则，实现一次设计、多端适配。在实际落地中，结合不同终端特性，采用拉伸、等比缩放、扩展、固定、分栏五类布局方式，已覆盖80–90%的页面内容，剩余场景则通过差异化策略持续探索优化空间与体验突破。

以平板分辨率为例：PC浏览器作为基准适配尺寸，当内容映射至平板端时，受限于屏幕缩小与可视区域压缩，需重新调整信息疏密度。我们在平板中采用单列或双列布局，通过响应式断点动态调整模块结构。例如，PC端横向并列的图表与公司信息在平板中垂直堆叠，图表横向压缩并保留关键数据，确保阅读流畅。同时针对 hover 不适配的问题，增设点击展开等交互方式，提升信息获取效率与操作便捷性。

以宽窄屏为例：不同终端在比例与分辨率上差异明显，内容排布需具备高度灵活性。我们基于统一栅格系统设定多组断点，并为核心模块设定宽度适配策略和展示优先级。在超宽屏上自动扩展为三栏布局，提升信息密度与空间利用；在窄屏中切换为单列视图，聚焦核心内容，其余信息以折叠或收起形式展现，保障重点不被淹没。这类策略增强了多端体验一致性，也为后续模块拓展提供了更大弹性空间。

总结与展望

新版金融结果页与百度股市通官网同步上线后，核心指标如页面停留、点击与浏览量均显著提升，用户普遍认可新版设计在专业感知与信息效率上的提升。也推动了用户从“看价格”向“理解结构”的行为转变，激发了用户对股票多维数据的主动探索，进一步验证了本次从搜索结果页到落地页的全链路体验优化上的成效，也为复杂数据场景下的信息组织与体验设计提供了可借鉴的实践方向。

最后，此次改版不仅是一次视觉与结构的优化，更是对平台内容表达方式与用户认知路径的深度重塑。我们以设计为驱动，在兼顾专业表达与用户体验的基础上，探索出更契合金融场景的产品形态与交互模式。

未来，我们将持续关注用户需求，不断迭代设计语言与体验细节，打造更加清晰、可信的金融服务体验。

在科技浪潮奔涌向前的当下，人工智能正深刻重塑我们的生活与工作。人机之间的关系，也从简单交互迈向深度协作。想知道如何在这一趋势下把握体验设计的新方向吗？2025年10月将在北京举办的IXDC国际体验设计大会聚焦“人机共生：人工智能时代人机协作新范式”，作为全球领先的用户体验创新盛会，它将汇聚前沿理念与实践。一起来关注这场盛会，探索人机协作的无限可能。

文章转载：百度MEUX，版权归原作者所有

原文链接：https://mp.weixin.qq.com/s/QYYGwoJjyBsrH8yVc4gcPw

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编排 | 黄春燕

终审 | 苏 菁

点这里，学习更多设计知识！