UI的基本动效--1

内容来自Meaningful Transitions,很早就出名的动效站,里面提供了一些最常见最基本的动效模式,仔细观察我们手机中的动效,很多无非是多种基本动效的结合,因此研究这些基础动效很有价值。但是却一直没有译文,这里给大家带来指向性动效的上半部分,同时会配上案例,让大家更好地理解。

 (一)指向性动效

一、前言:

指向性动效能够有效的描述物体之间的逻辑关系

同时通过视觉效果,可视化的描述物体当前运动状态。

通常,指向性动效能够让用户清晰的感受到物体与物体的位置关系,以及信息的层级架构。

二、指向性动效的分类:

1.滑动

适用场合:当用户需要导航以列表方式呈现的信息时。

运动描述:信息列表会跟随用户的滑动交互手势而移动。物体会自动移动到适当的位置,保持整齐感。

一致性:属于指向性转场动效,物体的滑动取决于用户滑动手势的指向。

优点:通过指向性转场,有效的帮助用户理清物体的排列状况。

用户感受:像是在捋一条长长的绸带。

案例:

看点:

1.动画前半部分的滑动附上了弹性,加深了物理感。

2.后半部分注意左右list 和calendar散开一刹那时,轻微的放大,打造了一种镜头感。

3.最后堆叠、展开效果。

2.弹出

适用场合:当用户与单一物体交互时。

运动描述:物体会从缩略图转化为全屏视图(一般物体的中心点也会同时移动到屏幕中央)。

一致性:反向动效是对象从全屏视图转换为缩略图。

优点:能够清楚的告诉用户,是哪个物体被放大了。

用户感受:物体在放大。

案例:

看点:底部标签栏图标按三个方向上移消失,下方弹出一个X图标,与此同时弹出3个小图标。

3.最小化

适用场合:当用户想要最小化某个物体时。

运动描述:物体缩小,同时移动到屏幕上的相应位置。

一致性:相反的动效就是扩大,从缩略图重新变为全屏。

优点:能够清楚的告诉用户,最小化的物体可以在哪里被找到。

用户感受:物体在缩小。

案例:

其实放大/缩小最杰出的典范大概就是iOS7的打开应用程序/退回主屏幕了,这个也不错。

这个动效,即作为启动屏,一定程度上缓解了用户焦虑,同时又是Logo,提升了品牌效应,最后应用启动后的缩小,能够很好地联系上下文,让用户不致感到突兀。

4切换对象

适用场合:当用户在对象之间切换时。

运动描述:当前物体移动到后面,新的物体(应用)移动到前面。

优点:能够解释清楚物体/应用程序之间进行了切换。

用户感受:原物体缩回,新物体出现。

案例:

现在可能不太流行这种幅度太大的动效,因为可能会导致用户感到突兀。

5.展开堆叠

适用场合:当用户打开一沓物体时。

运动描述:堆叠的一堆物体被展开。

一致性:将一群物体堆叠。

优点:能够清楚的告诉用户,物体的排列情况。

用户感受:物体似乎扩展开来了。

6.翻页

适用场合:当用户翻页时。

运动描述:当用户实施滑动手势时,出现生活中翻页一般的效果。

一致性:指向性动效,翻页的指向取决于手指滑动的指向。

优点:这种动效转场能够清晰的展现列表信息的信息架构。

用户感受:似乎感觉和真实生活中的翻页差不多。

案例:

Flipboard和Paper是翻页风的代表,不过Steller也不错(300k,图像质量压缩的比较过)。

7.添加到列表

适用场合:当用户需要将物体添加到已存列表中时。

运动描述:新物体会滑动到列表中,而列表中得旧内容会被挤走(是主动让位还是被挤走,效果可以自行尝试),从而腾出空间。

一致性:相反的转场动效是删除列表中的物体。

优点:这种转场效果能够清楚的展现列表的重新排列过程,让用户知道旧信息到哪儿去了,新信息在哪里。

用户感受:旧列表似乎在给新物体腾出空间。

案例:

这个动画速度比较快,实际上下了Task的童鞋可以看到,是通过折叠把上面的列表向上“推”给新项目腾出空间。

