cocoachina：可能你對Google Search的使用頻率遠沒有YouTube或者Gmail高，但是谷歌出品的Google Search在設計方面也有很多值得我們借鑒的地方。在最近幾年，谷歌在設計語言方面取得了很大的進步，比如Google Search中出彩的設計細節。

動態設計專題：
還等什么！是時候來了解動態設計啦
聊聊那些令人愉悅的動畫特效（GIF圖）
超贊！高大上的動效設計方法及流程總結

一、翻轉的logo

從屏幕底部向上推動卡片，Logo通過微妙的折疊翻轉漸漸進入視野。還有一點，在動畫剛開始的時候，屏幕底部有堆疊的卡片，隨著逐漸向上推動卡片，堆疊的卡片逐漸單個排列在頁面上。

二、logo翻轉和彈跳效果（Night）

該圖片展示了翻轉操作--下拉search bar，從屏幕頂部進行翻轉，展示頭圖背后的內容，輕彈的logo是一個非常清晰的視覺元素，而屏幕上的狀態欄也準確地在動畫完成的時候被覆蓋。

三、翻轉和彈跳效果（Daytime）

同樣的動畫效果，找找日間頭圖背景與夜晚時候的區別。

四、逐漸消退的logo

Google Search使用了logo漸漸淡出的設計，并準確在背景圖片具有足夠視覺反差的時候讓文本顏色過渡至白色。

五、輕微的彈動效果

打開瀏覽頁面，點擊"See more movies"，搜索結果會從屏幕右側滑出，當新頁面滑動至屏幕最左側時會有輕微的彈動效果。

六、關閉瀏覽器的搜索結果窗口

關閉搜索結果窗口時，Google Search沒有采用常見的解決方案--頁面從右方退出視線范圍，而是選擇了從屏幕底部掉落，并帶有微妙的消褪效果，給app增加了輕盈的感覺。

七、移除卡片

這是Google Search app中優秀的交互設計之一，當用戶第一次看見該視圖時，這種交互設計可以向用戶展示如何移除單個的卡片。同時給用戶增加了簡單、無重量感以及更加直覺的體驗。

原文地址：cocoachina

【優設網 原創文章 投稿郵箱：2650232288@qq.com】
 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量63萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：