赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2.6K 0 0

工作中大都可遇到过,设计成后因为某些原因突然要量修改某一个字字的大小,或者某个按钮的颜色。

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

领导一声令,苦逼的设计师就要累死累地修改界面了,有时最后的结果可还是改来改改第一版,知道多时间浪在了没有意义的重复性工作中,此时要是了组件行设,就只简单几操作就可以瞬间修改100多界面。

组件介绍

1. 什么叫组件?

组件是过功能及视觉表元素拆解、归纳、组,并基于可被复用目,形成规范化模块。它像组成完框架单元体(比如按钮、导航栏、tab栏等),具有标准规范和可复用场景基本模块。

从字面理解:

  • 「组」:多设计元素组合在起。
  • 「件」:由不同的体元件组合。

它们作为个独立个体存在,可进自由组合和替换。(如下图)

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

我们日常看到完项目,是由许多个组件进搭而成。如下图虎课网及CCTalk、大众评为例:

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

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

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

2. 组件的命名

组件命名规范化,在给组件命名要遵循一定的命名规范,一个好的命名规范可以方便开发和计查找且使用相应的组件,如下图:

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

组件化设计的优势

1. 有助于格统一

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

在常设计中,我们常常将同一个模块的内容应用到不同地方,果我们每次重新设计,每一个设计有差异,样让整个项目的样式不同。果我们应用到组件,在不同页面中,我们就用组件,样每个页面就不出现差异化,有项目的设计风统一。

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

2. 于团队协作(设计师与设计师之间)

在多个设计师同步进行一个项目的时候,规范的组件设计能保持设结果的统一性,避免出多人多风格的象。如两设师行协作设时,彼此按照各自的操作习惯处理圆角小,一设的4px,一设的6px,;两人不同的设习惯不仅加了后的沟通本,且需花很多时间去修改,假如两人使用同一组件,同类型问题就不会出,后修改组件也加易。

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

3. 提高开发者工作效率(设计师与开发)

组件化设计不仅便设计师更高效制作页,时也能提高开发者工作效率。既可准确定位又便后期维护和改,在发现问题时能快速锁定误发生位。时,开发者也能过组件进协作与步,减少多余沟成本,提高了工作效率。

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

4. 便于后期修改

假如计需要在来的版本上将按钮颜色进行修改,如果组件未进行封装,可能要耗费多间进行一个个独进行调色。组件化的优势就在于,十个或者更多的组件,你只需要选择所需要修改的颜色即可,大大的缩短了调整优化的间。

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

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

既用组件化设计有么处,么我们赶紧一来看看何构建组件吧!

组件化创建流程

在工中,组件化创建流程分为6步,下图:

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

1. 调研分析

分析相行竞组件的视觉格、情感设计,如图:

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

这里做竞分析是为了各种产设计里的「通方案」,要解决的核心问题同,产生的方案会有差异,明确需求后得组件设计。

2. 方案设计

考虑有场景对组件的展示有何变。需要融入更多自己对于人性、创细节的思考。除了设计细节方面,各个交互状态尽可考虑周全,如图:

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

如相同组件在同场景呈现的交互状态,相应的颜色、大小会跟着发生变。

3. 整归类

整和归类线上组件,讨论补充现有组件否满足需求。并和产沟通了解后续计划,将组件的有的当前及潜在的应场景总结来,评估具体组件优先级和迭代计划,如图(图为蚂蚁金组件):

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

组件整毕后,明确优先级后录入到在线协作工具,将每一个组件建成一个独立任务,像日需求那样,方随时更。

4. 场景走查

把自己变成产的深户,将线上产按照户行为路线,整体验走查一遍,尽可遗漏场景。

5. 问题分析

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

有时我们现想决的问题无法兼顾到,产生不最理想的方案,时就要对问题优先级有个明确判断,比优先考虑效率提升,美观以次要一点,样方案设计阶段以在几种决方案中出最合适的决策。

6. 效果验证

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

sketch实操讲解

1. 组件的基础使用方法

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

创建组件

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

其实sketch组件的创建很简单的,只需点一下就可以啦,那么创建完组件什么用呢?

可以拖拽行复制使用,或直接组件库里调出

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

以直接编辑里面的文字

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

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

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

双击nav进入组件库,nav组件背景颜色进调,页运用到nav组件其背景颜色会统进更改(再也不怕领导UI界体调颜色啦)。

2. 组件的嵌套

大家应该会有很多疑问什么是组件嵌套呢?组件嵌套是组件套组件。

