北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

连接症状入口、医生发现、预约支付与远程问诊的连续体验

面向产品经理与资深设计师的案例研究

导读｜连接症状入口、医生发现、预约支付与远程问诊的连续体验。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位：先回答系统替谁解决什么问题

CareHub面向需要在线寻找医生、预约、支付和视频问诊的用户。产品把医疗服务拆解为更容易理解的消费路径，同时保留专业信息、保险与处方等必要环节，目标是在便利性和医疗信任之间取得平衡。

图1  项目界面与设计细节

二、信息架构：把功能转译为用户的工作顺序

首页从症状分类、最近问诊和推荐医生进入，搜索页支持专科与医生筛选，医生详情承担资质、时间和评价，预约流程则连接时段、患者信息、保险与支付。问诊记录和处方在个人区域持续沉淀。

图2  项目界面与设计细节

三、关键交互：从浏览信息走向完成任务

症状图标降低用户对专业科室名称的依赖，医生卡片同时展示专科、评分和可预约状态。预约采用分步确认，支付与保险信息在提交前汇总；视频问诊保持通话控件熟悉，并提供消息、文件与结束确认。

四、视觉系统：品牌表达必须承担信息语义

白底、浅灰和高饱和蓝色构成清洁可信的医疗体验，圆润头像与真实医生照片增加人感。蓝色在按钮、状态和品牌中保持一致，红色仅用于重要医疗或结束通话操作，避免制造不必要焦虑。

图3  项目界面与设计细节

五、面向产品与设计团队的可复用价值

医疗产品必须把信任设计成可验证信息：医生执业资质、服务边界、费用、隐私和紧急情况说明都应在关键节点出现。产品经理要与合规和医疗团队共同定义流程，设计师则负责让风险提示清楚但不过度阻断。

图4  项目界面与设计细节

六、专业审视：仍需补齐的体验边界

症状入口不能暗示自动诊断，应在紧急症状时明确引导线下急救。评分需要解释来源和样本量。预约失败、医生迟到、退款与处方不可用等服务边界必须完整。隐私授权应按数据用途细分，而不是一次性同意。

图5  项目界面与设计细节

结语：设计的最终判断标准是业务与使用价值

CareHub的成熟方向是把线上医疗当作完整服务，而不是视频通话功能。只有发现、预约、支付、问诊和随访连续，用户才会把便利转化为长期信任。

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

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

面向产品经理与资深设计师的案例研究

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

一、产品定位：先回答系统替谁解决什么问题

ANT是一款面向阿拉伯语用户的个人资产与消费管理产品。它把银行余额、月度支出、投资组合和消费分类集中到移动端，重点并非复制西方金融应用，而是通过RTL阅读方向、货币单位和本地消费品牌建立真实的区域适配。

图1  项目界面与设计细节

二、信息架构：把功能转译为用户的工作顺序

首页优先显示总资产与账户构成，随后呈现预算进度和常用操作；资产页用折线与明细解释变化，消费页用分类环图建立结构认知，投资页则强调计划与长期收益。层级从“我有多少”逐步过渡到“钱去了哪里、下一步如何配置”。

图2  项目界面与设计细节

三、关键交互：从浏览信息走向完成任务

设计在RTL环境中保持导航、数字、图表和图标方向的一致性，这是本项目最关键的体验基础。筛选器、日期范围和交易详情采用分层进入，避免在首屏堆叠大量字段；预算条和资产趋势采用可比较的视觉编码，帮助用户快速发现超支与波动。

四、视觉系统：品牌表达必须承担信息语义

深蓝和高亮紫色构成稳健又具有数字感的品牌基调，白色内容面板保障金融数据可读性。背景中的流体3D形体承担品牌记忆，不侵入实际操作界面。绿色、橙色、红色用于预算状态，形成直接但不过度戏剧化的风险表达。

图3  项目界面与设计细节

五、面向产品与设计团队的可复用价值

本案例提醒产品团队，本地化不是翻译字符串，而是重构阅读顺序、数字格式、支付习惯和信任线索。设计系统必须同时验证阿拉伯语长文本、混排数字、图表轴向及图标含义；研究阶段也应覆盖不同金融素养用户，而非只依赖熟练投资者。

图4  项目界面与设计细节

六、专业审视：仍需补齐的体验边界

环图的分类数量较多，移动端阅读可能依赖图例来回匹配，建议提供可点击的类别排序列表。资产与消费页面还应增加数据同步状态、异常交易解释及隐私控制。对于投资建议，必须清楚区分教育内容、模拟预测和受监管建议。

图5  项目界面与设计细节

结语：设计的最终判断标准是业务与使用价值

ANT的成熟之处，在于把地域文化、RTL交互和金融任务放进同一设计逻辑。真正可靠的全球化产品，不是用统一模板覆盖更多市场，而是在统一品牌中允许不同用户按照自己的语言和认知方式完成决策。

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

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

