本文讲解整个开发过程，UI究竟如何统一化，从而提高效率与质量～
先来看看我们的原有开发流程
一般开发流程
可以看到，其实每个步骤都是割裂开来的，那么就会存在几个问题
1.原型问题
原型稿与设计图简单举例
2.设计问题
设计是自由的
3.开发问题
开发项目主要问题点
4.项目问题
这些问题在项目开发中是源源不断的，而且每个人都会很痛苦，所以我们必须要针对现有流程来做一个统一优化了
组件平台
既然要统一，那么我们各个部门的意识必须要统一才行，比如一个轮播图控件，那么这就是个组件，必须沉淀下来，问题来了，用什么来沉淀这些东西呢，用wiki？腾讯文档？这些我感觉都满足不了，因为要多端，可视化，还要支持增删改查等操作，所以组件平台就诞生了，那么简单介绍下这个组件平台，它的主要作用就是方便大家可视化查阅，另外同步所有部门对组件的操作（增删改），业界也有一些组件平台，如蚂蚁、element、有赞的等等，但都不太满足公司需求，第一个是扩展性差，你想自定义些什么时你无法操作，第二是很少有多端，由于本公司自己具备有开发能力，所以最后还是决定自己开发，原型由本人设计，这里贴一张图作为参考
控件原型图
图标原型图
组件的统一流程
经商讨UI新增/修改/删除一个组件 -> 各部门收到邮件安排开发 -> 开发完毕后在组件平台填入对应信息 -> 所有部门操作完毕后，新增完毕 -> 投入使用
原型-axure插件
这个插件主要是为了解决原型与UI差别太大的问题，有时候看原型评估的时间和看UI评估的时间简直天差地别，而且有组件插件也能适当提高产品设计原型的效率，属于后期阶段，贴一张图做参考
axure插件图
设计-sketch插件
前面讲到设计的问题，有一个是太过于自由，那么sektch的组件插件，就可以稍微规范UI的设计范围，插件的内容必须与组件平台的内容一致，做到同步可用，这里贴一下支付宝的插件设计图做参考
支付宝sketch插件图
设计稿平台
当有sketch插件的时候，我们上传到设计稿平台，设计稿平台除了有尺寸标记外，还可以看到当前控件的名称，甚至代码，比如你选择一个轮播图，它的名称叫轮播图1，我们可以复制它到组件平台查询，一查到，就可以查看各个端的信息，拿iOS举例，轮播图1的控件名叫：Carousel1，还可以直接浏览代码，属性等，这样开发直接拷贝就可以使用，不需要再去造轮子或问别人，保持了跟设计统一化，UI问题也会相对减少很多，怎样，是不是感觉打通了任督二脉的感觉，这种开发超级爽，效率也高~，这里贴《摹客》设计平台图做参考
摹客平台设计图
完善后流程
统一后流程图
项目难点
多部门多人协作，最难的就是在意识上的统一，比如这个UI究竟要不要抽成控件，是用作基本控件还是业务控件，需要多部门商讨决定
开发成本高，组件平台、axure插件、sketch插件、设计稿平台开发成本比较高，适合中大型公司，小公司没必要
UI组件库的限制
我在组件化的文中曾提到，UI组件库并不是想到就能加的，需要保持与组件平台的同步，那才有效果，不然只能局限在你的部门内，无法统一化管理，格局稍微小了一些
最后
UI统一是一个漫长的过程，如果由你来指导该项目，希望你能坚持下去，感谢你的观看^_^
网友评论