实例解析Google新Logo的设计演变过程

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:站酷   作者:狐狸爱设计

关键词

Google不是一家传统的公司,我们的使命是获取世界信息,并让它广泛地被理解、好用,能够持续发展。去年,我们推出了Material Design帮助设计师和开发人员去拥抱一个更广阔的跨设备、跨屏幕的世界。带着这样的考虑,我们很高兴去分享一个新的品牌形象,旨在让谷歌变得更好用,无论用户何时接触它。

说到底,Google的主页目前已经变得相当的简单:干净的白色背景上,一个可访问的输入框加一个色彩丰富的logo。但是随着技术不断向前发展,图像本身也正在变化,输入和需求也变得多样化。我们身边用于互动交流的新种类设备和方式也已出现,比如可穿戴设备、声控技术、智能设备等。用户通过使用一系列的设备正在与Google建议良好关系,与此同时,我们的品牌应该传递给用户期望从我们首页获得的简单和快乐,同时也要全面拥抱新设备和平板提供的机会。

下面要说的只是众多设计思考中的一瞥,结合那些认识和喜爱Google的点,使我们的品牌升级能保留活力并打破传统。

一起设计

年初,公司不同部门的设计师带着强烈持久的设计热情聚集到纽约,包括创意实验室和Material Design设计团队。我们拟定了要专注的4个挑战:

1. 一个升级的标志是能够传达整个logo模型在受限空间要传达的感觉。

2. 在交互各个阶段,要组建动态智能化运动,反馈给用户。

3. 在人们与Google的日常接触中,根植于我们产品的系统化设计能提供一致性体验。

4. 这是让我们变得Google化的一次改进。结合我们用户了解和喜欢的最好品牌,深思熟虑用户的需求是如何正在变化。

实例解析Google新Logo的设计演变过程

我们开始向下提取我们品牌的核心——在白色背景下的4种颜色,并且把它打破重组。便利贴粘上,图钉按下去,曲线动起来。上百小时的设计工作,纸张丢满了切割室的地板,让我们找到了一些让人兴奋的设计方向。

我们与整个组织团队分享想法。技术、商业分析、产品和市场部门都在检验这些想法,评估他们的可行性,跟我们一起迭代在设计和首轮决策中。这样的合作过程会使得一个系统在任何平台足够灵活地被使用:这次新logo由3个基本元素组成。

视觉组成元素

实例解析Google新Logo的设计演变过程

1、无衬线体标识保留了 Google 独特的四色。

2、logo标识为互动、辅助和过渡时做了一次动态升级,不再静态的图片。

3、Google G是google logo的一个紧凑版,运用于小的情景中。

理解这套设计系统

比呈现出来的核心元素和为了跨团队地运用在广泛平台而制定的规范,对整个设计的思考其实要深入复杂得多。下面的例子并不能全面的展示,但是能展示一小部分我们思考的过程

#FormatImgID_1#

Logo的构型

Google的logo已经有了一个简洁、友好和亲近的风格,我们想要保留它原本的这些属性,把数学几何的纯净与教科书字母印刷孩童般的纯真结合。新logo运用了一种特定的几何无衬线字体,保留了多彩的童心和我们先前logo中旋转的“e”字母,不过我们总是要做一些打破传统的事。

最终的logo是在各种新的数字环境中以最大化的清晰度,通过各种尺寸和字重进行了彻底地测试。为了指导在屏幕和印刷上的应用,我们制定了一套涵盖logo各方面的标准,包括间距、间隔规则、产品禁用、产品修复时的红线说明。

实例解析Google新Logo的设计演变过程

Google G的构成

Google G是直接来源于logo中的”G”,但是针对小尺寸的显示而比 logo 中的 G 具有更大的字重。它被设计在同样的网格中,作为我们的产品图标符号。这个圆形被升华为防止视觉上的“重复”。“G”中的色彩比例包含了logo中的全部颜色,颜色的顺序能帮助人眼围绕字母运动。这些点沿着几何弧线运动,遵循了一套曲线优雅运动的标准。

实例解析Google新Logo的设计演变过程

运动的点

Google dots是用于体现logo充满活力,是一个能和用户沟通的系统。他们代表着google在工作中的智慧,暗示google在为你工作。我们考虑了一些独特而不可思议的时刻,设计了一个全面的印象,包括听、想、回答、不解和确认多种状态的区分。他们的运动看起来很自然,4个点运动的路径和时间是保持一致的。

实例解析Google新Logo的设计演变过程

颜色

Google Logo从字母间的间距得益,但是当颜色是相邻的——比如Google G——他们光学上混合,间距可能导致现有的色彩变深变暗,所以我们去掉了红黄绿蓝色彩之间的间距,来保留原有色彩的饱和度和活力。

执行

实例解析Google新Logo的设计演变过程

排版

随着logo的开发,我们创造了一种现代的、几何无衬线字体来构成这个logo,以支持识别。我们叫它Product Sans. 这个文字的设计是从教科书的字母印刷术中获得灵感,但是采用了我们都期望从几何无衬线中获取的一致性。这允许我们能从google的产品名字和logo之间进行恰当的区分。这套字体包括数字、标点符号、重音和备选字符、分数、符号,支持扩展为拉丁语、希腊语和西里尔语。想要了解这套字体的详细内容,可点击以下链接:https://storage.googleapis.com/g-design/static/product-sans-specimen.pdf

实例解析Google新Logo的设计演变过程

产品

许多google的产品都将发布更新,对于大多数人来说,使用新标识的第一次体验都要被调研。UX调研团队努力传达文字和声音的初次表现,来说明这个标识给人们的一系列印象。

广泛发布

随着设计的介入,工程师为跨数据库的资产诞生、版本控制和自助分发开发了一套独特系统。从库里面使用像素化的SVGs,自动生成大量的矢量化图形来满足尺寸、颜色和背景的要求。这些变量让我们的源代码控制在一个规范的位置,以免重复,而且可以确保每个团队使用最新和最准确的logo。

无论新的logo用在哪里,,这种技术能帮助我们的设计得到像素化的完美展示,它使我们能在大小和延迟上进行优化,包括建立一个只有305个字节全彩logo的特殊的变量,而我们现在的logo字节是14000。旧的logo因为他的衬线体和更大的文件大小,需要我们为低带宽链接提供一个基于文本的近似值。新的logo减少了文件的大小,避免了这种应急方法和一致性上造成的巨大影响,尤其考虑到我们的目标是对全球用户而言更能用,更有用。

实例解析Google新Logo的设计演变过程

设计之外

设计只是所有成果的一部分。这个新的标识的实现需要大量跨部门,不同角色的google员工密切合作和辛勤付出。为最终建立和执行这套标识系统,他们提供了帮助,值得信赖。

因为我们将创造新的产品和体验,无论新技术将带我们到何地,我们希望这样的工作会继续给你想要的简单与快乐。

 收藏