首页

兰亭妙微ui设计公司分享:海量股票数据如何清晰呈现?百度金融从搜索页到官网的系统化 UI 升级复盘

清阳 交互设计及用户体验

前言

兰亭妙微ui设计公司分享:随着理财、投资用户群体愈发年轻化、多元化,证券类产品早已跳出单一交易工具的定位,逐步进化为融合数据研判、投资策略、情绪陪伴的一站式金融服务平台。
 
当下用户更自主、理性,对平台提出双重核心诉求:既要信息直观可信、操作高效顺滑,也需要整套统一的设计语言建立专业认知,从而沉淀对平台的信任感与情感认同。
为适配行业变革与用户需求升级,百度 MEUX 设计团队以百度搜索金融结果页、百度股市通官网两大核心阵地为载体,完成从搜索卡片到落地官网的全链路体验重构。我们系统性梳理金融垂类用户行为与产品底层逻辑,依托统一设计体系、标准化响应式策略完成体验革新,全面强化百度金融多终端、多场景下的专业表达,提升用户信赖度。

一、现状诊断:高密度金融页面四大核心痛点

项目初期,团队以 PC 端百度股票搜索结果页为核心样本,从页面结构、交互链路双维度深度走查,归纳出高密度数据场景共通的四大体验短板:
  1. 信息组织无序,获取效率低下

    image.png

     
    金融数据维度繁杂、体量巨大,页面结构松散、信息颗粒度模糊,缺少分层引导框架,用户抓取核心行情、财报等关键信息成本极高。
  2. 内容密度失衡,阅读体验疲劳
     
    全页面信息平铺排布,视觉节奏无起伏,长时间浏览易产生视觉倦怠,大幅降低用户深度探索、主动查阅更多内容的意愿。
  3. 模块割裂形成信息孤岛
     
    行情、公司资料、走势图表、财务数据各区块相互独立,缺少逻辑串联,用户无法快速搭建完整个股认知体系。
  4. 视觉体系老旧,专业感知薄弱
     
    页面层级区分模糊,核心数据缺少视觉权重,整体视觉风格滞后于主流金融产品,难以传递平台权威、专业的品牌形象。

二、三大优化策略:系统性升级高密度数据体验image.png

针对现存痛点,我们确立三层递进式设计目标,从信息承载、数据聚合、视觉表达同步落地优化:
  1. 提效信息流转:搭建条理清晰、高容纳度的标准化内容框架
  2. 聚合多维数据:打造层级分明、逻辑连贯的数据呈现体系
  3. 重塑视觉感知:构建克制、专业、沉浸式的金融视觉语言

1. 重构页面内容框架,放大大屏信息承载效率

image.png

依托 PC 端大屏展示优势,我们摒弃传统单列流式布局,改造页面头部,打造聚合式数据总览看板,强化页面一体感与浏览连贯性。
 
针对旧版页面权重模糊、重点数据埋没的问题,对个股核心指标做前置聚合:股票名称、交易代码、所属市场、实时报价、涨跌幅、汇率等关键数据集中放在首屏顶部,用户打开页面即可快速完成基础行情判断,大幅缩短决策路径。

2. 引入 Bento 便当式布局,打造高聚合结构化浏览体系

 

股票数据具备强逻辑、高维度、高密度的特性,原有零散分块布局会割裂用户认知。本次改版引入Bento(便当式)模块化设计,将海量信息按业务主题拆分、规整为独立区块,如同便当盒分区收纳食材一般,清晰划分信息类别,强化页面视觉层次。

① 信息结构化,降低认知负荷image.png

以百度股票 PC 搜索结果页为例,我们将分时行情、K 线走势、企业基本面、财务指标等信息分类收纳至独立 Bento 模块。规整的分区结构梳理清数据内在逻辑,用户能快速定位所需板块,数据识别与页面浏览流畅度同步提升。

② 轻量化递进交互

image.png

模块默认展示核心精简信息,满足快速浅浏览需求;同时适配 PC 端 hover 悬浮交互,鼠标移入即可展开完整详情,兼顾高效速读与深度查阅两种用户行为,平衡信息密度与交互便捷性。

3. 迭代金融专属视觉体系,夯实专业信任感知

image.png

