分享

LOGO设计这件事上摔跤的不只有小米,连Google的新图标也遭到了无数吐槽

 UXD尤克斯 2021-04-01

这两天小米公布了品牌新LOGO,耗时三年花费200w,由日本国际著名设计师原研哉设计。全网群嘲,网友:建议雷军直接报警。


同样深陷图标困扰的还有Google,到目前为止,大家看到Google的新风格系列图标已经用于其Workspace(以前称为G Suite)生产力工具例如Gmail,Drive和Meets等地方。面对这次新的图标升级,很多人都不约而同提出了质疑,对于全新的设计并不是很买账。



这些徽标被视为图标,是我们大多数时候使用它们的方式。他们可以帮助我们快速找到我们正在寻找的应用。不幸的是,这套全新的图标设计并未能满足优秀(可用)图标设计的基本要求:


图标的主要目标是快速传达概念。
————图标设计的7条原则

对于通常相互结合使用的一组系列化图标,图标的区分度至关重要!本文我们将详细剖析,新图标在哪些地方达不到其目的,以及我们可以对此做些什么。下面是几方面需要考虑的因素,可用于协助为不同的应用程序创建不同的图标:

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

Google显然在设计的时候,希望所有图标都具有Google风格,因此赋予了他们一致的视觉风格,但是在保持一致性的同时,却失去了其特殊性。如果样式是固定的,则需要在形状、颜色或者其他区域中进行明确区分,尤其是当此类图标很可能会紧邻使用时!

下图是一组我们对于Google的图标的细节上进行温和的优化的尝试,在尝试的同时,尽可能保持Google的新图标样式:


优化后它们与之前的版本看起来还是比较相似(本文结尾处甚至有一个更大胆的版本!),但是通过一系列细节上的更改,我们已经对整体的图标可用性方面进行了不少的改进:

-01-
图形优化

正如上面的一条推文中指出的那样,所有图标基本上看起来都像空心正方形,这使得按形状区分几乎是不可能的。在改进中,我们尝试对每个应用程序徽标的比例进行最小限度的校正,以使它们看起来更加鲜明,同时坚持Google的粗轮廓样式,中间带有负空格:


所做的更改微妙但通过改变可以更好地引起人们额度注意,尤其是在诸如浏览器选项卡之类的常见用例中,图标的尺寸将会非常小。


-02-
配色精简

分辨图标颜色有多明显的最简单方法是模糊它们,以使每个图标的主要颜色都可见。对Google的图标进行处理后,我们发现除了Gmail图标之外,所有图标最终都是无与伦比的彩虹汤。

在这次修改中,我们尝试为每个应用程序徽标赋予更多不同的颜色,同时仍保留彩虹色调,使Google产品感觉像谷歌一样。我们在尝试过程中将:

·绿色定义归还给Meets徽标;
·日历徽标上带有一些红色点缀的定义蓝色(更多信息请参见下图);
·仅将“云端硬盘”和“文档”图标保留为彩色。后者本质上是相同的应用程序,但是Docs图标从未在浏览器选项卡中使用,因此我认为让它们看起来类似是合理的:


将其与Microsoft的应用程序图标进行比较,我们可以发现Microsoft的应用程序图标可以通过颜色轻松识别它们,但整体的外观和语言设计,使得其仍具有连贯的品牌外观:



-03-
巧用熟悉的概念

与我们日常熟悉的概念发生联系。所有的设计并非凭空发生的,每天我们使用100甚至1000个应用程序和物理项目。为了能够立即识别图标,他们需要借鉴人们熟悉的概念。

仔细看一下Google的“日历”图标,它只是一个正方形,除了中间的数字外,与日历没有任何视觉上的相似之处。更糟糕的是,它与用户熟悉的形状和颜色都与旧的Google日历徽标截然不同。下图的修改是在坚持使用Google的新图标样式的同时,为新的“日历”图标进行更有意义的设计的尝试,使其保持与人们的原始认知保持同步。


-04-
设计系统限制性过强

花了一段时间尝试在Google的图标设计框架中创建可用的图标设计之后,我意识到对于它的用途而言,之前的设计罪魁祸首是限制性条件太过严格了。如果在浏览器中显示图标,则通常仅以16 x 16 pt的小尺寸使用图标。对于如此小的区域,图标设计系统需要留出足够的灵活性以在上面列出的至少一种区别类别中创建清晰可识别的图标。让我们看一下Google方法中的问题:


问题1:平均使用了所有颜色

大多数其他品牌使用颜色来区分其应用程序。每个应用程序都有一种原色-建立并运行良好的系统。Google通过将其所有原色强制放入每个图标中而错过了这一机会。当每个图标最终变成彩虹时,几乎不可能创建不同的图标。

Google可以通过更好地分配颜色来解决此问题,即为每个应用分配一个原色,该原色需要占其图标中80%左右的颜色。

问题2:始终使用轮廓

每个图标都必须使用粗线构造,并且所有图标的中间都应带有负符号。允许在一个图标的有限空间中创建多少个不同的形状?不要仅限于方形或圆形,图案的种类带来了极大的局限。

Google可以通过以下方式解决此问题:允许更多的笔触宽度,允许使用更多不同的形状(如Gmail图标所示),创建更精细的网格以允许更加权的颜色分布等。

问题的核心:品牌超过可用性

对于Google来说,底线很简单而且效果令人惊讶:图标设计系统的设计可以使用户轻松地区分任何Google应用程序与非Google应用程序。并非旨在区分各种Google应用。

但是仔细推敲你会发现这是错误的方法,用户很少平等地使用多个应用供应商。大部分Google用户将主要使用Google旗下的系列工具,因此图标的功能是主要区分Google应用程序的不同功能,而不是将它们与Microsoft Office应用程序区分开。这种失误对于Google来说尤其罕见,它通常将可用性放在几乎其他任何方面之上(除了利润)。

-05-
框架内的框架留白

除了上述这些基本问题以外,新图标还有更多问题。Google在将新的应用程序徽标放置在iOS的“应用程序图标框”中时非常保守:在Apple的框架内,Google在其图标周围创建了一个巨大的留白区域,而不是充分利用可用空间。在许多情况下,这会导致Google的图标看起来有些不够清晰,甚至变得无法识别。只需查看通知中的“日历”图标即可:


-06-
新的设计尝试

总结上述的问题后,我们忍不住要多做一些实验,以更多的自由使用Google的新图标样式:

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

下图是几组更大胆的变体:

扫码获免费留学咨询



UXD交互工业产品设计学院是尤克斯国际旗下的一家专注于交互、服务、工业、产品设计专业的顶级设计学院。除了一对一设计课、基础技能课程、小组课题、设计评图、联合教学外,我们提供不定主题的公开课和内部小组课,教学计划课程由三大部分组成,包括基础软件技能教学、设计理论系统讲座、申请必备知识解析等。



LOCATION
上海市徐汇区西岸创意园2栋 六楼
TEL:13641963425

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多