进阶必读!可能是最全面的组件化开发与设计指南 - 优设网 - UISDC

进阶必读!可能是最全面的组件化开发与设计指南

2017/03/22 12389评论区

@唐寅小 :组件化其实是一个很早就有的概念了,并不多稀奇,也不难理解。尤其是对于编程开发人员而言,对此应该更是熟悉。而今天这篇文章,我作为一个UI设计师来谈谈我对于组件化开发与设计的一些想法,从而帮助设计师们了解程序员是如何进行组件化开发的,怎样的设计才能更好的方便程序员快速落地实现,你又应该提供哪些设计文件,协助程序员组件化开发。难道只是效果图和切图吗?肯定不是。

什么是组件化?

组件化在我的理解来看,有点类似于搭积木,如上图所示,每一块积木就是一个组件,是既独立又统一的。因为独立,所以它可以自由组合,也可以随意替换和删除其中一个组件,并不会影响整体。但是它又统一于整体,比如上面的积木都是六边形的,你不可能拿一个三角形放进去啊。而组件化就是说,一个整体项目就是由无数个独立的组件搭建起来的。组件化的工作方式信奉独立、完整、自由组合。目标就是尽可能把设计与开发中的元素独立化,使它具备完整的局部功能,通过自由组合来构成整个产品。

设计师为什么也要有组件化思维呢?

我先来说说,组件化对设计师有什么好处?

1. 符合产品功能逻辑;作为一个UI设计师,设计最重要的一点就是要符合产品功能逻辑,绝不是所谓的“好看”。而组件化的设计理念恰恰是最能帮助设计符合产品功能逻辑的。

从实践验证来讲,特定类型的信息,就有特定的最优展现方式和交互方式,这叫做设计模式。设计模式就应该提取出来作为组件。比如要从多个维度快速检索和对比大量数据,没有什么能比表格形式效率更高。想象一下,下面这个界面的表格数据,做成卡片式堆叠在一起,划一张换一条。或者像淘宝商品列表那样,一行4列平铺开。那还对比个P啊,用户都要摔鼠标了。

2. 有助于保持交互一致性;比如说,在一个项目里,选择日期应该是统一的交互方式,在整个产品中就应该只有一种存在形式。所以时间选择器就是一个组件,一个可以复用的组件。如果你没有组件化思维,很可能出现好几个不同的时间选择器,一会儿是滚轮拨盘,一会儿是日历,一会儿又是下拉列表,这样的设计绝对是不能上线的。当然,该统一的地方还有很多,比如:错误提示的形式,进度条的交互方式,导航栏和按钮的样式,表单,下拉菜单等等。

3. 保持视觉风格的统一;这部分主要是视觉方面的考虑,更多样式上的差异,不同的样式会给产品带来不同的调性。

就拿下图按钮来说。圆头造型表现出一种柔和亲切的特质,同时有利于将注意力聚焦到其中内容上。而直角则展现出一种棱角分明的硬朗,边界更加清晰。想一想三星手机和锤子手机的外观造型,两种截然不同的感觉。为了保持产品视觉风格统一,设计师应该找到最合适的方案,并处处保持统一,不可以太随心所欲。比如说,在类似的界面中,有的按钮是方的,有的按钮却是圆的,这怎么能行呢?甚至于同一产品中,不同界面的下拉菜单样式都不一样,这也绝对是不行的。

4. 便于多设计师协作;组件化设计是大型设计项目的必要条件。

比如两位设计师协作,一个在设计注册界面,一个在设计修改密码界面,或者在设计某个问卷调查的弹窗。这其中都有表单,两个人设计出来不一样怎么办?一个边框颜色深一点,一个边框颜色浅一点?表单的点击反馈效果一个是黑色表示触发输入,一个是主色表示触发输入?其实没理由不同,应该保持一致。口头约定太麻烦,而且难以保证执行到位,组件化就是最好的解决方式。

5. 便于修改设计;设计总是需要修改优化的,有些改动牵扯全局,动静非常大。

比如管理后台的界面,左侧的主导航是全站通用的。某天决定要给它换一套浅色的设计,难道每个源文件都改一遍吗?如果产品逻辑复杂,源文件有上百个呢?你准备一个个的改到什么时候呢?3天?5天?甚至几个礼拜,时间就会都花在这种无意义的重复劳动上了。但是如果你一开始就依照组件化设计,那么对于设计的修改就会是非常方便的,你只需要将主导航这一个组件改为浅色即可。改这么一个组件的颜色,你甚至一分钟都不用就搞定了。剩下的时间,可以用来干嘛呢?用来构思思考设计样式,交互方式,优化你的设计,这才是设计师应该做的。

