google-logo-version-update-1

編者按:Google品牌形象的每一次改變都牽動著全世界用戶的心,無疑是這家科技巨頭的強大影響力所造就的結果。隨著最新的Google視覺形象的發布,吐槽和贊譽就沒有停止過,但是此刻我們不妨將腦洞先填上,看看新設計背后Google到底有著怎樣的考慮。特別感謝@-川行者-同學,原文中的視頻均被他親手壓制成GIF動畫!

7bad5a19gw1evo5ty9kwkg20c808wgw6

谷歌并不是一家傳統公司。我們的使命是整合全世界的信息,讓它們更易于獲取并讓用戶從中受益,并且我們也一直推動著這件事情,不斷發展。去年,我們推出了Material Design,讓設計師和開發者擁有更強的拓展性,輕松擁抱這個多屏、多設備的世界。因此,今天很高興能和你們分享我們全新的品牌形象,希望全新的谷歌無論何時何地都能讓用戶更方便。

自Google成立以來,Google.com的網頁設計一直保持著驚人的簡約:古怪而多彩的Logo在一個簡單直觀的輸入框上面,整個頁面的背景就是單純的白色。隨著技術的發展,設計開始發生變化,需求和投入也變的越發的多樣化。全新的設備類型和多樣的交互和溝通方式同可穿戴設備、語音技術以及智能硬件結合到了一起,在我們身周并不鮮見。今天的用戶通過一系列不同的設備承載谷歌的服務,而我們應當以更為簡約而令人愉悅的品牌形象,來回應大家的認可和期望,以新的姿態來擁抱每一個機會和每一塊屏幕。

接下來,我們來看看有哪些設計是大家所認可而喜歡的,并推動整個品牌形象向著更加動態而非傳統的方向進化。

共同設計

今年年初,來自世界各地的設計師,同谷歌的創意實驗室與Material Design團隊一起,在紐約一同進行了為期一周的設計沖刺活動,我們共同起草了一份簡短的列表,確定了我們要解決的四個主要挑戰:

1、它需要是一個可拓展性的標識,在有限的空間中傳達出完整的信息和形象
2、它需要是一個高度整合的動態形象,將用戶交互的不同階段都整合到一起
3、它需要是一套系統的方法,不僅要便于我們產品的品牌推廣,還要確保用戶在同谷歌產品日常接觸時候擁有一致的體驗和感受
4、它需要是成就谷歌風格的所有元素的精煉,將用戶所喜歡所熱衷的谷歌元素集成到當中,并且隨著用戶需求的變化而進行提升和調整

g-sprint-1240

于是,我們開始將我們的品牌形象抽象、精煉成最基礎的四種色彩,并置于白色的背景上,以為備份。確定了問題,構思被固定在白板上,動畫也借由貝賽爾曲線勾勒出來。在上百個小時的設計之后,我們在地板上擺滿了不同的設計方案,并且確定了幾個令人振奮的設計方向。

我們同整個團隊分享了想法,工程、研發、產品和營銷的團隊參與了測試和可行性分析,并反復推敲了設計方案的部署和策略。這種協作流程帶來了一套足夠靈活的系統,足以讓營銷材料和產品應用于任何平臺,并將三種不同狀態的設計元素融合為一個LOGO。

元素

Google LOGO樣式

g-logo-360

確保它是一個包含顯著多色彩的無襯線體文字LOGO

g-dots-360

具備互動性、輔助性和過渡性的濃縮的動態形象

Google G

g-letter-360

緊湊版的Google Logo形象

了解這套體系

對于這套體系的思考和設計開發遠不止于核心元素這么簡單,我們的團隊設定了一套規范來確保它的廣泛應用性和一致性。下面的示例雖然不完全,但是能夠展現出我們系統思考的一部分。

LOGO樣式

7bad5a19gw1evo5tyggzsg20c808w7hr

Google的LOGO一直保持著簡約、友好而平易近人的風格,我們希望通過擁有高純度數學特質的幾何形象和教科書式的字母形象,來保持LOGO孩子般的單純特質。新的標識采用了幾何風格的無襯線體設計,并且結合了多彩的用色和極具趣味性的旋轉(字母e)。

通過在不同的數字環境中進行嚴苛的測試,我們確定了最終LOGO樣式中字體的大小、粗細。為了確保LOGO的屏幕顯示和印刷效果,我們所制定的標準涵蓋了間距和間隙的規則,產品鎖定規則以及產品處理的排除規則等整套規范。

