城市地图的交互式设计

2014-11-23杨菁

设计艺术研究 2014年5期

杨菁

任赛赛

武汉理工大学，武汉430070

城市电子地图反映城市的基本面貌，如行政区划、街区、道路甚至经济情况，是为城市管理、城市建设和交通、旅游服务的。随着我国经济建设的快速发展，城市建设步伐的加快，城市面貌正在一天天改变，因此城市电子地图的制作必须跟随变化的节奏。通过对城市电子地图图形符号化的设计与转换，使其更加形象化、直观化，然后应用到社会生活之中，为消费者提供最大的方便。由于传统的纸制地图无论是功能性、便利性，还是实用性都不能和电子地图比较，所以城市地图从纸质走向数字化成了一种必然。

一、城市电子地图的现状

在我国，电子地图发展迅速，用户基数越来越大，因此电子地图未来的发展空间也就愈发广阔。中国知名的网络电子地图有中国电子地图网、百度地图、高德地图等。以手机用户为例，《中国互联网络发展状况统计报告》显示，截至2014年6月底，我国手机网民规模达到5.27亿，其中智能手机网民为4.8亿，较2013年增加约1.5亿人[1]。根据EnfoDesk易观智库产业数据库最近发布的《2013-2016中国手机地图市场趋势预测》数据显示：2012年中国手机地图日均活跃用户数约为890万，2013年年底达到了2 679万，实现了翻倍增长，预计2016年的手机地图日均活跃用户规模将超过1亿[2]（见图1）。

图1 2013-2016年中国手机地图日均活跃用户规模趋势预测①

由此可以看出，无论是PC电子地图还是手机地图，城市交互式电子地图已然成为人们生活中不可或缺的工具。几年前地图数据一直是网络地图的核心竞争力，目前的竞争重点则加入了电子地图衍生的各种功能。因为交互设计是“了解用户想要什么”的设计，所以要从用户的需求出发，创造积极的用户体验。手机地图迅速发展的原因就在于功能够满足用户的许多需求，尤其是GPS定位系统。例如拥有汽车的人多半会购买一部车载移动导航仪，这是因为如今的手机地图所有的功能已经和它一样优秀了。人们可以通过手机享受这种服务，于是手机地图自然而然就有了强大的市场号召力。手机方便携带，PC地图可以实现更强的功能，因此，城市电子地图的设计者需要继续深入调查用户的心理需求，挖掘城市电子地图的潜在功能，为消费者提供更具深度的POⅠ信息与增值服务以及更加智能化的人机交互体验。

二、城市交互式电子地图设计的特点、形式与案例

能在屏幕上显示的地图统称之为“电子地图”，按照使用方式可以分为“静态电子地图”和“动态电子地图”。静态电子地图类似于纸质地图，仅仅能够完成显示的功能；而动态电子地图却可以灵活地访问地图数据库，完成实时的动态显示任务。交互设计则更多倾向于动态电子地图的设计，旨在实现更多的人机对话与交流。

1.设计特点

城市交互式电子地图设计体现在两个方面，一是界面设计，二是功能设计。界面设计主要是指信息图形设计、界面排版以及色彩搭配。

（1）信息图形设计。信息图形设计是一种使信息、数据视觉图形化的设计，即运用图形表现能使信息更加准确清晰地传达给受众。界面中的每一个图标、按钮都是信息图形化的载体，通过简洁的图案让用户知道每一个按钮的功能，如百度地图不同功能图标的图案、色彩是不相同的（见图2），“团购”使用了商标的图形、“公交车站”使用了公交车的图形、“电影院”使用了胶卷的图形，这些都能够让人一目了然。

图2 百度地图信息图图标

（2）界面排版。界面排版要素主要包括地图显示区、工具条、窗口、图标、文字、图片、动画、按钮以及菜单等内容。界面排版首先应该考虑的是版面结构与层次是否清晰，用户操作是否便捷；其次，版面的设计需要适应人的视觉流向的心理及生理特点，根据所把握的用户浏览顺序，从而决定各个要素的摆放位置；最后，界面的美观也是必需考虑的设计内容。