用清晰的预算、交易与预测体系降低企业财务决策成本

面向产品经理与资深设计师的案例研究

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

一、产品定位：先回答系统替谁解决什么问题

Finexa面向需要统一管理账户、预算、订阅支出与财务预测的中小企业。产品把原本分散在银行账户、表格和报表中的信息收束为一个连续工作台，并以AI预测作为前置决策支持，而不是在末端添加一个孤立的聊天入口。

图1  项目界面与设计细节（素材组4）

二、信息架构：把功能转译为用户的工作顺序

导航以Overview、Transactions、Accounts、Budgets、Analytics和Reports构成稳定骨架，符合财务人员从概览到核对、从计划到复盘的工作顺序。首页将现金余额、预算利用率、支出分类和现金流预测并置，使管理者能够先判断整体健康度，再下钻到交易或账户明细。

图2  项目界面与设计细节（素材组4）

三、关键交互：从浏览信息走向完成任务

预算卡片同时表达额度、已用比例、风险状态和快捷调整；交易表保留筛选、状态、分类及导出，适合高频核对；定期付款单独成页，帮助用户提前识别隐性固定成本。预测图强调时间趋势和异常区间，交互重点不是“看图”，而是让用户从异常直接进入可处理对象。

图3  项目界面与设计细节（素材组4）

图4  项目界面与设计细节（素材组4）

四、视觉系统：品牌表达必须承担信息语义

白底与低饱和紫色建立理性、轻量的金融科技气质。紫色用于主趋势和关键按钮，绿色与红色被克制地限定在正负状态，避免报表变成高噪声信号板。大留白、细边框和轻阴影让高密度数据仍保持可读，设备场景图则加强品牌传播的产品感。

图5  项目界面与设计细节（素材组4）

五、面向产品与设计团队的可复用价值

这套设计说明，B端财务产品的体验核心不是减少数据，而是建立正确的层级与比较关系。产品经理应先确定管理者、财务执行者和审批者的核心任务，再决定同一数据在概览、列表和报表中的不同表达。设计师则需要建立统一的数字格式、状态色与表格交互规范。

图6  项目界面与设计细节（素材组4）

六、专业审视：仍需补齐的体验边界

方案仍需补强数据可信度：预测模块应标注模型依据、置信区间与最后更新时间；金额卡片要支持币种和会计周期切换；导出、审批和预算调整等高风险操作需要更明确的确认与审计记录。移动端不宜照搬桌面信息密度，应聚焦审批、提醒和关键异常。

图7  项目界面与设计细节（素材组4）

结语：设计的最终判断标准是业务与使用价值

Finexa的价值在于把财务管理从“事后看报表”转向“事前发现风险、事中控制预算”。当信息架构、指标语义和操作权限形成一致体系，AI预测才能真正进入企业决策链，而不是停留在展示层。

编辑说明｜本文依据所给设计图片进行专业分析，侧重产品策略与体验方法，不构成对项目真实运营数据或技术实现的事实认定。

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

一、前言

兰亭妙微ui设计公司分享：真实 C 端产品改版实战，本次优化对象是国内头部证券 App—— 同花顺核心高频使用模块：自选板块。 文末附全文逻辑速览图，方便快速梳理整体设计脉络。

二、同花顺自选模块现状与用户底层需求拆解

自选是承载用户收藏个股、实时查看行情数据的核心页面，用户可自主创建分组收纳不同标的，覆盖 A 股、港股、美股等多市场股票。 收藏分组是互联网产品通用功能，短视频、电商、资讯 App 均有同类设计，但证券类产品的收藏逻辑和使用场景存在本质区别：

1. 普通 App 收藏仅作内容归档，用户低频回访，核心诉求是 “事后查找内容”；
2. 同花顺自选属于高频刚需功能，用户打开的核心目的不是找单只股票，而是批量监控一整组标的实时行情，页面本质是可横向滑动的数据表格，无需点进个股详情即可快速对比涨跌。

除此之外，分组本身对资深投资者具备极强决策价值： 多数股民习惯自建自定义分组替代官方行业板块，按照科技、有色、消费、化工等赛道划分，分组会自动计算组内个股平均涨跌幅，用来判断整体板块行情。 官方自带板块个股繁杂、标的关联度低，无法贴合个人交易逻辑，自定义分组是短线、波段交易者的核心看盘工具。

基于高频交易场景，原版自选模块存在三大致命体验痛点，直接干扰看盘、选股效率：

痛点 1：分组切换操作成本极高

原有分组仅靠页面顶部窄标签栏承载，触控区域狭小、点击容错率低；分组数量多时横向滑动距离过长。即便打开侧边分组列表，展示空间有限，需要反复滚动才能定位目标分组，切换流程繁琐。

痛点 2：分组行情数据隐藏太深

