组件化设计：提升协作与迭代效率关键.pdfVIP

写面

Alitterwordsbefore

设计B端项目，我们需要思考的是如何运用组

件化的思维去后续的迭代和优化，以及如

何进行团队的协作。而团队化的组件规范，是

良好协作的基础。

01组件的前提

组件的前提

1.要搞明白面向的对象是谁

产品经理

B希望知道新的业务需求可以拿什么组

设计师A

件完成，组件是否能满足业务场景等

希望了解到组件库的使用规范、

适用场景、拓展方案C

开发工程师

开发更关心的是组件的接口、方法、

属性等

组件的前提

2.不要套用模板、每个细节都值得思考

在设计之前我们也会找一些参考，比如：

AntDesign、WeUI、MaterialUI等，目

前都是开源化组件非常好的设计语言，即

使这样，我们也要有自己的想法。不假思

索使用模板，日后必然会不断填坑。

组件的前提

3.事先应了解技术限制

虽说对于设计来说，我们不了解开发那边

的框架，但是在做组件的过程中与他

们及时沟通，了解他们的限制，这样可以

让我们少走一些弯路。不会因为“框架不支

持”将我们打回，也减少了后期的沟通成本

和提高工作效率。

02组件

组件

通用

布局导航数据录入数据展示反馈其他

16px16px

Button按钮

按钮类型加载中按钮

PrimaryDefaultDashedLinkloadingclickme

图标按钮按钮

上传上传上传

图标大小

LargeNormalSmal

按钮

1.1按钮位置：button整体居右时，主按钮都在界面的右侧，次要按钮在主按钮的左侧。Button整体居左时，

则相反。

按钮

1.2按钮文案：文字简短，6个字以内，以动词为主，表述清晰，例如保存、确定、取消、删除等，不能出现反问，

否定等词汇。

是的设置的班级点击此处确定取消查看详情

表达简短词个字以内，不不要⽤用模棱么可的字段来表述使⽤用动，说明操作后会发⽣生什什

按钮

1.3错误使用：不要将主按钮/次按钮/虚线按钮作为导航元素，如需跳转到新的页面，可使用按钮。

切换位置不接不要用主要