当Google Maps在2005年推出时,它是一种导航工具,可让您从A点到达B点。现在,它可以帮助您确定在班加罗尔的去向,了解乞力马扎罗山,以及探索大堡礁中的珊瑚形成。随着团队进一步发展,Google团队有了新的想法。新的色彩系统能否帮助简化Google Maps?在这里,Google Maps设计师与产品和工程经理一道,讲述如何正确呈现色彩,使Google Maps更易于访和识别。
2005年推出的Google地图
01
色彩的一致性
原始系统从森林沼泽到灌木,每个细节都使用一种颜色,导致差异非常微小,很难区分道路、文字和边界等重要元素。
调整配色首先需要做的是探索假设,即是否可以将调色板减少到更少的色彩,使之更接近于Material Design,同时保留Map的所有丰富细节。这需要设计师在旧版系统的代码本身中寻找颜色模式,全面了解多年来实施的颜色范围,但大量的颜色代码使工作量骤然上升。因此更加坚定了Google团队简化界面配色的想法。
旧版系统往往具有很高的复杂性,因此团队专注于简化的工作带来了无数的好处。新的色彩系统可帮助用户更好地了解周围的世界,同时使与Google调色板保持一致,更好的打造独有设计风格,建立品牌资产,也可以使我们的团队保持品牌前进的势头。
新的Google Maps调色板降低了复杂性并与Material Design配色保持一致
02 探索新系统
Google Maps团队进行了尝试,以区分地图细节,改善可访问性并减少颜色范围。先从较小的部分开始,去年,在看地图上的森林时,Google设计师意识到应用中有四种不同的颜色来代表几乎相同的分类,如果把这些颜色浓缩起来,地图还能用吗?这只是一个小发现,却是应用中一个极大的改进方向。旧版系统的数百种颜色不仅使地图解读繁琐,也大大加深了应用更新发布的难度。如果能成功地将颜色的数量降到一个可观的数量,那将使未来的发布变得更加容易。
删除了细微的色调和透明效果后的
为什么要使用这些颜色?如果我们能简化色彩系统。我们可以用更少的资源做更多的事情。
——Google Maps高级交互设计师
Googel想帮助用户了解这个世界的什么?该如何吸引他们对地图进行更多的探索?色彩系统的调整就是Google设计师开始改进层次结构以传达更多信息的方式。它能帮助你理解物理世界的事物 就像看着一张纸质地图,想象着白雪皑皑的山峰和遥远的森林一样,它更好地描绘了我们生活的世界,并增加了趣味性。
设计过程包括数百个草图,例如对水的探索
沙漠的探索
03
技术优势
如何让这些强烈的细节以一种仍然容易理解的方式流露出来?新设计的Google地图以卫星影像作为基础,并且已经应用了新的色彩映射运算技术,利用了卫星系统的实时更新,为地图增加了更多细节,可以更好地分析景观,对地形进行彩色更新。
除了对自然地形细节更丰富的更新外,Google 还会在特定程式中更详尽地显示细节。之前的地图仅显示了街道本身,但分别在纽约、旧金山与伦敦将很快区分显示不同的街道特征,例如道路、人行道、步行岛、人行天桥等,Google 表示新设计可以依比例显示任何特定道路的形状和宽度。
反映了卫星图像所采集的真实世界的色调
04
疫情中的设计
Google依据维基百科、纽约时报、约翰霍普金斯大学研究中心、Brihanmumbai Municipal Corporation等机构或组织的疫情相关资料,将数据整合在地图中。并依照色彩编码的方式,通过颜色区分疫情变化,地图上会显示每 10 万人当中新增确诊病例的平均数量,并且指出病例数量是上升还是下降的趋势。
领取专属 10元无门槛券
私享最新 技术干货