今天这篇从组件的使用逻辑、文件管理、变体功能、发布和共享4个方面,帮你掌握组件功能的具体应用。

上期回顾:

一、组件功能

1. 组件的使用逻辑

有了前面响应式和自动布局的认识,我们就要进入到组件功能的具体应用上了。

组件的创建,首先要选中对应的设计元素,可以是单个图层,也可以是编组、自动布局层,然后点击生成组件按钮就可以创建出一个 “原始” 组件。

在即时设计中,这个组件叫 “引用组件”,从该组件复制、引用出来的副本叫做 “实例组件”。它们具有明确的从属关系。

从零基础到精通:B端设计规范和组件库搭建指南(三)

在这个关系中,引用组件是完全可编辑修改的,只要修改它就可以统一修改关联的所有副本样式。

从零基础到精通:B端设计规范和组件库搭建指南(三)

但由引用组件创建出来的副本,却不能任意编辑,我们不能修改它下级图层的尺寸、位置、顺序。但是,副本的编组大小、图层色彩、文字内容往往会有很多特殊的调节需求,所以目前主流的 UI 软件都支持了副本组件的尺寸修改、色彩编辑和文本内容编辑,让组件的使用更灵活。

从零基础到精通:B端设计规范和组件库搭建指南(三)

从零基础到精通:B端设计规范和组件库搭建指南(三)

以上就是组件使用的最基本逻辑,更进一步,组件作为一个编组,所包含的下级图层的逻辑都会被保留下来,例如样式设置、响应式设置、自动布局逻辑。如果一个编组原本就已经创建好了这些规则,那么当它被创建成组件,不管是引用组件还是副本,都会继承这些设置。

比如上一小节中的通知弹窗案例,设置好自动布局再创建成引用组件以后,生成的副本就可以灵活的进行调整和修改文本内容。

从零基础到精通:B端设计规范和组件库搭建指南(三)

除了样式、响应、自动布局外,组件也可以包含组件。我们前面说过,按原子核的结构来讲,一个复杂的组件是由若干基础元素和控件组合而成。比如上方这个案例,就由多个模块、文本区域和按钮组成。

如果我们提前将按钮、图标等创建成引用组件,那么最终整个大的编组再创建成引用组件也是没有问题的,原来的组件格式并没有被抹消。

但有个细节值得注意,就是一个引用组件下方包含的组件只能是 —— 副本。如果刚才我们将按钮创建成引用组件,那么上级编组再创建的引用组件就会自动将这些按钮转换成副本,并在画布周围生成新的引用组件。

所以这个顺序也预示了,组件的嵌套是由下而上的,我们需要先创建低级的引用组件,再用它的副本逐步去组合更复杂的引用组件。这在后面的章节会近一步做出说明。

2. 组件的文件管理

创建引用组件,除了在画布中它的描边色彩不一样,图层中的图标改变了以外,还会出现在一个新的位置中 —— 组件管理面板。

任何创建的组件都会被生成到左侧的组件栏目面板中,只要从那里拖拽就可以置入当前画布中,方便我们调用和查看。

从零基础到精通:B端设计规范和组件库搭建指南(三)

看起来虽然很简单,但是需要我们管理的细节却很多。首先就是这个列表是一个包含层级关系的树桩结构目录,是允许我们对组件的层级进行结构自定义的。

当我们创建一个引用组件的时候,如果它处于一个画板中,那么创建后它会在组件面板中保留该组件的默认文件路径:

页面 Page / 画板 Frame / 组件 Compoent

如果我们在不同页面和不同画板中创建引用组件,那么该面板的目录一定是特别混乱无序的。所以为了创建出符合正常分类使用习惯的组件目录,就要说动做出调整。

首先就是建议在项目文件中创建一个独立的页面 Page 用来存放引用组件,任何新增的引用组件我们都需要将它置入到该页面中。且不要将引用组件直接置入到画板中,这样它就不会生产包含画板的层级出来。

从零基础到精通:B端设计规范和组件库搭建指南(三)

