专题系列 · 设计体系 · 消费与零售

先有可复用的组件,再拼页面

页面设计里,如果组件仍是每个页面从头画,结果往往是页面之间只是看起来接近,改一处要改很多处。更稳妥的做法是先确定可复用的组件,页面由组件拼成,并用组件清单把这个选择固定下来。

清美未来洞察团队2026 年 4 月 16 日阅读约 7 分钟

核心要点

  • 在页面设计里,组件不该继续停留为每个页面从头画。
  • 放着不管,就会反复出现同一件事:页面之间只是看起来接近,改一处要改很多处。
  • 起点换成:先确定可复用的组件,页面由组件拼成。
  • 把选择写进组件清单,由设计负责人。
  • 以后只按一个问题验收:这个页面的新部分,是否真的不能用已有组件。

01关于组件,先决定什么

处理组件时,第一件不该做的事是修饰每个页面从头画。在页面设计里,顺序比措辞更决定会不会出现:页面之间只是看起来接近,改一处要改很多处。

如果一上来就改句子,团队会以为组件已经更新,页面之间只是看起来接近,改一处要改很多处却还在原处。

先确定可复用的组件,页面由组件拼成。做不到这一点,组件就还停在每个页面从头画。

02组件里哪些决定必须靠后

有些决定必须靠后。在先确定可复用的组件,页面由组件拼成之前,就去讨论渠道、画面或话术,只会把每个页面从头画换一种说法保留下来。

靠后的决定不是不重要,而是它们要服从前面的选择,否则团队只会反复处理表象:页面之间只是看起来接近,改一处要改很多处。

03组件的顺序本身就是设计

顺序可以写成三步:先先确定可复用的组件,页面由组件拼成,再形成组件清单,最后才允许对外说法变化。

颠倒这个顺序时,组件看起来很忙,实际上仍被每个页面从头画牵着走。

04用工具固定组件的顺序

组件清单要能看出先后。读它的人应知道什么已经定了,什么还不能动。

新页面开始前,用组件清单核对顺序有没有被战役打乱。

05在什么场合复核组件

设计负责人。顺序一旦被例外打穿,就要回到组件清单上改规则,而不是在群里临时改一句组件。

复核只问:这个页面的新部分,是否真的不能用已有组件。这个问题能答,顺序才算被使用了。

框架图

组件的四层结构

从不可让渡的部分到现场可用的工具,每一层只回答一个问题,避免把组件重新写成每个页面从头画。

L1已有组件

这一层写明组件里什么不能让渡。

L2允许新做

这一层把组件收成可检查的条件。

L3新组件如何进入

这一层规定组件在不同场合可以变什么。

L4页面

这一层把组件交给使用的人,并写明例外。

注:本图为概念框架示意,用于说明思考结构,不代表任何统计数据。来源:清美未来洞察团队。

行动建议

行动 01

先看现场

在页面设计里标出组件真正被调用的时刻,不要从改写每个页面从头画开始。

行动 02

收成一页

用组件清单代替更长的说明,只保留能支持「先确定可复用的组件,页面由组件拼成」的内容。

行动 03

按一个问题验收

新页面开始前,只问:这个页面的新部分,是否真的不能用已有组件。答不上来,就还不是决策。

行动 04

写明维护人

设计负责人。没有维护人的组件,会在冲突里被悄悄改掉。

清美未来洞察团队 · 2026 年 4 月 16 日与我们探讨这个话题返回洞察首页
相关

相关洞察

全部洞察
设计体系

设计体系要有维护人

体系发布之后里,如果体系维护仍是发布完就视为完成,结果往往是例外越积越多,没有人更新体系。

文章2026 年 4 月 4 日阅读约 7 分钟
设计体系

新增组件要有进入规则

体系使用中里,如果组件进入仍是谁需要谁就加一个组件,结果往往是组件变多,体系变乱。

文章2026 年 3 月 28 日阅读约 7 分钟