Google 设计师在地图上的色彩探索

Google Maps 的体验设计师使用新的色彩系统,以简化真实世界的复杂数据可视化设计,耗时一年重新设计了 Google Maps,将原先 700 多种颜色的调色板,降低到了包含主要色调和次要色调的 25 种颜色,同时使地图更易于阅读和使用。本文为你总结出了这个过程中的几种核心的设计方法。

Google 设计师在地图上的色彩探索

1、降低复杂性

旧版本的 Google Maps 非常注重颜色的差异性,从森林、沼泽到灌木丛,每个细节都使用不同的颜色,但这也导致元素间的色彩差异性太小,也很难区分出重要元素,道路、路标和边界等重要信息都埋没在复杂的颜色系统中。

基于上述问题,设计师们从一开始就在探索:是否可以将 Google Maps 的色板与 Material Design 的色板相结合,以减少颜色的数量,同时尽可能的保留 Map 的丰富细节。

Google 设计师在地图上的色彩探索

△ 新的 Google Maps 色板降低了复杂性,并与 Material Design 保持一致

旧版系统的复杂性被简化,色彩数量从原先 700 多种降低到了 25 种颜色,新的色彩系统可以使用户更好地了解周围的世界,同时使其与 Material Design 的色彩系统保持一致,检验并深化了已有的色彩资产。

简化后的系统更容易更新,因此它也可以使设计团队更快地对产品做出优化。

Google 设计师在地图上的色彩探索

△ 改版前后的美国地图,删除了细微的色调和透明,使用了新的色彩系统

2、映射真实世界

Google Maps 希望将真实世界的丰富性带入地图中,并通过色彩的对比和布局,显示区域的实际外观和感觉。设计师们试图调动用户对世界的感知,吸引他们进一步探索地图,通过优化改进层次结构以传达更多的信息。

Google 设计师在地图上的色彩探索

△ Mt. Rainier 国家公园,用户可以在地图上看到雪峰的变化

Google 设计师在地图上的色彩探索

△ 冰岛,用户更容易理解不同地区的地形特征

Google 设计师在地图上的色彩探索

△ 西藏,灌木丛和沙漠等地区展现出更多的质感

3、结合技术优势

Google Maps 的升级离不开新的卫星技术,它使设计师具备了更多揭示地球细节的能力,也为设计突破奠定了更坚实的基础。现在的卫星技术,可以帮助用户确定冰岛的地貌、了解乞力马扎罗的山峦,甚至探索大堡礁中的珊瑚形成。设计师对于地图的每一步优化,包括版式、形状和肌理的效果,都取决和依赖于现实世界中的真实变化。通过利用技术,适时的更新可以为地图增加了更多细节和真实性。

设计师们尽可能的去理解所看到的卫星地图,挖掘卫星数据下景象的真实情况,并根据卫星传来数据实时的更新地图。比如下图中 Tundra 地区,现在看白茫茫的一片是因为刚下过雪,但这里其实并不是终年白雪覆盖,雪下面是坚实的土地和岩石。冰雪覆盖的面积会随着时间的推移而产生变化。

Google 设计师在地图上的色彩探索

△ Tundra 的更新反映了卫星图像采集到的数据

4、体现地域特色

Google Maps 为全球用户而建,因此团队认为有必要尊重世界各地间的情感与连接,让用户在浏览世界其他地方时能够意识到它的美丽和多样性。用地图体现不同地方的差异性,可以帮助用户了解更多物理世界的信息,更好地描绘我们生活的世界,并增加了意义。

Google 设计师在地图上的色彩探索

△ 设计师们收集的个人照片,以帮助比较世界各地的水的不同

5、构建评估体系

Google 的工程团队帮助设计师们构建了一些自定义的检测工具,使设计师们可以评估颜色关系和地图上地形之间的关系,从而将所有内容汇集在一起,使用系统公式进行测算,最终确定出合适的颜色。除此之外,设计师们也构建了灵活实用的 demo 演示体系,能够快速检验和迭代方案。

Google 设计师在地图上的色彩探索

△ 设计过程包括数百张草图,例如对水的颜色的评估和探索

Google 设计师在地图上的色彩探索

△ 对干旱地带和沙漠的颜色的评估和探索

Google Maps 用极简主义方法,释放了设计团队创造更详细的世界形象的能力。简化色板为产品和团队带来的益处颇多:

  • 地图视觉效果提升,信息得到了有效的传达
  • 产品更新迭代更加容易,提升优化效率
  • 从技术侧探索和调整了产品的底层逻辑与核心框架
  • 让产品更具备真实性、情怀和感染力
  • 搭建了有效的评估模型和工作体系,并可以应用于其他类似工作中去

以下视频是 Google Maps 的设计师讲述的项目体验:

图文参考:

https://design.google/library/exploring-color-google-maps/

业界动态

产品要想卖得好,设计必须有三好

2021-3-17 10:13:34

业界动态

OKR不只是OKR

2021-3-17 10:21:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索