云图智造（北京）科技有限公司成立于2017年，总部位于北京中关村，是一家集地理信息数据、软件、服务于一体的行业内领先的智慧云服务商，产品覆盖政务云、不动产登记、房产、国土、规划、测绘、自然资源等众多领域，致力于为客户提供全面、品质、专业的地理信息服务。

在界面设计开始之前，云图的开发工作已经进行了一两年，各项功能俱全，但是交互和用户体验不足，视觉也不尽人意。客户是新疆克拉玛依国土资源局，客户可以说出使用不舒服的感觉，但无法提出应如何修改的建议。这是云图智造第一次委托专业的设计公司，也非常谨慎，经过半年的选择，最后确定与蓝蓝设计合作。

产品定位

以软件核心功能“自然资源领域办公”为主，整合数据分析，资源规划，公文办理，人员管理等系统。形成”主核心功能为中心，多个功能为辅助“的办公生态系统，提高资源审批流程运转效率，实现各级各相关部门间的无缝衔接。

目标用户

目标用户为自然资源领域相关从业人员，对相关业务熟悉，年龄分布较大，多在24~55岁之间。目标人群涵盖城市及城乡地区，对人机交互效率要求较高且使用频率较高。主要进行办公类操作，希望能够便捷好用，易于理解。

设计风格

人机交互方面，以简单点击交互为主，尽量避免复杂交互形式的出现；布局方面，以大间距和卡片式布局等主流布局为主，简洁大方，突出主要信息。配色方面，主色采用配色自然资源行业传统蓝色，辅助色方面采用与克拉玛依本地特色相呼应的橙色。

客户给的原型

由于这个项目，客户和项目经理在新疆，开发团队在海口，设计公司在北京，当面沟通头脑风暴条件不具备，于是我们换了一种方式：蓝蓝设计团队使用上线的软件进，之后给出交互建议，选择了一些典型页指出其中的不足，并放上类似页面的设计作品，提出解决方式并做出ppt，开电话会议沟通，客户和项目组认可后，进行设计工作。

在设计过程中客户不再参与，只看结果。每一个流程和页面由项目组讲清需求，业务逻辑，蓝蓝设计提建议和思路，画出原型，认可后视觉设计。

首页设计了日常办公和领导两种角色页面。经过内容梳理，原型的大部分内容空洞不必要，新设计增加了每天登录最需要关注的业务处理:紧急.待办.超期.月签四种情况，并把公文和业务分开，每种类型重要的内容字体大号，色彩突出，辅助信息弱化。领导角色需要全局观，增加了总全市重要数据和重要关注点信息。

页面开发采用了Layui轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。页面采用栅格布局适配1366-1920分辨率，适配主流的电脑屏幕，提升用户阅读的体验。并且有三套换肤功能，用户可以根据自己的喜好调整，便于后期维护。

其中导航部分采用三级导航，一级导航有多条不确定，在小屏幕的情况下采用收缩导航，随着屏幕的递减而相应的减少导航，二级导航采用固定向右的方式来完美适配小分辨下导航过多的情况。

图表类采用Echarts开发，更加生动直观的体现了每个模块的变动。

定稿的首页（领导角色页面）

选址类型统计页原型

此页在和项目组沟通原型时，发现原型上列表下面总是空的，克拉玛依一共就四个区，以后不会增加行数了，这个页面显的比较空。在和项目组沟通时，了解到这个页面用户关注的是：不同年份各区的单独选址和多批次选址的项目数量，如果有地图直观看就更好了。所以在设计的时候，上面搜索改为直接进行年份选择的时间线，右侧加入了地图，更加了简单直观。

在整个项目设计过程中，根据产品特点和设计需求结合业务场景，我们将页面信息进行重新整合和视觉化提炼，力求以图形化的语言，将页面信息完整，生动展现出来。针对不同区域内容和信息属性，我们进行图文转化，设计出不同的数据看板，同时简化列表信息，优化信息排列、展示方式，在完整展示业务信息同时，丰富页面层次，也避免了信息过多带来的视觉压力，提升用户数据处理效率。

定稿的选址类型统计页面

gis软件界面设计

在办业务页原型

统一的视觉语言是产品和UI设计中最重要额设计原则之一，全局化的设计是视觉统一的保证。蓝蓝设计在进行前期调研时发现，改版前的系统集成了较多功能，每种功能布局都不相同，这样就会出现视觉语言的不统一。我们再后期的设计中，遵循“框架-布局-细节”的设计思路，将页面功能重新梳理，提炼出全新的视觉语言和页面布局，确保视觉的统一性。

目标人群和产品使用场景是决定产品设计的基础性因素。我们在产品架构设计时，仔细研究目标用户使用场景，模拟用户操作过程中所有可能行为，精简产品架构，优化页面层级，合并页面内容，创新页面展示方式，运用大量的弹窗，toast提示等轻量化设计元素，力求将产品任意操作流程控制在4级页面之内，减少冗余流程，提升页面操作效率。

定稿的在办业务页面

UI培训

在项目结束后，根据合同约定，准备了一次面对云图全公司范围的UI培训，针对提出的问题一项项结合云图的具体页面，设计前后的对比，回溯了当时的研究、沟通和思考。当时没有参与具体设计的其它研发人员和管理层由此也更清晰我们做了什么。总经理挺感动，觉得确实做了一些事情，通过外部UI咨询公司的参与，把整个公司的UI认识和产品UI水准提升了。

UI培训视频讲解

根据季节可换背景的登录页

其它典型页（总计设计40页以内）

Powered by Froala Editor