7个Google Search app的动态设计效果

本文来自互联网,114PS教程网仅作学习交流使用。发布时间:2016-04-28
本栏目刊载的经验技巧仅为提供更多信息,部分来源于网络,由本站整理发布,转载本文请注明本文地址。
教程所属栏目:
首页 > ps教程网 > 经验技巧

cocoachina:可能你对Google Search的使用频率远没有YouTube或者Gmail高,但是谷歌出品的Google Search在设计方面也有很多值得我们借鉴的地方。在最近几年,谷歌在设计语言方面取得了很大的进步,比如Google Search中出彩的设计细节。

一、翻转的logo

从屏幕底部向上推动卡片,Logo通过微妙的折叠翻转渐渐进入视野。还有一点,在动画刚开始的时候,屏幕底部有堆叠的卡片,随着逐渐向上推动卡片,堆叠的卡片逐渐单个排列在页面上。

1024个赞!打动人心的Google Search App动态设计

二、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

 

关于114教程网 www.114ps.com

114教程网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台! 欢迎加入114教程网设计交流QQ群:79387999,我们是一群快乐的ui设计师。进群只要提问,必能得到解决。汇集了各路UI设计高手。   添加 114教程网 微信号:xueuiwang   如果您觉得这篇有价值的话,点击右上角的按钮,弹出菜单中选择发送给朋友或者分享到朋友圈。

qrcode_for_gh_672cf3f94568_258

互联网精神:分享、交流、进步

转载请注明:114教程网



iOS 7和Android 4.4奇巧巧克力:巨人
0 点击  / 0 评论
7个Google Search app的动态设计效
0 点击  / 0 评论
设计漂亮有趣的转场动效!高手之路!
0 点击  / 0 评论
APP设计思维与网页设计思维
0 点击  / 0 评论
有空帮我随便搞搞
0 点击  / 0 评论
设计师开公司需要哪些积累?
0 点击  / 0 评论
提高工作效率:给设计师的10条建议
0 点击  / 0 评论
23个FACEBOOK PAPER中的设计细节
0 点击  / 0 评论
设计华丽的用户体验的6个热门技巧
0 点击  / 0 评论
找参考灵感,怎么找,去哪?
0 点击  / 0 评论
用户是怎么解读你的设计的?
0 点击  / 0 评论
致青春设计师
0 点击  / 0 评论
2013移动行业数据分析报告
0 点击  / 0 评论
水印相机素材设计之要点(经验分享)
0 点击  / 0 评论
2014年硬件设计10大趋势
0 点击  / 0 评论
相关文章:


2014年硬件设计10大趋势  水印相机素材设计之要点(经验分享)  致青春设计师  

觉得不错?顶一下!
PUSH UP
复制本文地址
COPY
最近更新:

人物皮肤修饰完全自学教程(视频教程)
9 点击  / 0 评论
所属栏目:[美容]
修图师分享 五分钟完成皮肤处理的伪商业修
3 点击  / 0 评论
所属栏目:[美容]
核心技术 教你人像后期面部精修
1 点击  / 0 评论
所属栏目:[美容]
利用计算及修复画笔快速给人像祛斑及磨皮
0 点击  / 0 评论
所属栏目:[美容]
Photoshop高低频磨皮教程
0 点击  / 0 评论
所属栏目:[美容]
商业人像大片中的发丝精细美化
1 点击  / 0 评论
所属栏目:[美容]
新手必学 用Lighroom5分钟快速编辑人像照片
7 点击  / 0 评论
所属栏目:[美容]
运用中性灰给商用人像大图精细磨皮
2 点击  / 0 评论
所属栏目:[美容]
本页全部评论共计()条    【点击查看全部评论】
您的昵称:(10个汉字以内)                      匿名
评论中不要带有网址,并且不要发布违禁词汇。字数限制在300汉字以内。
           验证码:(注意大小写) 看不清楚?请点击刷新
网友最新评论:          
  关于 栏目 栏目 联系 帮助 综合
  关于本站 入门基础 图片合成 在线留言 如何投稿 范文
  版权声明 鼠绘教程 抠图操作 联系方式 常见问题 软件资讯
  免责声明 调色方法 视频教程 本站微博   推荐问题
  本站地图 人物美容 相关素材     已解决
  Sitemap 照片处理 资源下载     待解决
    字体效果 相关经验      
    图标按钮 CS6专题      
  声明  
  114PS教程网(114ps.com)发布的所有教程信息版权归原作者所有,由本站转载的内容仅为提供更多信息,并不代表本站同意其观点。
  所有图片信息均来自网络,本站仅作学习使用,若无意冒犯,请联系本站。
  黑ICP备15009090号-1
  Copyright © 2011-2014