5分钟改完100个界面？那是高手都在用这个方法做设计！
扫一扫 
扫一扫 
扫一扫 
扫一扫
工作中大家都可能遇到过，设计完成后因为某些原因突然要批量修改某一个字段文字的大小，或者某个按钮的颜色。
领导一声令下，苦逼的设计师就要累死累活地修改界面了，有时最后的结果可能还是改来改去改回第一版，不知道多少时间浪费在了没有意义的重复性工作中，此时要是运用了组件进行设计，就只要简单几步操作就可以瞬间修改100多个界面。 组件介绍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右侧会出现上图的功能区，
这个很好理解，大家多试试就清楚啦，我们还是用之前的案例进行演示。 如上图所以将左侧icon固定上、左、宽、高，中间的文字剧中对齐固定上，右边的icon固定，这样就形成了自适应的组件。
组件库1. 什么是组件库 通过对界面元素进行拆解、归纳与重组，从而创建出了规范化的组件。在项目中逐层创建可复用的UI组件元素，对多个组件进行整合与相互调用，统一管理后，便形成了组件库。 Sketch官方团队是这样诠释组件库功能的： 一个Library（组件库）本质上就是一个普通的Sketch文件，其中的Symbols（组件）可以被其他Sketch文件调用。如果你编辑了Library当中的Symbols，那么调用了该Library的其他Sketch文件便会收到更新通知，你可以对变更进行预览、对比和确认，使这些Sketch文件所调用的Symbols自动更新至最新版本。 看起来有点不明白，那么我们可以这样来理解： 组件与组件库的关系，类似于乐高积木的搭建，多个颗粒度最小的元素可以组成一个颗粒较大的控件。基础组件如同积木中的最小颗粒，图标、文字、颜色等基础内容被归档在这里，组件库如同多个小积木互相组合而搭建起来的摩天大楼。设计师通过对多个组件进行不同的搭建，可以将其制作成各种更加复杂的组件库。
通过这种统一管理和调用的机制，能够提升界面元素的一致性，加强整体项目的可维护性。在单人项目中，组件库有助于消灭重复劳动，提升设计效率；多人项目中，组件库有助于提升UI设计方案的一致性。 2. 哪些大厂在使用组件库
总结
手机扫一扫，阅读下载更方便˃ʍ˂ |
@版权声明
1、本网站文章、帖子等仅代表作者本人的观点，与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样，并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络，仅用作展示，如有侵权请联系站长！QQ: 13671295。
最新评论