分组平均涨跌幅是板块判断关键指标，但原版必须展开侧边栏才能查看；侧边栏弹出后会锁定页面，无法同步操作个股列表，打断连续看盘流程。

痛点 3：分组无层级管理能力，分类混乱

仅支持一级分组，不支持父级分类。以金属赛道举例，投资者需要拆分铜、铝、贵金属、稀有金属等细分赛道，单层列表会造成分组泛滥、杂乱无章。 用户只能手动添加标题 + 分割线勉强区分大类，属于治标不治本的补救方式，管理效率极低。

以上问题看似不多，但对短线高频交易者影响显著：频繁切换分组、查看板块数据会增加操作步骤，错失行情判断时机，直接影响交易决策。下文将围绕痛点，完整还原整套优化设计落地思路。

三、自选页面完整优化方案推演

（一）优化核心目标

结合用户刚需与现存缺陷，本次改版锁定三大核心目标：

1. 重构分组展示形式，降低分组查找、切换成本；
2. 分组行情数据默认外露，无需弹窗即可直观查看板块涨跌；
3. 支持多级分组架构，实现大类 - 细分赛道分层管理。

在此基础上深挖股民深层诉求：看盘既要盯个股分时，也要同步追踪全赛道板块走势，页面承载的有效行情信息越多，越便于快速判断交易机会。 但移动端改版存在三大天然约束，需要在设计中平衡取舍：

1. 手机屏幕尺寸有限，页面承载信息容量受限；
2. 移动端触控交互远不如电脑端便捷，无法大幅增加操作步骤；
3. 页面除分组模块外，还需保留个股行情、指标等基础字段，空间资源紧张。

明确约束与目标后，进入原型迭代推演，完整还原真实设计师方案打磨全过程：

版本 1：分组宫格卡片基础形态

先尝试两种主流宫格布局：3 列、4 列卡片排布，将每一个自定义分组转化为独立可视化卡片。 基础交互逻辑：点击分组卡片，页面下方弹出局部滚动区域展示个股列表，板块卡片区与个股列表区分上下两层，均可独立滚动；支持新增分组、添加分类标题、折叠 / 编辑分组栏。

版本 2：优化滚动误触，重构个股展开逻辑

初代分层滚动结构极易发生上下滑动误触，因此调整交互逻辑：点击分组卡片后，下方铺满全屏个股列表；顶部保留同级分组卡片栏，支持左右横向滑动切换其他分组；再次点击卡片即可收起列表，回到全分组宫格视图，规避多层滚动冲突。

版本 3：差异化卡片尺寸，强化行情信息展示

纯统一尺寸卡片视觉单调，信息承载不足，新增大尺寸 2×2 行情卡片，卡片内直接展示分组走势折线图，一眼看懂板块近期趋势。 3 列布局无法兼容大尺寸卡片并排展示，因此最终选定 4 列宫格方案：

• 4 列布局容纳更多分组卡片，适配手机竖屏空间；
• 支持自由缩放卡片大小，逻辑接近手机桌面小组件，兼顾极简浏览与深度行情查看。

版本 4：完善编辑、自定义交互体系

宫格布局参考系统桌面交互逻辑，补充批量管理能力：

1. 长按卡片进入编辑模式，支持多选批量删除、重命名分组；
2. 长按拖拽自由调整卡片排序，自定义分组展示优先级；
3. 开放卡片自定义配置：可自主选择展示组内领涨股、涨跌数值、分时 K 线等信息，适配短线、长线不同用户需求。

版本 5：沉浸式看盘模式 + 大屏设备适配

1. 全屏专注模式：一键隐藏顶部标题栏、底部全局导航栏，清除页面冗余元素，打造无干扰看盘界面；
2. 折叠屏 / 平板宽屏适配：利用横向大屏优势，常态展示更多分组卡片；点击分组后，页面左右分栏，左侧分组宫格、右侧个股列表，无需来回切换页面，大幅提升多板块对比效率。

至此整套优化方案框架搭建完成，还可延伸更多细节迭代，重点平衡普通散户与专业短线交易者的使用差异，设计师可结合自身理解补充细化。

四、设计复盘：改版背后的产品与设计思维

本次自选模块优化不只是视觉、交互微调，是完整的产品功能重构流程。 成熟团队中 UI/UX 设计师的核心价值，不是单纯落地产品给出的需求，而是主动挖掘用户隐性痛点，产出完整、大胆、可落地的解决方案，补足产品视角的盲区；方案能否最终上线落地，取决于设计评审中能否完整论证价值、说服团队。

五、结尾感悟

产品改版是锻炼产品思维、用户体验分析能力最好的方式：日常使用 App 时，把所有别扭、低效的设计拿出来自主推演优化方案，长期积累能快速建立完整的设计思考框架，这套完整的推导逻辑，是 AI 无法替代的设计师核心竞争力。

下篇内容再见～

转载：优设

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