开发人员为什么也要有组件化思维呢?

下面讲讲组件化对开发的意义。其实开发同学从中受益会比设计师更多。因为组件化开发绝对可以大大提高工作效率,减少加班时间的。不加班了,开发同学们,你们终于可以打游戏泡妞出去浪啦。

1. 降低耦合度;降低耦合度,相信这是大型项目都在追求的。

举个例子,如果要把页面的body区域加宽。内部许多元素因为浮动、固定宽度、百分比宽度、文字行数减少等等,布局会乱套。就像下图里这样,这是因为内部模块的样式对页面父级元素存在依赖和继承。

可能有人会觉得并不存在依赖关系,但其实固定宽度本身就是一种依赖关系。假如说页面主体部分宽度1000px,左侧边栏200px,右侧800px。没错,这是按设计图来做的。那这个800px宽是怎么得出的?正是因为页面主体宽度1000px,才找了个合适的左右比例,设计成这样的。所以无可避免,从设计这个环节开始就产生了依赖关系。像这种情况,我宁可在模块外面多套一层容器,模块本身的宽度写成100%,外面那层容器属于框架布局,具体宽度写在它上面。虽然DOM树变复杂了,但内外的布局逻辑被分离了。

2. 减少冗余;页面中所有<table>标签,都可以使用同一套css,不必每个页面单独定义。

比方说要新增一个带表格的界面,开发同学按照设计的效果图一行行写页面。但是如果在某个已有界面中就存在表格?或许当时是另一位开发同学做的。相比重新写一遍,把代码要过来直接用更方便一点吧?如果表格样式之后又要改呢,是不是两个地方都得改。如此一来,用到表格的页面越多,就越容易漏改。而且静态资源服务器上存了太多份关于表格的样式,其中内容明明是一样,这就会导致代码越来越冗余。

3. 优化性能;优化性能刚好可以接着上一条说。那么多份表格的样式,客户端每打开一个新的表格页面,就得加载一次。占用带宽,浪费了缓存资源。虽然一两个的影响几乎感受不到,但这种情况一多,就会对用户体验产生明显的影响。慢,是用户体验的头等大忌,没有之一。应该是按需加载资源,一个简单的登录页面,没有必要加载整站的css与js代码,拖慢速度。

4. 便于多开发协作;这和设计师协作的道理相同。如果两个开发同学都在制作带有下拉菜单的页面,这部分工作只要交给其中一人就行了。TA做好之后封装成组件,另一位开发在自己的页面中加载就行了。

5. 便于查错;这便于查错,是耦合性降低的一个副产品。它可以大大加快错误排查的速度。如果页面上出现问题,可以找出每个可能有关的组件,逐个拔除,直到恢复正常。这样就能迅速锁定错误发生的位置。同时组件内也可以形成完整的自测单元,也方便了测试工作。

如下图,突然出现某个弹窗样式错乱。如果采用组件化开发,只要检查弹窗这个组件的代码,如果是这部分代码出现问题了,只需要解决这部分代码就行了,如果弹窗组件没有问题,则说明不是弹窗代码导致的bug,不需要解决弹窗,而是去排查别处的代码,这样就能大大缩小排查范围。

6. 便于修改;假如设计师每个页面改同一个地方要花一个小时,那开发做同样的事情至少要花一个上午,至少!封装成组件,可以把这个时间缩短到10分钟。毕竟不用去改几十个页面的HTML、CSS和JS,改一个组件就可以了。比方说,来了一个新需求,要求所有页面的标题字号都要加大,开发同学如果不按照组件化开发,那就要一个个页面的改了。我想这就是别的开发可以出去浪,而你却要不停地加班的原因之一吧。

设计师要懂的页面布局原理

讲了组件化的意义,本来顺理成章应该讲组件化的具体做法。但在这之前其实有必要插入这一块内容,帮助没有前端基础的设计师了解,开发是如何把页面搭建起来的。大家可以先有一个粗略的想象,就像是重力朝上的俄罗斯方块。页面元素都是从下往上这样一行一行搭出来的,不过这个玩家有强迫症,他一定会从左上角、右上角或者中间位置搭起。当然……搭满一行并不会消除。 ¯\_( ツ )_/¯

布局原理:

1. 行内元素与块元素;这网页布局中有两个概念:行内元素和块元素。它们是非此即彼的关系,网页里只要是你能看见的东西,一定不是行内元素就是块元素。

