当我们进入一个成熟的设计团队,团队文档中都会有组件库和对应的设计规范
2020-07-20
当我们进入一个成熟的设计团队,团队文档中都会有组件库和对应的设计规范。
组件库是当设计师遇到同一类组件设计场景时,可复用,避免造新的样式。这样既减少设计和开发的时间成本,同时增强产品的统一性,避免多样式给用户带来认知障碍。
设计规范是指导团队组员组件使用的规则和项目设计的指导原则。
本篇文章内容目录如下:
-
无组件化的问题
-
组件化的好处
-
组件化支撑的设计理念
-
如何搭建组件化
-
如何使用组件化
01 无组件化的问题
设计团队在做项目的过程中,如果没有组件化时,那么会遇到维护成本高、效率低、统一性差、开发成本高、复用性差和难以协同等6大问题。
-
维护成本高:需要所有设计师一起维护更新,有时候存在同步不及时的情况,导致设计师之间对最新组件的更新不同步,从而产生更大的维护成本。
-
效率低:设计师重复设计相同类型的组件,设计一系列组件状态,这一过程中会消耗设计师大量的时间。设计师工作效率低。
-
统一性差:存在相同组件被重复造新样式的情况,导致统一性差,造成用户的认知成本。
-
开发成本高:开发需要写重复的样式,没法全局调用,耗费时间,开发成本高,安装包的体积大,甚至是会影响产品的性能。
-
复用性差:组件之间无法复用,需要不停地制作新样式。
-
难以协同:同事之间协同困难,每个设计师都有自己设计习惯。
02 组件化的好处
当团队在做项目时,有组件化的好处有:统一性、高效性和延续性。
统一性:
-
整个产品不同模块的业务按照统一规范使用,提升整个产品的视觉交互统一性,减少开发样式,提升开发效率。
-
避免设计师创造新的组件控件样式。
-
统一交互设计规则,减少用户操作的迷惑感,提升产品的体验。
高效性:
-
一套设计规范衍生两套组件库,分别为sketch ui组件库和auxre元件库。sketch ui组件面向对象为视觉设计师,auxre元件库面向对象为交互设计师和产品经理。设计师和产品经理通过拖动组件搭建界面,节约时间,提升工作效率。