然后,我们就可以在文件命名中,使用正斜杠 Slash 符号 “/” 作为层级划分依据。比如下面的案例,包含相同上级结构的组件会被聚合到一个目录层级中:

  1. 数据录入/上传/亮色/拖拽上传
  2. 数据录入/上传/亮色/上传中
  3. 数据录入/上传/亮色/上传成功
  4. 数据录入/上传/亮色/上传失败
  5. 数据录入/上传/亮色/上传成功悬停
  6. 数据录入/上传/亮色/上传失败悬停

从零基础到精通:B端设计规范和组件库搭建指南(三)

这种命名结构带来的另一个好处,就是处于同一个目录层级下的组件,在属性面板中可以进行快速的切换。尤其是一些相近的组件要做替换不用再在树桩列表中重新找一遍,直接通过下拉菜单替换即可。

从零基础到精通:B端设计规范和组件库搭建指南(三)

使用命名方式来梳理组件列表,完成有逻辑性、清晰地组件目录,可以极大地提升组件的利用率和效率。但命名必然不是一边创建组件一边凭感觉命名的,而是一开始就要在外部完成的,例如通过思维导图的方式制定出结构大纲,才能保证最终效果符合预期。

从零基础到精通:B端设计规范和组件库搭建指南(三)

3. 组件中的变体功能

组件的应用中,除了不同组件的引用外,过去最让我们头痛的就是同一个组件的不同状态。比如一个简单的按钮,就包含非常多的类型,默认、悬浮、按压、点过、禁用、读取等等。

从零基础到精通:B端设计规范和组件库搭建指南(三)

为了在项目中可以使用组件的不同状态,就需要我们在命名上下功夫,比如:

  1. 控件 / 基础 / 按钮-大 / 默
  2. 控件 / 基础 / 按钮-大 / 悬浮
  3. 控件 / 基础 / 按钮-大 / 点击
  4. 控件 / 基础 / 按钮-大 / 禁用

就是用前面提到的右侧下拉菜单,来完成同一组件的不同状态切换。理论上这么实现是没有问题的,但在实践过程中,不仅组件列表的数量要大大增加,且下拉菜单第一步只改状态显得非常局促……

所以,从 Figma 开始推出了变体 Variants 功能,来更好的应对同一组件不同状态的高效应用。目前该功能已经在线上 UI 设计软件中普及。

在即时设计中,只要创建了引用组件,那么选中它后右侧就会有 “变体” 一栏,点击它就可以针对该组件创建出变体效果。

从零基础到精通:B端设计规范和组件库搭建指南(三)

变体中原来的组件一分为二,并不是完全生成出一个全新的组件,而是在这个组件的概念下创建了一个新的状态出来,在组件列表面板中没有生成任何新的内容。

但是当我们再添加一个该组件的副本以后,就会发现它的右侧多了一个条目和下拉菜单,通过这个下拉菜单就可以切换刚才变体内的不同组件。

比如我们在变体内选中两个组件,在右侧变体的下拉菜单中可以点击修改命名,将它们分别改成 “默认” 和 “选中”,再修改对应的样式。然后再应用同一个副本,就可以看见下拉菜单的内容也替换成了“默认” 和 “选中”,通过选择不同的文字,就可以切换成对应的组件样式。

从零基础到精通:B端设计规范和组件库搭建指南(三)

这个功能可以很方便的切换组件的不同状态,但如果它仅仅支持到这一步,那确实和使用命名编组的方法没有本质区别。真正让变体产生价值的,就在于同一组件的多属性、多状态支持。

还用按钮举例,比如一个按钮包含 3 种样式:纯文字、纯图标、图文件和,再包含 3 种状态:默认、悬浮、点击,还有浅色和深色模式……

也就意味着,按钮包含样式、状态、色彩三种属性,每个属性中的值可以相互结合,那么总共就要设计出 18 个对应的按钮出来。

从零基础到精通:B端设计规范和组件库搭建指南(三)