这两种元素的表现略有不同。图中虚线框代表一行,但实际上这是不可见的,只是我为了说明布局方式画出来的,其中的绿色矩形才是页面上真实可见的元素。

如上图,我们看第一行,这里有3个行内元素。内容长度不同,它们表现出来的宽度就不同,这是一种会随内容变化而改变尺寸的布局单元,而且它们总是从左到右横向排列,只要一行里排得下。再看第二行,这里只有1个块元素。你看它内容很短,就三个字,却占了一整行。没错,块元素就是这么任性。就像自习室一卷厕纸占一排座位那样。最后看第三行。浅绿色是一个块元素,深绿色是它内部的元素。所以元素之间是可以嵌套的,无论多么复杂的页面,都是这样一层层嵌套形成的。但是要注意,块元素内可以嵌入行内元素和块元素,行内元素只能嵌入行内元素。请看其中的深绿色部分,第二行是一个块元素,设定了宽度,并且居中排列。其实前两个行内元素的右边明明有空间,而且右边还放得下一个行内元素。但即使如此,它还是要占一整行。当然,块元素这个独占一行的特性有例外,我们接下来就会说。

2. 浮动;刚才讲的是常规的布局方式,我们现在讲两种打破常规的方式。

如下图所示,浮动有两个方向,向左和向右。被加上了浮动属性的元素,表现都会变得类似于行内元素,根据内容变化尺寸。第一行的左右浮动元素都可以是块元素,但它们却排在了一行里。第二行和第三行是一组对比,表现了非浮动元素与浮动元素混合排列时的规则。第二行的文字是一个常规布局的元素,可以看到左右浮动的元素各就各位,常规布局的文字很灵活地填充空隙,就像报纸排版一样。而第三行里的情况,文字段落也加上左浮动属性,并且限定宽度,它就会跟在左浮动元素的右侧。当然,如果文字不限定宽度,它还是会独占一行,因为文字足够多。这和块元素独占一行的道理不同,它仍然带有浮动属性,本应该跟在左浮动元素的右边。只是因为自身宽度太大,一行挤不下了。

3. 绝对定位;另一种打破常规的布局方式是绝对定位。

这就毫无章法可言了,像狗皮膏药一样想贴哪里贴哪里,还可以像下图里这样层叠着贴。总之,绝对定位的元素不会占据常规布局和浮动布局中的任何空间,而是直接挡住它背后的内容。不过既然可以层叠,就有谁在前谁在后的问题。这和设计工具里的图层是一样的,当然有办法可以控制。

一个页面是如何搭建出来的?

为了让大家看得更清楚,我做了一个动画演示,大家感受一下页面搭建的大致原理:动画演示—在线播放—优酷网

布局原理的宏观概念

现在要讲的是两个更宏观的概念:流式布局与弹性布局。我们前面有提到常规布局,那个概念与这两者不能相提并论。其实这两种布局都是基于前面提到的原理实现的,只是区别在于对待自适应问题上采取了不同的策略。

1. 流式布局;

看上图中的App store界面,在iPhone 7和7 plus上略有不同。虽然布局形式类似,但7上面只能看到一张banner,而7 plus则能看到左右两边banner露出来。而且App展示区域里,7上能看到3列多一点,7 plus则能看到4列多。屏幕大则视野更大,能显示更多内容,这是流式布局的思想。

2. 弹性布局;

弹性布局则是另一种思路。根据屏幕尺寸变化,让界面上所有元素等比例放大缩小。所以无论在什么尺寸的设备上,看到的画面都是一样的,信息容量相同。只是到了大屏幕上,会变得像老年手机那样硕大无比。

这两种自适应方式都有各自的用途,不能说哪种一定更好。但我们在设计时可以考虑一下这个问题,什么类型的设计适合哪种布局。

设计组件化

补完了基础知识,现在就可以讲组件化设计的具体方法了,设计师如何运用组件化思维?

一、提取产品中的共用部分;

首先要提取产品中的共用部分。我列举了一些,这些都是极为常见的组件。

1. 导航

2. 按钮

3. 表单

4. Tab

5. 翻页

这个翻页其实是有点问题的,少了个当前选中状态,不知道现在是第几页啊。所以说组件的提取要考虑周全,所有可能的状态都要设计。

6. 表格

7. 进度条

8. 弹窗、列表、错误提示……等等,还有很多。这些都是我前面说的经过实践验证的设计模式,是久经考验的展现与交互方式,完全有理由统一设计,提取成组件。

