在日前舉行的蘋(píng)果開(kāi)發(fā)者大會(huì)WWDC2013上，蘋(píng)果發(fā)布了萬(wàn)眾矚目的iOS 7。Ive 帶來(lái)了全新的 UI 設(shè)計(jì)，頓時(shí)拍磚四起。好，咱先不提“安 X 化”、“扁 X 化”，讓我們來(lái)看看近期 Google 的一位高級(jí)平面設(shè)計(jì)師在Behance上發(fā)布的兩份不多見(jiàn)的設(shè)計(jì)指南，清晰地展示了 Google 產(chǎn)品圖標(biāo)的設(shè)計(jì)細(xì)節(jié)。

時(shí)間回到 2011 年 4 月，Google 聯(lián)合創(chuàng)始人 Larry Page 接過(guò) Eric Schmidt 的槍?zhuān)唏R上任 Google CEO。他馬不停蹄，在上任第一天就宣布將對(duì)公司的主要產(chǎn)品重新進(jìn)行視覺(jué)設(shè)計(jì)——其中包括公司代表性的搜索、地圖和郵件。他想讓它們改頭換面(要知道 Google 從來(lái)不以設(shè)計(jì)優(yōu)雅著稱(chēng))，但同時(shí)他要求產(chǎn)品之間要密切關(guān)聯(lián)，而不是一群風(fēng)馬牛不相及的數(shù)字工具扎堆在一起。在此之后我們就注意到 Google 的產(chǎn)品在視覺(jué)美感上出現(xiàn)了大幅提升，這還是在基本設(shè)計(jì)語(yǔ)言不變的前提下實(shí)現(xiàn)的。接下來(lái)我們就來(lái)看看 Google 的平面設(shè)計(jì)師們是如何做的。

這篇 Guideline 由兩份文件組成，主要聚焦于圖標(biāo)設(shè)計(jì)學(xué)。由 Google 高級(jí)平面設(shè)計(jì)師 Roger Oddone 和藝術(shù)主管 Christopher Bettig 帶領(lǐng) Alex Griendling、Jefferson Cheng、Yan Yan 以及 Zachary Gibson 等設(shè)計(jì)師在 18 個(gè)月內(nèi)完成，同時(shí)覆蓋了與應(yīng)用圖標(biāo)和 UI 元素相關(guān)的寬泛原則以及像素層面的細(xì)節(jié)。推出這份指南的目的是為了確立一系列即固定又靈活的指導(dǎo)方針——引領(lǐng) Google 的設(shè)計(jì)師們?yōu)閴汛?Google 的身份而奮斗。

其中的第一份文件更讓人興奮，其中詳細(xì)地闡述了 Google 的產(chǎn)品圖標(biāo)設(shè)計(jì)。Google 的產(chǎn)品圖標(biāo)設(shè)計(jì)“簡(jiǎn)約、現(xiàn)代、易懂，有時(shí)略顯古怪...... 極度精簡(jiǎn)、夸張、漫畫(huà)化”。Google 鼓勵(lì)設(shè)計(jì)師們?cè)诋a(chǎn)品圖標(biāo)設(shè)計(jì)方面采取“最簡(jiǎn)化手法”。比方說(shuō)，在地圖圖標(biāo)的設(shè)計(jì)上，他們會(huì)放棄“在地圖上方插一根釘”的圖標(biāo)設(shè)計(jì)，而會(huì)鼓勵(lì)采用“一根釘”這種更簡(jiǎn)約的方式。接下來(lái)的一章闡述了依照簡(jiǎn)單幾何圖形來(lái)繪制圖標(biāo)的重要性。

接下來(lái)的部分與透視法相關(guān)。圖標(biāo)需要面向前方，不以立體呈現(xiàn)(僅橫豎兩根坐標(biāo)軸)，鼓勵(lì)使用直線硬陰影，而非投影、漸變或是明暗效果。文件展示了所有圖標(biāo)設(shè)計(jì)中需要采用的顏色的細(xì)節(jié)——比如 Google 代表色：藍(lán)、紅、黃、綠的精確數(shù)值。文件中還講述了 Google 采用的字體，從為小碼文本設(shè)計(jì)的像素完美字體到公司產(chǎn)品名稱(chēng)所采用的默認(rèn)字體：Open Sans Semi Bold。

介紹完了產(chǎn)品圖標(biāo)設(shè)計(jì)，接下來(lái)我們來(lái)看看 Logo lockups(圖標(biāo)和產(chǎn)品名稱(chēng)的組合)——公司把它稱(chēng)作產(chǎn)品的品牌大使。在這一部分明確描述了 Logo lockup 的三個(gè)組成部分：產(chǎn)品圖標(biāo)、Google 標(biāo)識(shí)以及產(chǎn)品名稱(chēng)所需要采用的間距、大小和排版規(guī)格。比方說(shuō)，產(chǎn)品名稱(chēng)的字體選擇并不是固定的，而是會(huì)根據(jù) Google 標(biāo)識(shí)的像素大小產(chǎn)生變化。如果 Google 標(biāo)識(shí)是 60 像素以上(包括)，產(chǎn)品名稱(chēng)采用 Open Sans Light 字體，如果是 60 像素以下，產(chǎn)品名稱(chēng)則采用 Open Sans Regular 字體。

在 Guideline 的第二份文件中，除了展示了 Google 在產(chǎn)品視頻中常采用的扁平化的 Charley Harper 式插圖之外，還詳細(xì)介紹了 UI 設(shè)計(jì)中圖標(biāo)的比例、大小和填充細(xì)節(jié)。

兩份文件中展示的都是些枯燥乏味的設(shè)計(jì)細(xì)節(jié)，但這些看似微不足道的細(xì)節(jié)正是 Google 之前所忽視的。Google 推出這樣的設(shè)計(jì)指南并不特別讓人感到意外，這些大到公司 Logo 小到應(yīng)用圖標(biāo)的設(shè)計(jì)標(biāo)準(zhǔn)正是 Google 那些馳騁各大平臺(tái)的平面設(shè)計(jì)師們所需要的。但真的很高興能看到 Google 這樣做，這證明了公司正在細(xì)微處下功夫。

詳細(xì)文件在此：一 二

題圖：Jefferson Cheng