cocoachina：可能你對(duì)Google Search的使用頻率遠(yuǎn)沒(méi)有YouTube或者Gmail高，但是谷歌出品的Google Search在設(shè)計(jì)方面也有很多值得我們借鑒的地方。在最近幾年，谷歌在設(shè)計(jì)語(yǔ)言方面取得了很大的進(jìn)步，比如Google Search中出彩的設(shè)計(jì)細(xì)節(jié)。 動(dòng)態(tài)設(shè)計(jì)專(zhuān)題： 還等什么！是時(shí)候來(lái)了解動(dòng)態(tài)設(shè)計(jì)啦 聊聊那些令人愉悅的動(dòng)畫(huà)特效（GIF圖） 超贊！高大上的動(dòng)效設(shè)計(jì)方法及流程總結(jié) 一、翻轉(zhuǎn)的logo 從屏幕底部向上推動(dòng)卡片，Logo通過(guò)微妙的折疊翻轉(zhuǎn)漸漸進(jìn)入視野。還有一點(diǎn)，在動(dòng)畫(huà)剛開(kāi)始的時(shí)候，屏幕底部有堆疊的卡片，隨著逐漸向上推動(dòng)卡片，堆疊的卡片逐漸單個(gè)排列在頁(yè)面上。 1024個(gè)贊！打動(dòng)人心的Google Search App動(dòng)態(tài)設(shè)計(jì) 二、logo翻轉(zhuǎn)和彈跳效果（Night） 該圖片展示了翻轉(zhuǎn)操作–下拉search bar，從屏幕頂部進(jìn)行翻轉(zhuǎn)，展示頭圖背后的內(nèi)容，輕彈的logo是一個(gè)非常清晰的視覺(jué)元素，而屏幕上的狀態(tài)欄也準(zhǔn)確地在動(dòng)畫(huà)完成的時(shí)候被覆蓋。 1024個(gè)贊！打動(dòng)人心的Google Search App動(dòng)態(tài)設(shè)計(jì) 三、翻轉(zhuǎn)和彈跳效果（Daytime） 同樣的動(dòng)畫(huà)效果，找找日間頭圖背景與夜晚時(shí)候的區(qū)別。 1024個(gè)贊！打動(dòng)人

cocoachina：可能你對(duì)Google Search的使用頻率遠(yuǎn)沒(méi)有YouTube或者Gmail高，但是谷歌出品的Google Search在設(shè)計(jì)方面也有很多值得我們借鑒的地方。在最近幾年，谷歌在設(shè)計(jì)語(yǔ)言方面取得了很大的進(jìn)步，比如Google Search中出彩的設(shè)計(jì)細(xì)節(jié)。
一、翻轉(zhuǎn)的logo
從屏幕底部向上推動(dòng)卡片，Logo通過(guò)微妙的折疊翻轉(zhuǎn)漸漸進(jìn)入視野。還有一點(diǎn)，在動(dòng)畫(huà)剛開(kāi)始的時(shí)候，屏幕底部有堆疊的卡片，隨著逐漸向上推動(dòng)卡片，堆疊的卡片逐漸單個(gè)排列在頁(yè)面上。

二、logo翻轉(zhuǎn)和彈跳效果（Night）

該圖片展示了翻轉(zhuǎn)操作–下拉search bar，從屏幕頂部進(jìn)行翻轉(zhuǎn)，展示頭圖背后的內(nèi)容，輕彈的logo是一個(gè)非常清晰的視覺(jué)元素，而屏幕上的狀態(tài)欄也準(zhǔn)確地在動(dòng)畫(huà)完成的時(shí)候被覆蓋。

三、翻轉(zhuǎn)和彈跳效果（Daytime）
同樣的動(dòng)畫(huà)效果，找找日間頭圖背景與夜晚時(shí)候的區(qū)別。

四、逐漸消退的logo

Google Search使用了logo漸漸淡出的設(shè)計(jì)，并準(zhǔn)確在背景圖片具有足夠視覺(jué)反差的時(shí)候讓文本顏色過(guò)渡至白色。

五、輕微的彈動(dòng)效果
打開(kāi)瀏覽頁(yè)面，點(diǎn)擊”See more movies”，搜索結(jié)果會(huì)從屏幕右側(cè)滑出，當(dāng)新頁(yè)面滑動(dòng)至屏幕最左側(cè)時(shí)會(huì)有輕微的彈動(dòng)效果。

六、關(guān)閉瀏覽器的搜索結(jié)果窗口
關(guān)閉搜索結(jié)果窗口時(shí)，Google Search沒(méi)有采用常見(jiàn)的解決方案–頁(yè)面從右方退出視線(xiàn)范圍，而是選擇了從屏幕底部掉落，并帶有微妙的消褪效果，給app增加了輕盈的感覺(jué)。

七、移除卡片
這是Google Search app中優(yōu)秀的交互設(shè)計(jì)之一，當(dāng)用戶(hù)第一次看見(jiàn)該視圖時(shí)，這種交互設(shè)計(jì)可以向用戶(hù)展示如何移除單個(gè)的卡片。同時(shí)給用戶(hù)增加了簡(jiǎn)單、無(wú)重量感以及更加直覺(jué)的體驗(yàn)。

原文地址：cocoachina