二、制作成通用组件

找到了这些共用元素,下面到具体制作环节,关于工具的使用我不会讲太多,也没有必要讲,主要是思路与观念。我用Sketch录了3段操作演示,有利于帮助大家理解。

下面这段视频主要是讲,我是如何在实际设计过程中进行组件化的操作。

1. Sketch Symbol;我们把这个列表项提取为一个组件,现在看其实没什么变化。我们先复制几个出来,让它成为一个列表。然后我们到组件页面去,发现刚才提取的组件就在这里。我们尝试把圆形的头像改成方形,嗯,去掉边框。回到列表界面来,发现整个列表的头像都变成方形了,但我们只在组件里做了一次修改,就达到这样的效果。这也就是前面所说的,组件化便于修改设计。

Sketch symbol—在线播放—优酷网

2. Sketch Overrides;下面这段视频是讲如何把组件的样式与内容分离开。

还是刚才的组件,不过我把头像右边代表两行文字的矩形换成了真正的文字,我要把它当作通讯录界面来设计。现在我们回到列表界面,发现列表里每一项都变成了姓名+电话号码。然后我们在每一项的Overrides选项中输入数据,因为这是在组件之外输入的信息,它只会影响那一条内容。用这种方式把每个列表项都填上数据。现在我们再进到组件里,做点样式修改,比如把电话号码颜色改成灰色。回到列表,所有电话号码都变灰了,内容保持不变。这样就实现了样式与内容的分离,降低耦合度对设计同样适用。

Sketch Overrides—在线播放—优酷网

3. Sketch Symbol 的嵌套;下面这段视频是讲组件的嵌套。

组件小的可以只有一个按钮,大的可以是一个交互极其复杂的多步筛选项。所以复杂组件内再嵌入简单组件,这是很常见的事情。

我给刚才的组件又增加了一个按钮,我们把这个按钮也提取成组件,可以看到它出现在了列表项组件的右侧。回到列表界面,每个列表项都有了按钮,我们选中所有列表项,把按钮文字成呼叫。然后右边还有另一个界面,这里也需要一个按钮。我们在此插入之前提取的按钮组件,把按钮文字改为订阅。如此一来,按钮组件就既存在于界面中,也存在于其他组件中。这时候如果想对按钮的样式做点调整,我们再进入按钮组件,改成灰底白字。回到界面中,发现各处按钮都一起变了。

组件化的思想不限于设计工具,虽然Sketch很先进,很利于实现这种工作方式。但PS也有相应的功能,能够以另一种形式实现组件化。所以可以说设计从来都不会被工具所局限。

Sketch Symbol嵌套—在线播放—优酷网

一个组件就是一个完整的产品

设计组件不是把它搬到另一个地方,然后各处集中引用这么简单。开头我们就说过,组件化思维的精髓是独立、完整、自由组合。刚才我们做到了独立,同时也需要做到完整。

把每个组件当做一个独立产品来设计,考虑空状态、极端情况、尺寸变化,尽可能灵活适应各使用场景。

就拿下图按钮来说,我们必须考虑它的各种状态、极端情况、尺寸变化,还有所有附带的交互效果。这才能称之为一个独立完整的组件,满足其他组件对一个按钮的所有要求。除了最标准的默认、按下、禁用状态,还要考虑按钮的尺寸变化,发生服务器交互时每个状态的样式,还有特殊按钮内容的展示效果。

思考组件相互间的组合方式

组件内部完整了,接下来就是自由组合了。但并不是真的那么自由,我们要确定一些常用的组合方式。

1. 统一组件与组件、组件与散件之间的组合方式;

如下图,像这样一个后台管理界面,页面的整体背景色,主菜单与右侧导航的距离,输入框之间的距离……这些也都要有章法,而不是各个页面这些间距都是随心所欲的。

形成规范文档

以上这些工作,沉淀下来,就成了设计规范。这套文档对项目中的其他设计师是莫大的帮助,也是开发人员重要的资料,组件化的规范文档是可以协助开发组件化开发的。

组件化设计是一切的源头,如果我们设计部分的组件化工作做得不到位,自己定的规范自己不遵守,开发同学的组件化工作是无法进行的。

开发组件化

讲完设计组件化,现在我们来讲一下开发的组件化,主要讲的是前端如何运用组件化思维。

1. 按组件,而不是页面来开发;最重要的一点,是需要转变一个观念。我们应该以组件为单位,而不是以页面为单位进行开发。

