DESIGNweb design
Google 設計團隊如何定義他們的新LOGO?網頁設計

Google 設計團隊如何定義他們的新LOGO?

Google 9月2日凌晨宣布啟用新LOGO標識,新LOGO採用無襯線字體,字母 G 採用四種顏色,整體更加動態。新LOGO的推出是為了適用不同的裝置平台,包括智慧型手機、電視、手錶、汽車等。谷歌副總裁、產品經理塔馬爾·約書亞(Tamar Yehoshua)表示,谷歌Logo和商標,它們最初的設計被用於單一台式電腦的瀏覽器頁面,之後不斷更新,以期能在無以計數的設備和不同種類的輸入方式(如觸控、打字和語音)中適應無縫連接的世界。

多年來,Google 一直在對Logo 小幅調整。Google 曾在Logo 後面加入感嘆號,並在字母G上使用綠色替代藍色。不過,自1999年以來,Google Logo的基本設計沒有太大變化。Google 表示,這不是Google第一次更新LOGO,也不是最後一次,不過,這是16年以來風格變化最大的一次。

  • 1998
    Larry Page 和Sergey Brin 在史丹佛大學畢業的專題中首次將成果命名為”Google”,是Google 的一個標誌。
  • 1998年8月30日
    Google 創辦人在參加火人祭(Burning man) 時製做的圖示,也是Google 的第一個Doodle,主要是告訴大家目前人不在辦公室。
  • 1998年9月
    Google 正式使用Google.com 這個網址,也向全世界使用者公開測試。
  • 1999年5月
    變化了字型,也取消了Google 後面的驚嘆號,字型的選擇上則是讓活潑好動的Google 能也有沉穩的表現。 2010年5月將文字的亮度調高,陰影的面積也變得更小、更清楚。
  • 2013年9月
    平面化設計正夯,Google Logo 也搭上這波​​風潮,將Google 壓扁處理。

 

Evolving the Google Identity

以下内容翻譯自Google Design

Google 不是傳統的公司,Google 的目標是幫助人們運用全球的資原並從中獲益,且不斷發展進步。去年,Google 開發 Material Design 幫助設計師與工程師進入跨裝置、跨平台領域。因為有這些想法理念,我們非常樂於分享 Google 新的品牌形象:不管你身在何方,我們都希望幫助使用者更輕松、更有效地使用 Google。

從一開始,Google 的官網設計就非常簡潔:在白色的頁面中間是顯眼的搜索搜尋框,上方則是Google 的 四色 logo。科技是不斷向前發展的,頁面也在不斷改變,輸入方式與用戶需求也在不斷變化。新的用於溝通交流的設備與途徑不斷出現,尤其體現在可穿戴設備、語音技術以及智慧型設備等方面。用戶們現在使用各種不同的裝置登錄Google,而我們自己也應該在首頁向用戶傳遞他們所期待的簡潔有趣的感覺,這樣才可以擁抱不同設備與平台所帶來的機會。

現在,我們要向你介紹一下我們的設計理念,那就是:了解用戶熟悉喜愛Google 的地方,在此基礎上發展我們的品牌,努力成為一家有活力的、不墨守成規的公司。

Designed together 共同設計

今年年初,包括創新實驗室(Creative Lab)、Material Design 團隊在內的來自不同公司的設計師們,在紐約召開一個為期一周的緊張激烈的設計會議,我們草擬了 4 項想要去完成的挑戰:

  1. 具延展性,在一個限空間內可以完整傳達標識;
  2. 動態化與智能化,做到在交流中的每個階段都能回應用戶需求;
  3. 系統化,透過系統化的方法使我們的產品品牌化,為用戶在日常使用Google過程中提供一致性的服務;
  4. 風格精緻化,結合用戶熟悉喜愛 Google 的地方,在此基礎上對用戶需求的變化進行周密的分析;

我們從擷取Google 的品牌精華開始,找到了設計關鍵——在一塊白色背景上的四種顏色——並把它們組合在一起。過程中工作室裡混亂不堪,膠水粘在一起,圖釘散落一堆,但隨著投入幾百個小時的設計工作,我們找到了幾個讓我們感到激動的新方向。團隊中彼此分享自己的想法,工程部門、研究部門、產品部門與營銷部門各自反複檢驗不同的想法,並推測不同想法的可行性。通力合作終於完成了一個足夠靈活的、可以被用在不同平台的營銷素材和產品任務中的新系統:由3個基本狀態構成一個單一的logo。

Google 設計理念是:瞭解使用者熟悉喜愛 Google 的地方,以此發展我們的品牌,努力成為一間有活力、不墨守成規的企業。


 

