恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
图文解析-全面了解组件化设计原理和优势
0.0°
2020-12-24 原创文章 经验/观点 举报 1010 17 3 0

全面了解组件化设计思维,了解原子理论与组件化的关系,学习从0到1如何搭建组件库,帮助设计师完成从基础工作到高效工作的转变。

一.组件化是什么

组件化方式有点像我们搭建乐高,一个大的乐高是由无数个小的乐高组件拼成的,不同的乐高组件可以搭成不同的样式,同理,组件化在设计项目中的是通过对功能及视觉表达中元素的拆解,并基于可被复用的目的形成规范化的组件,这些组件可以通过不同的组合方式形成不同意义的界面。

二.原子化设计理论

组件化的提出并不是凭空捏造,它的提出是基于原子化理论提出的,所以我们要做组件化就必须充分了解原子化设计理论。我们都知道“原子组合构成分子,分子组合构成有机物”。把这个理论放在界面里就是:原子元素可通过不同的组合方式,组成新分子组件,继而重组构成新的界面。

1.原子——在自然世界中,原子是物质的基础。同理,在界面设计中原子也是界面的基础,是组成界面的最小颗粒度,比如下图展示的颜色,文字,线条,底框,图标,等等。

2.分子——不同的原子进行组合就变成了具有不同意义的分子。比如文字和色块组合变成了按钮,线框和图标和文字组合变成了某一个功能的入口。以界面设计中的表单为例,一个表单分子通常是由文字、图标和线条组成。当这些原子合并后,得到的是一个可以应用在任何信息展示或者功能入口的组合。比如下图展示的按钮,和表单都是界面中的分子部分。

3.组织——原子和分子的结合可以让我们构建出各种组织,其实也可以称之为模块。比如信息列表模块,内容卡片模块,瀑布流模块,等等,如果同样以表单为例,一个表格组件可以通过不同的数量组合成不同意义的模块,在界面中表达不同的场景和含义。

4.模板——模板是最初级的页面形态,我们各种组件套用在各个模板布局中,就可以查看基础的页面效果。而且在很多项目中比如设置页,我的,等等常用页面都是一样的布局和设计,所以选择一些常用的页面做成模板,在需要用到的时候直接使用模板进行搭建。可以快速的提高效率,也有利于相似页面的统一。

5.页面——当模板填充了文字,图片,颜色后,就变成了页面。将各种真实信息填充,在模版的基础上进行优化和完善就形成了页面最终的视觉方案,也就是所谓的最终视觉稿。

二.组件化的优势是什么?

目前各大公司几乎都有自己的组件库,甚至有自己的开源式组件后台。为什么这几年各大公司都投入大量时间和人力去做这件事情?归根结底是设计组件化这件事情值得去做,从公司层面来说,建立组件库可以迅速提高设计团队和开发团队的工作效率,视觉上保证所有项目的统一性,项目上便于管理和维护。从个人角度来说学习组件化的思维模式可以让设计师从繁琐的初级工作中解放出来,有更多时间去创造更高质量的设计作品,同时拥有更全局的视角。

1.工作思维方面阐述

比如我们可以看一下我们常规的设计工作模式。常规设计工作流程都是从需求到设计再到开发,设计师和开发永远都在不断做新的项目,但是这里其实很多项目的页面是功能差不多,或者视觉相似的。这样会导致一些相似页面和功能不断被重复设计,重复开发。极大的造成了资源浪费,同时整个公司的产品缺乏统一的视觉基础,和用户体验。

组件化设计思维就是将视觉元素和分散的项目进行组合整理,把所有元素拆分为可被复用的组件,然后通过标准的组合来完成不同的页面搭建。这样不仅避免了同一组场景出现多种视觉样式和交互模式。设计师只需通过添加新的组件和管理组件库进行工作,减少了设计成本,全面提升了工作效率效能。

2.项目角度阐述

