新版百度地图界面背后的故事

简介:

 在2009年8月,Web版百度地图进行过一次大的改版,当时凭借着百度得天独厚的搜索优势,和地图简单易用的亲和力,在一个合适的时机,Web版地图市场占有率升至60%~70%,一直处于国内市场份额第一的位置。除了一些当时的环境因素外,产品本身的设计细节也决定了百度地图最后的成功与否。 

交互与视觉设计探索

在设计的过程中尝试了多套方案,每个小的细节的改变都有可能产生更大的进步。以公交方案结果页为例,主要目的就是要让用户第一时间,快速的获取最主要的路线信息,但也有很多辅助信息(如时间、距离、价格等)来更好的给用户以参考,为了便于人们在第一时间了解到不同方案路线,整体采用区块化的视觉展现形式,并将关键性的站点名称和车次名称突出显示,辅助性的参考信息居右弱化显示。通过颜色和图形形成一定的视觉层次,引导用户方便快速的提取各类信息。

问题

在使用百度地图的过程中,也会存在着一定的问题,通过多次的用户调研分析,调查问卷、眼动实验和沟通访谈等等,了解用户在使用过程中存在的真实问题。

新版界面改版的目标和结果

2010年末,决定重新设计百度地图界面。一是要解决现有存在的问题,二是要增强百度地图的功能和美化界面,进一步的提升用户体验,并为今后的发展打下一个良好的基础。

在交互设计上:通过简单易用的操作界面,让人们更加便捷的获取路线信息和地点信息,同时提供强大丰富的功能来满足人们日常生活中衣食住行的各种需求。

在视觉设计上:通过视觉语言,给人们营造出一种美观和简单可依赖的视觉感受,让人们在使用的过程中感到舒适和放松,努力使用户觉得是一种享受。

2011年7月,百度地图做了一次较大的变化,侧边栏从之前的右边移到了左边,同时将搜索标签移到了下方。经过2周的小流量测试,通过后台的数据分析、用户调研分析,很可惜最终得到的结果不完全是正面的。在收益并不明显,流量略有下降的情况下,还是决定保留已有的交互框架结构。

新的交互设计、视觉风格探索

在经过之前的一次改版尝试后,决定在现有大的结构基础上,进行新的交互和视觉设计。

灵感

在夏天的时候,有机会去参观了原研哉的设计展,对下面这幅无印良品宽广的广告留下了很深的印象,感觉非常的大气、清新和简单,后来在想是否能够把这样的感觉也融入到百度地图的界面当中。

新的交互设计

整合梳理工具栏,同时便于扩展
增加地图百宝箱(地图应用)
首页增加分类信息
收藏夹位置变化

新的视觉设计

文化习惯——秉承百度简单可依赖的文化理念,传达给人简单的感觉。
自身特点——作为工具性产品,给人以舒适放松的感觉。同时百度作为国内知名企业,要给人以专业、权威的感觉。
产品定位——传达给用户简洁、清新、现代、精致的感觉。

规范的制定

这次在设计的过程中,制定出了一套有效完善的设计规范,与开发人员密切配合,形成控件库,并最终做成网页版。不但缩短了开发时间,便于今后的查找使用,还使地图更加的规范和体系化。

结语

因为篇幅原因,只是大致的描述一下整个的过程,其中还有很多的故事和细节。这次改版的过程也有些曲折,但恰恰是这些大胆的试错,才能证明所做的决策是否正确,而不是对一些问题总是心存纠结,仅仅停留在主观判断的阶段,just do it。此外,这次整个的设计流程非常值得学习。

百度地图2009~2012

 

 

【本文首发于:百度用户体验http://xdc.baidu.com/?p=1144

 

本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/775492 ,如需转载请自行联系原作者

 

相关文章
|
7月前
|
监控 JavaScript 安全
百度搜索:蓝易云【如何使用nginxWebUI图形化gui界面管理nginx】
虽然Nginx本身没有官方提供的图形化GUI界面,但使用第三方工具nginx-proxy-manager可以实现通过WebUI图形化界面来管理Nginx的反向代理规则。这样,你可以更方便地进行配置和管理,而无需手动修改Nginx配置文件。
112 0
|
存储 容器
仿百度福袋红包界面
仿百度福袋红包界面
92 0
仿百度福袋红包界面
|
定位技术 API 开发工具
百度地图开发-显示地图默认界面 03
百度地图开发-显示地图默认界面 03
294 1
百度地图开发-显示地图默认界面 03
HTML5-12(对百度界面的简单解析)
HTML5-12(对百度界面的简单解析)
362 0
HTML5-12(对百度界面的简单解析)
|
Web App开发 搜索推荐
Chrome 私人珍藏-stylus插件实现个性化百度界面定制
Chrome 私人珍藏-stylus插件实现个性化百度界面定制
346 0
Chrome 私人珍藏-stylus插件实现个性化百度界面定制
|
7月前
|
存储 Kubernetes 容器
百度搜索:蓝易云【Kubernetes使用helm部署NFS Provisioner】
现在,你已经成功使用Helm部署了NFS Provisioner,并且可以在Kubernetes中创建使用NFS存储的PersistentVolumeClaim。
207 10
|
7月前
百度搜索:蓝易云【什么是HTTP长轮询?】
现在,HTTP长轮询逐渐被WebSocket等更高效的实时通信技术所替代,但了解HTTP长轮询仍然有助于理解实时数据推送的基本原理。
131 9
|
7月前
|
移动开发 Shell Linux
百度搜索:蓝易云【Shell错误:/bin/bash^M: bad interpreter: No such file or directory】
将 `your_script.sh`替换为你的脚本文件名。运行此命令后,脚本文件的换行符将被转换为Linux格式,然后就可以在Linux系统上正常执行脚本了。
76 8
|
7月前
百度搜索:蓝易云【ipmitool配置BMC的ip】
以上操作将配置BMC的IP地址为新的值。请注意,操作BMC需要谨慎,确保你对服务器有足够的权限,并且仔细检查新的IP地址、子网掩码和默认网关,以免导致服务器网络失联。
104 7
|
7月前
|
Kubernetes 应用服务中间件 nginx
百度搜索:蓝易云【使用Kubernetes部署Nginx应用教程】
现在,你已经成功在Kubernetes集群上部署了Nginx应用。通过访问Service的外部IP地址,你可以访问Nginx服务。
87 4