首页 > 网页教程 > 设计分享 > 交互设计基础!四个移动界面常见的动效类型

交互设计基础!四个移动界面常见的动效类型

时间:2015-05-04    来源:知乎

编者按:这两天有一款动效神器Hype 3特别受欢迎,借这股动效的劲头,今天胡痴儿(腾讯用户体验设计师)给同学们科普一下动效的类型。

一、动效起源于什么?

iOS 6(视觉表层&信息的外观)→ iOS 7(动效&信息的运作方式)

二、动效是用来干什么的?表现视觉层级关系的 是几种UI元素之间的相互转换

交互设计 交互设计经验 移动界面设计 动效设计

三、动效如何分类?

交互设计 交互设计经验 移动界面设计 动效设计

一个元素如何能够填满整个页面?

如何引导用户的视线?

一、Icon → Page

iOS 镜头运动&焦点移动

交互设计 交互设计经验 移动界面设计 动效设计

icon即APP&文件夹本身。

高级视图 → 细节视图

Z轴,镜头向icon图层做相向运动,视野缩小,视野中物体变大; XY轴,icon放大变成app&文件夹,切换为app界面&文件夹

交互设计 交互设计经验 移动界面设计 动效设计

(iOS的视差效果&镜头运动&空间深度)

APP的 icon → 全屏APP界面

APP的空间态:

交互设计 交互设计经验 移动界面设计 动效设计

启动:

交互设计 交互设计经验 移动界面设计 动效设计

交互设计 交互设计经验 移动界面设计 动效设计

二、list → Page

交互设计 交互设计经验 移动界面设计 动效设计

交互设计 交互设计经验 移动界面设计 动效设计

交互设计 交互设计经验 移动界面设计 动效设计

Android

交互设计 交互设计经验 移动界面设计 动效设计

1. 涟漪反馈 → 旧页面Fade:

交互设计 交互设计经验 移动界面设计 动效设计

2. 新页面上浮:

交互设计 交互设计经验 移动界面设计 动效设计

涟漪纹

List上浮,展开Detail View

交互设计 交互设计经验 移动界面设计 动效设计

交互设计 交互设计经验 移动界面设计 动效设计

三、Button → Page

iOS

交互设计 交互设计经验 移动界面设计 动效设计

四、Tilte → Page 五、page → 多任务

iOS:

APP的时间态:单任务&全屏界面 —— APP在空间上无法跳转→(APP间不能同时呈现而只能用)时间先后次序选择。

X轴水平排列,APP间共处于同一平面 镜头向图标图层做反向运动则视野扩大,APP界面缩小

交互设计 交互设计经验 移动界面设计 动效设计

Andriod:

XY轴,垂直,上下排列,高低叠加 APP的Page和其他APP同在Z轴空间

交互设计 交互设计经验 移动界面设计 动效设计

Safari:Z轴&镜头从平视变为俯瞰:

交互设计 交互设计经验 移动界面设计 动效设计

Chrome:Y轴,被拉下去了:

交互设计 交互设计经验 移动界面设计 动效设计

锁屏界面:

若锁屏前是icon界面:

镜头穿过icon图层,向icon界面做相对运动

交互设计 交互设计经验 移动界面设计 动效设计

若锁屏前是APP界面

镜头则向APP界面做相对运动

交互设计 交互设计经验 移动界面设计 动效设计

临时图层:

当锁屏界面收到通知&密码解锁&拉出通知中心&拉出控制中心,表明有”临时“图层覆盖,则:

毛玻璃&背景虚化&浅景深&距离感&层次感

前景“浅景深” 背景“视差”

附一张图

交互设计 交互设计经验 移动界面设计 动效设计

相关推荐
网页交互设计的一些理解
深挖交互设计的细节提升用户满意度
8个原则打造优秀的用户体验
交互设计中6个通用原则的介绍
如何杜绝网页设计中视噪对用户的影响
电子商务网站如何设计高效易用的网站左侧导航树
网页视觉设计如何针对用户有效表达信息
交互设计之浅谈下意识设计
前瞻:2012年Web设计和开发的15个最新趋势
用户体验评估之用户心理负荷的测量
百度统计流量研究院设计过程及思路详解
给不完整视觉信息寻找最简单直接的解读办法
移动应用开发:无线终端用户理解工作方法分享
分享:体验设计师需要学习的一些前端技术
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
仿生设计—让互联网产品更易用
浅谈交互设计中的默认值对用户的影响
深入分析网页栅格系统的规范制作
深入谈交互设计之人人都懂交互设计
移动应用设计的横竖屏切换中的界面设计与体验提升
交互设计:移动应用与PC应用的交互差异浅析
交互设计师应该如何设计直观且有说服力的作品集
移动设备动画设计的12个原则分享
分析用户界面中扁平化设计的优缺点
分享淘宝购便利交互设计心得
富有灵感和创意的web布局及交互设计赏析
符合用户操作习惯的网站界面设计分享
18个超棒的响应式Web设计前端开发教程
在视觉设计中对像素的深度解析
网页设计中创新式布局与交互设计思考
换汤不换药?看应用们如何“为iOS 7设计”
产品设计:万水千山总是情 不要图片行不行
APP浏览体验设计的思考:如何理解用户的眼?
网页设计怎么破?创新式布局与交互的设计
四大网页设计秘诀:让用户第一眼就爱上你的网站

分类导航

教程推荐

热门特效

热门教程