其实从公司角度来说有组件化的好处也是非常明显的,它主要提现这三个方面:统一性、高效性和灵活性。

统一性——常规设计工作流程中如果有新设计师加入,或者有设计师离职,可能会造成新设计师和之前设计师做的页面设计细节不一致,或者颜色不一样,导致一个公司不同项目之间设计风格不一致,以及开发的复杂度。但是我们运用组件化模式去工作就可以简化工作模式,保证各个业务模块的规范和视觉统一,不论何时加入新人都可以通过组件库进行页面设计,完全保证视觉和交互的统一性,这样不仅有利于用户观感和体验的统一,也有利于对外界建立起自己公司的视觉印象。

高效性——通过组件库工作,设计师每一次只需要添加新组件,或者用已有的组件搭建页面,这样可以大大缩短设计和开发团队开发的时间,提升了开发新项目和迭代时间。

灵活性——通过组件的方式工作,设计师可以更加灵活的统一修改和维护页面,而且有团队成员离开和加入都不会对项目造成影响,大家在统一的规范组织下工作,我们只需要不断更新和维护组件库,就能管理好整个公司所有项目。

二.如何从0到1进行项目组件化

1.做组件化的时机

进行组件化并不适合在项目一开始起步的时候,因为有的项目可能会被砍掉。而且前期也不知道具体要做什么内容。所以做组件化最好的时期就是产品项目已经拥有成熟稳定的版本,或者公司已经有了多个项目的时候,我们就可以来做组件化。

组件化搭建可以分为六个步骤,分别为:制作规范,整理目录、设计组件、生成组件库、sketch 共享库和开发服务平台。

1.设计系统包含的内容由设计原则、设计语言和组件库,要制定组件库,我们首先需要一套设计规范。基于这套设计规范之下,我们才能做出一套视觉统一,风格一致的组件,并把它用于项目之中。下图展示的是某个产品文字和颜色的规范。

2.整理目录组件,从公司各个项目中筛选出满足复用性,可组件化的内容,将它们进行梳理并做分组,形成一个组件目录。

3.按照制定的规范模板,将每个组件的内容进行原子分解,并依次完成所有组件设计工作。最终形成一套完整的设计规范。以下以按钮以导航栏为例,将它进行拆解,并可进行组合。

4.设计完成所有组件,按照制定的规范模板,将每个组件的内容进行填充完成,形成一套完整的设计规范。

5.生成组件库,将设计规范里面的组件样式单独抽离出来,生成完整的组件库。

6.全员共享设计,将完成的组件库共享给小组成员,并共同运用。

7.建立开放服务平台,有前端开发资源支持的话,可以将组件进行代码封装。移动端或 PC 端都可以做组件开发平台。下图是蚂蚁公司的组件网站。

总结

以上是关于如何建立和理解组件化的一些介绍。如果要实现组件化工作,并不仅仅是组件库的建立,建立组件库只是组件化工作的起步,我们需要将组件化思维方式带入工作中,在项目中不断维护和更新组件库,这样才能建立起完善的组件化工模模式。



参考资料

https://www.uisdc.com/b-side-component-library

https://www.uisdc.com/component-based-development-guideline

https://www.uisdc.com/atomic-design-theory

https://www.uisdc.com/atomic-design-guidelines


Powered by Froala Editor

更新:2020-12-24

收藏

17人已收藏

锦瑟477

公 众 号:锦瑟477

  • 10

    作品

  • 6

    粉丝

  • 0

    关注

  • 小动画联系
  • 一个实例,让你快速上手HSB色彩模式
  • 民宿预订页面设计
  • 旅游景点介绍页
相关标签
经验ui

    猜你喜欢

      2020-12-24 原创文章 经验/观点 举报 1010 17 3 0

      图文解析-全面了解组件化设计原理和优势

      0.0°

      你确定要举报图文解析-全面了解组件化设计原理和优势

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年12月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      17
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录