由于工作需要,涉及到手机地图类的产品UI设计。凭经验设计的同时,也需要学习现有成熟产品,并进行研究对比。今天就把Android平台上的三款较主流的地图软件拿来对比,主要为研究它们界面优劣。三款地图产品分别为:高德地图 v5.1.2 、百度地图 v5.1.0 、 谷歌地图 v6.14.4 ,图片默认按照高德-百度-谷歌的顺序排列

1. 启动界面

这里的启动界面不是使用提示,而是每次打开的欢迎页

只有高德地图有欢迎页,百度和谷歌打开直接进入地图界面。欢迎页能够强调品牌,并且能概括产品设计语言。在这个作用上,高德的欢迎图片还是有效的,能够概括高德地图界面清新明亮的设计风格。但是每次打开地图的这个等待过程,也在考验用户耐心,有利有弊

2. 地图界面

可以看到高德与百度的界面布局比较类似,高德更加轻便,用色也基于白色,框体与按钮都更大,显得更加清新。百度的地图底部多了一条功能栏,后面我们会发现,这条功能栏确实能够体现百度地图的色彩语言,浅灰色、微妙的渐变,使得百度的界面风格比高德偏重一些

谷歌的风格就大相径庭,半透明元素,大量使用深黑色背景。相比之下,谷歌的渐变与阴影效果使用最少,界面最为扁平

打开图层界面时,高德会有个黑色蒙层,这是我个人比较倾向的做法,可以把用户注意力集中在他操作的区域。百度的这几个选项,布局上应该有更合理的方式。这5个项虽然三个是单选项,两个是勾选框,逻辑不同,展现形式未尝不可统一

谷歌把图层功能列入底部菜单中了,打开是个挺干净的列表,图标表义也比较准确

3. 更多菜单

高德的菜单从右侧滑出,这部分的设计和整体风格相去甚远,却也很有效地将它独立出来

这个界面中,百度底部菜单的渐变就显得很碍事了,菜单部分出现好几种深浅不一的灰色,有明显的杂乱感

谷歌的更多菜单只能通过手机的硬件menu键调出,功能较少,使用频率又低,文字列表足矣

4. 搜索页

高德的搜索页,把周边信息与历史记录一起列出来,采用白色背景的卡片式设计。这种灰色背景加白色卡片的设计,是高德重要的视觉语言

百度搜索界面相比就沉重一些,大片的灰色。为了给输入法腾出半个屏幕,百度把周边信息与历史记录分开成了3个tab页,左右滑动切换。值得称赞的是周边信息的图标,简单却非常具象,事物的关键特点抓得很准

谷歌的做法则完全不同,没有新开一个页面,而是直接显示了搜索历史列表,周边信息这里没有显示。这点很符合谷歌产品一贯的设计理念,较少的界面层级,减少分散注意力的内容

接下来我们在搜索框里输入点什么

高德和百度相同,会在新页面显示推荐的搜索结果,高德只显示标题,百度还多显示一行地址。界面设计方面,高德用色明亮,内容少,显得更加大方。百度边框和线条使用更多,有点拥挤,重复出现的关键词都淡化了,这点值得学习

谷歌还是保持了界面的一致性,和刚才的界面几乎一样,没有时钟标记的项目是推荐结果,与搜索历史区分开了

5. 搜索结果

高德的地点信息采用底部信息栏的方式展现,并且切换地点时,信息栏内容会有个左右滑动的效果,体验不错。地点的标记有轻微的立体感,比较Q。列表界面再次体现了卡片式设计的优势,视觉上有宽敞的感觉。按钮样式全都纯白背景,仅靠一条浅灰色边框与背景区分,识别度相应降低了,但也更加耐看,尤其在列表界面中,不会夺去文字标题的视觉焦点

