在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象

    Collection

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图1

    ** 原文引自 Google Design 上的一篇文章 Exploring Color on Google Maps ——How a minimalist approach unlocked our ability to create a more detailed representation of the world。该译文并非完整原文,内容已做删减和部分调整,并加入了部分译者观点。**

    谷歌地图作为一个真实世界的数据可视化产品,它原有的复杂性是否能通过一套新的色彩体系进行简化呢?这个想法引发了团队长达一年的合作,并最终交付了令人满意的答案。而在此之前,自谷歌地图上线 15 年来,没有任何人认为这个挑战能有结果。他们竟然将历史遗留下来的 700 多种颜色,简化到 25 种(含主要与辅助颜色),并通过这种方式进一步提升了谷歌地图的易用性和识别性。

    本期提纲:

    1. 启动本次项目的契机
    2. 原有的谷歌地图存在哪些问题

    3. 如何改进现有的问题

    4. 最终效果

    1

    启动本次项目的契机

    •**成熟的卫星技术 **

    应用了新的卫星技术后,这种技术让我们(本文中的我们均指代谷歌地图团队)可以更好地揭示地球的细节。它也为将来的设计突破奠定了更坚实的基础。

    **• 谷歌地图形态的演变:从导航工具到日常的伴侣 **

    当谷歌地图在 2005 年推出时,它是一种导航工具,可让你从 A 点到达 B 点。现在,它可以帮助你决定在班加罗尔的去向,了解乞力马扎罗山,以及探索大堡礁中的珊瑚构造。谷歌地图这种形态的演变,对地图的呈现方式也提出了进一步的要求。

    **• 团队也在不断发展,发展本身需要更系统的方法 **

    团队不断发展,地图的内容、排版、形状和纹理等元素也在不断地完善,想让谷歌地图可持续地发展下去,更需要严格、系统的方法。于是,我们的设计师与产品、工程经理们一起讨论下一步该如何呈现色彩。

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图2

    ▲ 2005 年推出的谷歌地图

    2

    发现问题 —— 无数的颜色

    本次设计优化的对象是一个长达 15 年的历史遗留系统,而遗留系统会面临的挑战则是,其部分内容可能并没有文档记录。于是,我们从代码里统计了地图总共使用的颜色数量,发现竟然多达 700 多种。其实,色彩丰富本不是问题,色彩丰富却未准确传递出地貌的特征,甚至导致较差的易用性才是问题所在。总结起来可以分为以下几类问题:

    未客观地表达地貌应有的颜色:比如在以前的地图里,加拿大北部苔原地区的颜色是浅灰色的,但实际在卫星地图中却是像石头一样的深灰色;非洲沙漠使用了浅黄色,这和我们对沙漠的认知是有出入的,浅黄色并没有准确反映出沙漠本身的特征。

    不同地貌却使用了同样的颜色:从森林、沼泽到灌木的每个细节几乎都使用一种颜色,这也导致不同地貌的差异过小,以至于很难区分一些重要的元素,如道路、文本和边界。

    用多种颜色来表示同一种地貌:当团队成员在看地图上的森林时,发现我们用四种不同的颜色来代表几乎相同的内容。

    总而言之,以前的谷歌地图并没有一套规范的色彩体系。

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图3

    ▲ 卫星地图和以前谷歌地图苔原地区的色彩比较

    3

    如何做 —— 探索新的颜色系统

    谷歌地图团队进行了许多实验,来尝试表达地图更多的细节、提高其易用性,并进一步减少颜色的数量。

    理解原有地图的颜色为什么是这样的 **

    首先,我们开始问为什么这些颜色是这样的。通过对原有地图的颜色提出质疑,我们有了更充足的理由可以重新设计,即我们可以用更少的颜色表达更丰富的细节。

    **•从假设开始 **

    在了解了地图的复杂性后,我们围绕想要回答的问题展开讨论:我们试图帮助用户了解世界哪些内容?我们该如何吸引他们进一步探索地图?我们提出了一个大胆假设 —— 是否能够简化这个复杂的系统,直到一组与 Material Design 更匹配的核心颜色,并通过保留地球丰富细节的方式,将生命力或能量带入地图中。

    **•先进行小范围的实验 **

    之前,在地图上浏览森林时,我们意识到现在的地图用四种不同的颜色在描绘几乎相同的事物,并想到:“如果我们将这些颜色进行压缩,地图是否仍然有效?” 于是我们开始以森林为主题进行实验,这次实验虽然体量较小,但它的推进让我们快速积累了经验,也为我们下一步 “减少更多地貌颜色数量” 的计划奠定了基础。

    **•调动个人的感受 **

    颜色能够激发人们的感觉,唤起记忆,唤起快乐或悲伤,也能在地图上反映不同地方的自然特征,对我们来说颜色真的是一种非常神奇的元素。

    整个设计过程并非凭空选择颜色。而是根据我们在谷歌进行设计时大多数时间会使用的色板,并结合真实生活中看到的自然景观(设计师的个人照片 / 通过卫星工具采集到的真实图像),来思考如何建立二者的联系。

    而其中的决策依据更多地来自团队个人在真实生活中的感受和经验。即选择的颜色是否真的能反映这个地方?我们花了很多时间思考这个问题,就像思考自己长大的地方一样。比如对首席视觉设计师 Dana Steffe 来说,她会思考北密歇根州,尤其是在某些非常特定地域下自己的童年回忆。她也会去调动自己在这个空间下曾经的感受 —— 中西部的夏季,在草原上奔跑的感觉;去湖边扎营时,那片土地是如何使其感知的。不得不说,颜色是我们在特定时空下获得的体验中,非常重要的一部分。

    水是设计过程中非常有趣的板块之一。水对人来说是如此的私人,你成长的地方,在很大程度上决定了你如何看待颜色以及你赋予它的情感层次。

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图4

    ▲ 设计师分享了个人的照片,以帮助比较世界各地水的形态。

    实际上我们不得不做 50 - 100 次关于水的实验,来决定如何改变水的颜色,并以一种相对正确的方式呈现给人们。为了达到这一目标,在设计时,我们不仅需要放大草图来查看具体的颜色,也需要缩小至不同的视野高度来检验其表达的合理性。

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图5

    ▲ 设计过程包括数百个草图,例如对水的探索。

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图6

    ▲ 干旱和沙漠的草图

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图7

    ▲ 渡轮路线的想法

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图8

    ▲ 城市灰色研究

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图9

    ▲ 苔原范围

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图10

    ▲ 珊瑚礁探索

    **对易用性进行评估 **

    开发团队帮我们制作了一些定制工具,让我们可以观察世界上的特定地区,并对其进行易用性测试 —— 我们可以通过这个工具来评估最常见的颜色关系,例如陆地与水面的关系,或特定类型的文本与绿色植物的关系。这样我们就知道下一步该如何优化。

    4

    最终效果

    我们尝试将地图的复杂性降低到真的改善了诸如对比度等已知的用户问题,比如确保道路的感知是清晰的,易访问的。但即使我们降低了复杂度,我们依然可以做到向用户真实地反映他们所生活的世界,并用一种人们认为有意义的方式来呈现地球的活力。

    颜色是个人的,我们生活的环境也是个人的,地球通过用户每天都会使用的地图工具来反映其自身的面貌。对我们而言,这次色彩系统的更新,其实也是一次为人们和环境建立更稳固联系的机会。

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图11

    ▲ 新的谷歌地图色板降低了复杂性并与 Material Design 保持一致。

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图12

    ▲ 优化前后的美国地图,删除了细微的色调和透明度后,大胆色彩让地图的细节可以被更好的识别

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图13

    ▲ 雷尼尔国家公园,人们甚至可以在地图上看到雪峰!

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图14

    ▲ 冰岛,更容易理解不同地区的地形。

    在谷歌地图上探索色彩 —— 如何通过极简之道来塑造更丰富的世界形象 - 图15

    ▲ 西藏,灌木丛和沙漠地貌地区展现出更多的质感。