详解｜页面级别的组件，到底有什么用？

     关注「长弓小子」看更多设计干货！

Hi，我是元尧。欢迎长按下图二维码加我微信，带你进设计师交流群，与上万小伙伴一起交流成长！

「添加好友请备注：设计交流」

   全文共 1517 字，阅读需要 6 分钟

最近收到一个读者朋友的提问：

“我看到一些公司在搭建页面组件库，将一些产品通用的布局整合起来直接用。我们这样做真的可以提高效率吗？这样做是否正确呢？“

相信很多朋友也都有类似的疑问。我们曾经在文章：「基础组件」和「高级组件」的区别 一文中聊过沉淀业务组件的必要性。页面级组件与前两者又有所不同，它的功能更为整体，但应用的场景更为基础。

本文就来聊聊页面级组件的作用和使用方式，希望对你有帮助。

PART 1

页面级组件的作用

我们首先需要明白，真正有效的组件，都是设计师和开发共建的结果，其本质功能就是降本提效和达到一致性。页面级组件的作用和意义有以下几点：

1. 框架稳定

页面级组件可以使产品在响应式布局和整体框架上保持统一。简单来说，就是对于任何新增的页面，都不会出现模块所占的面积比例不一致、行间距不一致或表单宽度不一致等问题。

2. 交互简明

一致的页面框架，在用户体验的层面上不会做过多变化，交互更加简单明了，符合用户预期。也更有利于用户将注意力集中在任务操作上。 

3. 视觉统一

产品的视觉风格在框架一致的基础上，也更容易做到统一，在同产品中可以保持视觉风格的稳定；在不同产品线中也可以保持相对一致，更有利于传递公司 / 品牌心智。 

4. 降本提效

不论设计师还是开发，在沉淀此类组件之后，都可以快速从 0-1 搭建出符合及格线质量的产品页面。开发对于设计稿的还原度会更高，节省的时间可以用于调整细节和优化功能。

PART 2

页面级组件的应用环境

并不是所有的页面都值得被沉淀成页面组件。页面级组件是否真的能发挥出以上优势，取决于你的业务特征，主要看以下几个方面：

1. 业务需求量大且为初期

业务对于设计和开发的需求量很大，且需求的类型相似，比如都是 B 端金融场景类或都是 G 端政务服务类。尤其是项目处于 0-1 的初期阶段，对用户体验没有太多复杂需求，以实现基本功能为主要目标。

2. 功能和布局的特征明显

业务中的功能模块的特征和页面布局的框架足够明显，且该类型的页面出现的频率很高，如表单页面、卡片选择页面。

3. 业务的体验风格要求统一

业务比较重视品牌一致性和用户心智的养成。在交互体验和视觉风格上，多个产品线的产品希望保持一致，不需要做过多个性化的交互或视觉上的处理。

4. 合理的工具及应用规范

对于页面级组件来说，选择好用的设计工具，并制定有效的组件使用规范尤为重要。页面级组件在使用中一定会涉及到修改和补充，设计工具和规范可以帮助设计师在需要修改时快速做出局部修改和替换。

关于设计规范如何编写，可以阅读文章：如何编写设计规范？；关于设计规范如何有效的落地与执行，可以阅读文章：如何让设计规范被有效执行？

符合以上情况的业务，就可以尝试沉淀页面布局和框架。但如果业务不具备以上特点而盲目沉淀，很有可能会为设计师带来额外的工作量和无效的积累，也有可能会变成限制设计师能力和创造力的枷锁。

可以说，沉淀页面框架这个行为，本身没有正确与否的评价标准，关键是看它是否适合你的业务诉求、能否匹配你的工作方法。毕竟，组件的本质功能就是降本提效和达到一致性，不是为了设计组件而做组件。

---

如果你还有其他与组件或设计系统相关的问题，欢迎向我提问。识别二维码👇👇👇添加我的微信。添加好友请备注：设计交流。

其他有关组件和设计系统相关的精华内容，公众号后台回复：设计系统，阅读过后相信你会豁然开朗！👇👇👇

学海无涯，盼你同舟！😊

   经验｜B端组件设计资产应该如何命名？ 

- END -

欢迎长按图片👇👇👇加我微信

带你加入设计师社群

了解更多设计理念和设计方法

期待与你的交集！

「添加好友请备注：设计交流」