2. 轻度组件化;

组件化开发有两种不同程度的做法。先讲讲轻度组件化。它的主要思想是同一个组件使用相同的html结构和特定的class名,并且用同一段css代码定义样式,用同一个js函数来定义交互。

如下图,我们来看看下面这个登录框,下面3个代码块是它大致的代码结构。输入框在其他页面肯定也会用到,那么只需要与左边框里的html结构保持一致。各处页面代码中引用同一个css和js文件,至少做到了在一处集中管理样式与交互。但如果组件的html结构发生变化,修改的工作量还是会比较大。

3. 重度组件化;重度组件化的方式可以解决上述说的,如果组件的html结构发生变化,修改的工作量会比较大这个问题。不过这就不仅仅停留在思想层面,对项目的代码结构都有一定的要求。每个组件的html结构、css样式、js交互都独立封装管理,定义好框架和加载方式,内容在加载时从外部填充。

在重度组件化的项目中,每个组件都做到了彻底的独立封装。比如下图,这个页头组件,它的代码存在于独立的目录下,这个目录包含了它的html结构、css样式、js交互、资源图、甚至自测试模块。那么各处页面中要加载页头组件,往往只是一条语句,将数据传入这个已存在的结构中就行了。组件如果要与外部进行数据传递,也应该以接口形式对外开放。组件内部是个黑盒,外部只需要了解数据的输入与返回,不必关心组件内的工作原理。

组件化思维管理开发项目

用这种思路管理项目,也会改变开发的协作方式。大家不再是按页面分工,而是按组件来分工。如下图,页头和tab由一人负责,列表和页脚由另一个人负责,弱化了相互间的依赖关系。直到将组件拼装成页面,才需要处理组件之间相互作用的部分,但这时候工作量已经被大大消化了。

我们可以来感受一下组件化管理的项目,应该是个什么样的结构。

一个应用由大量页面组成,一个页面的绝大部分都是组件。组件内部已经定义好了完整的结构,可以独立运行。纵观整个项目,可能就会是这样一个结构。组件的代码占了大多数,能共用的都尽量共用,各个页面的特殊代码则会变得非常轻。各功能模块的划分清晰明确,一目了然。

重在维护

虽然前面说了这么多好处,但组件化不是一件轻松的工作。在项目初期的准备工作会增加一定工作量,但随着时间推移会发挥出巨大的优势。

想象一下,像windows操作系统这种航母级的开发项目,如果不用组件化的方式来管理,它有可能成为现实吗?

我们设计师要做的,就是要有专人负责维护设计组件库。组件发生了任何设计修改,或者加入了新组件,都要及时反映在设计规范上。

开发同学也需要指定人员来负责维护具体的组件。他们要做的,我就不好多说了,毕竟我不是专业的。

但可以举个例子,像Google Ara项目的这款模块化手机一样:摄像头模块只负责拍照,处理照片得交给运算模块;而GPS模块只负责定位相关功能,导航语音播报则需要发声模块来处理。任何模块的拆换,对其余模块的运转毫无影响。

及时沟通反馈

双方的维护工作固然重要,更重要的是沟通交换信息。有任何变化都要及时告知对方,组件的高度同步,是这种工作方式得以长期延续的关键。

组件化思维

其实组件化思维不仅仅适用于UI设计中,它可以贯穿到所有的设计中,甚至于生活中。

如下图,元旦刷红包html5页面,用的也是组件化思维,把单个元素独立出来,当做一个整体设计,所有的独立组件设计完成后,再像搭积木一样,将其拼接为一个完整的页面。

组件化思维不仅可用于设计中,还有生活中。它的精髓其实就这么3点:独立、完整、自由组合。而我们生活中见到的绝大多数工业产品,就是这么造出来的,比如汽车工业,比如富士康的iPhone生产线。甚至部队的编制也是遵循这个原理。

最后,我想给大家看一段1分钟的视频。这是宜家厨房的宣传片,宜家是一家高度推崇组件化的公司。不仅仅是用在生产流程中,也把组件化思维从幕后推向了台前,成为了自己品牌的一种语言。我们来直观感受一下,让组件化的思想在你脑海中留下一个具象的画面:宜家厨房—在线播放—优酷网

最后,谢谢看完文章的各位,希望能对各位有所帮助。

部分资料引自:前端工程——基础篇

相关阅读:《这篇8000字长文,能帮你学会组件化设计与开发的思维方式》

欢迎关注作者的微信公众号:

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/component-based-development-guideline

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里