如果我们使用变体每个样式命名一个名字,那么下拉菜单有 12 个选项选起来也是很头疼的。所以,变体允许我们自定义组件属性和值,帮助我们更好的归类和选择组件样式。

所以,在变体面板中,我们可以在更多选项中选择添加分类就添加对应的属性内容,添加出 3 个分类后,通过双击修改它们的名字为 ”样式“、”状态“、”色彩“。

从零基础到精通:B端设计规范和组件库搭建指南(三)

有了属性,变体下方的组件命名就会根本变更。如下图所示,默认一次显示属性值,双击则可以查看对应的属性名和值。

从零基础到精通:B端设计规范和组件库搭建指南(三)

即变体的基本命名语法为 —— 属性1 = 对应类型, 属性2 = 对应类型, 属性3 = 对应类型。

我们就可以通过这种语法方式完成对上方按钮的统一命名,如:

  1. 样式 = 图标, 状态 = 默认, 色彩 = 浅色
  2. 样式 = 图标, 状态 = 悬浮, 色彩 = 浅色
  3. 样式 = 图标, 状态 = 点击, 色彩 = 浅色
  4. 样式 = 文字, 状态 = 默认, 色彩 = 浅色
  5. 样式 = 文字, 状态 = 悬浮, 色彩 = 浅色
  6. ……

然后,将这些组件统一添加到同一个变体下,之后创建的副本,就可以在右侧变体面板中进行多维度的选项操作了。

从零基础到精通:B端设计规范和组件库搭建指南(三)

具体的变体设置,分类、值的设置,可以自己在软件中摸索,我就不演示了。这里再额外提一个功能,就是对值的设置上,还可以应用 “布尔” 的规则,即选项中只包含 “是” 或 ’否“。

如果我们在色彩的值中只使用 ”是,否“、”yes,no“、”开,关“ 等反义词,那么副本变体选项中就会启用开关按钮,来替代原本的下拉菜单,提升操作的效率。

从零基础到精通:B端设计规范和组件库搭建指南(三)

变体的使用可以很好的减少组件面板中组件的数量,提升组件状态切换的效率。如果一个组件创建变态后被嵌套在另一个组件之下,那么这个复合组件也可以快速修改下级组件的变体类型。

虽然变体功能看起来非常强大,但它并不能适用所有场景,因为修改起来影响的要素过多。它更适用于基础的控件和组件类型。如果针对复杂组件,尤其是包含多层组件嵌套的场景,往往使用命名的方式会比使用变体更有效率,这就需要大家自己在项目中积累经验做判断。

4. 组件的发布和共享

通过前面的功能,就可以完成组件库的对应设置了,你可以在这个项目文件中调用这些组件完成项目。

但实际项目中,组件库的使用可不能被局限在一个项目文件里,我们往往会创建很多个项目文件,来设计不同的流程、版本、模块。于是,这些不同的文件都需要调用同一个样式和组件库。

从零基础到精通:B端设计规范和组件库搭建指南(三)

所以,要让包含规范的文件能被其它文件引用,就需要我们在组件面板中,点击设计库按钮,在弹窗中点击 ”发布“,将它创建成一个设计资源库。这样,我们在别的文件中再次打开这个面板,就可以看到这个资源的开关,点击开关后,该文件就能调用里面的样式和组件了。

从零基础到精通:B端设计规范和组件库搭建指南(三)

在项目中,需要先新建团队并邀请相关成员,然后再创建设计资源库,那么其他设计师才可以引用该资源来完成相关页面的设计。

至于每次原文件更新并落实到引用的其它文件这些细节操作,就需要大家自己去实践了。

结尾

今天的分享就到这边结束,前面几篇就是软件相关功能的完整介绍了。只有完全搞明白这些功能的应用方法,我们才可以真正在项目中进行设计规范的落地和实践。

欢迎关注作者的微信公众号:「超人的电话亭」

从零基础到精通:B端设计规范和组件库搭建指南(三)

点赞 40
收藏 33

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。