引起热议的 Google 新 logo 到底出了什么问题？

原创张宇旸 TCC翻译情报局

收录于合集

▲点击 "TCC翻译情报局" 关注，回复 "社群" 加入我们

本文共 3381 字，预计阅读 9 分钟
TCC 情报局的第 9 篇翻译
2020 年的第 9 篇

TCC推荐：大家好，这里是 TCC 翻译情报局，我是张聿彤。Google 推出的一系列新产品 logo，一度成为热议话题，使设计界一片哗然的同时，连自己员工都忍不住吐槽两句。新 logo 到底出了什么问题，作者从形状比例、色彩、认知隐喻和视觉风格这几个角度分析了新设计的问题所在，并利用色彩的识别度和突破框架限制的方式，提出了自己大胆的设计尝试，一起来看看，新 logo 的槽点在哪里吧。

最近，大家可能已经看到了 Google 对其旗下产品的 logo 进行了一次设计更新，包括Gmail，Drive 和 Meets 等在内的办公效率套件 Workspace（更名前为 G Suite）。也许你也和很多人一样，对这些新 logo 感到十分困惑。

Twitter 上对新版 logo 不太满意的评论

如果改变我们看待这些新 logo 的参考框架，那么我们就会清楚为什么许多人面对这些 logo 的时候会感到痛苦：我们可以将这些 logo（标志）视为 icon（图标），因为大多数时候都是这样去使用它们的，例如快速找到我们需要的浏览器页签。不幸的是，它们未能满足图标设计的基本要求，好的图标设计需要具备可用性：

图标的主要目标是快速传达概念。

— 图标设计的 7 个原则

对于一组图标来说，常常需要互相结合使用，这就意味着这些图标之间的区别至关重要！

如何创建不同的图标？

How to create distinct icons？

让我们详细探讨一下这些新图标的不足之处，以及我们可以采取哪些措施。我们可以使用多种方法为每个应用程序创建不同的图标：

形状和比例
色彩
熟悉的概念
视觉风格

我们仍然希望所有的图标都和 Google 的风格统一，因此它们应该具有一致的视觉风格。但是，我们决不能失去其主要目的。如果样式是固定的，我们需要在形状和颜色等其他方面建立明显的区别，尤其是当这样的图标很可能被近距离使用的时候！

在尽可能保持谷歌新图标风格统一的同时，尝试在细节上进行一些温和的优化:

图标从左往右分别是：Gmail，Calendar，Drive，Docs 和 Meets

乍一看，它们看起来比较相似（本文结尾处甚至有一个更大胆的版本）。现在，让我们从细节变化出发，探索提高图标可用性的具体方法:

形状

正如上面的一条 Twitter 评论中指出的那样，所有图标基本上看起来都像空心正方形，这使得按形状区分几乎是不可能的。

我尝试对每个图标的比例进行最小限度的调整，使它们看起来更加鲜明，同时保持了 Google 的粗轮廓样式，中间带有留白的负空间：

作者对图标实施了轻量的优化，并进行对比

颜色

想要查看图标颜色有多明显，最简单方法是将它们模糊化，这样就可以看出每个图标的主色调了。无疑，除了 Gmail 之外，其他图标最终都是难以区分的彩虹色。

我尝试在保留 “彩虹” 配色风格的前提下，赋予每个图标属于自己的配色特征，使得整套产品看起来非具有 Google 的风格。我尝试了以下几个步骤：

将标志性的绿色归还给 Meets
在日历的图标上使用大量的蓝色，并用一些红色进行点缀
仅保留 “Drive” 和 “Docs” 图标的彩色配色。后者本质上是相同的应用程序，并且 Docs 的图标从未在浏览器页签中使用，因此我认为让它们看起来类似是合理的

图标模糊后更容易辨认主色调

与此相比，Microsoft 的应用程序图标仅通过颜色即可轻松识别，且仍具有一致的品牌外观：

Microsoft 的应用程序图标

熟悉的概念

设计并非凭空产生的。我们每天使用的应用程序和实体物品即使没有上千个，也有上百个。为了使图标能够立即被识别，我们需要借用熟悉的概念，而这些概念是我们在日常生活中潜移默化吸收的，不知不觉就知道的。

