IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

听Google设计团队讲述新logo是如何被设计出来的

Catherine • 2017-06-04 08:26 • 交互设计

[核心提示] Google 为什么要换 logo,这个新 logo 是以什么样的理念和思路设计出来的?来听听 Google 设计团队自己的解释吧~

文章目录[隐藏]

  • 共同设计
  • 新元素
  • 了解这个系统
  • 实施过程
  • 超越设计

听Google设计团队讲述新logo是如何被设计出来的

[核心提示] Google 为什么要换 logo,这个新 logo 是以什么样的理念和思路设计出来的?来听听 Google 设计团队自己的解释吧~

Google 从来不是一家循规蹈矩的公司,我们的目标是帮助人们可以充分利用世界上的信息并从中获益,并且不断向前进步。去年,我们就开发了 Material Design 去帮助设计师与开发者们进入一个广阔的、多设备的、多屏的世界中去。因为有这些想法在心中,所以我们非常高兴地与你分享 Google 新的品牌形象:不管你身在何方,我们都希望可以帮助你更轻松、更有效地使用 Google。

从一开始,Google 的官网设计就非常简洁:在白色的页面中间是显眼的搜索输入框,在它的上方,则是 Google 独特多彩的 logo。科技是不断向前发展的,页面也在不断改变,输入方式与用户需求也在不断变化。新的用于沟通交流的设备与途径正在出现,尤其体现在可穿戴设备、语音技术以及智能设备等方面。用户们现在使用各种不同的设备登录 Google,而我们自己也应该在首页向用户传递他们所期待的简洁有趣的感觉,这样才可以拥抱不同设备与平台所带来的机会。

现在,我们要向你介绍一下我们的设计理念,那就是:了解用户熟悉和喜爱 Google 的地方,在此基础上发展我们的品牌,努力成为一家有活力的、不墨守成规的公司。

共同设计

今年早些时候,包括创新实验室 (Creative Lab)、Material Design 团队在内的来自不同公司的设计师们,在纽约召开了一个为期一周的紧张激烈的设计会议,我们起草了 4 项想要去完成的挑战:

  1. 创造一个可以在有限空间内传达完整标识的可扩展性标志符号;
  2. 通过动态化与智能化概念的结合,做到在交流中的每个阶段都可以回应用户的需求;
  3. 通过系统化的方法使我们的产品品牌化,为用户在日常使用 Google 的过程中提供一致性的服务;
  4. 使 Google 的风格精致化,并结合用户熟悉和喜爱 Google 的地方,在此基础上对用户需求的变化进行周密的分析。

听Google设计团队讲述新logo是如何被设计出来的

我们从提取 Google 的品牌精华入手,以此找到了关键因素——在一块白色背景上的四种颜色——并把它们组合在一起。虽然工作室里混乱不堪,胶水粘在一起,图钉散落一堆,但随着花费在里面几百个小时的设计工作,我们找到了几个让我们感到激动的新方向。

我们在团队中分享自己的想法,工程部门、研究部门、产品部门与营销部门各自反复检验不同的想法,并且测算不同想法的可行性。这个通力合作的过程终于完成了一个足够灵活的、可以被用在不同平台的营销材料和产品任务中的新系统:由3个基本状态构成一个单一的 logo。

新元素

「Google」标识

使用无衬线字体,同时保留了 Google 独特的颜色使用顺序。

听Google设计团队讲述新logo是如何被设计出来的

Google 圆点

在互动性、辅助性及流畅性方面,这个标识进行了动态提升。

听Google设计团队讲述新logo是如何被设计出来的

Google G

对于界面较小的使用平台,Google 也推出了相应的「紧凑」版本的 logo。

听Google设计团队讲述新logo是如何被设计出来的

了解这个系统

Google 在思维与设计方面的发展比起一些核心元素要走得更远,因此开发出一套规范可以帮助整个团队在不同方面保持一致性。下面的例子并不能完全说明问题,但是也展示了一些我们对于这个系统的想法。

标识

Google 的标识一直保持着简单、友好、亲近用户的设计风格,通过结合 logo 原有的几何形式与新的、儿童化的教科书字体,我们想要继续保持这些特点。我们新的标识设定为自定义的无衬线字体,同时继续维持多种色彩的轻松风格,并且将原有标识中的字母「e」进行了旋转—这是为了表明 Google 永远追求创新的理念。

最终的标识经过了很多严苛的测试,其中包括尺寸的问题,以及在不同的数字化场景中呈现的清晰度问题。同时,为了指导用户在屏幕上的使用和打印,我们开发了覆盖所有领域的关于 logo 的标准,其中包括 logo 的位置、清除 logo 的规则、以及产品的出版与印刷方法等各个方面。

