数据可视化系统改版设计方案整体设计思路/疫情指挥驾驶舱/

看过很多大咖写的概念型的文章，分享一些干货，希望对新入行的UI设计师有所帮助，不喜勿喷～^_^。

新冠疫情的突然出现，打乱了全球所有人的生活方式，当然我也不例外，为了响应国家号召从春节放假开始到4月初，基本没有离开家。作为一位设计师，因为工作性质的原因，并没有影响到我的工作，居家/办公室在哪都是我的工作场所，只有能放开电脑的地方都可以办公。

居家期间所有的医护及各界人士都在为打赢这场硬仗而努力着，也很庆幸居家时领导安排了一个**疫情指挥监控数据可视化改造的工作，期间也了解到公司很多同事也在远程提供对应的支撑，当然我也不例外，利用自己的专业知识，为疫情提供相应的支撑，能为社会贡献自己的一份微薄之力，我感到很欣慰，在这里说句“大家辛苦了”^_^。

疫情的很多数据都具有保密性质，所以我会模糊化部分数据，这里大家只需要学习到设计工作中的一些思路即可。做大屏可视化改版设计思路很简单，我们只需要做好这两件事：发现问题与解决问题。

这里必须要说明一件事情，设计系统的改造注重的是全局思考，不单纯的是美化界面，这里可能要考虑数据的展示方式及数据优化、GIS数据的承载能力、交互方式、前端开发实现的程度、视觉展示效果、及改造花费的成本/人力等等一系列的问题。

第一件事：发现问题

……………………………………………………………第一步……………………………………………………………

领导给了一个开发的测试地址，及以上的一段话之后我们就开始啦～

登录以上地址后开始发现问题，以下是部分截图，问题比较严重的红色区域标注：

图1登录，输入用户名密码；

图2选择登录哪个功能

图3疫情指挥领导驾驶舱大屏（主页）

图4、5、6、7、8、9、10….通过图2第2、3、4等等进入或可视化大屏红色区域切换；

 

初次发现问题及解决办法（这里的解决办法针对的是现有问题）整理成一个文档，发给对应的项目负责人，针对目前这些问题，是否还有其他问题等等（这里的其他问题指的是客户要求）。

问题如下:

1、 切换方式冗余切不统一；

2、 色彩搭配不统一且凌乱；

3、 图标/图表展示不够严谨；

4、 布局不够合理且主页跟内页差别较大；

5、 街道分布可视化显示不够直观；

6、 GIS地图展示数据异常及区域可视化展示的问题；

7、 搜索样式显示不明显；

8、 点选与框选图标及样式不统一；

9、 疫情活动跟踪不清晰

这里要重点说明下这部分工作，不同类型的设计师对待这块问题，有不同的看法，比如：

感觉型：我感觉这个些界面太乱了，

        你问他哪里乱，他说不太出来，仅仅只是感觉太乱！这种类型的设计师，基本上刚踏进设计行业，或者坐很久一直在混日子的设计师；

混乱型：图标不够突出、页面颜色不好看，图标描边粗细不一样等等；

        这种设计师有一定的经验与见解，但是不善于总结与梳理，你会发现他们虽然善于发现问题，但大多数都是零散的点，没有逻辑；

体系型：我们从以下几个方面来说：交互方式、颜色、图标、布局、等等问题，我们应该怎么来解决….然后在阐述细节问题，思路清晰。

针对这些问题，你所提出来的问题，一定要给予对应的解决办法，不然这次改造评估工作周期，对于项目负责人无法准确的判断。对于解决办法后续会提到，在这里就不一一阐述；

……………………………………………………………第二步……………………………………………………………

设计师的工作真的是承上启下的工作，项目负责人，客户，前端/后台开发、测试等等，所以我们在收集意见反馈时，一定要有自己的主观意见，不能被多人意见所牵绊，因为每个人对每句话的理解不同，所以一定要收集到客户最想表达的意愿，在给予专业性的合理建议；

项目负责人及客户意见反馈，基于前面整理，意见客户还提出以下意见：

1、 GIS对应的网格街道的区域划分；负责人/客户意见,给的样图如下：

2、 APP端的展示，H5（考虑到疫情期间很多工作人员，都是在自己管辖区域内流动工作，无法在办公室打开电脑查看，需要手机端可以直接查看，管辖区域内的情况）