The Elements 設計元素

Google Logotype


標誌:保留Google傳統的四色元素,使用無襯線字。

Dots


點:動態的四個點可增加互動性、輔助性、過渡性.提高使用者體驗.

Google G


圖示:四色的G可用於窄小畫面中。


 

了解系統

Google 在思維與設計方面的發展比起一些核心元素要走得更遠,因此開發出一套規範可以幫助整個團隊在不同方面保持一致性。下面的例子並不能完全說明問題,但是也展示了一些我們對於這個系統的想法。

商標

Google 的標識一直保持著簡單、友好、親近用戶的設計風格。我們想要繼續保持logo 原有的幾何形式與教科書字母印刷字體,這些如孩子般的簡單特點。新的標識設定為自定義的無襯線字體,同時繼續維持多種色彩的輕鬆風格,並且將原有標識中的字母「e」旋轉—表示Google 永遠追求創新的理念。最終的標識經過了很多嚴苛的測試,其中包括尺寸的問題,以及在不同的數字化場景中呈現的清晰度。同時,為了指導用戶在螢幕上的使用和印刷,我們開發了覆蓋所有領域的關於logo 的標準,其中包括logo 的位置、清除logo 的規則、以及產品的出版與印刷方法等各個方面。

Google G 構造


Google G 是直接從Google 標識中的“G”發展出來的,增強了在小尺寸界面下使用視覺效果。在同一個網格內設計的產品形象,圓形的設計從光學角度防止了視覺上“過於集中在一點”的問題,而色彩的比例傳遞出標識的完整光譜,顏色的順序也有利於看這個字母時的視線運動。

動態的Google圓點


Google 圓點是logo 在動態的、永恆運動中的狀態。它們既能展現Google 在工作當中的聰明,又能顯示出Google 正在為你服務,我們認為這是一種獨特的、奇妙的運動形式。一個完整Google 圓點的展現形式包括傾聽、思考、回覆、不解、以及確認這幾個步驟。也許他們的動作看起來是同步發生的,但它的動態是基於一致的路徑與時間。

色彩


Google 的彩色標識很顯眼,受益於logo字母之間的留白範圍。當顏色很接近時——比如Google G 的例子——從視覺上就容易混淆,可能導致最初的想法受到影響。因此,我們調整了顏色,選擇了有活力的紅色、綠色和黃色去維持logo 的色彩飽和度和流行性。


 

執行過程

印刷


為了配合新標識的開發,我們創造了一個幾何無襯線的自定義字體,以滿足產品的標識識別及設計素材,我們叫它「Product Sans」。字體設計的靈感來自相似的教科書字體風格,但採用無襯線中性化的一致風格。我們可以在Google 的標識與產品名稱以維持一個恰當的區別。字型由數字、標點符號、發音、備選字符、分數、標誌以及一些諸如拉丁語、希臘語在內的擴展語種完整組成。

產品

儘管Google 旗下的許多其他產品都將會更新,但對於大多數用戶而言,於這個新標識的第一印像還是來自於搜尋頁面,因此搜尋方面的用戶體驗團隊及工程師團隊,努力提供文本及語音搜尋的方案,以完善產品的全方位展現。

廣泛運用

隨著設計的發展,工程開發了一個獨特的代碼資源,用於版本控制version control、自助服務 self-service。使用基礎在像素完美的SVGs,我們自動生成了上千個向量的變體去滿足不同尺寸、顏色和背景的需求。這些變體被放進規範的位置進行代碼檢驗,避免重複,並確保每一個團隊都在使用最正確的、最新的資源。

這幫助我們設計時在任何地方都能呈現完美的像素,並且可優化這些資源的尺寸和延遲時間,其中包括開發一個只有305 bytes 的全彩logo 變體(過去使用的全彩logo 需要14000 bytes)。舊的logo,因複雜的襯線字體和較大的檔案,需要為頻寬較低的用戶提供「相似版」logo。新的logo 則縮減了檔案大小,避免了這種具有極大的影響的解決辦法;面對全球用戶時讓Google 更加有用方便,包括下一個十億的目標,產品的一致性才能得到完全的發揮。


 

Beyond design 超越設計

設計只是我們努力中的一部分而已,新標識的實現需要集體的努力以及上百位 Google 員工的智慧。為了建設並實施這個最新的像素系統,他們值得充分的信任。因為Google 一直致力於創造新的產品和新的用戶體驗,我們希望這一次的工作,可以傳遞出你想要在Google 看到的、感受到的簡潔與樂趣—無論新的科技將會把我們帶向何處。