首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Google地图15周年再设计!丰富色彩,隐藏彩蛋全揭秘!

当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 万人当中新增确诊病例的平均数量,并且指出病例数量是上升还是下降的趋势。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20210223A02UBZ00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券