兰亭妙微ui设计公司分享：真实 C 端产品改版实战，本次优化对象是国内头部证券 App—— 同花顺核心高频使用模块：自选板块。 文末附全文逻辑速览图，方便快速梳理整体设计脉络。
自选是承载用户收藏个股、实时查看行情数据的核心页面，用户可自主创建分组收纳不同标的，覆盖 A 股、港股、美股等多市场股票。 收藏分组是互联网产品通用功能，短视频、电商、资讯 App 均有同类设计，但证券类产品的收藏逻辑和使用场景存在本质区别：
除此之外，分组本身对资深投资者具备极强决策价值： 多数股民习惯自建自定义分组替代官方行业板块，按照科技、有色、消费、化工等赛道划分，分组会自动计算组内个股平均涨跌幅，用来判断整体板块行情。 官方自带板块个股繁杂、标的关联度低，无法贴合个人交易逻辑，自定义分组是短线、波段交易者的核心看盘工具。
基于高频交易场景，原版自选模块存在三大致命体验痛点，直接干扰看盘、选股效率：
原有分组仅靠页面顶部窄标签栏承载，触控区域狭小、点击容错率低；分组数量多时横向滑动距离过长。即便打开侧边分组列表，展示空间有限，需要反复滚动才能定位目标分组，切换流程繁琐。
分组平均涨跌幅是板块判断关键指标，但原版必须展开侧边栏才能查看；侧边栏弹出后会锁定页面，无法同步操作个股列表，打断连续看盘流程。
仅支持一级分组，不支持父级分类。以金属赛道举例，投资者需要拆分铜、铝、贵金属、稀有金属等细分赛道，单层列表会造成分组泛滥、杂乱无章。 用户只能手动添加标题 + 分割线勉强区分大类，属于治标不治本的补救方式，管理效率极低。
以上问题看似不多，但对短线高频交易者影响显著：频繁切换分组、查看板块数据会增加操作步骤，错失行情判断时机，直接影响交易决策。下文将围绕痛点，完整还原整套优化设计落地思路。
结合用户刚需与现存缺陷，本次改版锁定三大核心目标：
在此基础上深挖股民深层诉求：看盘既要盯个股分时，也要同步追踪全赛道板块走势，页面承载的有效行情信息越多，越便于快速判断交易机会。 但移动端改版存在三大天然约束，需要在设计中平衡取舍：
明确约束与目标后，进入原型迭代推演，完整还原真实设计师方案打磨全过程：
先尝试两种主流宫格布局：3 列、4 列卡片排布，将每一个自定义分组转化为独立可视化卡片。 基础交互逻辑：点击分组卡片，页面下方弹出局部滚动区域展示个股列表，板块卡片区与个股列表区分上下两层，均可独立滚动；支持新增分组、添加分类标题、折叠 / 编辑分组栏。
初代分层滚动结构极易发生上下滑动误触，因此调整交互逻辑：点击分组卡片后，下方铺满全屏个股列表；顶部保留同级分组卡片栏，支持左右横向滑动切换其他分组；再次点击卡片即可收起列表，回到全分组宫格视图，规避多层滚动冲突。
纯统一尺寸卡片视觉单调，信息承载不足，新增大尺寸 2×2 行情卡片，卡片内直接展示分组走势折线图，一眼看懂板块近期趋势。 3 列布局无法兼容大尺寸卡片并排展示，因此最终选定 4 列宫格方案：
宫格布局参考系统桌面交互逻辑，补充批量管理能力：
至此整套优化方案框架搭建完成，还可延伸更多细节迭代，重点平衡普通散户与专业短线交易者的使用差异，设计师可结合自身理解补充细化。
本次自选模块优化不只是视觉、交互微调，是完整的产品功能重构流程。 成熟团队中 UI/UX 设计师的核心价值，不是单纯落地产品给出的需求，而是主动挖掘用户隐性痛点，产出完整、大胆、可落地的解决方案，补足产品视角的盲区；方案能否最终上线落地，取决于设计评审中能否完整论证价值、说服团队。
产品改版是锻炼产品思维、用户体验分析能力最好的方式：日常使用 App 时，把所有别扭、低效的设计拿出来自主推演优化方案，长期积累能快速建立完整的设计思考框架，这套完整的推导逻辑，是 AI 无法替代的设计师核心竞争力。
下篇内容再见～
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