百度由于底部有菜单栏,地点信息只能悬浮在地点上方,无论从视线移动或是点击操作上,都更加便捷,当然,也牺牲了内容的扩展性。地点标记是扁平样式,可以看到几个标叠在一起的时候,就看不出彼此界限了。界面整体颜色基调偏灰,百度在按钮的设计上,都一致采用了轻微的灰色渐变,按钮尺寸小。在列表页面中,地点图片与评分功能的加入,使得列表页的构图难度加大,通栏+分隔线的设计较为紧凑,美观度有所下降

谷歌的底部菜单内容是可变的,在初始界面点搜索,搜索便会从菜单上消失。在这个界面中,整个变成了列表按钮。这就是谷歌的逻辑,只给用户他们目前需要的东西,其他的都藏起来。谷歌的地点标记是我个人最喜欢的,比较修长,标记点挤在一起也清晰可辨。列表页中保留了搜索框,其实更多是充当了标题栏的作用,让用户知道搜的是什么。列表页也给每个地点配了图,只是由于天知地知的原因,清一色都是默认图片。其实谷歌的列表页布局和百度基本相同,但是背景色比较明亮,分隔线很淡,没有明显的按钮,都使得它阅读起来更轻松

6. 地点详情

高德的地点详情页,内容很多,却清晰严谨。只是展现方式比较单一,给人感觉是个纯信息展示页面,缺少互动元素

百度的详情页用了一张图片作为背景,也开放了上传图片的入口,内容丰富多了,展现形式也比较多样化。用户在这个页面不仅是个信息接收者,也可以制造大量信息:照片、点评、印象、分享,都表现出了百度地图占据互联网入口的雄心。“大家印象”一栏的设计也很合理,把内容语义直观地体现在了颜色上。在信息结构复杂、信息量大的地方,处理好信息的层级与主次是头等大事,再加入一些图形化表达,能够起到事半功倍的作用。不过百度的这个页面仍然略显沉重,在空间狭小的手机屏幕上,同时使用色块与线框,很容易造成繁复的效果

谷歌的这个页面信息就很少了,还把照片单独放了一个tab页,内容处理起来可以更加灵活。单色的设计很巧妙,异于大家常用的1像素宽分隔线,这种厚重带颜色的分隔线很醒目,通过亮色与留白来划分内容区域,使得界面非常宽敞

上面这些是通过搜索得到的特殊地点,我们长按地图空白处,能够得到普通地点信息

高德的优势在这里体现出来了,卡片式设计同时也体现了一种模块化的思维,在不同的界面中可以创造出统一的视觉效果。反观百度,任意产生的地点无法提供图片,而且风格与之前的完全不同,令人困惑。谷歌的也挺不错,去掉了图标与蓝色分隔线,却仍然保留了统一的风格,这其中功劳得益于谷歌界面对于留白的使用,使得留白也成为风格的一部分

7. 交通路线

高德的这个界面设计得挺有实验精神,摆脱了传统输入框样式,红蓝两条细线用得很妙,非常抓眼球。输入框的尺寸也是最大的,通栏设计很宽敞。相比之下,百度的这个界面一眼望去,各种尺寸的按钮遍布输入框区域,线框一层包一层,臃肿不堪

谷歌把交通工具选择放到下面来了,非常值得赞许,要知道4.3英寸的屏幕上,把手伸到屏幕顶端去点一个小小的按钮是多么痛苦。界面很简单,中规中矩

然后我们看看搜索的结果

关于出行偏好的设置,个人认为高德的做法比较合适。打开新页面,用户的注意力会回页面的上半部分,应该让用户先注意到偏好选项,而不是浏览完了列表才发现可以按偏好筛选。百度的起点终点在这里有些多此一举,我自己亲手选的地点,我还会不知道吗?而且用户也不会注意这个提示,他注意力都到列表上去了。视觉上仍然是卡片式与列表式的对比,高德的序号使用了倾斜的字体,有画龙点睛的效果,页面因此活络起来

这回谷歌的界面算是三个中最糟糕的。起点终点占了那么大一片区域,而这往往是用户直接忽略的信息。方案列表有点意思,把时间放这么大,车次却缩小放第二排。虽说用户关心的最本质是时间,最直接因素却是车次,这里替用户思考得有些过了。毕竟除时间外,公交车还有路况、舒适度等很多隐性因素,这些只有熟悉线路的用户才知道,却往往是比时间还重要的选择依据。不过整个换乘过程表达地很直观,步行、公交、地铁,一看图标便知

方案的详情页,各家都严格保持着列表的风格,需要着重一提的是高德与谷歌的时间轴(我暂时这么称呼)。有先后顺序的列表内容,尽管也可以像百度这样来展示,如果用竖线“串”起来,就能更直观地表达出时间这一抽象概念。高德的做法是最常见的思路,时间轴上的点,同时也是很好的内容划分标记,每出现一个点,意味着开始一个新步骤。谷歌的这个设计则更胜一筹,让时间轴本身具有意义。用户在习惯了实线虚线、红色蓝色的意义之后,从形状、颜色中获知信息的时间明显短于图标

路线图页面,都大同小异,更多是地图界面的比较。谷歌的时间轴中的色彩语言,可以在这里发挥余热,看颜色便知是什么交通工具,高德与百度只能把图标放置在各个节点上

8. 周边信息

高德地图的周边功能入口较深,要从更多菜单中进入。不知道是否只有我这么感觉,左边的图标部分,很像缺少图片的默认头像

百度对O2O入口的野心在这里就能看出来,周边信息的入口,竟然有3个。左图是菜单中的入口,布局与高德相同,不过与高德一比较,说实话阴沉死板不止一点点。右图是通过点击地图上当前所在地点进入,这个界面与百度整体风格差异很大,有点活动专题的感觉,吸引力强于纯粹的信息列表

这是百度周边雷达,一个APP级的功能,可以直接在桌面生成快捷方式,并且越过地图界面直接启动。界面简洁直观,不过数字偏小,绿色的背景光让图标与文字难以辨认

谷歌在周边信息上没有下多少功夫,应该说在功夫网内没下多少功夫。尽管信息少得可怜,这个页面在视觉上仍可圈可点。从之前一系列的界面可以看出,谷歌地图大量应用了半透明元素,顶部那一小块地图背景算是个投机取巧的例子。多试几次才发现,这其实只是张固定图片,却给用户产生一种地图就在背后的错觉,用户知道自己没有离开刚才的界面,对这个新开页面的敌意必然要降低不少

9. 设置和关于

文字列表类的界面其实没什么可说,不需要承担让产品形象出彩的任务,延续既有视觉风格就好

百度特喜欢在大标题下面加小字,这种形式的目的不是为了美观,只是为了多展示信息。在这个界面,既然标题就能说清楚,相同的意思何必再重复写一行?

至于谷歌,这个就是原生Android的holo风格啦

10. 导航

谷歌的导航在墙内似乎不可用,这里就不参与比较了。之前对比过公交路线的界面,这两个也差不多。高德可以直接在这里添加途经点,还能设置驾车偏好,百度只有导航开始才能设置

这两个界面也和公交的类似,两者也都在路线上标注了路况。这里顺带提一下高德这种底部信息栏的设计,扩展性很强,信息栏往上滑,又能开辟一块巨大的信息展示空间

进入导航之后,高德左侧的这个路况还是很实用的,只是我没明白灰色代表什么,没有数据?这里仍然要吐槽一下百度,同样是行程公里数与所需时间,像高德这样简单列出来不行么?字够大够清晰就好了。百度的字那么小,中文字还要特意再缩小,又放在那么狭窄的地方,旁边两个图标也并没有让它更好辨认,这不是故意找茬么?

地图APP属于随手打开完成任务即关闭的产品,讲究简单高效。如何在匆匆几眼与寥寥几次点击中胜过对手产品,自然是莫大的挑战。反复研究现有产品,总能为手头的工作找到灵感 →_→