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

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