基于GIS的气象服务产品交互体验设计研究

弓盈 潘煜

（中国天气网，北京 100081）

0　基于GIS的气象服务产品发展现状

地理信息系统（Geographic Information System，GIS）在我国虽然起步晚，但发展迅速。1980年，中国科学院遥感应用研究所成立了全国第一个地理信息系统研究室，标志着我国GIS研究的起步。经过三十余年的发展，GIS产品在中国已从基础设施建设领域逐步深入至普通百姓的日常生活，公众对GIS产品的认识普遍加深，需求大幅增加，促进了GIS应用范围的不断扩大和深化，并伴随互联网技术的普及而逐步走向社会化。

与此同时，随着中国气象事业的发展及公众对气象服务日趋多样化的需求，如何更有效地对气象数据进行可视化是气象部门面临的重要科学问题。气象数据具有明显的空间特征，实时性强，数据量大。传统的气象数据处理手段（如传统的表格、柱状图、曲线图等）不能在空间定位上精确定量地表达相关信息。而基于 GIS 的气象服务产品可提供一系列空间气象数据处理功能，通过 GIS 技术，可以实现多因素的综合分析，利用其丰富的可视化表达方式，模拟展示各类天气现象、气象灾害的过程，实现气象数据空间特性的精准表达，为气象灾害的监测、预警、预报、信息发布、应急指挥、灾害评估和恢复等气象服务提供更好的展示平台。

正是气象数据与GIS所具有的天然联姻属性，GIS产品已在气象领域进行了一定程度的试用。例如，福建省气象局基于GIS技术建立了新一代福建省气候监测与灾害预警系统，对辖区内发生的各种气象灾害和异常气候事件进行监测。江苏省气象局组织开发了“基于GIS的交通气象综合展示平台”，实现了各类交通气象信息的二维、三维显示[1]。

尽管GIS产品已在气象领域进行了一定的探索应用，但目前的产品仍有进一步优化的空间：一是优化专业气象数据呈现方式，提升用户界面的易用性；二是简化操作步骤，提升软件的可用性；三是优化产品视觉设计，这些问题的解决和优化，将有助于GIS在气象领域的进一步推广与普及。因此，在GIS应用软件中引入交互设计的方法显得尤为及时和必要[1-3]。

1　交互体验设计的发展

1.1　概述

交互体验设计包括用户研究、交互设计、用户界面设计、程序开发、用户测试、市场营销等环节。本文主要围绕“交互设计”和“用户界面设计”进行讨论。

交互设计的目的是努力创造和建立人、产品及服务之间有意义的关系，围绕“以用户为中心的设计”的核心目标开展工作。它的具体内容则是关于产品逻辑、结构、操作规范的一系列设计。而图形界面设计则更多关注产品的外在呈现形式，通过对产品视觉形象的提升来提高产品的易用性，争取更高的关注度，拉近用户与产品的距离，创造亮点和商业卖点[4]。

1.2　交互设计发展新趋势

有统计表明，对于电商网站而言，加载速度每延迟一秒，就意味着流失27%的销量。对于互联网产品设计者而言，用户的耐心也同样在逐渐缩减，因此页面的响应速度成为了用户对产品的首要要求。

除此之外，顺应当今PC逐渐向移动倾斜的大趋势，能否如app一般提供更加精细、定制化的服务也已成为能否足够吸引用户的关键需求之一。

1.2.1页面布局更灵活、信息结构更轻量

“响应式布局”是近来十分流行的做法。简言之，即一个网站或者产品能够兼容多个终端，而不需要为每个终端重新制作一个特定的版本。这样的做法和技术也是为了适应电子设备的快速更新迭代，而这样做的好处是使得产品无论应用在何种终端、平台，都能够以最合理的布局形式展示给用户。除此之外，“不同设备的相同应用能够实现无缝操作同一事件，协助人们持续不间断地完成任务”将是未来跨平台交互设计的大趋势，这点苹果公司已经抢先做出了表率。

另外，在产品内容和结构设计方面，越大的屏幕空间对产品信息的承载便越复杂，因此对产品信息结构的“减负”则显得尤为重要。轻盈的信息结构不仅可以强化内容本身，还能够减少用户对逻辑和布局的理解成本，缩短用户到达信息的距离。

1.2.2视觉呈现更直观、更丰富

一图胜千言，信息的可视化仍然是视觉设计中有效传达复杂信息的重要手段之一。扁平化奉行“少即是多”的理念，即去掉多余的透视、纹理、渐变等干扰元素，让“信息”本身重新作为核心被凸显出来。在设计元素上，则更强调极简和符号化。而从目前的视觉流行趋势来说，扁平化的设计风格仍不过时。然而在信息时代纷繁的视觉刺激下，一味地追求简化已经不能满足用户的审美口味。使用合适、丰富的配色，来调和过度扁平带来的单调感或信息传达的不准确性才是更符合潮流的做法。好的色彩运用其目的不仅是美化全局，更能够协助用户减少学习操作的时间，加快用户获取结果的速度，使产品的逻辑结构更加清晰、警告信息更加醒目[5]。