（3）色彩搭配。在色彩搭配上，需要为用户创造出有效的视觉系统，也就是必须结合人的感官情感进行设计，让用户能够快速分辨出元素间的异同，例如图2中“景点”的颜色为亲近自然的绿色、“美食”的颜色为增进食欲的橙色那样。在复杂界面的设计中，颜色的种类不能过多，主要是借助色相、明度和饱和度实行区分。另外可以根据不同的季节，或者特殊的日子进行不同主题色彩的改变，由于可塑性强，符合用户的审美需求，而且能避免长期使用的用户因为对界面产生的审美疲劳而放弃使用。

功能设计是对界面设计的补充，在功能设计的同时也要注意个性化设计。

（1）功能设计。交互式地图的功能设计是地图数据更新问题解决之后，设计师最着力的又一个方向。从2005年开始，各类网络电子地图面市之后，地图软件的功能越来越繁富，从最初只具备单纯的搜索功能发展至今天，电子地图与人的交互越来越活跃，如智能搜索、公交提示、实时路况、GPS的定位等。以手机地图用户功能使用情况为例（见图3），除去导航和地点查找等传统功能之外，值得注意的是周边热点的查询比例已经达到了29.2%，占居第三位；签到或者位置信息分享比例则为10.4%。随着互联网的移动化和社交化，手机地图融合社交元素的趋势也会更加明显，社交关系将变得更加真实和丰富。用户之间、用户与线下厂商、互联网企业之间的联系也将进一步深化。“手机地图社交”功能有着广阔的发展前景。正是因为这些新功能的开发，近几年来使用电子地图的用户基数迅速扩大。设计者除了要了解用户所需，就得对产品实施拟人化的想象，即要将其假想成一位助人为乐的人，他会怎么做[3]。体贴周到的交互能够站在用户的角度思考问题，让使用者的工作变得更有效率。设计者还要将用户没有想到的有用的功能融入其中，让用户在使用过程中出现意外的惊喜。在面对功能繁多而复杂的软件时，以人为本的设计会驯服、化解复杂，把看起来令人困惑的工具变成能够理解的、可用的、令人愉悦的设备[4]。

图3 手机地图用户功能使用情况①

（2）个性化设计。电子地图和传统的地图相比较，最大的优势就在其更新的速度。随着人们的教育程度和生活水平的提高，审美需求也在不断扩大，地图的个性化界面就必然会受到最大的关注。设计者对电子地图的更新与个性化关注都体现在了功能设计上，但对界面的设计却还没有真正地引发兴奋、投入精力。

2.设计形式

常见的电子地图有三类，一类是二维地图，一类是三维地图，还有一类是现今较为流行的介于二维与三位之间的2.5维地图。

二维电子地图的开发领域比较全面，无论是导航系统还是智能搜索系统都比较完善，甚至新增了网上支付功能，能预订酒店，参加团购。并且应用的平台广泛，更新及时，是当今社会的主流电子地图。因为二维地图本质上是基于抽象符号的系统，所以还不能给人提供自然界的本原感受，此外二维地图的抽象性在一定程度上也限制了人们获取信息的自由。

相比而言，三维电子地图更加直观地从视觉上向用户描述了整个城市的地理风貌，例如谷歌地图中城市的街道楼房都显示得一清二楚。三维地图的形象性、功能性是二维电子地图所无法比拟的，它的导航效果以及搜索功能比二维地图更加精准，能让用户更加直观地寻找到目的地。但是国内三维地图的功能开发以及推广都不是太好，更新速度也比不上二维地图，所以就出现了2.5维仿3D电子地图作为从二维走向三维地图的垫脚石，几乎所有的大型电子地图如百度、高德等都具有半三维地图的形式。而未来的电子地图必定会更加的三维化[5]。

3.电子交互式地图的成功案例

最近发布的《2014年第二季度中国手机地图APP活跃用户覆盖率》数据显示，百度地图以55.58%的用户比例荣登第一的宝座，其次是高德地图的23.64%和谷歌地图的9.01%。在第2季度中，中国手机地图APP季度使用时长前三名的也是百度地图、高德地图和谷歌地图，占比分别是70.21%、15.09%和3.82%。

