Google的平面設計指南

資訊頻道 - 觀點·話題 來源:中國設計在線 作者:selin 2013-06-18

Google的平面設計指南

  今天的WWDC上,蘋果發(fā)布了萬眾矚目的iOS 7。Ive帶來了全新的UI設計,頓時拍磚四起。好,咱先不提“安X化”、“扁X化”,讓我們來看看近期Google的一位高級平面設計師在Behance上發(fā)布的兩份不多見的設計指南,清晰地展示了Google產(chǎn)品圖標的設計細節(jié)。

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

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

  

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

  Google的平面設計指南

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

  
Google的平面設計指南
Google的平面設計指南

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

  Google的平面設計指南

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

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

聲明:站內(nèi)網(wǎng)友所發(fā)表的所有內(nèi)容及言論僅代表其本人,并不反映任何網(wǎng)站意見及觀點。

全部評論

暫無相關(guān)推薦