网页规划 » 视觉规划 » 学会组件UI规划,5分钟快速修正100多个界面

学会组件UI规划,5分钟快速修正100多个界面

发表于: 视觉规划. 谈论
赞助商链接

作者:规划丝路
个人主页: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

总结

尽或许将规划与开发中的元素独立化,以可被复用为意图,使其具有完好的部分功用,构成标准化的组件。

将组件多维度组合然后构建出整个规划计划的工作思路便是组件思想。

组件化规划会考虑许多规划的细节,在前期也会有较大的收拾本钱,在规划中,咱们要长于总结组件,依据项目实际情况调整组件库,边制造边完善。

引荐:检查最受欢迎的 301 个规划网站 → http://hao.dashijieylc3je.com
沟通:结交更多有才调的规划师?请参加UI规划QQ群,与50000名规划师沟通规划。
赞助商链接
赞助商链接
规划达人微信沟通社区:shejidaren888
喜爱这篇文章吗?欢迎共享到你的微博、QQ群,并重视咱们的微博,谢谢支撑。
版权:除非注明,本站文章均为原创文章,转载请联络咱们授权,不然制止转载。