旧版页面视觉噪点冗余、层级区分弱,我们从色彩、图表、文本、微动效全维度优化,打造干净克制、适配金融场景的视觉系统,减少视觉干扰,强化专业氛围感。

色彩体系:克制沉稳,优化涨跌色感知

金融用户对红、绿涨跌色敏感度极高,我们调整红绿配色饱和度与明度,弱化刺眼高饱和色调,整体页面基底偏向低饱和中性灰,营造稳定、严谨的视觉氛围,从色彩层面传递平台权威可靠的气质。

趋势图表可视化升级

image.png

旧版走势图仅单一蓝色,涨跌趋势辨识度不足。新版以开盘价为中间基准线,采用红 / 灰 / 绿三色渐变区分上涨、平盘、下跌区间,走势幅度通过渐变深浅直观体现,用户一眼即可捕捉股价波动趋势与强弱变化。

文本与阅读节奏优化

从基础视觉规范入手全方位降低用户阅读负担:
  1. 字号、行距分级管控:收缩冗余大号字体,建立清晰字号层级,增加段落留白与模块间距,提升长篇财报、资讯文本可读性;
  2. 色彩降噪管控:非核心辅助信息统一使用灰度展示,大面积留白制造视觉呼吸感,视线自然聚焦价格、涨跌幅等核心数据;
  3. 轻量化动态引导:图表加载过渡、模块 hover 高亮等细微动效,辅助用户识别层级切换,赋予静态数据页面柔和节奏感。

    image.png

整套视觉策略协同生效后,页面阅读舒适度、信息聚焦度显著提升,用户浏览海量数据时更专注、不易疲惫。

三、体验全域延伸:百度股市通官网全站系统性优化

搜索结果页改版上线后,页面停留时长、点击深度、全页浏览量等核心数据均实现正向增长,用户对页面专业度、信息读取效率反馈良好。基于 PC 搜索页成熟的设计方法论,我们将整套优化思路延伸至百度股市通(百度金融官网)全站,对标行业头部金融平台,围绕内容展示效率、多端响应适配两大方向完成沉浸式体验升级。

1. 页面结构彻底重构

image.png

百度股市通旧版采用固定宽度灰底卡片布局,既浪费大屏可视空间,模块层级冗余繁杂,数据展示严重受限。参考行业主流通栏沉浸式设计方案,我们彻底重构全站骨架,取消固定窄容器,释放横向展示空间,强化页面整体连贯性,多维数据并行展示,信息获取效率大幅提升。
同时新增个股聚合概览页,复用搜索结果页的数据看板思路,单页面整合一支股票全部核心维度信息,实现从 “分散跳转查找” 到 “一站式集中洞察” 的体验跃迁。image.png

2. 标准化响应式设计,实现多端体验统一

 

大屏设备普及背景下,一套设计适配 PC、平板、窄屏浏览器等多终端,是体验一致性的核心基础。我们搭建统一栅格响应式规则,打通设计规范与前端开发落地标准,实现一次设计、全终端自适应。
 
落地过程中归纳拉伸、等比缩放、横向扩展、固定尺寸、分栏堆叠五类适配逻辑,覆盖页面 80%-90% 常规模块;剩余特殊场景持续迭代差异化适配方案,预留长期优化空间。

平板端适配逻辑

image.png

以平板设备为例:PC 端横向双栏排布的图表、公司资料模块,在平板屏幕压缩后自动垂直堆叠;图表横向等比压缩并保留全部关键指标,保障数据完整可读。同时针对平板无 hover 交互的特性,增加点击展开详情的交互入口,补齐操作短板。

宽窄屏差异化布局

针对超宽屏、窄浏览器窗口两种极端场景,基于栅格设置多组适配断点,为每个核心模块定义宽度规则与信息展示优先级:
  • 超宽大屏:自动切换三栏并行布局,充分利用横向空间,提升单次浏览的数据承载量;
  • 窄屏窗口:收敛为单列垂直视图,仅保留核心行情数据,次要板块自动折叠收起,避免关键信息被繁杂内容淹没。
     
    标准化响应式体系不仅保证跨设备体验连贯统一,也为后续新增业务模块预留充足拓展弹性。

总结与未来展望

image.png

