快好知 kuaihz订阅观点

 

打动人心的GOOGLE SEARCH APP动态设计

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是一个非常清晰的视觉元素,而屏幕上的状态栏也准确地在动画完成的时候被覆盖。

三、翻转和弹跳效果(Daytime)

同样的动画效果,找找日间头图背景与夜晚时候的区别。

四、逐渐消退的logo

Google Search使用了logo渐渐淡出的设计,并准确在背景图片具有足够视觉反差的时候让文本颜色过渡至白色。

五、轻微的弹动效果

打开浏览页面,点击”See more movies”,搜索结果会从屏幕右侧滑出,当新页面滑动至屏幕最左侧时会有轻微的弹动效果。

六、关闭浏览器的搜索结果窗口

关闭搜索结果窗口时,Google Search没有采用常见的解决方案–页面从右方退出视线范围,而是选择了从屏幕底部掉落,并带有微妙的消褪效果,给app增加了轻盈的感觉。

七、移除卡片

这是Google Search app中优秀的交互设计之一,当用户第一次看见该视图时,这种交互设计可以向用户展示如何移除单个的卡片。同时给用户增加了简单、无重量感以及更加直觉的体验。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:人心  人心词条  打动  打动词条  动态  动态词条  GOOGLE  GOOGLE词条  SEARCH  SEARCH词条  
设计

 Facebook图片管理架构

Facebook 的照片分享很受欢迎,迄今,Facebook 用户已经上传了150亿张照片,加上缩略图,总容量超过1.5PB,而每周新增的照片为2亿2000万张...(展开)

设计

 如何模块化设计出款系统(一)

出款系统可以分为这几个主要模块:应用层、服务层、业务层、核心交易层、渠道网关层。和收款业务相对,出款业务是支付业务的另一个重要板块。出款业务是指,从支付机构的角...(展开)