Chrome图标是如何重新设计的

534 阅读5分钟

经过八年多的时间,我们在今年早些时候为Chrome浏览器的第100次更新推出了一个更新版的Chrome图标。今天,我与用户体验交互设计师Elvin Hu和视觉设计师Thomas Messenger进行了交谈,了解了Chrome图标设计的幕后情况。

Chrome图标最初是要代表什么的?

托马斯。当我们在2008年推出Chrome浏览器时,我们的目标是建立一个快速和易于使用的浏览器,而没有什么比火箭船更能代表速度了!但是我们的团队决定不再使用Chrome浏览器的图标。但我们的团队最终决定放弃字面意义上的火箭飞船,而是采用了一种看起来平易近人、可点击的设计,同时也体现了谷歌的精神。

Image of a rocket ship, which was the early iteration of the Chrome icon

Chrome图标的最初创意之一

你为什么现在要做这个改变?

埃尔文:这个标志已经有八年没有更新了,我们想给它一个全新的、现代的外观,以反映Chrome作为一个产品的演变过程。我们还注意到,现代操作系统的视觉设计在风格上越来越多样化,因此,无论你使用什么设备,Chrome的图标都要让人感觉更适应、更原生、更新鲜。

在不同的操作系统中,Chrome的图标看起来会有什么不同?

埃尔文:我们简化了主要的品牌图标,去掉了阴影,细化了比例,亮化了颜色,以符合谷歌目前的品牌设计。我们还发现,将某些深浅不一的绿色和红色放在一起,会在两种颜色之间产生令人不快的 "光晕",因此我们在主图标上引入了非常微妙的渐变,使图标比使用平面颜色更容易被人看到。然后,我们创建了针对操作系统的定制。我们希望这些图标能让人感觉到Chrome的存在,同时也能为每个操作系统精心制作。

  • Windows菜单栏的图片。应用图标使用了更明显的渐变色,在Windows 10和11上显得很自在。

    在Windows上,图标使用了更明显的梯度,在Windows 10和11上出现在家中。在ChromeOS上,它们使用更明亮的颜色,没有梯度,以配合其他系统图标的外观。

  • macOS菜单栏的图片。应用程序的图标看起来更有立体感,所以我们应用了彩色的色带来表示应用程序的Beta版本。彩带在大尺寸观看时包括许多细节,但在小尺寸时转化为简单的徽章,保持其可读性。

    在macOS上,图标看起来更加立体。我们应用了彩色的色带来表示应用程序的Beta版本。这些色带在大尺寸下包括许多细节,但在小尺寸下则转化为简单的徽章,保持其可读性。

  • Chrome和Chrome Beta应用图标的图片。Beta版应用图标采用了类似蓝图的设计,向苹果公司以开发者为中心的应用致敬,而消费者就绪的应用图标则采用了瓦片上的新比例。

    在iOS上,我们的Beta版Chrome应用有一个类似蓝图的设计,作为对苹果以开发者为中心的应用的点头,而消费者就绪的应用图标在磁贴上有新的比例。

这似乎是一个微妙的变化。你是否考虑过一个更重大的改变?

托马斯。我们考虑过在探索阶段,我们尝试了各种想法;软化角落,不同的几何形状,是否用白色分隔颜色。我们还尝试了进一步偏离我们在过去12年里一直使用的整体形状的方案。但我们知道谷歌的四种颜色和圆形构图的认可度有多高,所以我们决定不要太偏离这个方向。

Image of various design explorations of the Chrome icon

几个提议重新设计的Chrome图标的例子。

在设计过程中,有什么让你吃惊的地方?

埃尔文:设计过程对每个人来说都是一个有趣的合作性挑战。团队举行了虚拟的头脑风暴会议,产生了各种概念,力争成为Chrome浏览器的新 "面孔"。

在提出总体方向后,我们在不同的环境下对许多颜色、渐变和比例选项进行了压力测试。即使颜色的变化是微妙的,我们也想确保图标不会在它出现的任何地方丢失。有一次,我们对图标中特定的绿色渐变感到高兴,但经过全面测试,我们发现它与默认的Windows 11壁纸(和任务栏)融为一体--这在我们很多用户中很受欢迎。正是这样的测试,确保了我们的图标在任何地方都能很好地工作。

Image of two Chrome icons on a Windows desktop - one icon with a brighter green and the other with a darker green - to test color palettes in different contexts and platforms.

标题。我们进行了几轮压力测试,以确保图标的调色板能在不同的平台和环境中协调一致地工作。

你是如何考虑让更多的社区能够接触到这个图标的?

托马斯。我们修改了中央蓝球的比例。在与低视力的Googlers的合作中,我们发现精炼的比例和更新的中央白色笔画使它更容易被识别。我们还为小尺寸的图标制作了不同的版本,以提高可读性,并通过对准像素的边界来避免模糊性。

An image of a side-by-side comparison of Chrome actions and how the updated icon improves legibility at smaller sizes and aligns to pixel boundaries.

侧面比较Chrome浏览器的动作,以及更新后的图标如何在小尺寸下提高可读性并与像素边界对齐。

您是否会恢复原来的Chrome图标?

埃尔文:永远不要说 "永远"!我们已经调查了定制的应用程序图标。我们已经调查了自定义应用程序图标,发现每个平台对它的支持程度不同。也许有一天我们会在支持它的平台上把它作为一个选项带回来。