新版百度金融搜索结果页、百度股市通官网同步上线后,页面停留、浏览深度、交互点击等核心数据全面向好。设计改造成功引导用户行为转变:从单纯 “查看股价”,转向主动深挖走势、财务、企业基本面等多维数据,充分验证了这套高密度数据设计体系的落地价值,也为同类复杂数据产品提供可复用的实践思路。
本次改版不只是表层视觉、页面布局美化,更是对金融产品信息表达逻辑、用户认知路径的深度重塑。我们以设计驱动业务体验升级,在专业严谨的行业属性与流畅易用的用户体验之间找到平衡,探索适配金融垂类的界面、交互新模式。
后续团队将持续跟进用户真实反馈,迭代视觉规范、交互细节,不断打磨清晰、可信、易用的一站式金融数据服务体验。
 

转载:优设

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

 

兰亭妙微深度拆解:重构用户生命周期,搭建全链路体验设计体系

涛涛 设计思维

当下产品体验设计早已跳出单次页面交互的局限,单纯优化界面视觉无法实现长期用户价值。深耕政企数字化、软件 UI/UX 全案设计的兰亭妙微团队,在多年项目落地中发现,缺少时间维度的设计策略,极易造成用户流失、转化断层。想要搭建可持续的用户增长体系,核心抓手便是重构完整用户生命周期,以用户全阶段行为特征为依据,分层制定差异化体验方案,让设计伴随用户成长、留存与召回全程发挥价值。

兰亭妙微设计复盘:7 类摧毁内容价值的 UX 设计误区与优化方案

涛涛 交互设计及用户体验

一款能实现商业转化的数字产品,必然是优质视觉设计、清晰内容叙事与流畅用户体验三者的统一。深耕 UI/UX 设计十六年的兰亭妙微(蓝蓝设计),在服务 600 余家政企、互联网客户的项目落地中发现,很多产品内容本身具备极高价值,却因几处基础设计失误大幅流失用户。这些常见体验问题会打乱用户浏览逻辑,让受众忘记访问目的、找不到核心操作,最终直接削弱内容传播与转化效果。结合团队大量网站、软件界面实操案例,我们梳理出 7 类典型设计雷区,并配套可直接落地的优化方案。

Kinetech Construction建筑协作平台UI/UX设计解析

鹤鹤 系统UI设计文章及欣赏

导读|将项目、团队、文档与AI助理整合为施工协同工作台。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

ANT阿拉伯语个人金融应用UI/UX设计解析

鹤鹤 系统UI设计文章及欣赏

导读|RTL语言、资产聚合与本地化金融认知的统一设计。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

Finexa AI财务管理SaaS UI/UX设计深度解析

鹤鹤 B端ui设计文章及欣赏

导读|用清晰的预算、交易与预测体系降低企业财务决策成本。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

Flexion AI智能健身产品UI/UX设计深度解析

鹤鹤 设计思维

导读|从数据仪表盘、AI教练到营养识别,构建连续的健康行为闭环。本文不止评价画面风格,而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

兰亭妙微实战复盘:竞品对标拆解,深挖电商 APP 全页面体验痛点

涛涛 交互设计及用户体验

北京兰亭妙微深耕电商 UI/UX 设计多年,服务数十款跨境、综合电商产品。在长期改版项目中我们发现,很多 APP 仅能实现基础功能,对比成熟竞品后会暴露出大量隐性体验缺陷,这些细碎问题持续拉低转化、造成用户流失。本文结合跨境电商旧版产品复盘案例,对标考拉、唯品会、拼多多等成熟平台,拆解全链路页面存在的典型设计短板,为电商产品迭代提供完整自查思路。

兰亭妙微实战总结:UX 设计师必须吃透的 9 类产品用户状态

涛涛 交互设计及用户体验

北京兰亭妙微深耕 UI/UX 设计十六年,团队服务政企、金融、大数据可视化等数百款软件产品,在长期项目落地中发现:绝大多数体验卡顿、用户流失问题,根源都是设计师忽略了用户全流程里不同使用状态的差异化设计。结合过往 B 端、移动端项目实战经验,我们梳理出产品使用周期里最核心的 9 种用户状态,覆盖从启动到流程中断全链路,为设计师提供可直接落地的设计思路。

兰亭妙微ui设计公司分享:AI产品交互设计自查:5大模块+6个信任开关,缺一不可