由此看来，百度地图在中国市场有着举足轻重的地位。而就在两三年前，中国电子地图的主力军还是谷歌地图、图吧地图以及高德地图。在2012年手机地图市场中份额比例最大的是高德地图的25.9%。

从界面设计来看，谷歌地图风格简约，灰色为主色调，整个界面十分洁简，高端大气，而且这种风格从最初的2.0版本一直延续至今天。比较而言，百度地图更符合中国国情，界面的色调会根据节日或特殊的日子随时变化，针对性强。谷歌、百度两款地图页面的设计符合人的视觉流程，地图上的标记主要应用的是红、黄、蓝三种颜色，蓝色表示河流，绿色表示公园或草坪，黄色表示道路。色彩突出，清晰明了。不同之处在于，谷歌地图的页面没有任何的功能按钮，只有一个侧拉菜单，功能都置入到了侧拉菜单中，这样也就保持了界面的简洁，而使结构清晰。但百度地图的界面却放置了4个用户常用的功能，即路线查询、周边查询、工具箱和我的地图，所以更加方便、适用。

从功能来看，百度地图更具有中国特色，语音导航与地图的整合、电子眼提示、躲避拥堵计划等都是符合中国人口味的设计，并且对于周边衣食住行的搜索功能也较谷歌地图更为完善。

三、城市交互式地图的创新设计

以武汉手机地图设计为例。地图软件的设计必须具有一定的针对性。尤其是界面，界面设计应该根据浏览者的个性特点和意识水平，恰当地选择设计的方法与技巧。首先，界面设计应该针对浏览者的层次特点。界面不可能在共时状态下符合每一个浏览者的性格特点和全部要求，却可以根据浏览者的不同年龄、不同职业、不同文化素养等所形成的层次特点实施设计[6]。因为设计师确定的用户群体主要是针对高校的学生以及教职工和家属，他们都是受到浓厚文化气息熏陶的人群。所以在地图的界面设计上进行了创新性尝试，即采用现代流行的手绘地图形式，使其具有趣味性，并有着丰富的个性特征。除了满足用户的审美需求，较之其他地图软件则更加生动活泼，文化气息也相当厚重。

在手绘地图的时候，街道、湖泊、桥梁等位置确保精准，要为导航功能的实现提供良好的基础。要提取武汉著名的景点、政府所在地、商业区、剧院等具有武汉特色的建筑（见图4），反映在电子地图上。色彩搭配时，主色调采用了黄绿色，江河湖泊为蓝色，公园景点为绿色，建筑的屋顶为橙黄色，如此就能凸显武汉深厚的历史文化。

在地图主页面的设计中，因为是手绘的信息图形，所以在图标的制作上，配合手绘的风格，以蓝色为主色调设计了一系列的手绘图标。页面简洁大方，不会让人阅读了复杂的图形之后感到视觉的疲劳。

在功能上，除了具备基本的搜索、导航之外，将针对用户喜爱的社交娱乐活动添加一个“圈子”系统。所谓的圈子就是按照不同用户的身份、需求进行分类，例如文艺圈子、电影圈子和英语圈子等，根据不同的圈子整合不同的信息，再提供给用户。比如英语圈子就会及时更新高校的英语讲座或者英语角的时间，由于用户多为教师和学生，可以在页面中相互邀约、对话和互动，这就构成了一个极好的平台。交通信息将侧重于高校内部的地图以及高校附近的公交车路线，除了可以手动搜索公交车路线之外，还能针对外地不熟悉公交站名的人制作详细的公交车站图表（见图5），如武汉理工大学鉴湖校区省出版城站的公交车站示意图，摹仿了地铁地图的绘制方法，将经过此战的每一路公交车的大致路线图用线条表示了出来，不同路线的公交车用不同颜色的线条以示区别，方向清晰，站点直观。有这样用图表形式显示出来的公交车站点，对许多用户而言是极有益处的，特别是外地的学生。除此之外，此款地图APP还具有测距、截图、的士定位等功能。