工作中大都可遇到过,设计成后因为某些原因突然要量修改某一个字字的大小,或者某个按钮的颜色。
领导一声令,苦逼的设计师就要累死累地修改界面了,有时最后的结果可还是改来改改第一版,知道多时间浪在了没有意义的重复性工作中,此时要是了组件行设,就只简单几操作就可以瞬间修改100多界面。
1. 什么叫组件?
组件是过功能及视觉表元素拆解、归纳、组,并基于可被复用目,形成规范化模块。它像组成完框架单元体(比如按钮、导航栏、tab栏等),具有标准规范和可复用场景基本模块。
从字面理解:
- 「组」:多设计元素组合在起。
- 「件」:由不同的体元件组合。
它们作为个独立个体存在,可进自由组合和替换。(如下图)
我们日常看到完项目,是由许多个组件进搭而成。如下图虎课网及CCTalk、大众评为例:
上面三张图中的素中任何一块都可以称之为组件。
2. 组件的命名
组件命名规范化,在给组件命名要遵循一定的命名规范,一个好的命名规范可以方便开发和计查找且使用相应的组件,如下图:
1. 有助于格统一
在一个项目页面里,设计师有时候会将字或者图片经意的左右移1px-2px而知,从而导致设计元素间距一致。又或者是,大量重复的手导致细节的疏忽。组件设计就很好的避免这个问题。
在常设计中,我们常常将同一个模块的内容应用到不同地方,果我们每次重新设计,每一个设计有差异,样让整个项目的样式不同。果我们应用到组件,在不同页面中,我们就用组件,样每个页面就不出现差异化,有项目的设计风统一。
2. 于团队协作(设计师与设计师之间)
在多个设计师同步进行一个项目的时候,规范的组件设计能保持设结果的统一性,避免出多人多风格的象。如两设师行协作设时,彼此按照各自的操作习惯处理圆角小,一设的4px,一设的6px,;两人不同的设习惯不仅加了后的沟通本,且需花很多时间去修改,假如两人使用同一组件,同类型问题就不会出,后修改组件也加易。
3. 提高开发者工作效率(设计师与开发)
组件化设计不仅便设计师更高效制作页,时也能提高开发者工作效率。既可准确定位又便后期维护和改,在发现问题时能快速锁定误发生位。时,开发者也能过组件进协作与步,减少多余沟成本,提高了工作效率。
4. 便于后期修改
假如计需要在来的版本上将按钮颜色进行修改,如果组件未进行封装,可能要耗费多间进行一个个独进行调色。组件化的优势就在于,十个或者更多的组件,你只需要选择所需要修改的颜色即可,大大的缩短了调整优化的间。
既用组件化设计有么处,么我们赶紧一来看看何构建组件吧!
在工中,组件化创建流程分为6步,下图:
1. 调研分析
分析相行竞组件的视觉格、情感设计,如图:
这里做竞分析是为了各种产设计里的「通方案」,要解决的核心问题同,产生的方案会有差异,明确需求后得组件设计。
2. 方案设计
考虑有场景对组件的展示有何变。需要融入更多自己对于人性、创细节的思考。除了设计细节方面,各个交互状态尽可考虑周全,如图:
如相同组件在同场景呈现的交互状态,相应的颜色、大小会跟着发生变。
3. 整归类
整和归类线上组件,讨论补充现有组件否满足需求。并和产沟通了解后续计划,将组件的有的当前及潜在的应场景总结来,评估具体组件优先级和迭代计划,如图(图为蚂蚁金组件):
组件整毕后,明确优先级后录入到在线协作工具,将每一个组件建成一个独立任务,像日需求那样,方随时更。
4. 场景走查
把自己变成产的深户,将线上产按照户行为路线,整体验走查一遍,尽可遗漏场景。
5. 问题分析
分析线上已有组件的体验现状如何,每类场景需要解决的核心问题是么,无法兼顾时如何取舍。
有时我们现想决的问题无法兼顾到,产生不最理想的方案,时就要对问题优先级有个明确判断,比优先考虑效率提升,美观以次要一点,样方案设计阶段以在几种决方案中出最合适的决策。
6. 效果验证
通用户研、数据分析的反馈结果,看看组件是否达到效果,果不理想则进一步分析原因,迭代改进设计方案。
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文件调用。如你编辑了LibrarySymbols,那么调用了该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
- 尽可能将设计与开发元素独立化,以可被复用为目,使其具备完局部功能,形成规范化组件。
- 将组件多维度组合从构建出整设方案的作思就组件思维。
- 组件设计会考虑很多设计的细节,在前期会有较大的整成本,在设计中,我们要善于总结组件,根据项目实际情况调整组件库,边制作边善。