TobieYucheng Feng · 冯渝程
← 全部作品

Industrial Securities · 兴业 SMT2022–23在职项目 · 证券桌面软件

从业务单元,建立界面秩序。

在优品财富的工作中,我与同事共同研究业务模块的拆分,负责相关 Figma 组件、使用规范与维护,让高密度金融界面能够复用。

项目背景
优品财富工作 · 兴业 SMT
我的职责
组件设计、使用规范与维护
协作方式
与同事共同研究业务单元拆分
交付范围
Figma 组件与规范
SMT-MAX · 资产与持仓工作区原始界面
SMT-MAX 资产与持仓界面

01 · 问题

一张表格承载的,是一项业务任务。

证券工具把账户、市场、持仓、数值和操作放在同一个密集工作面中。视觉相似的控件,可能对应完全不同的业务后果;因此,组件划分不能只看外观。

这次工作的目标,是在减少重复界面构建的同时,保留业务含义。我与同事共同研究组件库方法与业务单元拆分,再把相关结构推进到组件和规范。

Context

我在看哪个账户?

账户和市场决定了如何理解数据。

State

现在是什么状态?

默认、选中、悬停与无数据需要不同反馈。

Action

我可以执行什么?

操作应属于明确任务,并保留其业务意义。

02 · 拆分

用业务含义,而非视觉相似度,决定复用边界。

以账户持仓为例,表格、账户上下文与操作控件可以拆分为可复用单元,同时保留它们之间的关系。共享结构只有在含义与行为相符时才成立。

我的职责包括相关组件设计、使用规范与持续维护。对于不同任务中特有的规则,保留差异比强行统一更重要。

Tobie 的注释

组件的边界,也是一项产品设计决策。

03 · 状态

状态变化,阅读结构保持稳定。

源文件的“表格/账户持仓”组件包含默认、选中、悬停与无数据变体。反馈需要让用户理解发生了什么,同时保持信息的位置与阅读顺序稳定。

这使组件规范不仅回答“长什么样”,还明确“在不同情况下如何表达”。一致的状态定义,也为后续维护提供共同依据。

SMT · 表格 / 账户持仓组件按原稿 1:1 重建
SMT-MAX — 资产 / 持仓
持仓
序号证券代码证券名称持仓数量可卖数量成本价最新价市值盈亏金额盈亏比例(%)今日买入今日卖出市场资金账户姓名
1000001平安银行2500250059.06040.110623,311.23−1623.31−24.1320002000沪A200000026李永
2000811冰轮环境25002500192.440109.130962,211.20−1,123.13−10.21600600沪A200000026李永
3002030天奇股份140014002.4402.8602,222,211.20141,123.1310.21600600沪A200000026李永
4002031达安基因140014002.4402.8602,222,211.20141,123.1310.21600600沪A200000026李永
5600000浦发银行10000010000012.00034.17061,506,000.00399,021,131.00341.0000沪A200000026李永
6600036招商银行118001180010.23034.17061,506,000.00399,021,131.00341.0000沪A200000026李永
7600070浙江富润1133100113310010.2305.530506,000.00−511,233.00−80.0000沪A200000026李永
上证指数 3000.21 +120.21 +8.21%原稿中的示例数据
原稿记录的四种状态
Tobie 的注释

默认行:白底、1px 分隔线。列顺序是阅读顺序——先认出证券,再比较持仓与现值,最后看盈亏。

也可以直接把鼠标移到行上、点击行来选中。

这是“表格 / 账户持仓”组件的代码复刻:列、数值、颜色(涨红 #DF3537、跌绿 #1D9920、选中 #F1F4FF、悬停 #E5E6E9)与行高均取自原稿截图;数值为原稿示例数据,不连接任何账户或行情。原稿中搜索框的行为未在组件里定义,因此这里只保留外观。

原稿截图 · 行状态原始界面
上方复刻所依据的原稿行状态截图(默认、选中、悬停);无数据变体在原稿中保留行高。

04 · 规范与维护

复用结构,保留操作的不同含义。

买入、卖出、确认、取消和输入控件具有相关结构,但它们不是同一种动作。我维护这些组件与规范,让重复模块有一致基础,同时保留任务之间的区别。

组件被用于跨项目复用与日夜主题适配。这些经验说明了维护上的价值,但没有历史工时统计,因此不把它写成未经测量的效率提升比例。

交易控件与变体 · 组件库原稿原始界面
买入 3 种、卖出 6 种状态(选中、聚焦、未选中,有无角标)。这是我负责的组件范围,不代表整套证券产品由我个人负责。

05 · 交付与反思

可复用的设计基础,来自明确的边界。

交付是 Figma 组件、使用规范与维护工作。我参与了方法研究和业务拆分,个人职责不包含软件开发交付。

如果继续验证这套方法,我会比较重复模块的组装时间、遗漏状态的数量,以及一次修改同步到多个实例的维护成本。它们能更具体地判断复用是否真正帮助了团队。

原稿: Figma 项目文件 ↗ · 访问遵循原文件的分享权限。