Google G 的构造

Google G 是直接从 Google 标识中的「G」发展出来的,但是增强了在小尺寸界面下使用视觉效果。作为在同一个网格内设计的产品形象,圆形的设计从光学角度防止了视觉上「过于集中在一点」的问题,而色彩的比例传递出标识的完整光谱,颜色的顺序也有利于看这个字母时的视线运动。

运动中的 Google 圆点

Google 圆点是 logo 在动态的、永恒运动中的状态。它们既展现着 Google 在工作当中的聪明才智,又能显示出 Google 正在为你服务,我们认为这是一种独特的、奇妙的运动形式。一个完整 Google 圆点的展现形式包括倾听、思考、回复、不解、以及确认这几个步骤。也许他们的动作看起来是同步发生的,但它的运动基于一致的路径和时间。

色彩

Google 的彩色标识很显眼,这受益于字母式 logo 之间的空白区域。但是当颜色很接近时——比如 Google G 的例子——他们从视觉上就容易混淆,并且可能导致最初的想法受到影响。因此,我们调整了颜色的种类,选择了有活力的红色、绿色和黄色去维持 logo 的色彩饱和度和流行性。

实施过程

印刷

为了配合新标识的开发,我们创造了一个几何无衬线的自定义字体,以此来补充产品的标识识别及设计材料,我们叫它「Product Sans」。字体设计的灵感来自相似的教科书字体风格,但是采用的是无衬线中性化的一致风格。这使得我们可以在 Google 的标识与产品名称之间维持一个恰当的区别。字符集由数字、标点符号、发音、备选字符、分数、标志以及一些诸如拉丁语、希腊语在内的扩展语种完整组成。

产品

尽管 Google 旗下的许多其他产品都将会得到更新,但是对于大多数用户来说,他们对于这个新标识的第一印象还是来自于搜索页面,因此,搜索方面的用户体验团队及工程师团队努力去提供文本及语音搜索的实施方案,完善了产品的全方位展现。

更广的分布

随着设计的发展,工程方面也根据我们的代码库开发出了一个面向资源生成、版本控制、及自助服务分布的独特方法。使用在基础设置上像素完美的 SVGs,我们自动生成了上千个基于矢量的变体去满足不同尺寸、颜色和背景的需求。这些变体被放进一个典型的场景当中进行源代码检验,以此来避免重复的情况,并且可以确保每一个团队都在使用最正确的、最新的资源。

这帮助我们做出了在每一个方面都像素完美的设计,并且让我们可以优化这些资源的尺寸和延迟时间,其中包括开发一个只有 305 个字节的全彩 logo 变体(过去使用的全彩 logo 需要 14000 个字节)。旧的 logo,因为其复杂的字体衬线和更大的尺寸,需要我们为宽带连接不畅的用户提供基于文本的「相似版」logo。但新的 logo 则缩减了文件大小,避免了这种被迫的解决办法;而当我们面向用户,想要让 Google 更加接近他们、更加便于他们使用时,产品的一致性也可以得到完全的发挥。

超越设计

设计只是我们努力中的一部分而已,新标识的实现需要集体的努力以及上百位不同职能的 Google 员工的智慧。为了建设并实施这个最新的像素系统,他们值得充分的信任。

因为 Google 一直致力于创造新的产品和新的用户体验,我们希望这一次的工作可以传递出你想要在 Google 看到的、感受到的简洁与乐趣—无论新的科技将会把我们带向何处。

