打動人心的GOOGLE SEARCH APP動態設計

1 評論 3947 瀏覽 1 收藏 5 分鐘

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

cocoachina:可能你對Google Search的使用頻率遠沒有YouTube或者Gmail高,但是谷歌出品的Google Search在設計方面也有很多值得我們借鑒的地方。在最近幾年,谷歌在設計語言方面取得了很大的進步,比如Google Search中出彩的設計細節。
一、翻轉的logo
從屏幕底部向上推動卡片,Logo通過微妙的折疊翻轉漸漸進入視野。還有一點,在動畫剛開始的時候,屏幕底部有堆疊的卡片,隨著逐漸向上推動卡片,堆疊的卡片逐漸單個排列在頁面上。

二、logo翻轉和彈跳效果(Night)

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

1024個贊!打動人心的Google Search App動態設計
三、翻轉和彈跳效果(Daytime)
同樣的動畫效果,找找日間頭圖背景與夜晚時候的區別。

1024個贊!打動人心的Google Search App動態設計

四、逐漸消退的logo

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

1024個贊!打動人心的Google Search App動態設計
五、輕微的彈動效果
打開瀏覽頁面,點擊”See more movies”,搜索結果會從屏幕右側滑出,當新頁面滑動至屏幕最左側時會有輕微的彈動效果。

1024個贊!打動人心的Google Search App動態設計
六、關閉瀏覽器的搜索結果窗口
關閉搜索結果窗口時,Google Search沒有采用常見的解決方案–頁面從右方退出視線范圍,而是選擇了從屏幕底部掉落,并帶有微妙的消褪效果,給app增加了輕盈的感覺。

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

1024個贊!打動人心的Google Search App動態設計

原文地址:cocoachina

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!