當前位置:編程學習大全網 - 源碼下載 - 谷歌新logo是怎麽設計出來的

谷歌新logo是怎麽設計出來的

/articles/evolving-the-google-identity/)。轉載務必註明本文和原文鏈接。

Google 從來不是壹家循規蹈矩的公司,我們的目標是幫助人們可以充分利用世界上的信息並從中獲益,並且不斷向前進步。去年,我們就開發了 Material Design 去幫助設計師與開發者們進入壹個廣闊的、多設備的、多屏的世界中去。因為有這些想法在心中,所以我們非常高興地與妳分享 Google 新的品牌形象:不管妳身在何方,我們都希望可以幫助妳更輕松、更有效地使用 Google。

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

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

***同設計

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

創造壹個可以在有限空間內傳達完整標識的可擴展性標誌符號;

通過動態化與智能化概念的結合,做到在交流中的每個階段都可以回應用戶的需求;

通過系統化的方法使我們的產品品牌化,為用戶在日常使用 Google 的過程中提供壹致性的服務;

使 Google 的風格精致化,並結合用戶熟悉和喜愛 Google 的地方,在此基礎上對用戶需求的變化進行周密的分析。

我們從提取 Google 的品牌精華入手,以此找到了關鍵因素——在壹塊白色背景上的四種顏色——並把它們組合在壹起。雖然工作室裏混亂不堪,膠水粘在壹起,圖釘散落壹堆,但隨著花費在裏面幾百個小時的設計工作,我們找到了幾個讓我們感到激動的新方向。

我們在團隊中分享自己的想法,工程部門、研究部門、產品部門與營銷部門各自反復檢驗不同的想法,並且測算不同想法的可行性。這個通力合作的過程終於完成了壹個足夠靈活的、可以被用在不同平臺的營銷材料和產品任務中的新系統:由3個基本狀態構成壹個單壹的 logo。

新元素

「Google」標識

使用無襯線字體,同時保留了 Google 獨特的顏色使用順序。

Google 圓點

在互動性、輔助性及流暢性方面,這個標識進行了動態提升。

Google G

對於界面較小的使用平臺,Google 也推出了相應的「緊湊」版本的 logo。

了解這個系統

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 旗下的許多其他產品都將會得到更新,但是對於大多數用戶來說,他們對於這個新標識的第壹印象還是來自於搜索頁面,因此,搜索方面的用戶體驗團隊及工程師團隊努力去提供文本及語音搜索的實施方案,完善了產品的全方位展現。

更廣的分布

隨著設計的發展,工程方面也根據我們的代碼庫開發出了壹個面向資源生成、版本控制、及自助服務分布的獨特方法。使用在基礎設置上像素完美的 SVGs,我們自動生成了上千個基於矢量的變體去滿足不同尺寸、顏色和背景的需求。這些變體被放進壹個典型的場景當中進行源代碼檢驗,以此來避免重復的情況,並且可以確保每壹個團隊都在使用最正確的、最新的資源。

這幫助我們做出了在每壹個方面都像素完美的設計,並且讓我們可以優化這些資源的尺寸和延遲時間,其中包括開發壹個只有 305 個字節的全彩 logo 變體(過去使用的全彩 logo 需要 14000 個字節)。舊的 logo,因為其復雜的字體襯線和更大的尺寸,需要我們為寬帶連接不暢的用戶提供基於文本的「相似版」logo。但新的 logo 則縮減了文件大小,避免了這種被迫的解決辦法;而當我們面向用戶,想要讓 Google 更加接近他們、更加便於他們使用時,產品的壹致性也可以得到完全的發揮。

超越設計

設計只是我們努力中的壹部分而已,新標識的實現需要集體的努力以及上百位不同職能的 Google 員工的智慧。為了建設並實施這個最新的像素系統,他們值得充分的信任。

因為 Google 壹直致力於創造新的產品和新的用戶體驗,我們希望這壹次的工作可以傳遞出妳想要在 Google 看到的、感受到的簡潔與樂趣—無論新的科技將會把我們帶向何處。

  • 上一篇:中表怎麽畫
  • 下一篇:雙線MACD 的原理是什麽?
  • copyright 2024編程學習大全網