UI设计师必看:详解最全面的组件化开发与设计指南

组件化着实是一个很早就有的观念了，并不多特别，也不难领略。尤其是对付编程开拓职员而言，对此应该更是认识。目前天这篇文章，我作为一个UI计划师来谈谈我对付组件化开拓与计划的一些设法，从而辅佐计划师们相识措施员是怎样举办组件化开拓的，奈何的计划才气更好的利便措施员快速落地实现，你又应该提供哪些计划文件，帮忙措施员组件化开拓。莫非只是结果图和切图吗？必定不是。

什么是组件化？

组件化在我的领略来看，有点相同于搭积木，如上图所示，每一块积木就是一个组件，是既独立又同一的。由于独立，以是它可以自由组合，也可以随意替代和删除个中一个组件，并不会影响整体。可是它又同一于整体，好比上面的积木都是六边形的，你不行能拿一个三角形放进去啊。而组件化就是说，一个整体项目就是由无数个独立的组件搭建起来的。组件化的事变方法信仰独立、完备、自由组合。方针就是尽也许把计划与开拓中的元素独立化，使它具备完备的局部成果，通过自由组合来组成整个产物。

计划师为什么也要有组件化思想呢？

我先来说说，组件化对计划师有什么甜头？

1. 切合产物成果逻辑；作为一个UI计划师，计划最重要的一点就是要切合产物成果逻辑，毫不是所谓的“悦目”。而组件化的计划理念恰好是最能辅佐计划切合产物成果逻辑的。

从实践验证来讲，特定范例的信息，就有特定的最优揭示方法和交互方法，这叫做计划模式。计划模式就应该提取出来作为组件。好比要从多个维度快速检索和比拟大量数据，没有什么能比表格情势服从更高。想象一下，下面这个界面的表格数据，做成卡片式堆叠在一路，齐整张换一条。可能像淘宝商品列表那样，一行4列平放开。那还比拟个P啊，用户都要摔鼠标了。

2. 有助于保持交互同等性；好比说，在一个项目里，选择日期应该是同一的交互方法，在整个产物中就应该只有一种存在情势。以是时刻选择器就是一个组件，一个可以复用的组件。假如你没有组件化思想，很也许呈现好几个差异的时刻选择器，一会儿是滚轮拨盘，一会儿是日历，一会儿又是下拉列表，这样的计划绝对是不能上线的。虽然，该同一的处所尚有许多，好比：错误提醒的情势，进度条的交互方法，导航栏和按钮的样式，表单，下拉菜单等等。

3. 保持视觉气魄威风凛凛的同一；这部门首要是视觉方面的思量，更多样式上的差别，差异的样式会给产物带来差异的调性。

就拿下图按钮来说。圆头造型示意出一种柔和密切的特质，同时有利于将留意力聚焦到个中内容上。而直角则揭示出一种棱角理解的硬朗，界线越发清楚。想一想三星手机和锤子手机的外面造型，两种截然差异的感受。为了保持产物视觉气魄威风凛凛同一，计划师应该找到最吻合的方案，并随处保持同一，不行以太为所欲为。好比说，在相同的界面中，有的按钮是方的，有的按钮却是圆的，这怎么能行呢？乃至于统一产物中，差异界面的下拉菜单样式都纷歧样，这也绝对是不可的。

4. 便于多计划师协作；组件化计划是大型计划项目标须要前提。

好比两位计划师协作，一个在计划注册界面，一个在计划修改暗码界面，可能在计划某个问卷观测的弹窗。这个中都有表单，两小我私人计划出来纷歧样怎么办？一个边框颜色深一点，一个边框颜色浅一点？表单的点击反馈结果一个是玄色暗示触发输入，一个是主色暗示触发输入？着实没来由差异，应该保持同等。口头约定太贫困，并且难以担保执行到位，组件化就是最好的办理方法。

5. 便于修改计划；计划老是必要修改优化的，有些窜改扳连全局，新闻很是大。

好比打点靠山的界面，左侧的主导航是全站通用的。某天抉摘要给它换一套淡色的计划，莫非每个源文件都改一遍吗？假如产物逻辑伟大，源文件有上百个呢？你筹备一个个的改到什么时辰呢？3天？5天？乃至几个星期，时刻就会都花在这种有时义的一再劳动上了。可是假如你一开始就依照组件化计划，那么对付计划的修改就会长短常利便的，你只必要将主导航这一个组件改为淡色即可。改这么一个组件的颜色，你乃至一分钟都不消就搞定了。剩下的时刻，可以用来干嘛呢？用来构想思索计划样式，交互方法，优化你的计划，这才是计划师应该做的。

开拓职员为什么也要有组件化思想呢？

下面讲讲组件化对开拓的意义。着实开拓同窗从中受益会比计划师更多。由于组件化开拓绝对可以大大进步事变服从，镌汰加班时刻的。不加班了，开拓同窗们，你们终于可以打游戏泡妞出去浪啦。

1. 低落耦合度；低落耦合度，信托这是大型项目都在追求的。

举个例子，假如要把页面的body地区加宽。内部很多元素由于浮动、牢靠宽度、百分比宽度、笔墨行数镌汰等等，机关会乱套。就像下图里这样，这是由于内部模块的样式对页面父级元素存在依靠和担任。

也许有人会认为并不存在依靠相关，但着实牢靠宽度自己就是一种依靠相关。若是说页面主体部门宽度1000px，左侧边栏200px，右侧800px。没错，这是按计划图来做的。那这个800px宽是怎么得出的？正是由于页面主体宽度1000px，才找了个吻合的阁下比例，计划成这样的。以是无可停止，从计划这个环节开始就发生了依靠相关。像这种环境，我情愿在模块表面多套一层容器，模块自己的宽度写成100%，表面那层容器属于框架机关，详细宽度写在它上面。固然DOM树变伟大了，但表里的机关逻辑被疏散了。

2. 镌汰冗余；页面中全部<table>标签，都可以行使统一套css，不必每个页面单独界说。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!