清阳 设计资源

兰亭妙微ui设计公司分享:最近把手机里所有带AI助手的APP都试了一遍,包括支付宝的蚂小财、蚁小保,滴滴打车助手小滴,招商银行的AI理财顾问、飞猪千问定车票等等。

各赛道都在抢着把AI能力塞进自己的产品。

试完之后的感受挺微妙的,大部分AI助手就用过一两次就不再打开了。

坦率的讲,不是这些AI不够聪明。底层模型的能力虽然有差距,但回答问题的水平都已经在可用线以上了。真正拉开差距的是交互设计,就是用户打开你的AI助手之后,整个体验是怎么串起来的。

AI产品的交互设计跟传统APP完全不同。传统交互设计解决的是怎么操作,AI交互设计要解决的是怎么表达意图和怎么建立信任。

行业里目前有两套被广泛引用的设计框架,一套解决前者,一套解决后者。

所以无论是产品经理还是设计师,都应该先掌握AI产品的设计特性,然后针对性的进行自己内部产品的AI升级,而不是看着大家都整小助手,就赶忙上线一个小助手,但用起来根本啥也不是。

你的AI助手能力如何,用户感受如何,下面通过五大领域+六大模式来自查下你的助手吧~

一、五大领域:AI交互的完整模块

这套框架来自Smashing Magazine 的 AI 界面设计研究,把AI交互拆分成五个功能模块,下面来简单说明一下。

1. Input UX — 表达意图

用户怎么把想法传达给AI。这是AI交互的第一步,也是最难的步骤,因为用户的意图往往是模糊的,且需求的来源本身就是把多样。

核心设计要点:提供多种表达通道,如文字输入、语音输入、拍照识别、视频对话等,让用户自己选择使用最顺手的方式。

比如支付宝/豆包等:语音+图片+文本多模态输入,用户可以直接拍一张图问这是什么,不用打字描述,降低了表达门槛。

2. Output UX — 展示结果

用户把想法告诉AI了,接下来就是AI怎么把结果交出来,AI生成的结果怎么呈现。不同于传统APP的固定页面,AI的输出是动态的、多维度的,是将最佳可读性的结果呈现给用户。

核心设计要点:结果展示必须可读、可比较、可评估。用户第一眼要能判断靠不靠谱。

比如在设计的时候不要长短大论的文字给到客户,一定是结构化,图文并行的给到客户,比如千问、可灵从开始大大篇报告逐渐给出结构化输出。

AI回答自动拆分为大纲、要点、表格、各种曲线图折线图等多种形式,用户不用自己从一大段文字里提取信息。

3. Refinement UX — 微调输出

AI给的初始结果通常是80分,用户需要微调到95分。这是体验的关键分水岭。

核心设计要点:微调必须即时反馈、所见即所得。操作粒度合适,优先用预设降低决策成本。

4. AI Actions — 执行任务

AI从给建议升级为替你做。帮你看是一回事,帮你操作是另一回事,信任门槛完全不同。

核心设计要点:执行类操作必须配上确认机制,让用户随时能看到AI将要做什么。

比如AI在工作时,都会告诉你他正在干什么执行到哪一步了,让用户放心,帮你办理业务时,或者在帮你打车时,一定是将执行前的确认交给用户。

5. AI Integration — 场景融合

AI能力嵌入到用户已有的工具和工作流中,而不是让用户跳到另一个APP去用AI。

核心设计要点:AI的出现时机和位置必须自然,与已有工具的数据和操作必须打通。

比如你用千问集成了各类的能力,不用点外卖去闪购、买票去飞猪,只需要在千问你告诉他帮我下单即可,这样用户对AI助手的依赖就会增强,不会再去点击传统的入口。

以上框架讲的五个功能模块。你可以理解为,一个完整的AI助手,这五个模块的设计都得到位。少了任何一个,体验就会在那个环节断掉。

但这还不够。

你把功能模块都设计好了,用户凭什么相信你的AI?凭什么让AI替自己做事?

这就是第二套框架要解决的问题。

二、六个设计模式:让用户信任AI的六个设计开关

我自己的观察是,大部分AI助手在信任这块做得都比较粗。要么就是什么都不解释直接给你结果,要么就是一股脑把操作都做了也不提前说一声。用户用着用着就慌了,不知道AI在干什么、为什么这么干、干错了、怎么办。

