01 · 问题
一张表格承载的,是一项业务任务。
证券工具把账户、市场、持仓、数值和操作放在同一个密集工作面中。视觉相似的控件,可能对应完全不同的业务后果;因此,组件划分不能只看外观。
这次工作的目标,是在减少重复界面构建的同时,保留业务含义。我与同事共同研究组件库方法与业务单元拆分,再把相关结构推进到组件和规范。
我在看哪个账户?
账户和市场决定了如何理解数据。
现在是什么状态?
默认、选中、悬停与无数据需要不同反馈。
我可以执行什么?
操作应属于明确任务,并保留其业务意义。
02 · 拆分
用业务含义,而非视觉相似度,决定复用边界。
以账户持仓为例,表格、账户上下文与操作控件可以拆分为可复用单元,同时保留它们之间的关系。共享结构只有在含义与行为相符时才成立。
我的职责包括相关组件设计、使用规范与持续维护。对于不同任务中特有的规则,保留差异比强行统一更重要。
组件的边界,也是一项产品设计决策。
03 · 状态
状态变化,阅读结构保持稳定。
源文件的“表格/账户持仓”组件包含默认、选中、悬停与无数据变体。反馈需要让用户理解发生了什么,同时保持信息的位置与阅读顺序稳定。
这使组件规范不仅回答“长什么样”,还明确“在不同情况下如何表达”。一致的状态定义,也为后续维护提供共同依据。
| 序号 | 证券代码 | 证券名称 | 持仓数量 | 可卖数量 | 成本价 | 最新价 | 市值 | 盈亏金额 | 盈亏比例(%) | 今日买入 | 今日卖出 | 市场 | 资金账户 | 姓名 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | 000001 | 平安银行 | 2500 | 2500 | 59.060 | 40.110 | 623,311.23 | −1623.31 | −24.13 | 2000 | 2000 | 沪A | 200000026 | 李永 |
| 2 | 000811 | 冰轮环境 | 2500 | 2500 | 192.440 | 109.130 | 962,211.20 | −1,123.13 | −10.21 | 600 | 600 | 沪A | 200000026 | 李永 |
| 3 | 002030 | 天奇股份 | 1400 | 1400 | 2.440 | 2.860 | 2,222,211.20 | 141,123.13 | 10.21 | 600 | 600 | 沪A | 200000026 | 李永 |
| 4 | 002031 | 达安基因 | 1400 | 1400 | 2.440 | 2.860 | 2,222,211.20 | 141,123.13 | 10.21 | 600 | 600 | 沪A | 200000026 | 李永 |
| 5 | 600000 | 浦发银行 | 100000 | 100000 | 12.000 | 34.170 | 61,506,000.00 | 399,021,131.00 | 341.00 | 0 | 0 | 沪A | 200000026 | 李永 |
| 6 | 600036 | 招商银行 | 11800 | 11800 | 10.230 | 34.170 | 61,506,000.00 | 399,021,131.00 | 341.00 | 0 | 0 | 沪A | 200000026 | 李永 |
| 7 | 600070 | 浙江富润 | 1133100 | 1133100 | 10.230 | 5.530 | 506,000.00 | −511,233.00 | −80.00 | 0 | 0 | 沪A | 200000026 | 李永 |
默认行:白底、1px 分隔线。列顺序是阅读顺序——先认出证券,再比较持仓与现值,最后看盈亏。
这是“表格 / 账户持仓”组件的代码复刻:列、数值、颜色(涨红 #DF3537、跌绿 #1D9920、选中 #F1F4FF、悬停 #E5E6E9)与行高均取自原稿截图;数值为原稿示例数据,不连接任何账户或行情。原稿中搜索框的行为未在组件里定义,因此这里只保留外观。
04 · 规范与维护
复用结构,保留操作的不同含义。
买入、卖出、确认、取消和输入控件具有相关结构,但它们不是同一种动作。我维护这些组件与规范,让重复模块有一致基础,同时保留任务之间的区别。
组件被用于跨项目复用与日夜主题适配。这些经验说明了维护上的价值,但没有历史工时统计,因此不把它写成未经测量的效率提升比例。
05 · 交付与反思
可复用的设计基础,来自明确的边界。
交付是 Figma 组件、使用规范与维护工作。我参与了方法研究和业务拆分,个人职责不包含软件开发交付。
如果继续验证这套方法,我会比较重复模块的组装时间、遗漏状态的数量,以及一次修改同步到多个实例的维护成本。它们能更具体地判断复用是否真正帮助了团队。
原稿: Figma 项目文件 ↗ · 访问遵循原文件的分享权限。
