点赞！打动人心的GOOGLE SEARCH APP动态设计

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

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

【木子设计网 原创文章 投稿邮箱：13671295@qq.com】
 
================关于木子设计网================
"木子设计网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南https://www.muzisucai.com//ps/。
设计微博：拥有粉丝量63万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：https://www.muzisucai.com/
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【muzisucai_com】优设哥的全拼
您也可以通过扫描下方二维码快速添加：