公务系统设计(一)-后台设计

项目背景

2017年6月，接到某市交警支队的委托，需要对现有的执法系统后台进行优化重设计。这个执法系统的后台开发完成已有一段时间，但是随着规章制度的完善细化，执法系统的功能也相应越来越多，一些旧时的设计及操作习惯十分累赘，拖慢效率，急需对其进行功能优化升级。

优化项主要包括：1.界面优化：优化操作界面的布局、配色等，使数据展示更加直观清晰；2.操作优化：优化操作流程，减少操作时间提高办公效率；3.功能优化：与后端配合数据升级，使关联性较强的功能联系在一起，能够连续进行操作；4.利于后期维护升级。

项目过程

熟悉系统

作为一个从没接触过执法系统的“外行人”，要插手完成执法系统的优化，首先是要了解这套执法系统是怎么运作的，如何配合交警日常执法使用，后续数据如何处理。我们使用了最简单的方法去了解，直接在某市驻点开发，有比较长的时间直接体验这套系统的运作。

梳理功能

一套执法系统涉及到的功能非常多，梳理功能可以规划功能分类，制定每一阶段优化项，条理比较清晰，后续增减功能模块也比较方便。

根据梳理后的功能及与领导沟通，我们将使用这套系统的人大致分为四种。这四种角色根据其身份职责与使用这个系统的场景不同，需要展示不同的首页，将他们会着重查看的数据在首页显示出来，免去需要四处跳转查找的麻烦。

由于不是所有的交警都能够直接使用这个后台，同时为配合之后移动执法的应用需要，针对每一个交警都要赋予不用的身份标签、不同的功能权限组。前期了解完系统过后，便可以大致绘制出一个系统的功能结构图(当然这一步是当时带我的产品做的)，再以使用频率高低、关联的业务重要程度来安排时间。

原型设计

原型设计主要是主页的原型。

这里设计的时候要考虑的一些问题：1.统计图表很多，主次如何划分，要如何排列美观又不影响数据展示；2.在进行会议的时候可能会用到这个系统进行数据展示，如何只用一屏展示所有必要的数据，点击选中后如何快速展示对应的详细信息；3.这个系统主要是面向公务执法人员的，整体设计风格如何定义，操作如何设计都是需要考虑的。

这里主页的信息展示模块最多不超过7个，过多的内容不好一屏显示全，也会因为内容过多显得很拥挤毫无重点。1区固定显示重要的消息提示，其他区域根据角色需要展示不同的数据统计，根据角色的使用习惯及工作侧重点来考虑数据的显示位置安排。有些数据来源于同一个表，或者同一组统计以不同的纬度分开显示出来的，可以放在同一个区域。除了展示数据统计，部分角色在主页安排了常用功能的快捷入口，减少浪费在寻找菜单的时间。

这里使用了浅色主题，使整体页面显得干净整洁，对年纪比较大的人员也较友好。深色主题虽然很帅气更容易有科技感，但由于其他功能页很多表单，填写的时候容易出错，故而不考虑使用深色。

统计图表多样式混合使用，色系尽量不超过五个。这样可以让交警们使用一次后，可以对印象中图表的样式、配色等在第二次使用时快速找到其位置。

建立设计规范及组件库

这俩可以一起操作。

我做设计的时候用的工具是sketch。sketch相较之下比较好的一点是，建立组件特别方便。

通过原型可以大致确定好按钮样式、卡片、圆角、字体字号、边距等的一个设计标准，建立一个初步的设计规范，定义好各个数值之后，将按钮、卡片、文字建立组件。之后在设计其他功能页的时候调用，可以保证设计风格一致，修改的时候也只需要修改组件元达成批量修改，避免了有页面漏改的情况。

这里给出的规范主要是让前端开发有个参考，web根据显示器不同显示出来的效果会有些差别，根据实际会有调整。比如按钮和表单，根据内容宽度会有不同，此时固定一个文字与边框距离的最小值，其余的根据内容安排尽量让相同功能的部件达到统一即可。

设计开发过程

设计的前期工作量会相对较大也相对紧急一些。整理完需求后需要快速出高保真原型图及交互图，提交给产品与领导进行功能及操作的过审。因为是小团队，基本上是直接和领导及产品一起讨论，修改意见直接传达，效率比较高。同时原型图及交互图也要提交一份给开发们，在设计成稿出来之前可以根据原型进行功能布局与写数据库接口。产品与领导过审后，进行细节上的调整，再次核对没有问题后，就可以把设计成稿及需要的素材切图提交给开发进行页面优化了。然后其他功能模块设计时大致是一样的流程。

一些需要注意的

1.保持统一：包括设计时画布尺寸和设计风格。

    这里画布使用了1920*1080的大屏幕尺寸，一是考虑到大屏幕普及越来越高，二是如果以比较小的屏幕尺寸进行设计，虽然小屏看起来没什么问题，但是换成宽屏等显示器查看的时候，内容会显得很少很空。

    这个项目从2017年6月接到委托开始，一直到2018年1月才算全部优化完成正式上线，项目时间线拉得比较长，容易后期设计风格与前期有差异。

2.操作保持一致：包括按钮、浮层弹窗的弹出方式弹出位置等，

    后台的操作是非常多的，相同性质或功能的按钮一定要保持一致：颜色、样式、操作方式、操作的位置。不然换了其他模块的页面发现同样的按钮不一样的操作会让用户感到很懵。尤其是公务系统里有比较多年长者，重新认识并记住一个新的操作会花费更多的时间，要减少他们的学习成本。

3.流程优化的时候，需要多推敲几次。公务系统的操作优化需要和领导进行核对，因为我们比较少会接触这些业务，没有长期共事的话很难准确地一下子就做好。

后台的项目上线已经过去快一年，都没有再进行迭代更新。项目中的设计稿因为种种原因不便于公开，只好以文字的方式记一下过程和思路了。