Google平面设计指南:图标与LOGO

移动开发 Android
昨天的 WWDC 上,苹果发布了万众瞩目的iOS 7。Ive 带来了全新的 UI 设计,顿时拍砖四起。好,咱先不提“安 X 化”、“扁 X 化”,让我们来看看近期 Google 的一位高级平面设计师在Behance上发布的两份不多见的设计指南,清晰地展示了 Google 产品图标的设计细节。

[[74804]]

时间回到 2011 年 4 月,Google 联合创始人 Larry Page 接过 Eric Schmidt 的枪,走马上任 Google CEO。他马不停蹄,在上任***天就宣布将对公司的主要产品重新进行视觉设计——其中包括公司代表性的搜索、地图和邮件。他想让它们改头换面(要知道 Google 从来不以设计优雅著称),但同时他要求产品之间要密切关联,而不是一群风马牛不相及的数字工具扎堆在一起。在此之后我们就注意到 Google 的产品在视觉美感上出现了大幅提升,这还是在基本设计语言不变的前提下实现的。接下来我们就来看看 Google 的平面设计师们是如何做的。

这篇 Guideline 由两份文件组成,主要聚焦于图标设计学。由 Google 高级平面设计师 Roger Oddone 和艺术主管 Christopher Bettig 带领 Alex Griendling、Jefferson Cheng、Yan Yan 以及 Zachary Gibson 等设计师在 18 个月内完成,同时覆盖了与应用图标和 UI 元素相关的宽泛原则以及像素层面的细节。推出这份指南的目的是为了确立一系列即固定又灵活的指导方针——*** Google 的设计师们为壮大 Google 的身份而奋斗。

其中的***份文件更让人兴奋,其中详细地阐述了 Google 的产品图标设计。Google 的产品图标设计“简约、现代、易懂,有时略显古怪...... 极度精简、夸张、漫画化”。Google 鼓励设计师们在产品图标设计方面采取“最简化手法”。比方说,在地图图标的设计上,他们会放弃“在地图上方插一根钉”的图标设计,而会鼓励采用“一根钉” 这种更简约的方式。接下来的一章阐述了依照简单几何图形来绘制图标的重要性。

接下来的部分与透视法相关。图标需要面向前方,不以立体呈现(仅横竖两根坐标轴),鼓励使用直线硬阴影,而非投影、渐变或是明暗效果。文件展示了所 有图标设计中需要采用的颜色的细节——比如 Google 代表色:蓝、红、黄、绿的精确数值。文件中还讲述了 Google 采用的字体,从为小码文本设计的像素***字体到公司产品名称所采用的默认字体:Open Sans Semi Bold。

介绍完了产品图标设计,接下来我们来看看 Logo lockups(图标和产品名称的组合)——公司把它称作产品的品牌大使。在这一部分明确描述了 Logo lockup 的三个组成部分:产品图标、Google 标识以及产品名称所需要采用的间距、大小和排版规格。比方说,产品名称的字体选择并不是固定的,而是会根据 Google 标识的像素大小产生变化。如果 Google 标识是 60 像素以上(包括),产品名称采用 Open Sans Light 字体,如果是 60 像素以下,产品名称则采用 Open Sans Regular 字体。

在 Guideline 的第二份文件中,除了展示了 Google 在产品视频中常采用的扁平化的 Charley Harper 式插图之外,还详细介绍了 UI 设计中图标的比例、大小和填充细节。

两份文件中展示的都是些枯燥乏味的设计细节,但这些看似微不足道的细节正是 Google 之前所忽视的。Google 推出这样的设计指南并不特别让人感到意外,这些大到公司 Logo 小到应用图标的设计标准正是 Google 那些驰骋各大平台的平面设计师们所需要的。但真的很高兴能看到 Google 这样做,这证明了公司正在细微处下功夫。

详细版指南: Part.1 Part.2

责任编辑:徐川 来源: 36kr
相关推荐

2010-08-09 13:19:33

Windows Pho界面

2012-06-19 09:47:51

互联网

2011-03-22 09:57:25

Chrome全新LogGoogle

2013-04-11 10:26:37

Google Glas谷歌眼镜指南分析

2011-11-10 15:43:23

JavaScript

2011-03-23 09:52:40

Chrome新Logo

2012-02-22 10:14:41

Web App

2021-08-04 12:26:27

微软Windows 10Windows

2015-09-22 10:04:38

GoogleJava编程

2013-05-20 16:42:13

GoogleGoogle Maps

2011-05-28 23:58:08

设计技巧UIAndroid

2017-02-13 13:14:07

2011-07-22 12:09:32

2013-06-27 15:47:18

Motorola MoGoogle

2011-10-24 17:12:01

Cloud SQL

2012-09-17 10:46:06

设计LogoIcon

2021-06-13 07:44:30

Windows10操作系统微软

2014-12-08 14:35:51

Material De真实动作

2011-10-27 11:32:36

Google云计算SQL数据库

2011-05-30 10:24:34

网页设计
点赞
收藏

51CTO技术栈公众号