三款Android手机地图界面对比

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

https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/ https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

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

2. 地图界面

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

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

打开图层界面时，高https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/选项，两个是勾选框，逻辑不同，展现形式未尝不可统一

谷歌把图层功能列入https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

3. 更多菜单

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

这个界面中，百度底https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

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

4. 搜索页

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

百度搜索界面相比就https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/常具象，事物的关键特点抓得很准

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

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

高德和百度相同，会https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/拥挤，重复出现的关键词都淡化了，这点值得学习

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

5. 搜索结果

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

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

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

6. 地点详情

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

百度的详情页用了一https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/象、分享，都表现出了百度地图占据互联网入口的雄心。“大家印象”一栏的设计也很合理，把内容语义直观地体现在了颜色上。在信息结构复杂、信息量大的地方，处理好信息的层级与主次是头等大事，再加入一些图形化表达，能够起到事半功倍的作用。不过百度的这个页面仍然略显沉重，在空间狭小的手机屏幕上，同时使用色块与线框，很容易造成繁复的效果

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

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

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

7. 交通路线

高德的这个界面设计https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/，各种尺寸的按钮遍布输入框区域，线框一层包一层，臃肿不堪

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

然后我们看看搜索的结果

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

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

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

路线图页面，都大同https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

8. 周边信息

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

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

这是百度周边雷达，https://storage.fleek-internal.com/0a3a8890-e65e-47ce-93d7-0442b9209d38-bucket/

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