8.固定标签

适用场合:当用户滚动带有标签的列表时(常见的头部固定,可参考iOS7的电话簿列表)。

运动描述:标签会始终保持在列表的顶部,兼顾了导航和内容浏览。

优点:这种动效能够清晰的描述出内容与标签之间的关系。

用户感受:标签始终保持在列表的顶部。

案例:

导航栏,现在不流行死板的固定不动,而是下滑手势出现,上滑手势消失,增大可读区域。

9.横竖屏切换

适用场合:当内容需要根据设备的旋转来旋转、重新排列时。

运动描述:内容伴随屏幕的旋转而旋转,与设备旋转指向一致。

一致性:内容的旋转取决于设备的旋转。

优点:能够在设备旋转的同时,平滑的保证内容的过渡。

用户感受:内容好像是液态的,伴随屏幕旋转。

10.按钮标签转换

适用场合:同一层级之间的导航。

运动描述:根据内容的转换,按钮相应地在视觉上转换为标签。

一致性:标题随内容移动、改变。

优点:能够清晰的展示标签和内容之间的从属关系,让用户理解架构。

用户感受:按钮转换为标签。

11.分合

适用场合:当用户分离/结合物体时。

运动描述:物体会根据用户的交互行为而分离/结合。

一致性:分离与结合。

优点:能够让用户清晰地感受到物体之间分合关系。

用户感受:分离和结合。

12.滚动

适用场合:当用户水平或垂直地移动物体时。

运动描述:根据用户手势指向滚动。

优点:非常适用于列表信息的查看。

Albumatic应用

13.平移

适用场合:当用户水平或垂直地移动物体时。

优点:非常适合地图界面。

14.滚动条

适用场合:滚动列表时。

运动描述:当屏幕中的信息滚动时,滚动条也成比例的滚动。

优点:能够告知用户当前所处的位置,也能让用户了解信息的长度。

用户感受:

15.页码指示器

适用场合:当翻页、切换屏幕内容时。

运动描述:通过实心点的移动来告知用户页面已经切换,同时还能告知用户页面的数量。

优点:能够告诉用户当前处于哪一页,总共多少页。

用户感受:

16.保存指示器

适用场合:当用户添加书签、下载、保存时。

运动描述:用户一旦保存、下载某个物体,物体会复制一份,同时缩小、移动到保存指示器中。

优点:能够提示用户下载的内容能在哪里找到,能够告诉用户对象已经被添加。

用户感受:所下载的物体飞到了下载文件夹中了。

时间: 2024-11-16 09:04:32

UI的基本动效--1的相关文章

动效设计原理:从卡通动画到UI动效

概要 UI是基于静态页面来设计的,页面之间通过跳转切换.在设计过程中,设计师很重视单页的视觉效果,却经常忽略了对界面跳转的处理.这些未经处理的跳转由于没有提供足够的预期,所以用户在使用时经常会觉得困惑.与此相反,在卡通领域,由于使用了足够的动画效果,用户可以非常容易理解某个动作,即使夸张的动作也没问题. 尽管UI设计和卡通动效之间存在差异:卡通更侧重于娱乐,而用户界面却是严谨的互动式工具.但是我们还是可以借鉴卡通动效的优点,从情感和认知层面上将两者的优势相结合. Keywords UI.动画效果

iOS 停止不必要的UI动效设计

http://www.cocoachina.com/design/20151124/14400.html 前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议. 我们将在下文中,简单探讨如何改善下面的这个交互. UI动效设计的反面案例(线上Demo) 注:这个反面案例并非假设,而是来自近期的真实客户案例. 概述 自从 70.80 年代首个光栅图像在CRT屏幕出现以来,人们对于(数字)视觉设计的态度一直在不断进化.与其他艺术领域不同

UI动效设计从入门到项目实战 高清无密 百度云盘

