Google的平面设计指南：产品图标的设计细节

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

　　时间回到 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 这样做，这证明了公司正在细微处下功夫。

　　详细文件在此：一 二

　　题图：Jefferson Cheng