G LOGO的構建

7bad5a19gw1evo5twwllwg20c808wq60

Google G標識的設計來源于字母G的形象,但是為了增加它在小尺寸使用時的視覺重量,需要讓它同其他的元素共享空間。這個G字母LOGO的設計和Google Logo所使用的柵格系統相同,由于字母G中間橫線的存在,為了在使用四色填充的時候確保整體的視覺平衡感,并且根據眼睛的視覺特征,我們重新調整了色彩的區域和次序。

Google 點狀動效

7bad5a19gw1evo5txzc8gg20c808w46t

Google的點狀LOGO一直保持著充滿活力的運動狀態。它代表著Google充滿智能的運作方式和為你服務的態度。我們仔細推敲著這些獨特而神器的時刻,并且開發出了包含挺、思考、回復、迷惑、理解等不同的動態標識。雖然整個動效看起來是自發而毫無雕飾的,但是實際上它們是遵循一致的路徑和相同的變化時間,弧度、長度等幾何特征也是遵循著相同的標準。

色彩

7bad5a19gw1evo5tyadurg20c808wn9q

得益于留白,Google LOGO 中不同字母在視覺上看起來平衡而不沖突,但是當這些色彩混合到一起融入字母G LOGO中的時候,視覺上的混合會讓色彩看起來會晦暗,所以我們在制作G的LOGO的時候其實是對色彩進行適當調整,確保它看起來活潑而自然。

最終實施

排版

7bad5a19gw1evo5txz3nsg20c808wgwt

為了配合全新的標識,我們還重新制作了一套專門的無襯線字體,方便產品和相關材料中使用。我們將這套字體稱為Product Sans。這套字體同樣借鑒了教科書字體的印刷風格,不過其中的設計細節更多的還是采用了幾何無襯線字體的自然特征。如此一來,我們可以確保Google Logo和產品字體之間的差異和識別性。整套字體中包含了全部的數字、標識符號、拉丁語字母、希臘字母和西里爾字母。

產品

g-voice-flow-poster

Google 的整個產品線都會逐步完成新標識的更新升級,不過由于大家對于Google的最早接觸多為搜索,所以改變將從Google搜索開始。搜索UX團隊和開發團隊目前都在致力于文本搜索和語音搜索的品牌形象更新,由此彰顯品牌全面的全面升級。

廣泛分布

隨著設計和開發相關素材的逐步增加,版本控制和自我服務會逐步擴展到整個代碼庫。比如像素完美的SVG格式素材,系統會自動生成數以千計的不同尺寸的變體,以滿足不同的尺寸、色彩和背景的需求。隨后,相關的源代碼會控制在一個相對規范的位置,避免重復,并且確保團隊成員和產品所使用的是最正確和最新版的素材。

g-low-bandwidth-poster

在這種運作方式之下,我們可以更加快速便捷地在任何地方使用新的素材,想比起之前LOGO 14000字節的大小,新的LOGO僅有305字節。新版的LOGO由于復雜度的降低使得全世界的用戶可以更快的加載使用它了。

設計之外

設計僅僅只是我們所付出的努力中的一部分。新的標識讓數百橫跨不同組織、處于不同工作崗位的Google 員工協同工作,而最終的收獲也使得這些巨大的投入顯得非常有價值。

我們會繼續打造更優秀的產品和體驗,希望我們的努力符合你的預期,能讓你能更好地使用谷歌的服務并獲得回報。

【了解偉大企業的歷史變遷】

“不作惡”企業谷歌的首頁變遷史
《生日快樂!那些年我們用過的谷歌首頁》

設計的趨勢從此可見一斑!
《漲姿勢!從蘋果官網細看20年設計變遷史》

連邀請函都有濃濃的設計范兒!
《向經典致敬!帶你看十年來蘋果發布會的邀請函》

原文地址:Google Design
優設譯者:@陳子木

「子木說」

據我所知,從2011年開始谷歌就開始在紐約構建了一個獨立于谷歌總部之外的設計實驗室,其中包含了各種藝術家和來自各大科技公司的設計師,他們的出現和谷歌的設計轉型息息相關,包括這次的品牌形象升級,將會議地點也選在了紐約,無疑是和這個Creative Lab 息息相關。谷歌本就是一個開放的公司,以前在工程和產品上體現的尤為明顯,這幾年谷歌在設計領域的輸出,則體現出他們的開放性設計所帶來的強大生命力。

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量100萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 3

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