1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

大厂出品!帮你快速学会组件化思维的设计流程

时间:2020-07-24   分类:交互设计    作者:网络   来源:网络整理   点击:156

编辑导读:组件化思维是设计师必备的技能之一,如何搭建组件库和设计规范更是设计师应该掌握的。本文作者从自身工作经验出发,对组件化思维的设计流程进行了分析总结,供大家一同参考和学习。

www.9fen.net

当我们进入一个成熟的设计团队,团队文档中都会有组件库和对应的设计规范。 www.9fen.net

组件库是当设计师遇到同一类组件设计场景时,可复用,避免造新的样式。这样既减少设计和开发的时间成本,同时增强产品的统一性,避免多样式给用户带来认知障碍。 内容采集来自9fen.net

设计规范是指导团队组员组件使用的规则和项目设计的指导原则。

copyright 9fen.net

无组件化的问题

设计团队在做项目的过程中,如果没有组件化时,那么会遇到维护成本高、效率低、统一性差、开发成本高、复用性差和难以协同等6大问题。

copyright 9fen.net

大厂出品!帮你快速学会组件化思维的设计流程

www.9fen.net

本文来自九分网络

维护成本高:需要所有设计师一起维护更新,有时候存在同步不及时的情况,导致设计师之间对最新组件的更新不同步,从而产生更大的维护成本。

copyright 9fen.net

效率低:设计师重复设计相同类型的组件,设计一系列组件状态,这一过程中会消耗设计师大量的时间。设计师工作效率低。

本文来自九分网络

统一性差:存在相同组件被重复造新样式的情况,导致统一性差,造成用户的认知成本。

内容采集来自9fen.net

开发成本高:开发需要写重复的样式,没法全局调用,耗费时间,开发成本高,安装包的体积大,甚至是会影响产品的性能。 本文来自九分网络

复用性差:组件之间无法复用,需要不停地制作新样式。

九分网络

难以协同:同事之间协同困难,每个设计师都有自己设计习惯。 copyright 9fen.net

组件化的好处

当团队在做项目时,有组件化的好处有:统一性、高效性和延续性。

copyright 9fen.net

大厂出品!帮你快速学会组件化思维的设计流程

内容采集来自9fen.net

www.9fen.net

统一性:

copyright 9fen.net

整个产品不同模块的业务按照统一规范使用,提升整个产品的视觉交互统一性,减少开发样式,提升开发效率。
避免设计师创造新的组件控件样式。 九分网络

统一交互设计规则,减少用户操作的迷惑感,提升产品的体验。 九分网络

高效性:

copyright 9fen.net

一套设计规范衍生两套组件库,分别为sketch ui组件库和auxre元件库。sketch ui组件面向对象为视觉设计师,auxre元件库面向对象为交互设计师和产品经理。设计师和产品经理通过拖动组件搭建界面,节约时间,提升工作效率。 九分网络

减少制作组件控件的时间,不需要对组件重新下定义,提升设计效率,可将更多时间放在流程体验和设计推动上。 www.9fen.net

延续性:

内容采集来自9fen.net

通过设计规范,在以后更新中可以连续迭代,避免断层。

www.9fen.net

团队即使有成员离开或者加入,通过设计规范和组件库可以快速的接手和进行正常工作 内容采集来自9fen.net

组件化支撑的设计理论

组件化所支撑设计理念是原子设计。 九分网络

原子设计是一种方法论,由原子、分子、组织、模板和页面共同协作以创造出更有效的用户界面系统的一种设计方法。

www.9fen.net

原子:设计系统的最小单位。原子包括调色板,分割线,字体,单个元素(即标题,段落,按钮等)这些元素有个特点就是最小元素不可再切割,如下图。

copyright 9fen.net

大厂出品!帮你快速学会组件化思维的设计流程 copyright 9fen.net

copyright 9fen.net

分子:通过多个原子组合而成,作为一个单元组成UI元素的一个组件,如下图。

copyright 9fen.net

大厂出品!帮你快速学会组件化思维的设计流程 九分网络

九分网络

组织:通过多个分子组合而成,我们可以构建更复杂但可重复的组织。组织是组成模板的主要组成部分,如下图。 本文来自九分网络

大厂出品!帮你快速学会组件化思维的设计流程 www.9fen.net

本文来自九分网络

模板:通过多个组织组合而成。是页面的基础架构。将以上元素进行排版,将原子,分子,组织进行排版成最终的模板,如下图。

copyright 9fen.net

大厂出品!帮你快速学会组件化思维的设计流程 内容采集来自9fen.net

copyright 9fen.net

页面:将实际内容(图片、文章等)套件在特定模板,每个页面由将实际内容(图片、文章等)模板修改而成,如下图。 内容采集来自9fen.net

标签: 优设 优设网 交互设计 优秀 组件化设计 组件化 组件化思维

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----