学会组件UI设计，5分钟快速修改100多个界面

Sponsor

作者：设计丝路
个人主页：https://www.zcool.com.cn/u/19099397

工作中大家都可能遇到过，设计完成后因为某些原因突然要批量修改某一个字段文字的大小，或者某个按钮的颜色。

领导一声令下，苦逼的设计师就要累死累活地修改界面了，有时最后的结果可能还是改来改去改回第一版，不知道多少时间浪费在了没有意义的重复性工作中，此时要是运用了组件进行设计，就只要简单几步操作就可以瞬间修改100多个界面。

文章目录：

• 一、组件的介绍
  • 什么叫组件？
  • 组件的命名
• 二、组件化设计的优势
• 三、组件化创建流程
• 四、sketch实操讲解（基础运用，组件复用，自适应组件）
  • 组件的基础使用方法
  • 组件的嵌套
• 五、组件库
  • 什么是组件库
  • 哪些大厂也在用组件库

一、组件介绍

1. 什么叫组件？

组件是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成的规范化模块。它就像组成完整框架的单元体（比如按钮、导航栏、tab栏等），具有标准规范和可复用场景的基本模块。

从字面上理解：

「组」：多种设计元素组合在一起。

「件」：由不同的个体元件组合而成。

它们作为一个独立个体存在，可进行自由组合和替换。（如下图）

我们日常看到的完整项目，就是由许多个组件进行搭建而成的。如下图虎课网及CCTalk、大众点评为例：

上面三张图中的元素中任何一块都可以称之为组件。

2. 组件的命名

组件命名规范化，我们在给组件命名时要遵循一定的命名规范，一个好的命名规范可以方便开发和设计师查找且使用相应的组件，如下图：

二、组件化设计的优势

1. 有助于风格统一

在一个项目页面里，设计师有时候会将文字或者图片不经意的左右移动1px-2px而不知，从而导致设计元素间距不一致。又或者是，大量重复的手动化导致细节的疏忽。组件化设计就能很好的避免这个问题。

在日常设计中，我们常常会将同一个模块的内容应用到不同地方，如果我们每次都重新设计，每一个设计都有差异，这样会让整个项目的样式都不同。如果我们应用到了组件，在不同页面中，我们就调用组件，这样每个页面就不会出现差异化，有利于项目的设计风格统一。

2. 便于团队协作（设计师与设计师之间）

在多个设计师同步进行一个项目的时候，规范化的组件设计能保持设计结果的统一性，避免出现多人多风格的现象。如两个设计师进行协作设计时，彼此按照各自的操作习惯处理圆角大小，一个设计的是4px，一个设计的是6px，；两人不同的设计习惯不仅加大了后期的沟通成本，而且需要花很多时间去修改，假如两人使用同一个组件，同类型问题就不会出现，后期修改组件也更加容易。

3. 提高开发者的工作效率（设计师与开发之间）

组件化设计不仅方便设计师更高效的制作页面，同时也能提高开发者的工作效率。既可准确定位又方便后期的维护和修改，在发现问题时能快速锁定错误发生的位置。同时，开发者之间也能通过组件进行协作与同步，减少多余的沟通成本，提高了工作效率。

4. 便于后期修改

假如设计师需要在原来的版本上将按钮颜色进行修改，如果组件未进行封装，可能要耗费很多时间进行一个个单独进行调色。组件化的优势就在于，几十个或者更多的组件，你只需要选择所需要修改的颜色即可，大大的缩短了调整优化的时间。

既然利用组件化设计有这么多好处，那么我们赶紧一起来看看如何构建组件吧！

三、组件化创建流程

在工作中，组件化创建流程分为6步，如下图：

1. 调研分析

分析相关行业竞品组件的视觉风格、情感化设计，如下图：

这里做竞品分析不是为了沿用各种产品设计里的「通用方案」，要解决的核心问题不同，产生的方案也会有差异，明确需求后得出组件设计。

2. 方案设计

考虑所有场景下对组件的展示有何变化。需要融入更多自己对于人性化、创新细节的思考。除了设计细节方面，各个交互状态尽可能考虑周全，如下图：

如相同组件在不同场景呈现的交互状态，相应的颜色、大小也会跟着发生变化。

3. 整理归类

整理和归类线上组件，讨论补充现有组件能否满足需求。并和产品沟通了解后续计划，将组件的所有的当前以及潜在的应用场景总结出来，评估具体组件优先级和迭代计划，如下图（图为蚂蚁金服组件）：

组件整理完毕后，明确优先级后录入到在线协作工具，将每一个组件建成一个独立任务，像日常需求那样，方便随时更新。

4. 场景走查

把自己变成产品的深度用户，将线上产品按照用户行为路线，完整体验走查一遍，尽可能不遗漏场景。

5. 问题分析

分析线上已有组件的体验现状如何，每类场景下需要解决的核心问题是什么，无法兼顾时如何取舍。

有时我们会发现想解决的问题无法都兼顾到，产生不了最理想的方案，这时就要对问题优先级有个明确判断，比如优先考虑效率提升，美观可以次要一点，这样方案设计阶段可以在几种解决方案中作出最合适的决策。