2　基于GIS的气象服务产品交互设计——以“台风路径查询”及“临近预报”产品迭代为例

2015—2016年，为了满足不断增加的对于气象预报类服务产品更加精细化的用户需求，中国天气网着手对原有的“台风路径查询”和“临近预报”产品进行版本的迭代优化。

2.1　改版设计的基本流程

通过对旧版产品使用者的调研，分别分析了两个产品用户的使用习惯和新增需求，梳理了旧版产品暴露的问题。在此基础上重新整合产品逻辑，调整结构布局。并结合现今流行的互联网技术和交互、视觉设计方法，展开2.0版的迭代优化工作。

本次改版设计的基本流程包括需求分析、交互设计、视觉设计、技术开发、测试上线5个环节。其中，交互设计及视觉设计是核心，需求分析则是基础[6]。

在需求分析阶段，从行为、态度、资质、动力、技能5个方面对用户进行更深层次的了解。即了解用户使用产品的频率、场景、用户的个人画像以及在此背景下对产品的使用偏好。同步进行同类竞争产品的分析，并梳理旧版产品问题，确定新版产品定位及可优化的细节。

在交互设计阶段，重新梳理产品功能逻辑，搭建产品布局，完成产品的线框图及原型图设计。

在视觉设计阶段，依据用户使用喜好及产品功能需求，重新定位风格，并进行全新的排版与配色设计。

2.2　产品的交互体验优化

2.2.1用户需求及旧版问题分析

根据部分用户调研结果及实际测试情况分析发现，用户对地图加载的响应速度、地理信息的精确度以及气象数据的准确率等方面的关注度和需求度非常高，而这些指标也正是决定产品可用性的关键。另外，从信息可读性上来说，叠加图形的清晰度，界面样式的美观和易用度，如从视觉设计上是否能够为用户的操作提供更舒适的引导、功能细节的人性化设计等问题，也是当今越来越多的用户关注的重点（表1）。

2.2.2性能的提升

1）考虑多终端的适配兼容

为提高产品的使用率，在台风产品PC端改版的同时，增加了移动WAP端的产品版本的设计及开发。而在PC端则增设了全屏视角功能，使得页面元素能够自动根据浏览屏幕大小做出响应。

表1　旧版用户需求分析Table 1 Analysis of user’s requirements in the old version

2）提升响应时间和数据加载速度、稳定性

通过对图形生产系统、硬件设备的升级，使得图形系统业务化。对产品底层架构进行重新构建，对数据接口、定位接口等重新布局，规范格式，并利用阿里云计算，弹性应对峰谷访问量的巨大差异，提升访问速度和承压能力。将地图上叠加的图层数据改为预加载缓存，使得用户在多次使用产品时，将感到产品越用越快、越用越流畅。

3）地图层级精细化、精确度的提高

切换地图底层框架，由“leaflet”改为百度地图框架，带来框架直接携带功能：卫星图切换、测距、精确到街道的地理信息数据，地理信息的精确度得到大幅提升，用户能够通过文字搜索，亦或点击地图上的任意地点，得到每一条街道的信息；同时，利用MDV图形发布系统，优化雷达回波图、卫星云图的显示效果，改善放大后边缘模糊的问题。

2.2.3布局、功能的优化

1）采用轻量级布局，对信息层级减负

将功能按钮的布局设置得更加直观，使用户选择更便捷，减少触及需求信息的操作流程（图1）。

针对“台风路径查询”这类功能较为单一的垂直类服务产品，对其信息层级进行轻量化设计，减少页面跳转，为操作体验减负。在移动版台风产品的设计中，对“设置菜单”“台风列表”“图例”等访问操作，通过半层弹层或浮层模式的设计避免页面级的跳转，降低了用户浏览行为的复杂程度，使核心模块稳定在用户主视线内。

2）更加个性化的功能设置

围绕用户需求和使用习惯，从定位精准、个性化服务推送、用户自定义设置等角度对产品功能进行了改进。

图1　“临近预报”产品界面布局及说明Fig. 1 Introduction to the interface for nowcasting productt

首先，在原有的IP自动识别用户定位的基础上，使用经纬度定位方法，提高了精准性。在产品中增加定位复位按钮，方便用户在挪动地图到其他位置时，能够一键返回定位坐标。

其次，在“临近预报”2.0版中，增加了底图编辑功能。用户能够自主选择地图底图的呈现信息，例如在地图上去除铁路、高速公路等。并能够记录用户的定制行为，下次打开即为上次的编辑结果。

在台风产品中支持1949年以来历史上任意一条台风路径的查询功能，且最多可选3条台风路径同时播放，方便用户对比查询历史台风相似路径。并设置了一键清除按钮，让用户能够快速更新所选台风信息。PC端产品中还支持用户自定义台风路径播放速度。

同时，运用情感化营销手段，在台风WAP产品中增设“台风离我有多远”H5交互游戏，强化公众参与感，引导用户在分享中传递防台减灾信息。

