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ì)專題：
還等什么！是時(shí)候來(lái)了解動(dòng)態(tài)設(shè)計(jì)啦
聊聊那些令人愉悅的動(dòng)畫特效（GIF圖）
超贊！高大上的動(dòng)效設(shè)計(jì)方法及流程總結(jié)

一、翻轉(zhuǎn)的logo

從屏幕底部向上推動(dòng)卡片，Logo通過(guò)微妙的折疊翻轉(zhuǎn)漸漸進(jìn)入視野。還有一點(diǎn)，在動(dòng)畫剛開始的時(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)畫完成的時(shí)候被覆蓋。

三、翻轉(zhuǎn)和彈跳效果（Daytime）

同樣的動(dòng)畫效果，找找日間頭圖背景與夜晚時(shí)候的區(qū)別。

四、逐漸消退的logo

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

五、輕微的彈動(dòng)效果

打開瀏覽頁(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)有采用常見的解決方案--頁(yè)面從右方退出視線范圍，而是選擇了從屏幕底部掉落，并帶有微妙的消褪效果，給app增加了輕盈的感覺(jué)。

七、移除卡片

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

原文地址：cocoachina

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