组件设计思路

编辑导语:设计系统对于B端产品组件的设计非常重要。本文作者分享了关于B端产品组件设计的细节，分析了大厂做设计系统的原因，并具体分析了其功能。有兴趣就来看看吧。

本文源于读者和粉丝的提问，以及我前段时间对蚂蚁设计的设计和运营经验的沉淀和总结。希望对你有帮助。

一、Q1 为什么大厂都要做设计系统

最近随着TDesign、ArcoDesign等设计系统的发布，经常有同学问我这样的问题:

为什么这些设计系统感觉

没多大区别

？大厂连这也要卷一卷？设计系统虽然要注重普适性，但是不是也要有自己的

品牌表达

呢？这些设计系统要怎么

比较、分析和学习

呢？

每个大厂都有自己的设计体系，你可能会觉得大厂太绕，简直就是神仙打架。但大厂的设计体系绝对不是为“量”而造的

。之所以要做，原因至少有这几点：

1.多业务。大厂商的业务和产品庞杂，可复用的业务能力和经验。

在长时间的积累下也会越来越多。

定居的设计系统将发挥强大的作用，支持和改善您的业务。有沉淀，不缺应用场景。

，也可以保证设计系统有较高的使用频率，促进其良性发展。

2.资源充足与小公司相比，大公司有更多的成本和资源。

可以用于做资产类的沉淀、研究和输出。大厂也理应在相应的领域多做探索和经验积累，回馈用户和市场的信任。

3.权威大厂的设计水平比较稳定。

，输出的质量更有保证，可以发声、传播的渠道和方式也更多，也有实力在行业内树立起可靠、标准的

规则话语权

。

从以上几点不难看出，设计系统对于大厂来说，是可以为业务赋能，降低成本，提高效率的。这其实是外界增强话语权的双赢。

的过程。

二、Q2 设计系统间的共性与个性

抛开代码层面，仅从设计师的使用场景来看，用过Ant Design和Arco Design的设计师大概都会觉得两者没什么区别——“这些设计系统好像都差不多。”

早些年，蚂蚁设计就在设计系统领域打下了坚实的框架基础。其他大厂借鉴很正常，没必要反复造轮子。

所以这些设计系统最基本的结构和框架层次都有很大的不同。

，看上去就好像都长一个样子。

但其实基于上一节提到的原因，各家都有自己的特色和看家本领，在应用和功能上并不完全一致。

。

一个设计师如何分析和借鉴大厂商的设计体系？下面给你介绍几种对比方法。

和

学习理念

，你可以尝试从以下方面入手：

1.功能场景分析设计系统的功能和应用场景，包括但不限于以下内容:

1)关注用户和场景

是面向设计师的，还是面向开发的，还是两者兼而有之？初级组件(基础组件)和高级组件(业务组件)的区别可以在这里阅读。使用哪些具体的业务场景和领域等等。2)关注C端或B端

支付宝设计系统以前有C端的移动设计系统(不过也在和AntD mini版整合)。

3)关注国内还是国外(国际化)

国内大厂商的设计系统很少考虑国际化的应用场景，只有少数提到一些国际化的设计方法和思路。这一点国外的设计系统已经考虑的比较全面了。

4)独特的功能应用或插件服务

每个设计体系在这一点上可谓百花齐放。比如AntD也可以和AntV的视力表联动；Arco Design生产配色编辑器、图标平台等一套功能。

2.体验感受取决于应用设计系统做出的产品。

带给用户的体验和感受，也要看设计师和开发在

使用

有系统的

过程

中的体验感受。包括但不限于以下内容：

整体设计基调:

包括设计系统的价值观和设计原则等，奠定整个设计系统的基调；

视觉特征:

包括全局样式、排版效果、动效特征等，会使用户产生最直观的视觉感受；

互动功能:

包括交互反馈和针对用户操作的细节处理，决定用户的使用过程是否流畅舒适；

系统品牌建设:

这点不仅仅是指设计系统中的组件的风格与品牌特性，也包括阅读和了解整个设计系统（网站、品牌运营与推广等内容）的体验。

