组件设计原则大全，设计组件总结

作为B端的组件设计师，如果你的组件设计团队的成员使用也会发现很多缺点，而且不承认你的组件，我们该怎么办？ 作者总结了一些经验，分享了组件完成后需要做的六项自我调查内容。 请协助。

作为B端的组件设计师，你做的组件必须经得起其他设计师的考验。 有个同学问过我这样的问题：

“每次我完成组件并将其分发给团队成员使用时，都会在被大家提醒后被发现，例如组件的状态和使用细节没有得到充分考虑，并不断进行修改。 元尧，一般来说我们在完成一个零件后，如何才能在自己不被别人反复捡起问题的情况下注意到更多的细节？ ”

本文分析了一些经验，并看看组件完成后需要做的六项自我调查内容——

另一方面，组件状态众所周知的组件最常用的状态有默认、悬停、点击、禁用等。 但是，不同功能的组件也有其他特殊的状态。 要尽可能地找到这些特殊状态，请尝试以下操作：

将创建的组件带入具体业务场景进行检查； 通过参考竞争产品现有相关案例的补充，参考知名设计系统的相似功能组件进行优化； 模拟使用组件的完整过程； 动员其他设计师提供特殊的使用场景和案例。

二、组件的组合除了组件的不同交互状态外，还注意组件内组件在操作时的组合方式。 每个业务组件通常由几个基本组件和元素组成。 举个例子，下图是我们在某个业务中的气泡队列组件。

需要检查和思考的内容如下。

是否可以根据场景添加、删除、修改或移动元素？ 如果可能的话，哪些元素可以更改，哪些元素不能更改？ 元素之间的组合是否存在互斥，如果存在，则必须在组件级别创建互斥规范。必须具体指定组件中新元素的布局规范。

三、网格布局和自适应方案通常每个组件都需要考虑网格布局和自适应规则。 如果你读过上一篇文章，应该如何使用网格布局断点？ 您可以看到，我们创建的组件的大小实际上是产品页面上特定断点下的组件的大小。

为了在不同大小的设备端顺利使用产品页，需要在组件级别创建网格布局规范和自适应方案，即在一些关键断点处组件的变化形式和规范。

这个规范并不麻烦，必须考虑周全，二是要让别人理解。 下图显示了卡组件在1600px和640px断点处的一些约束。

四、无障碍规范因为我们团队在做国际化产品，对无障碍设计的要求格外高。 由于目前许多产品都在布局出海策略，设计师还需要了解组件的无障碍设计。 可以从以下方面验证组件：

组件中的各元件和特征是否符合无障碍标准； 部件中某些元素的组合方式是否符合无障碍标准； 的交互形式和操作反馈是否符合无障碍标准； 在特殊情况下，添加背景色的组件是否符合无障碍标准。

五、多语言规范对于国际化产品来说，组件的多语言方案也很重要，制作的产品页面能更好地满足不同语言环境下的使用要求。 可以从以下几点进行检查。

组件转换为其他语言后，样式和布局是否有变化； 组件的插图、图标、颜色等是否可以在其他国家和地区的文化环境中应用？组件是否符合产品本身规定的语言字体使用标准？

六.如果您希望DesignToken的使用组件执行统一的重复和供应，则绑定DesignToken很重要。 绑定Token的过程也是验证是否正确使用了组件中元素的特性的过程。

在设计系统中Design Token的意义和应用的文章中介绍过Token的价值和意义。 我们知道，所有组件的背后实际上都有一系列Token与之对应。 例如，提示组件的每个颜色特征都可以找到背后的相应Token值。

如果以后要更新组件的颜色特性，Token可以通过更改相应的颜色值(而不是逐个更改组件)一次更新所有颜色，从而大大节省时间和运营成本。 要获得此效果，在设计组件时必须检查以下内容：

组件中使用的字体、颜色等特征的用法是否正确； 的每个特性是否与现有的Token相关联； 同一Token是否绑定到同一类型的组件。 制作组件本来就不是一件容易的事情。 我们不需要在第一时间完善组件的细节。 这两种方法都可以创建组件更改记录，以便于改进和跟踪将来的版本。 首先，尽可能保证组件的可用性，重复小步骤，逐渐提高易用性和全面性。

专栏作家

元尧，微信公众号：长弓小子，人人都是产品经理专栏作家。 一线互联网巨头乙方体验设计师清华大学美术学院本硕连读。 负责国内最大的开源组件库Ant Design组件的设计和运营，目前负责国际业务线B端的产品体验设计和组件库的构建。

这篇文章每个人都是产品经理，未经许可禁止转载。

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

本文的观点只有代表本人，每个人在产品经理平台上只提供信息存储空间服务。

• 上一篇：说文解字图解经典，说文解字全集连载
• 下一篇：昆明空港经济区沙井社区试点进度，两部门联合发文建设社区试点