在 “临近预报”2.0版的搜索栏中增设热点资讯的推送功能，使用户能够在关心所在城市天气的同时，实时了解全国天气关注热点。也间接达到提升站内跳转率的运营目的。

2.2.4全新的UI视觉呈现

1）界面风格及配色的改变

“临近预报”2.0版设计中将地图及天气信息展示区域扩大，将导航底色由之前的浅蓝和绿色，统一为暗灰蓝色，配以亮蓝色作为选中提示色标，增强用户在信息选择上的辨识度，这些优化使得新版界面布局更加明晰，信息重点突出，同时配色的改变更增强了产品的科技感和专业感，提升新用户的信任度。相较于1.0版本，新版“临近预报”增加了测距、分享、帮助等功能，图标简洁明了，播放条也变得可收起，在不增加页面文字阅读量的前提下，使用户实际操作体验更加流畅（图2）。

图2　“临近预报”产品改版前后对比（a）1.0版，（b）2.0版Fig. 2 Comparison of nowcasting products between the old version 1.0(a) and new version 2.0 (b)

在台风路径产品的改版中，改变了地图的配色，选择深色地图底图以突出台风路径的显示，并采用深蓝作为主色，提升科技感的同时更主要目的是降低界面元素过分丰富对视觉注意力的干扰，提高用户搜索目标的效率。选用明黄和暖红作为辅助色，用以提亮重点信息；缓和深色带来的沉重感，可以更鲜明地指引用户进行准确的操作（图3）。

图3　“台风路径查询”PC端产品改版前后对比（a）1.0版，（b）2.0版Fig. 3 Comparison of typhoon-path searches products on PC between the old version 1.0 (a) and new version 2.0 (b)

2）数据的可视化效果处理

在两个产品的2.0版设计中，集中优化了天气信息弹框及时间播放轴等功能模块，并对数据信息的叠加和展示形式进行视觉包装，借助于图形化的手段，将气象数据转化为更加友好、更易懂的视觉形式，清晰有效地传达信息（图4）。

2.3　效果检验

台风移动端产品于2016年7月3日上线，截至2016年12月，台风实时路径查询产品累计访问量达3451万次。其中，单次台风过程PC端产品最高访问量375万次，移动端产品最高访问量450万次。临近预报2.0版于2016年7月28日迭代上线，截至同年8月29日，上线一个月浏览量同比增长56.11%。

3　展望与思考

图4　气象数据可视化包装后的效果Fig. 4 The effects after visualization for weather information

现如今，GIS早已从不同层面渗透到人们的日常生活中，眼花缭乱的产品不断分割着人们的眼球，人们对于产品的交互体验越发挑剔，企业对于产品的更新迭代速度也随之加快。同时，随着新技术层出不穷，在当今同质化产品竞争激烈的市场环境下，不同应用领域的GIS产品面向的用户群体也开始细分，用户们的需求也不再满足于简单的图形与属性信息的查询，开始变得更加多元化。人们也越来越关心GIS产品是否具备其他一些品质和功能：如人性化的、愉快有趣的、更富有启发性的，以及更能激发用户痛点的等等，这些都是交互体验设计必须思考且能够解决的问题。

根据《2015年互联网发展动态及趋势》报告中的调查显示：我国手机网民规模达6.20亿，网民中使用手机上网的人群占比由2014年的85.8%提升至90.1%。报告更指出，在2014及2015年诸多大型互联网公司其移动端的流量已经超越PC端的流量，很多大型互联网企业PC业务用户正逐渐向移动端迁移。由此可见，“得移动互联网者得天下”。未来，包括GIS在内的气象服务产品想要获得更好的发展，必然离不开对移动市场的关注和把控。

互联网技术发展带动市场，动效的应用、H5的广泛流行、大数据、云计算、AR与VR等新概念新技术手段的兴起，让交互设计的空间扩充到生活中众多领域的同时，也给交互体验设计带来了新的契机和更多元的可能，而情感化、场景化设计和个性化定制等基于用户研究的设计思路在未来依然会保持旺盛的需求趋势。基于GIS的气象服务产品也必将在互联网大趋势的浪潮下不断向前推进。

[1]徐建新, 王勇, 张燕平, 等. 基于GIS的交通气象展示平台. 南京: 江苏省测绘工程院, 2006.

[2]施坤景. 地理信息系统（GIS）的发展现状. 科技资讯, 2008(3): 68.

[3] 胡祎. 地理信息系统（GIS）发展史及前景展望. 北京: 中国地质大学, 2011.

[4]李世国, 顾振宇. 普通高等教育工业设计专业“十二五”规划教材——交互设计. 北京: 中国水利水电出版社, 2012.

[5]Jeff Johnson. 认知与设计: 理解 UI 设计准则.张一宁, 王军锋, 译.北京: 人民邮电出版社, 2011.

[6]Jesse James Garrett. 用户体验要素：以用户为中心的产品设计.范晓燕, 译. 北京: 机械工业出版社, 2011.