3、 登陆页的需要重新设计；

第二件事：解决问题

……………………………………………………………第一步……………………………………………………………

针对以上整理的问题1、2、3、4解决办法，着手设计之前要制定基础设计规范；

标准色规范：主色、辅色、文字色如下：

标准字体/字号：字体、字号如下：

布局方式：三栏布局、通栏布局：

考虑到前端改造的成本/时间，外加主页信息较多，采用三栏布局与通栏布局是常用的布局方式。

街道分布可视化展示：采用百度地图卫星地图的方式

把网格区域通过百度地图边界画出指定管辖区域，这块需要开发协助配合，前端做好可行性测试，设计时考虑GIS不同层级展示的内容/配色即可；网上找的示例图如下：

要求有了，示意图有了，这时候前端/后端开发就需要做可行性测试工作，切记！！！

关于交互方式的改变，我就不细讲了，这里的交互方式相对简单，我就画了简单的流程线框图，能够清晰的描述改造后的交互方式即可，详见下图：

大体的方向拟定好以后，接下来开始着手设计的工作啦~~~

里面一些图标/图表、logo、名称、等等都是需要跟项目负责人确认好～～

接下来就是找参考，跟很多设计师一样，各大设计网站站酷、花瓣、dribbble找类似的参考，研究每个作品的优缺点，及借鉴的地方等等…… 

……………………………………………………………第二步……………………………………………………………

UI设计工作主要输出物设计界面，接下来针对改版后设计的页面如下：

登录页：考虑到目前登录页是跟其他系统共用，通过单点登录进入，沿用之前蓝色的色调，采用扁平化的设计风格，使界面视觉上更好看，突出登录框，易用的理念；

展示内容：logo、名称、登录信息（用户名、密码、验证码、找回密码、登录按钮）；

指挥监控主页：监控指挥大屏整体风格采用市面上比较流行的深蓝色风格、前面整理的色彩、字体设计规范内容沿用；

切换方式：前面提到的切换方式不统一，前面有原系统截图3、4、5、6、7、8都是通过GIS展示的不同数据，后面统一到中间位置GIS区域，通过tab页签的方式切换，支持下钻展示不同层级的数据；

实时动态数据：实时人群动态数据，中间最上方展示疫情的动态信息；

布局方式：三栏布局

备注：工作过程中项目负责人反馈，只有10天的时间就要上线，就是这次改造到交付的时间周期较短，框架保留，左右内容保留，只改进了整体的设计风格及中间区域换成GIS方式展示，及切换方式的改进；

这也是很多设计师工作中常见的问题，我们一定要做到及时沟通反馈，以免工作中做了很多无用工作，我们不但要设计出界面美观，并且也要结合现状来做对应的工作；

指挥监控主页-下钻到单个网格：中间GIS可以通过下钻展示街道、网格的实时数据，下钻后，整体数据包括左右对应的数据都需要联动，我可以针对单个街道或网格的数据进行查看实时动态人群信息；

部分主界面合集

APP端设计：前面有提到过针对app端客户要求，通过h5页面方式展示单个街道/网格区域内的疫情动态人群；这里有pc端的基础，所以需求相对明确些；

用户：疫情防控工作人员

要求：管辖区域内、医院、人群分布状态；

知道这些就需要跟客户/项目负责人对接他们最关心哪些内容，这一步工作非常重要，不能上来就开始设计，这个过程相信很多设计师都有遇到过，就不一一说明，如有感兴趣的小伙伴可以一切交流！！！～～～～

以上工作完成后，且与客户/负责人确认后，需要跟前端开发对接，开发人员需要提供给他们对应的切图+标注，切图标注这块就不细讲讲了，网上很多切图标注的神器，比如：Cutterman、像素大师、Mark Man等等很多；不过我一直用的是蓝湖的插件，很好用~ ps跟sketch都可以使用喽~~ 所有的工具都是辅助我们的工作，只要能完成工作且交付给对应的人员即可，

使用工具：MacBook Pro、 photoshop、sketch、word

关于系统可视化改造谨记发现问题、收集问题、合理性的建议、解决问题完成最终设计稿即可～

小女子不才，首次写文章，很多不妥当的欢迎指正，我后续改进～(^-^)