萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 6個動畫告訴你谷歌究竟改變了什麼

6個動畫告訴你谷歌究竟改變了什麼

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

6個動畫告訴你谷歌究竟改變了什麼 三聯

  谷歌並不是一家傳統公司。我們的使命是整合全世界的信息,讓它們更易於獲取並讓用戶從中受益,並且我們也一直推動著這件事情,不斷發展。去年,我們推出了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 員工協同工作,而最終的收獲也使得這些巨大的投入顯得非常有價值。

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

copyright © 萬盛學電腦網 all rights reserved