详解|想做好组件设计,先做这六项自查!

作为 B 端的组件设计师,你做出的组件需要经得住其他设计师的考验。有同学就曾问过我这样的问题:

“我每次做完组件之后,发布给团队成员使用,都会被大家挑出这样或那样的问题,比如组件的状态和用法细节想得不全,得大家提醒过后才发现,再不断地修改。请问元尧姐,一般我们做完一个组件之后,怎样能够确保自己能够注意到更多的细节,而不会被其他使用者反复的挑出问题?”

本文就分析给你一些经验,来看看在组件做好后还需要做的六项自查内容——

一、组件的状态

我们所熟知的组件最常用的状态有默认、悬停、点击、禁用等等。但不同功能的组件也还会有其他的特殊状态。想要尽可能地找到这些特殊状态,你可以尝试:

  • 将做好的组件带入到具体的业务场景中进行检验;
  • 参考竞品中已有的相关案例做补充;
  • 参考知名设计系统中类似的功能组件做优化;
  • 模拟使用组件的完整流程;
  • 调动其他设计师为你提供特殊的使用场景和案例。

二、元素的组合

除了组件不同的交互状态,还要注意组件中元素在操作时的组合方式。通常来说每一个业务组件都会由几个基础组件和元素构成。举个例子,下图是我们在某业务中的气泡提示组件:

产品经理,产品经理网站

你需要检查和思考的内容包括:

  • 元素是否能够根据不同的场景,进行增、删、改、挪,如果能,哪些元素可以改,哪些元素不可改;
  • 元素之间的搭配是否存在互斥关系,如果有,则需要在组件层面做好互斥规范;
  • 新增元素在组件内的排版布局规范,需要具体给出。

三、栅格布局和自适应方案

通常情况下,每一个组件都需要考虑其栅格布局和自适应规则。如果你看过我们之前的文章:栅格布局中的断点应该如何使用?就会明白我们所做的组件的尺寸,其实是在产品页面在某一个特定断点下的组件尺寸。

为了保证产品页面在不同尺寸的设备端顺畅使用,我们需要在组件层面就做好栅格布局规范和自适应方案,也即给出几个关键断点下的组件变化形态或规范。

这个规范忌繁琐,一要考虑周全,二要让他人看得懂。比如下图就是我们对于卡片组件在 1600px 和 640px 断点下所做的约束中的部分内容:

产品经理,产品经理网站

四、无障碍规范

由于我们团队做的是国际化产品,所以对于无障碍设计的要求格外高。现在越来越多的产品也在布局出海战略,因此设计师对于组件无障碍设计的了解也是有必要的。你可以从以下几个方面来检验组件:

  • 组件中的每个元素和特征是否符合无障碍标准;
  • 组件中几个元素的组合方式是否符合无障碍标准;
  • 组件的交互形式和操作反馈是否符合无障碍标准;
  • 特殊情况下,增加了背景色之后的组件是否符合无障碍标准。

五、多语言规范

对于国际化产品来说,组件的多语言方案也很重要,其所搭建的产品页面可以更好地符合不同语言环境下的使用要求。你可以从以下几个方面来做检查:

  • 组件在变换成其他语言后,样式和布局上是否有变化;
  • 组件中的插画、图标、颜色等是否能够在其他国家和地区的文化环境中适用;
  • 组件是否遵循了产品本身所规定的不同语言的字体使用规范。

六、DesignToken 的使用

如果你希望组件能够做到统一的迭代和调配,那么绑定 Design Token 就很重要。绑定 Token 过程同时也是对组件中元素特征使用的正确性进行校验。

我曾经在Design Token 在设计系统中的意义与应用一文中介绍过 Token 的价值和意义。我们知道,每一个组件的背后其实都对应了一连串的Token。以提示条组件为例,组件的每一个色彩特征都能找到背后对应的 Token 值:

产品经理,产品经理网站

这样在未来我们想要更新组件的色彩特征时,就不需要一个个修改组件,而是通过更改 Token 所对应的色值,对于色彩做一次性全部更新,节省了大量的时间和操作成本。而想要达到这种效果,你就需要在设计组件时检查以下内容:

  • 组件所使用的字体、颜色等特征的用法是否正确;
  • 组件的每一个特征是否都跟现有的 Token相绑定;
  • 同类型组件是否绑定了同一个Token。

做组件本来就不是一件简单的事情。我们并不需要在第一时间就将组件所有的细节做到尽善尽美。你可以以任何一种方式做好组件的变更记录,便于日后的版本改进和追查。先尽可能保证组件的可用性,小步迭代,慢慢提升它的易用性和全面性。

作者

元尧,微信公众号:长弓小子。一线互联网大厂B端体验设计师,清华大学美术学院本硕连读。曾负责国内最大开源组件库Ant Design组件的设计和运营工作,目前负责国际业务线B端产品体验设计和组件库的搭建工作。

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部