3.施工方法这是指设计系统在施工过程中的思路和工作方法，包括但不限于以下内容:

触摸模式:

指的是设计师和开发使用设计系统的方式。大部分设计系统依赖官网，提供 Figma 或 Sketch 两种 Toolkits。也有一些独特和有时效性的方式，比如 AntD 提供的 Sketch 插件 Kitchen；

协作机制:

利用人脉资源，看看在这些设计系统中有没有你的熟人可以约着聊聊，更好地了解背后的工作和搭建方式；

更新频率:

小迭代和大迭代的更新速率和通知方式等。

因为设计系统的内容比较复杂，所以建议你在分析之前想好比较的目的和目标。

。

出于不同的目的，上述三个方面的比较侧重点会有所不同。比如你在升级现有组件库的品牌，就要对设计的整体基调和整体系统的品牌建设做更深入的研究和比较。

三、Q3 页面级别的组件，到底有什么用

这是我从一位读者朋友那里收到的一个问题:

“我看到一些公司正在建立页面组件库。

，将一些产品

的总体布局

整合起来直接用。我们这样做

真的能提高效率吗？

这样做是否正确呢？”

相信很多朋友都有类似的疑问。我曾经在文章里讲过解决业务组件的必要性:基础组件和高级组件的区别。

页面组件与前两者不同，功能更加集成。

，但应用的

场景更基本

。

首先我们需要明白，真正有效的组件是设计者和开发者共同构建的结果，其本质功能是降低成本，提高效率。

和达到

一致性

。

页面级组件的功能和意义如下:

1.框架稳定了页面级组件，可以让产品处于响应式布局。

和整体

结构

上保持统一。简单来说，就是对于任何新增的页面，都不会出现模块所占的面积比例不一致、行间距不一致或表单宽度不一致等问题。

2.交互简洁一致的页面框架不会在用户体验的层次上做太多的改变，交互会更简单明了，符合用户预期。

。也更有利于用户将注意力集中在任务操作上。

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

。

4.降低成本和提高效率

无论是设计者还是开发者，在搞定这样的组件后，都可以快速的从0-1建立起符合线。

质量

的产品页面。开发对于设计稿的

还原程度会更高。

，节省的时间可以用于调整细节和优化功能。

但并不是所有的页面都值得沉淀为页面组件。页面级组件能否真正发挥上述优势，取决于你的业务特点，主要表现在以下几个方面:

1)业务需求大，处于起步阶段。

对商业设计和开发有很大的需求

，且需求的类型相似，比如都是 B 端金融场景类或都是 G 端政务服务类。

尤其是项目处于0-1的起步阶段。

，对用户体验没有太多复杂需求，以实现基本功能为主要目标。

2)功能和布局特征明显。

业务中功能模块的特点和页面布局的框架足够明显，这类页面出现的频率很高。

，如表单页面、卡片选择页面。

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

商业更注重品牌。

一致性和

用户的想法

的养成。在交互体验和视觉风格上，多个产品线的产品希望保持一致，不需要做过多个性化的交互或视觉上的处理。

4)合理的工具和应用规范

对于页面级组件，选择一个易用的设计工具，制定一个有效的组件使用规范尤为重要。页面级组件在使用中必须进行修改和补充，设计工具和规范可以帮助设计人员在需要修改时快速进行局部修改和替换。

。

关于如何写设计说明书，可以看文章:如何写设计说明书？；对于如何有效的执行设计规范，可以阅读文章:如何让设计规范得到有效的执行？

对于符合以上条件的商家，可以尝试沉淀页面布局和框架。但如果没有上述特征而盲目沉淀业务，很可能给设计师带来额外的工作量和无效的积累，也可能成为制约设计师能力和创造力的桎梏。

可以说，摆平页框的行为本身没有正确的评价标准，关键是看它是否适合你的业务诉求，是否能匹配你的工作方式。

。

毕竟组件的本质功能是降低成本，提高效率，实现一致性，而不是设计组件。

作者:姚远；微信:长弓男孩。

本文由@姚远原创发布。每个人都是产品经理。未经许可，禁止复制。

题目来自Unsplash，基于CC0协议。