做得好的AI助手是怎么处理信任的呢,主要关注六个设计模式。

六个模式的核心让用户信任AI的六个设计开关,把控制权交还给用户。AI可以执行,但用户必须能预览、能确认、能理解、能质疑、能撤回、能干预。

这套框架来自行业智能体UX模式研究,专门解决一个问题——当AI替用户做事时,怎么让用户信任它、控制它、纠正它。

1. Intent Preview — 意图预览

  • AI执行前先展示行动计划,用户确认后才动手。设计目标:接受率 > 85%。

比如,小滴我告诉他帮我叫一辆回家的车,他会实时展示他当前思考进度,然后跑完结果后给出我确认的地址和时间,然后在帮我匹配对应的车辆,这样用户对他的行为一目了然;

还有一些操作更类B端工具,如Claude Code 每次任务之前会先列一个清单,要澄清哪些需求,改动哪些文件、每个文件改什么内容,你确认了它才开始,完全放心的交给AI。

2. Autonomy Dial — 自主度旋钮

  • 让用户调节AI的自主程度,渐进释放。四级模式:只给建议、计划确认、确认后执行、自主执行。

基础C端客户层面,可释放给用户可选择的模式,如基础快速和深度思考、如一个功能独立的快捷入口和分步的引导入口,便于用户自主灵活的选择;对于B端的工具,在辅助自我工作上,可以更灵活的调整AI介入的程度,更好的AI为我所用。

3. Explainable Rationale — 可解释性

一是AI做完后告诉用户为什么,展示AI思考的链路;

二是其中变量的解释,如通过上下文的解释,或者持续的告知和引导;

三是自我批判解释,需帮助用户评估其可靠性,如自我批判(如“此信号可能因某某因素而被夸大”),或提供其他角度的回答,来引导用户自主做出判断。

特别是一些资金基金财富保险类的助手,其严谨性和解释性要更加明确。

4. Confidence Signal — 置信度信号

AI不确定时老实告诉用户,核心原则:不确定性必须可见,不能藏在看似自信的输出背后。

当用户问到具体办理或查询的事件时,遇到不确定的问题直接说我不太确定,这个信息我无法验证,不会编造答案。

还有就是使用简单、可见的指标,如百分比或低/中/高等级,来标示结果的置信度。

对于文本内容,可以在视觉上高亮不确定的部分。

5. Action Audit & Undo — 审计与撤销

完整操作记录+ 一键撤销。设计目标:撤销率 < 5%。

支持用户查看以往的对话记录,让用户的记录有迹可循,可追溯之前的咨询信息;

6. Escalation Pathway — 升级路径

AI不确定时主动求助用户。设计目标:恢复成功率 > 90%。

三、下一步:实际落地

回到开头那个问题,大部分AI助手为什么做得不到位?

因为它们要么缺模块,五个功能模块没有全覆盖,用户在某个环节卡住了就放弃了;要么缺信任,六个信任模式没有做到位,用户不敢让AI做重要的事,要么两个都缺。

拿到一个AI助手的设计需求,怎么落地呢,三步走。就像机长在起飞前会严格的自查所有系统是否准备齐全,才会起飞,必要的限制,是对产品和用户负责。

第一步,拿五大领域当模块地图过一遍。你的AI助手在表达意图、展示结果、微调输出、执行任务、场景融合这五个环节,每个环节的交互形态想清楚了吗?有没有哪个环节是缺失的?

第二步,拿六大模式当信任自查清单过一遍。坦率的讲,意图预览和撤销是最低要求,几乎所有涉及AI执行的功能都应该配上。自主度和可解释性根据功能复杂度决定。置信度信号和升级路径在信息不确定的场景下必须具备。

第三步,把缺失的补上。不是每个功能都要六个模式全覆盖,但每一个被省掉的模式都应该有明确的理由,而不是没想到。

所以在设计时,传统产品,产品/设计的产出是一套界面操作流程。AI产品,产出是一套行为规则,AI在什么时机、以什么方式、展现什么信息、留给用户什么控制权。这些东西才是负责AI项目的人真正要决定的事情。

 

转载:人人都是产品经理

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档