|收藏本站|联系我们
非凡教育

热门课程

培训项目

UI设计

您当前位置:主页 > 行业资讯 > UI设计 >

UI界面设计中的基本动效

浏览次数: 发布时间:2015-11-13 16:54 来源:非凡学院

一、前言:
 
指向性动效能够有效的描述物体之间的逻辑关系
同时通过视觉效果,可视化的描述物体当前运动状态。
通常,指向性动效能够让用户清晰的感受到物体与物体的位置关系,以及信息的层级架构。
 

 
二、指向性动效的分类:
 
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.保存指示器
 
适用场合:当用户添加书签、下载、保存时
运动描述:用户一旦保存、下载某个物体,物体会复制一份,同时缩小、移动到保存指示器中
优点:能够提示用户下载的内容能在哪里找到,能够告诉用户对象已经被添加
用户感受:所下载的物体飞到了下载文件夹中了
 

热门
课程
室内
设计
服装
设计
平面
UI
网页
设计
模具
设计
淘宝
网销
影视
后期