编者注:本文全文翻译自 Google Design 官方博客,原文标题为「Evolving the Google Identity」(https://design.google.com/articles/evolving-the-google-identity/)。转载务必注明本文和原文链接。

来源:http://www.geekpark.net/topics/213332

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/32196/

GooglelogoMaterial designPS产品产品经理分享场景字体沟通灵感用户用户体验视觉设计设计师转载
赞 (0)
CatherineCatherine
0
生成海报
传递数据背后的故事——图表设计
上一篇 2017-06-04 07:15
(全解析)屏幕尺寸,分辨率,像素,PPI之间到底什么关系?
下一篇 2017-06-04 09:21

相关推荐

  • Fitbit:一份用户体验案例研究

    当谈论到锻炼时,这个世界上有三类人:每时每刻都在健身的健康达人;那些一天中全部锻炼内容就是从前门走到车里,每天在沙发看电视的人们;在这两者之间,想变的健康强壮但缺少一些动力去健身房的人(又称在屁股上踢一脚才行动的人)。 我,和我知道的大多数人一样,都是第三种类型的人。我们被称为是

    微信热点 2018-03-31
  • 38个界面设计技巧 交互设计

    38个界面设计技巧

    1 尽量使用单列而不是多列布局单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文…

    2014-10-28
  • 抢先看:微信官方发布的微信应用号(小程序)设计规范 交互设计

    抢先看:微信官方发布的微信应用号(小程序)设计规范

    微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的,旨在微信生态类建立有号、高效、一致的用户体验的同时,最大程度顺应和支持各业务需求设计,实现用户与程序的共赢。

    2017-05-18
  • 交互设计

    译文 | 交互设计的5大支柱

    文中提到的《交互设计最佳实践:卷1》/《用户体验设计文档指南》/《2014年Web UI模式》可在此处下载,建议先保存到网盘~

    2017-05-27
  • 交互设计

    我们如何创造先进的经验生态系统?

    "物联网是有趣的因为它迫使我们重新思考我们有与对象的交互范例 — —,东西是不同的关于智能对象与 '哑巴' 一个与我们接触"Thomas Wendt 写在他最近的 UX 杂志文章,"互联网的东西。"和手上的工作

    2015-01-03
  • 听说微软这次硬了?苹果赶紧发布了个触摸条压压惊! 交互设计

    听说微软这次硬了?苹果赶紧发布了个触摸条压压惊!

    #交互学堂# 前天晚上,#微软# 赶在 #苹果新品发布# 会的前头抢先发布了一波硬件产品,出人意料地推出了Surface Studio 一体机以及交互配件 Surface Dial。一时间设计夹小编朋友圈里的设计师们都沸腾了,惊呼 “巨硬…

    2016-10-28
  • 交互设计基本原则(第二部分:默认和可见性)【UXRen译#157】

    作者:Bruce Tognazzini  |  翻译:邱金,校审:Chen Jing   一、默认Defaults 1.1 原则:输入框的默认值应该很容易“吹走” 当用户激活一个输入框,当前条目应该自动被选择,以便按退格/删除键或开始键入来清空条目…

    交互专题 2017-08-07
  • 今天的互联网设计师很有“钱途”,如何才能更好地理清自己的发展方向? 交互设计

    今天的互联网设计师很有“钱途”,如何才能更好地理清自己的发展方向?

    哪种设计师价值更高?如何才能更好地理清自己的发展方向?本文将对交互设计师(或者称UI设计师)发展的三部曲——器、势、人分别进行讲述。全是干货分享,好好吸收吧,因为这三部曲基本会贯穿你的职业生涯。我要不要学XX软件啊?软件要不要报班啊?一个四十岁的土老板,每天最多的事就是接打电话。老板每天可能会打几百个电话,这个频率是你们想象不到的,他可能随时随地都在打电话,而很少用微信、QQ。传统手机接打电话非常方便,按下按钮或翻盖闭眼都能接电话,用智能机反而不方便,所以他希望自己用的还是传统手机。但是传统手机太低端了,老板担心同行和下属嘲笑他,就很纠结——于是我们的手机就诞生了。任何项目第一保证的都是效率。

    2017-05-17
  • 微信热点

    以服务设计视角推动设计赋能

    作者:阿里UED 周静&谢辉敏小编说:未来的设计都应该归纳服务设计的范畴,包括用户体验设计、交互设计等,比如新零售设计就是一套完整的服务设计体现,不要等服务设计成熟了再去设计,谁先先学习,谁就抢占了先机~~为未来充点电!本文较长,读完需要点耐心~~近两年随着UED团队的探索,沉淀出了业务协同、设计增值、设计驱动三个层次的价值模型,深入剖析了设计师价值实现的不同阶段与方式。同时越来越多的设计师也逐渐意识到了只有在协同业务的全流程中利用体验...

    2018-02-13
  • 微信热点

    从会计到交互设计,她用社会热点打动皇家艺术学院招生官!

    本科学的是会计研究生申请的却是交互设计零基础、跨专业却能在短短一年时间拿到5所顶尖艺术院校的offerQS世界艺术类大学排名第一的皇艺和享誉世界的英国伦艺都向她抛出了橄榄枝从西单骑摩拜到望京全程3个多小时收集了20多个单车乱堆积地点采访了数十位大爷和小朋友回家腿痛了整整一周只为做一个项目的调研成长的路上总是布满荆棘但坚持就是胜利杜娜/研究生/交互设计皇家艺术学院预科伦敦传媒学院格拉斯哥艺术学院金斯顿大学谢菲尔德哈勒姆大学杜娜offer(...

    2018-04-25
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress