地图标注设计指南,让信息一目了然
打开手机地图找餐厅,满屏的店名、路名、地标堆在一起,眼睛扫过去,半天找不到想去的那个。这不是你眼神不好,是地图标注设计出了问题。地图这玩意儿,本质上是个信息筛选器,可很多地图偏偏把信息全倒出来,让人自己从沙子里淘金。真正好的地图标注,应该像朋友指路那样,说“看到那棵大榕树右转”,而不是甩给你一张卫星图让你自己数电线杆。今天这篇指南,就聊聊怎么让地图上的每个字、每个图标都长在它该在的地方,让信息自己跳进你眼睛里。

先说字体大小。别以为字号越大越清楚,地图标注讲究的是层级关系。城市级别的地图,主干道名字要比支路大一两个号,地标建筑比普通店铺突出半档。我见过有些地图把小区名字跟地铁站名用同样字号标,结果地铁站淹没在文字堆里,找起来费劲。合理的做法是用字号建立视觉阶梯:一级标注用16-18像素,给城市名、主要地标、交通枢纽;二级用13-14像素,给主干道、大型商场;三级用10-11像素,给支路、小区、普通商铺。这样一眼扫过去,大脑自动根据字号大小判断信息重要性,不用再逐字辨认。
颜色这块最容易翻车。很多人觉得地图就得五彩斑斓才好看,结果红配绿、蓝配紫,信息没传递出去,眼睛先累坏了。地图标注的核心颜色不超过三种,加上背景色最多五种。推荐用蓝色系代表水体,绿色系代表绿地,灰黑色系代表道路和建筑。标注文字用深灰或纯黑,跟背景拉开对比度。别用那种饱和度极高的荧光黄、亮粉色做标注,在日光下看手机屏幕,这些颜色会刺得人眯眼睛。我见过一个旅游地图,把景点名全部用大红色标注在绿色背景上,视觉上像得了红绿色盲,景点再有名也看不清。
图标的形状和大小也有讲究。好的图标应该像交通标志那样,只看轮廓就知道意思。比如餐厅用刀叉或碗筷,医院用十字,加油站用油枪,这些是大家默认的视觉语言。别为了追求原创性,把餐厅图标设计成抽象派蛋糕,用户得猜半天。图标大小也要统一,横向排列的图标宽度一致,纵向排列的高度一致。我见过一个地图把公交站图标做得比篮球还大,旁边地铁站图标却小得像蚂蚁,这种标注不是在帮助用户,是在给用户出猜谜题。
标注的位置直接决定用户能不能快速定位。文字标注要尽量靠近它所指代的对象,但别压住对象本身。比如标一条河的名字,字应该沿着河道走向居中放置,而不是随便扔在某个拐角。标一个商场,字放在建筑轮廓的正上方或右侧,留出3-5像素的间隙。最忌讳的是把标注放在两个地标中间,用户得根据上下文猜这个字到底指的是哪个。我见过一个地图把“人民广场”四个字标在广场和旁边大楼之间的空地上,结果有人以为那个大楼就叫人民广场,导航导错了地方。
动态标注是个容易被忽略的细节。地图是活的,用户放大缩小、平移旋转,标注应该跟着变化。放大地图时,原本被合并的支路名称应该自动展开,原来被省略的店铺名字应该显现出来。缩小时则相反,把次要信息收起来,只保留主要地标。这个缩放阈值要设得合理,不能放大到一条小巷子才看到店名,也不能缩到全城范围还堆满小区名字。我见过一个地图,放大到街道级别时,路名突然全部消失,只剩建筑轮廓,用户以为自己打开了卫星图模式。
信息密度控制是地图标注设计的终极考验。一张地图上标注太多,就像一个人同时在耳边说十句话,哪句都听不清。设计时要学会做减法:根据地图用途决定显示哪些信息。旅游地图突出景点、餐厅、交通枢纽,忽略普通居民楼;物流地图突出仓库、高速出口、加油站,忽略公园和博物馆。同一层级的信息数量也要控制,一个屏幕里主干道标注不超过10个,支路标注不超过20个,景点标注不超过8个。超出这个密度,用户就需要花时间“阅读”地图,而不是“扫视”地图了。
说说那些反人类的地图标注设计。有些地图把文字标注旋转45度或90度,理由是节省空间,结果用户得歪着脖子看。文字方向应该保持水平或沿道路走向,倾斜角度不超过15度。还有些地图用极细的字体做标注,在普通屏幕上根本看不清,只能截屏放大看。字体选微软雅黑、思源黑体这类无衬线字体,笔画清晰,粗细适中,别为了美观用那些艺术字体。地图标注的核心功能是传递位置信息,不是展示书法作品。
地图标注设计本质上是在做信息翻译。把复杂的地理空间翻译成用户一眼就能理解的语言。好的标注让用户觉得“这个地图很聪明”,差的标注让用户觉得“这个地图在跟我作对”。下次打开手机地图时,不妨留意一下那些让你一眼就找到目标的标注,它们背后都是设计师反复测试的结果。让信息一目了然,不是把什么都摆上去,而是把该摆的摆对地方,不该摆的果断删掉。这才是地图标注的终极心法。
(编辑:地图标注)
北京市密云区鼓楼西大街财智国际中心7层