组件嵌套

举个例子:前创了nav组件,然后可以在nav组件将左边icon再进创组件为子组件,这样形成了嵌套关系(嵌套)。

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

icon颜色的替换

将组件库中的menu组件复制一个调整其颜色为红色(颜色随,方便观察所以选为红色)命名为Red,然后返回page页面选中nav组件,你就会发现在symbol中menu选项出现了Red组件,点击Red组件,那icon将换颜色。

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

icon内容的替换

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

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

组件的二次嵌套

在上一次嵌套中再进行嵌套,就是组件的二次嵌套,就是组件套组件套组件。作非强大,上介绍的一次嵌套只改icon的容或颜色。二次嵌套可在改容的同时可改颜色。

继续上文进行操,nav组件(父),menu组件(子),back组件(子)。

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

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

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

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

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

对color组件进行次复分别填充不同颜并进行命名。

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

返回page页面中选中nav组件,你将现icon的内容及颜以同时更改

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

自适应工具——Rasizing

接来一起来了解一自适应工具——Rasizing,当我们中一个元素时(这个元素必须在一个组或是在组件)sketch右侧会现上图的功区,

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

  • Pin to Edge:是将元素与组上、下、左、右距离进固定。
  • Fix Size:对自身的宽高行固,防止拉伸变形。

这个很好理解,大家多试试楚啦,我们是用前案例进演示。

如图所以将左侧icon固、左、宽、高,中间的文字剧中对齐固,右的icon固,这样就形了自应的组件。

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

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

组件库

1. 什么是组件库

通对界面元素进行拆、归纳与重组,从而创建出规范化的组件。在项目中逐创建复用的UI组件元素,对个组件进行整合与相互用,统一管理,便形成组件库。

Sketch官方队是这诠释组件库功能的:

个Library(组件库)本质上是个普Sketch文件,其Symbols(组件)可以被其他Sketch文件调用。如你编辑了LibrarySymbols,那么调用了该Library其他Sketch文件便会收到更新知,你可以变更进预览、比和确认,使这些Sketch文件所调用Symbols自动更新至最新版本。

看起点不明白,那么我们可以这样理解:

组件与组件库的系,类似于乐积木的搭建,多个颗粒最小的元素可组成一个颗粒较大的控件。基础组件如同积木中的最小颗粒,图标、字、颜色等基础容被归档在这里,组件库如同多个小积木互相组合而搭建起来的摩天大楼。设计师通过对多个组件进行同的搭建,可将制作成各种更复杂的组件库。

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

通过这种统一管和调的机制,够升界面元素的一致性,强整体项目的可维护性。在单人项目中,组件库有助于消灭重复劳,升设计效率;多人项目中,组件库有助于升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

总结

  • 尽可能将设计与开发元素独立化,以可被复用为目,使其具备完局部功能,形成规范化组件。
  • 将组件多维度组合从构建出整设方案的作思就组件思维。
  • 组件设计会考虑很多设计的细节,在前期会有较大的整成本,在设计中,我们要善于总结组件,根据项目实际情况调整组件库,边制作边善。
© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

最近团队尝试使用Figma构建一套适用团队的组件库与规范,发现Figma比Sketch的构建方式要更简单和更灵活,尤其是自动布局(Aut...
Figma
本文将深入细节从多角度去解析组件化的概念,帮助我们理解、构建组件库。 设计组件化的概念本身是从程序的开发模式中演变而...
交互组件库
单选框是非常常见的表单元素。它通常被用来从一组互斥的相关选项中选择一个单独的选项。当点击一个未选中的单选框时,它会被...
交互设计
编者按:本文网易设计师用「FishDesign企业级UI组件库」项目为例,通过在网易七鱼产品中的应用,来介绍一个企业级 UI 组件库...
B端设计
如何定义组件库 UI 设计组件库(UI KIT),直译过来就是用户界面成套元件。我们日常工作中所构建的组件库,一般是把所有界面...
sketch
海舟Ocean:我们在设计诸如CRM(客户关系管理)、OA(办公自动化)等面向B端用户的后台界面时,往往会被各种各样错综繁杂的组...
后台产品设计
产品视觉设计大致是由80%产品界面和20%运营设计组成。80%的产品设计,属于理性,有规律的部分;而20%运营设计,属于感性,表...
实战案例
「他们喜欢戴着镣铐跳舞,而且是其他诗人的镣铐。」 They love to dance in these fetters, and even when wearing the same...
交互设计