6. 效果验证

通过用户调研、数据分析的反馈结果，看看组件是否达到效果，如果不理想则进一步分析原因，迭代改进设计方案。

四、sketch实操讲解

1. 组件的基础使用方法

要是你掌握sketch组件的话，整体UI（100多页）中的导航背景换个颜色只是秒秒钟解决的事情。

创建组件

其实sketch组件的创建很简单的，只需要点一下就可以啦，那么创建完组件有什么用呢？

可以拖拽进行复制使用，或是直接在组件库里面调出

可以直接编辑里面的文字

还可以统一对组件调整背景颜色

双击nav进入组件库，对nav组件背景颜色进行调整，页面中运用到的nav组件其背景颜色会统一进行更改（再也不怕领导对UI界面整体调整颜色啦）。

2. 组件的嵌套

大家应该会有很多疑问什么是组件的嵌套呢？组件的嵌套就是组件套组件。

组件的一次嵌套

举个例子：之前创建了nav组件，然后可以在nav组件中将左边的icon再进行创建组件为子组件，这样就形成了嵌套关系（一次嵌套）。

icon颜色的替换

将组件库中的menu组件复制一个调整其颜色为红色（颜色随意，方便观察所以选为红色）命名为Red，然后返回page页面选中nav组件，你就会发现在symbol中menu选项里出现了Red组件，点击Red组件，那么icon将换颜色啦。

icon内容的替换

将组件库中的menu组件进行复制，将里面图形换为 < 形状并命名为Back，同样在page页面中选中nav组件你就会发现在symbol中的menu选项里有Back组件并将其选中，那么icon将换Back啦。

组件的二次嵌套

在上文一次嵌套中再进行嵌套，就是组件的二次嵌套，也就是组件套组件套组件。作用非常强大，上文介绍的一次嵌套只能改icon的内容或颜色。二次嵌套可以在改内容的同时也可以改颜色。

继续上文进行操作，nav组件（父），menu组件（子），back组件（子）。

在menu组件上画一个等大的矩形填充灰色进行创建组件命名为color/gray，复制一个color组件放在back组件上。

并对menu组件和back组件右键建立蒙版

对color组件进行多次复制分别填充不同颜色并进行命名。

返回page页面中选中nav组件，你将会发现icon的内容及颜色可以同时更改

自适应工具——Rasizing

接下来一起来了解一下自适应工具——Rasizing，当我们选中一个元素时（这个元素必须在一个组内或是在组件内）sketch右侧会出现上图的功能区，

Pin to Edge：就是将元素与组上、下、左、右的距离进行固定。

Fix Size：对自身的宽高进行固定，防止拉伸变形。

这个很好理解，大家多试试就清楚啦，我们还是用之前的案例进行演示。

如上图所以将左侧icon固定上、左、宽、高，中间的文字剧中对齐固定上，右边的icon固定，这样就形成了自适应的组件。

五、组件库

1. 什么是组件库

通过对界面元素进行拆解、归纳与重组，从而创建出了规范化的组件。在项目中逐层创建可复用的UI组件元素，对多个组件进行整合与相互调用，统一管理后，便形成了组件库。

Sketch官方团队是这样诠释组件库功能的：

一个Library（组件库）本质上就是一个普通的Sketch文件，其中的Symbols（组件）可以被其他Sketch文件调用。如果你编辑了Library当中的Symbols，那么调用了该Library的其他Sketch文件便会收到更新通知，你可以对变更进行预览、对比和确认，使这些Sketch文件所调用的Symbols自动更新至最新版本。

看起来有点不明白，那么我们可以这样来理解：

组件与组件库的关系，类似于乐高积木的搭建，多个颗粒度最小的元素可以组成一个颗粒较大的控件。基础组件如同积木中的最小颗粒，图标、文字、颜色等基础内容被归档在这里，组件库如同多个小积木互相组合而搭建起来的摩天大楼。设计师通过对多个组件进行不同的搭建，可以将其制作成各种更加复杂的组件库。

通过这种统一管理和调用的机制，能够提升界面元素的一致性，加强整体项目的可维护性。在单人项目中，组件库有助于消灭重复劳动，提升设计效率；多人项目中，组件库有助于提升UI设计方案的一致性。

2. 哪些大厂在使用组件库

Apple UI Design Resources：https://developer.apple.com/design/resources/
蚂蚁金服设计规范：https://ant.design/docs/react/introduce-cn
Mand Mobile 滴滴：https://didi.github.io/mand-mobile/#/zh-CN/home
WeUI 微信：https://github.com/weui/weui-design
Element 饿了么：https://element.eleme.cn/#/zh-CN

总结

尽可能将设计与开发中的元素独立化，以可被复用为目的，使其具备完整的局部功能，形成规范化的组件。

将组件多维度组合从而构建出整个设计方案的工作思路就是组件思维。

组件化设计会考虑很多设计的细节，在前期也会有较大的整理成本，在设计中，我们要善于总结组件，根据项目实际情况调整组件库，边制作边完善。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。