素材8网-专注前端素材！ › 首页 ›经验分享› PS教程&设计文章 › 查看内容

5分钟改完100个界面？那是高手都在用这个方法做设计！

2019-5-28 15:18| 查看: 1485| 评论: 0|原作者: 设计丝路

摘要: 工作中大家都可能遇到过，设计完成后因为某些原因突然要批量修改某一个字段文字的大小，或者某个按钮的颜色。领导一声令下，苦逼的设计师就要累死累活地修改界面了，有时最后的结果可能还是改来改去改回第一版，不 ...

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

领导一声令下，苦逼的设计师就要累死累活地修改界面了，有时最后的结果可能还是改来改去改回第一版，不知道多少时间浪费在了没有意义的重复性工作中，此时要是运用了组件进行设计，就只要简单几步操作就可以瞬间修改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右侧会出现上图的功能区，

Pin to Edge：就是将元素与组上、下、左、右的距离进行固定。
Fix Size：对自身的宽高进行固定，防止拉伸变形。

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

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

组件库

1. 什么是组件库

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

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

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

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

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