高薪设计师必修课 AE移动UI动效设计从入门到实战 如今诸多企业已经意识到动效在产品用户体验中的重要性,单纯的满足功能性的设计已经out了,动效设计已然成为未来UI设计师必备的能力!本课程采用基础理论与实战案例相结合的教学方式,手把手带你学习炫酷的动效设计! 第1章 课程简介 介绍该课程的学习内容,以及课程内的案例效果展示 1-1 课程介绍 第2章 动效基础知识学习 动效基础操作知识点梳理,快速掌握AE面板等基础操作知识要点,了解动效实现基本原理. 2-1 AE软件界面初识 2-2 菜单栏讲解

【FairyGUI & Unity】使用动效功能实现血条UI扣血与加血的缓动效果

原理 血条使用进度条组件,可以得到当前值与最大值. 通过动效-改变缩放可以让图片宽度从1到0按百分比变化. 动效可以指定播放动效的时间范围 组件设计 创建一个进度条组件,作为血条. bar是实际血量条 DownBar是扣血缓动背景图层 UpBar是加血缓动背景图层 LowBar是低血量变色(和控制器配合,本文不讲) n11组合是血量参考线 发布到Unity. 参考代码 if (hpValue < hpBar.value) // HP降低 { hpBar.DownBar.SetScale((flo

Android头像下拉缩放动效

头像下拉缩放动效 头像下拉缩放这个在IOS中很常见,最近在Github上也看到了类似的效果,所以决定把它集成到我现在做的项目中去. Github上的开源地址:https://github.com/Frank-Zhu/PullZoomView 先上2张效果图 PullToZoomView的使用 这个开源框架的使用主要用到的是PullToZoomListViewEx和PullToZoomScrollViewEx的2个类库,PullToZoomListViewEx这个是ListView的下拉效果,暂时

Android 一个绚丽的loading动效分析与实现!

http://blog.csdn.net/tianjian4592/article/details/44538605 前两天我们这边的头儿给我说,有个 gif 动效很不错,可以考虑用来做项目里的loading,问我能不能实现,看了下效果确实不错,也还比较有新意,复杂度也不是非常高,所以就花时间给做了,我们先一起看下原gif图效果: 从效果上看,我们需要考虑以下几个问题: 1.叶子的随机产生: 2.叶子随着一条正余弦曲线移动: 3.叶子在移动的时候旋转,旋转方向随机,正时针或逆时针: 4.叶子遇到

CSS动效集锦,视觉魔法的碰撞与融合(二) - 知乎

原文:CSS动效集锦,视觉魔法的碰撞与融合(二) - 知乎 引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代,做一一告别. CSS有他难以做到的事情,我们帮他用lottie解决 CSS有他可以做到的事情,我们用我们的头脑帮他解决 本文实现的CSS效果一览 标题吸顶 手写箭头 文字背景 圆形天坑 按钮波澜 动态方形 加载骨架 多行省略 标题吸顶 s

自定义View之实现日出日落太阳动效

以前也很羡慕网上大神随手写写就是一个很漂亮的自定义控件,所以我下决心也要学着去写,刚好最近复习了Android View的绘制流程知识,看来看去就是那些个知识点,没点产出总感觉很迷.现在个人呢用的是华为荣耀8手机,碰巧在看自带的天气APP时,滑到最下面看到那个动效图:日出时间和日落时间上边是一个半圆,白天任意的时刻(在日出和日落时间之间)都有对应一个太阳从日出时刻沿着半圆弧做动画特效,个人第一感觉就是:就拿这个来练练手啦!于是拿着笔和纸,画了模型图,甚至求什么sin.cos函数,有点过分了哈,还

动效设计必备:元素周期运动表(Periodic Table Motion)

今天分享一个元素周期运动表,这个并不是化学元素,你可以理解为「元素运动规律」,因为这个元素表是由一些常用动效组成,并且每个动效的实现都有一个理论依据,而不是凭空想象出来.动效有弯曲.偏移.流动线.噪波.回旋路径.极坐标.音频波浪.对称旋转.连接.遮罩消除等效果.对到交互设计师,想了解动态设计原理,建议收藏此表. 网站名称:Periodic Table Motion 网站地址:http://foxcodex.html.xdomain.jp/ 进入网站后,我们点击每个动画都有尽介绍! 下面来看看这些