扫一扫 扫一扫 扫一扫 扫一扫 今天这篇从组件的使用逻辑、文件管理、变体功能、发布和共享4个方面,帮你掌握组件功能的具体应用。 上期回顾: 从零基础到精通:B端设计规范和组件库搭建指南(二)今天来分享关于规范应用中软件功能的具体介绍,发现用图文的形式解释软件功能实在是太难做了。 阅读文章 >一、组件功能1. 组件的使用逻辑 有了前面响应式和自动布局的认识,我们就要进入到组件功能的具体应用上了。 组件的创建,首先要选中对应的设计元素,可以是单个图层,也可以是编组、自动布局层,然后点击生成组件按钮就可以创建出一个 “原始” 组件。 在即时设计中,这个组件叫 “引用组件”,从该组件复制、引用出来的副本叫做 “实例组件”。它们具有明确的从属关系。 在这个关系中,引用组件是完全可编辑修改的,只要修改它就可以统一修改关联的所有副本样式。 但由引用组件创建出来的副本,却不能任意编辑,我们不能修改它下级图层的尺寸、位置、顺序。但是,副本的编组大小、图层色彩、文字内容往往会有很多特殊的调节需求,所以目前主流的 UI 软件都支持了副本组件的尺寸修改、色彩编辑和文本内容编辑,让组件的使用更灵活。 以上就是组件使用的最基本逻辑,更进一步,组件作为一个编组,所包含的下级图层的逻辑都会被保留下来,例如样式设置、响应式设置、自动布局逻辑。如果一个编组原本就已经创建好了这些规则,那么当它被创建成组件,不管是引用组件还是副本,都会继承这些设置。 比如上一小节中的通知弹窗案例,设置好自动布局再创建成引用组件以后,生成的副本就可以灵活的进行调整和修改文本内容。 除了样式、响应、自动布局外,组件也可以包含组件。我们前面说过,按原子核的结构来讲,一个复杂的组件是由若干基础元素和控件组合而成。比如上方这个案例,就由多个模块、文本区域和按钮组成。 如果我们提前将按钮、图标等创建成引用组件,那么最终整个大的编组再创建成引用组件也是没有问题的,原来的组件格式并没有被抹消。 但有个细节值得注意,就是一个引用组件下方包含的组件只能是 —— 副本。如果刚才我们将按钮创建成引用组件,那么上级编组再创建的引用组件就会自动将这些按钮转换成副本,并在画布周围生成新的引用组件。 所以这个顺序也预示了,组件的嵌套是由下而上的,我们需要先创建低级的引用组件,再用它的副本逐步去组合更复杂的引用组件。这在后面的章节会近一步做出说明。 2. 组件的文件管理 创建引用组件,除了在画布中它的描边色彩不一样,图层中的图标改变了以外,还会出现在一个新的位置中 —— 组件管理面板。 任何创建的组件都会被生成到左侧的组件栏目面板中,只要从那里拖拽就可以置入当前画布中,方便我们调用和查看。 看起来虽然很简单,但是需要我们管理的细节却很多。首先就是这个列表是一个包含层级关系的树桩结构目录,是允许我们对组件的层级进行结构自定义的。 当我们创建一个引用组件的时候,如果它处于一个画板中,那么创建后它会在组件面板中保留该组件的默认文件路径: 页面 Page / 画板 Frame / 组件 Compoent 如果我们在不同页面和不同画板中创建引用组件,那么该面板的目录一定是特别混乱无序的。所以为了创建出符合正常分类使用习惯的组件目录,就要说动做出调整。 首先就是建议在项目文件中创建一个独立的页面 Page 用来存放引用组件,任何新增的引用组件我们都需要将它置入到该页面中。且不要将引用组件直接置入到画板中,这样它就不会生产包含画板的层级出来。 然后,我们就可以在文件命名中,使用正斜杠 Slash 符号 “/” 作为层级划分依据。比如下面的案例,包含相同上级结构的组件会被聚合到一个目录层级中:
这种命名结构带来的另一个好处,就是处于同一个目录层级下的组件,在属性面板中可以进行快速的切换。尤其是一些相近的组件要做替换不用再在树桩列表中重新找一遍,直接通过下拉菜单替换即可。 使用命名方式来梳理组件列表,完成有逻辑性、清晰地组件目录,可以极大地提升组件的利用率和效率。但命名必然不是一边创建组件一边凭感觉命名的,而是一开始就要在外部完成的,例如通过思维导图的方式制定出结构大纲,才能保证最终效果符合预期。 3. 组件中的变体功能 组件的应用中,除了不同组件的引用外,过去最让我们头痛的就是同一个组件的不同状态。比如一个简单的按钮,就包含非常多的类型,默认、悬浮、按压、点过、禁用、读取等等。 为了在项目中可以使用组件的不同状态,就需要我们在命名上下功夫,比如:
就是用前面提到的右侧下拉菜单,来完成同一组件的不同状态切换。理论上这么实现是没有问题的,但在实践过程中,不仅组件列表的数量要大大增加,且下拉菜单第一步只改状态显得非常局促…… 所以,从 Figma 开始推出了变体 Variants 功能,来更好的应对同一组件不同状态的高效应用。目前该功能已经在线上 UI 设计软件中普及。 在即时设计中,只要创建了引用组件,那么选中它后右侧就会有 “变体” 一栏,点击它就可以针对该组件创建出变体效果。 变体中原来的组件一分为二,并不是完全生成出一个全新的组件,而是在这个组件的概念下创建了一个新的状态出来,在组件列表面板中没有生成任何新的内容。 但是当我们再添加一个该组件的副本以后,就会发现它的右侧多了一个条目和下拉菜单,通过这个下拉菜单就可以切换刚才变体内的不同组件。 比如我们在变体内选中两个组件,在右侧变体的下拉菜单中可以点击修改命名,将它们分别改成 “默认” 和 “选中”,再修改对应的样式。然后再应用同一个副本,就可以看见下拉菜单的内容也替换成了“默认” 和 “选中”,通过选择不同的文字,就可以切换成对应的组件样式。 这个功能可以很方便的切换组件的不同状态,但如果它仅仅支持到这一步,那确实和使用命名编组的方法没有本质区别。真正让变体产生价值的,就在于同一组件的多属性、多状态支持。 还用按钮举例,比如一个按钮包含 3 种样式:纯文字、纯图标、图文件和,再包含 3 种状态:默认、悬浮、点击,还有浅色和深色模式…… 也就意味着,按钮包含样式、状态、色彩三种属性,每个属性中的值可以相互结合,那么总共就要设计出 18 个对应的按钮出来。 如果我们使用变体每个样式命名一个名字,那么下拉菜单有 12 个选项选起来也是很头疼的。所以,变体允许我们自定义组件属性和值,帮助我们更好的归类和选择组件样式。 所以,在变体面板中,我们可以在更多选项中选择添加分类就添加对应的属性内容,添加出 3 个分类后,通过双击修改它们的名字为 ”样式“、”状态“、”色彩“。 有了属性,变体下方的组件命名就会根本变更。如下图所示,默认一次显示属性值,双击则可以查看对应的属性名和值。 即变体的基本命名语法为 —— 属性1 = 对应类型, 属性2 = 对应类型, 属性3 = 对应类型。 我们就可以通过这种语法方式完成对上方按钮的统一命名,如:
然后,将这些组件统一添加到同一个变体下,之后创建的副本,就可以在右侧变体面板中进行多维度的选项操作了。 具体的变体设置,分类、值的设置,可以自己在软件中摸索,我就不演示了。这里再额外提一个功能,就是对值的设置上,还可以应用 “布尔” 的规则,即选项中只包含 “是” 或 ’否“。 如果我们在色彩的值中只使用 ”是,否“、”yes,no“、”开,关“ 等反义词,那么副本变体选项中就会启用开关按钮,来替代原本的下拉菜单,提升操作的效率。 变体的使用可以很好的减少组件面板中组件的数量,提升组件状态切换的效率。如果一个组件创建变态后被嵌套在另一个组件之下,那么这个复合组件也可以快速修改下级组件的变体类型。 虽然变体功能看起来非常强大,但它并不能适用所有场景,因为修改起来影响的要素过多。它更适用于基础的控件和组件类型。如果针对复杂组件,尤其是包含多层组件嵌套的场景,往往使用命名的方式会比使用变体更有效率,这就需要大家自己在项目中积累经验做判断。 4. 组件的发布和共享 通过前面的功能,就可以完成组件库的对应设置了,你可以在这个项目文件中调用这些组件完成项目。 但实际项目中,组件库的使用可不能被局限在一个项目文件里,我们往往会创建很多个项目文件,来设计不同的流程、版本、模块。于是,这些不同的文件都需要调用同一个样式和组件库。 所以,要让包含规范的文件能被其它文件引用,就需要我们在组件面板中,点击设计库按钮,在弹窗中点击 ”发布“,将它创建成一个设计资源库。这样,我们在别的文件中再次打开这个面板,就可以看到这个资源的开关,点击开关后,该文件就能调用里面的样式和组件了。 在项目中,需要先新建团队并邀请相关成员,然后再创建设计资源库,那么其他设计师才可以引用该资源来完成相关页面的设计。 至于每次原文件更新并落实到引用的其它文件这些细节操作,就需要大家自己去实践了。 结尾今天的分享就到这边结束,前面几篇就是软件相关功能的完整介绍了。只有完全搞明白这些功能的应用方法,我们才可以真正在项目中进行设计规范的落地和实践。 欢迎关注作者的微信公众号:「超人的电话亭」 手机扫一扫,阅读下载更方便˃ʍ˂ |
@版权声明
1、本网站文章、帖子等仅代表作者本人的观点,与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样,并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络,仅用作展示,如有侵权请联系站长!QQ: 13671295。