让我们仔细看看 Calendar（日历）的新图标：它是一个正方形，除了中间的数字外，与日历没有任何视觉相似之处。它在形状和颜色上都与用户熟悉的旧版日历图标截然不同。

在保持 Google 新图标视觉风格的同时，我们尝试对新的日历图标进行更有意义的设计优化：

作者尝试对 Google 的日历图标进行设计优化

罪魁祸首：严格的设计系统

花了一段时间尝试在 Google 的图标设计框架中设计可用的图标后，我意识到对于它的用途而言，Google 的设计系统过于严格。如果在浏览器中显示图标，则通常以16 x 16 pt 的小尺寸使用在网页页签中。对于如此小的区域，图标设计系统需要留出足够的灵活性，在上文提到的形状、颜色、认知隐喻等方向中创造属于自己的特征，创建清晰可识别的图标。

—— 让我们看一下 Google 的方法中存在的问题：

问题1：使用的颜色过于复杂

大多数品牌使用颜色来区分其应用程序。每个应用程序都有一种主色，这有助于建立一个运行良好的系统。Google 将所有的品牌色都强加到每个图标上，从而错过了这个机会。当每个图标最终变成彩虹时，几乎无法创造出不同的图标。

Google 可以通过更好地分配颜色来解决此问题，可以为每个应用分配一个主色，这个主色需要占图标配色的 80％左右。

问题2：框架限制明显

每个图标都必须使用粗线构造，并且所有图标的中间都应带有负空间。在图标设计的有限空间中，能够创建多少个不同的形状？设计到最后，图标都会变成方形或圆形的，没有足够多的样式。

问题的核心：Google 重视品牌，高于可用性

对于 Google 来说，底线很简单，且非常令人惊讶：

制作图标设计系统，使用户可以轻松地区分任何 Google 应用程序与非 Google 应用程序。它不是为了区分 Google 自己的应用程序而设计的。

我认为这是错误的做法。用户很少均衡的使用多个供应商提供的应用程序。Google 用户将主要使用 Google 工具，因此主要需要区分 Google 应用程序，而不是将它们与 Microsoft Office 应用程序区分开。

这种失误对于 Google 来说尤其罕见，通常 Google 几乎将可用性放在最重要的位置（除了利润）。甚至连深浅的颜色都要经过测试，而不是让设计师来选择。令人惊讶的是 Google 在发布新版图标之前没有测试并发现这些问题。

更多的问题：在框架内再次嵌套框架

不幸的是，这组新版图标还有更多问题。Google 非常保守地将新版应用程序的 logo 放置在 iOS 的 “应用程序图标框” 中：在 Apple 的框架内，Google 围绕其图标创建了一个巨大的保护区，而不是充分利用可用空间。在许多情况下，这会导致 Google 的图标看起来不恰当，甚至变得无法识别。

下图的 Calendar（日历）图标可以明显看出此问题：

让我们更有创造力

我忍不住做了更多尝试，更加自由地使用 Google 新版图标的样式进行了发挥：

尝试为每个应用程序赋予明显的主色调
想创建在小尺寸下更易于识别的图标

所以，这是第三个更大胆的版本：

关键要点

设计 “logo” 时，了解品牌背景很重要。对于 Google Workspace 的 logo 设计来说，它们通常被用作图标而不是品牌 logo，因此在设计时应首先考虑可用性
相互结合使用的图标应在统一风格中具备各自的形状特点，并且每个图标应具有一种主要颜色

希望听到你对 Google 新 logo 的看法，也可以在留言区谈谈优化的新 logo 的意见！

原文：https://medium.com/design-bootcamp/why-googles-new-app-icons-are-pretty-bad-10f1ec40ab04

作者：Markus Hofmann

译者：张宇旸

审核：胖鱼

本文翻译已获得作者的正式授权（授权截图如下）

往期精选文章：

添加小助手微信，备注「社群」，即可加入读者群。

引起热议的 Google 新 logo 到底出了什么问题？

本文共 3381 字，预计阅读 9 分钟
TCC 情报局的第 9 篇翻译
2020 年的第 9 篇