数极客首页

创造流动的瞬间—探讨移动端交互动效设计

发明活动的瞬间—讨论移动端交互动效设计

iOS7的发布带来了苹果历史上最大的一次设计作风
的改动
,强调依从于内容的扁平化UI、纤细的字体和鲜明的图标、带有纵深感的层次与动画表现构成了它的全新设计特性
。撇开饱受争议的细节设计,静观iOS7,不难发现,许多让我们眼前一亮的瞬间

,来自以下一些交互动效设计的创新点:

 

3D视差(Parallax Effect)在用户倾斜和移动

屏幕的时分
,IOS主屏能够

依据

感应器数据,调整壁纸和图标的相对位置,产生一种三维空间上的景深效果。

发明活动的瞬间—讨论移动端交互动效设计

拟真动态 将理想
中的运动现象简化笼统
,构成
了iOS 7中一些蛮有特征
的动画效果。天气应用中,全屏的气候
动画文雅
而逼真,洋洋洒洒的雪粒、悠然飘浮的云朵、划破天际的闪电传达出一种共同
的表现力,赢得

了发布会上的阵阵掌声。指南针工具中的水平

仪动画,采用两个圆圈逐步

相合的过程生动地表现了水平

校准的过程。iOS7中还增加了动态图标,时钟图标和设置图标恢复

了时针分针走动和齿轮转动的状态。

发明活动的瞬间—讨论移动端交互动效设计

弹性 信息应用中,聊天气泡随着文字一同
被丢上屏幕,当用户滚动屏幕,它们相互

碰撞并产生挤压缓动。相似

的,一翻开
Game Center,六个鲜艳的泡泡富有节拍
地弹出然后在与手指的交互过程中弹开消散。IOS7中的通知中心能够

从锁屏界面激活,而激活过程中面板会与屏幕底部碰撞产生回弹效果。发明活动的瞬间—讨论移动端交互动效设计

缩放(Zoom) 当用户解锁之后,图标以屏幕中心为轴渐次缩放每个图标,产生一种由远及近贴到主屏上的觉得
,点击翻开
应用、翻开
分组均采用放大展开的方式
,这里的缩放更多地表现
了系统的空间感。
发明活动的瞬间—讨论移动端交互动效设计

假定

说之前在移动

端交互设计中,动效可有可无,那IOS7的呈现
,能够

说宣布
了动效设计曾经
不容忽视

。还记得在《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》一书中,讨论
了怎样
发明

出色

的IOS用户体验,提出了“令人惊叹”的设计要素这一概念,即那些给用户带来的体验感受能够

抵达

其心中某个“情感阀值”的表现层元素。而以下三方面要素
将决议
着产品带来的体验感受能否逾越
用户心中的“情感阀值”:

书中还提出,上述的三点推进
要素
主要在三个属性维度上得以表现

在某一方面做到鹤立鸡群
,产品就会让人印象深化

。对照iOS7的设计不难发现,Apple选择了交互动效这一方向中止

着重,而这也让我们记住了iOS。 翻看iOS7的HIG,文档中这样描画

动效的作用“精密

而恰当的动画效果能够

传达状态、增强

用户关于
直接支配
的感知、经过
视觉化的方式向用户呈现操作结果”。 在移动

产品交互设计中,我们能够

把动效的作用更深化
地归结为以下几点:

1.流利
过渡

假定

说界面规划
能够

组织UI元素的静态位置,那么动效能够

组织UI元素在时间维度上的演进。每一个毫秒里界面元素怎样
呈现
和消逝
,它的大小、位置、透明度和颜色怎样
变化,经过
动效的诠释,用户与产品的交互过程会愈加
顺畅。Appflow中,界面元素的呈现
,菜单的停靠,都随同

着富有节拍
感的动画效果,让整个运用
过程一挥而就
。多米音乐中运用
旋转的唱片来作为场景过渡之间的衔接
点,契合音乐应用的主题,也是转场过程衔接

自然。

2.高效反响

作为与用户之间发作
联络
的一个很重要的交互元素,良好的反响

设计能够

让用户更好天文

到操作的结果与程序当前的状态,减轻用户在等候
过程中的焦虑。与文字型的静态反响

相比,运用
动效能够

让反响

高效直观。iOS7的app store中经过
环状的进度圈来表现应用的下载过程,并将其与暂停按钮分别

,让用户对进度了如指掌
,还能够

便利
地暂停进程。

3. 增强

支配

“直接支配
”是移动

产品用户体验中很重要的一个概念,简单来说,它央求

我们的产品与用户交互的方式尽量接近真实世界的互动方式。它央求

交互对象的反响
行为是能够

预测的,不需求
任何提示,并且契合
我们关于
理想
世界规律的认知。这就央求

我们拉近界面操作与用户的距离

,让用户难以发现虚拟的交互对象与理想
的操作行为之间的屏障,很多令人新奇和兴奋的设计点都来源于此。经过
交互动效关于
理想
世界的模仿

,我们能够

显著地增强

产品的“直接支配
”特性。以Paper App为例,运用
过它的同窗
都会被它精致的交互动画所吸收
。悄然

翻动绘图本,翻开
一页开端
绘画,栩栩如生的体验让你即便

初次运用
也能很快投入。

4. 辅佐

引导

由于移动

界面的空间十分

有限,我们经常要藏起一部分

功用
,同时手势操作也是移动

应用中很常见的交互元素。我们要怎样
样让用户发现躲藏
的功用
,通知
他们怎样
运用
手势呢?这个时分
,动效作为一种生动的表现方式
,常常
能够

起到很好的辅佐

引导效果。iOS7中锁屏界面滑动解锁的提示会显现
一种从左到右的突变
效果,用户能够

依据

这种运动方向去预知手势的方向。在翻开
read it!的时分
,会短暂显现
左侧的菜单,然后右边的主内容区域划过来逐步

掩盖
,直到左侧只剩下图标作为入口,这辅佐

用户了解

了侧边栏所躲藏
的功用

5. 升华体验

假定

你的产品曾经
具有
了良好的可用性,却缺乏亮点,或许
你能够

思索
为其增加动效。将动效融入产品之中,常常
带来更愉悦地运用
体验,也更细腻地表达应用的心情
和气质。具有分歧
性的标志动效,常常辅佐

产品在细节中流显露
独有的品牌特性,增加产品的魅力值。

我们能够

发现,交互动效的设计既在产品的功用
层面提供支持,又在表现层面发挥影响,而且在移动

产品的交互设计中,它的确

很有适用
价值。那么,要怎样
做才干
更好地为我们的产品设计交互动效呢?在这里,总结出以下一些设计要关注的点:

 

 

作为移动

端的交互设计师,我们云阅读设计组也不时

在思索

怎样
用动效来丰厚
自己

的产品。但是在日常交互设计工作中中止

动效设计时,我们常常会遇到以下的一些问题:第一,关于
动效的相关素材搜集有一定的难度,且缺乏管理,这招致
设计的时分
缺乏灵感来源,无法自创
常见的动效,也不利于整体把握当前的动效设计趋向
;第二,动效设计很难在传统的交互文档中中止

表述,以前总是由设计师拿相似

的应用去和开发沟通,不够规范

;第三, 程序员开发的过程中也等候

有一个常用界面动画效果的代码库,能够

作为开发时的参考。

“交互动效库”就是我们对处置

上述问题制造
的一款工具。设计师们能够

把自己

平常
看到的应用中呈现
的动效,录制成短视频并上传,经过
简短的相关阐明

填写,就能够

在网站上相应页面呈现刚上传的动效视频。在设计项目中遇到需求
动效参考的时分
能够

去网站上寻觅
灵感,找到合适

的,能够

把动效视频的网页地址直接黏贴在交互稿上,加上简单的阐明

,就能够

让开发同窗
直观了解

要做的效果。开发所搜集的常奏效
果的代码也能够

上传入动效库,在该动效视频的页面上可直接下载代码。

在此分享下记载
动效的两个比较

好的工具:

Mac系统下

AirServer: 同步移动

设备屏幕到电脑 http://www.airserver.com

screenflow: 录屏软件 http://www.telestream.net/screenflow/overview.htm

Win系统下

Reflection:同步移动

设备屏幕到电脑  http://www.reflectionapp.com/

FastStone Capture:录屏软件 http://www.itopdog.cn/graphic-image/image-capture/fscapture.html

第二个方面,主要是功用
完成
上的问题,要研讨
一种技术代价比较

小的处置

计划

,适用
为先。我们选择了HTML5的视频组件去呈现动效记载
,由于
它比较

轻量,在集中总览的瀑布流页面,和详情页面都能够

便利
地播放视频。对动效视频数据的管理,我们没有搭建数据库,而是在每一个目录下设置了一个JS文件寄存

记载
视频信息的数组,再经过
全局JS在加载每个页面的时分
去读取相应目录下的这个JavaScript数组将相关文件加载进来。设计师在将自己

搜集的视频放到相应目录下后,为该目录下的JS文件,添加相关数组记载
,即能够

把自己

上传的视频添加到动效库的网站上。

在细致

的云阅读新版本的交互设计中,我们应用
交互动效库来阐明

和解释相关的动效设计。交互动效库对推进
动效设计落实到细致

产品中,起到一定的作用。它固然
还很不完善,但是关于
有限的资源下小团队怎样
创建

自己

的设计工具库,我们提出一个处置

问题的思绪
,希望也能给大家带来启示

发明活动的瞬间—讨论移动端交互动效设计

总结对移动

端动效的相关研讨
,还存在这以下一些值得深化
探求
的点:
1. 动效创意方面的创新。往常
国内的交互动效设计大多数还停留在运用
国外曾经
呈现
的设计,很少有首创
性的动效设计呈现
,怎样
去设计动效也缺乏相关的指导。

2.表达动效设计的Demo办法

怎样
更好地高效地表现我们设计的动效,对AE、Flash等软件呈现动画效果原型的理论
会是比较

有适用
价值的一个方向。

3. 关于移动

端界面交互技术方面的学习研讨
在网页设计范畴
,有不少设计师对前端技术曾经
有了一定的了解

。但是在移动

设计范畴
,学习界面和交互效果怎样
用代码完成
还没有遭到
设计师们的普遍
注重
。但我们以为
这是很重要的一步,假定

你了解

了技术完成
层面的学问
,很多设计障碍
就会消弭
,创意更容易得到发挥也更容易在产品中落实。这会有点难,但或许
真正的设计推进
力来源于此。

最终
,想把2013 WWDC上的收场
写在这次分享的结尾。“假定

每个人都在忙于完成设计,那么谁来完善产品?我们曾经对为便当
而设计还是为愉悦而设计感到困惑。当决议
要设计一个大家所真正需求
的产品时,我们开端
面对许多选择,而辅佐

我们专注的,是最初提出的一个问题:我们希望自己

的产品带给用户什么样的感受?快乐、惊喜、爱、联络
。抱持这样的初心,我们开端
如虎添翼

地发明

,每一次肯定背后都是上千次的招认

。我们简化、我们不时
优化,然后推倒重来,直到确信让我们感动

的设计能够

让每一个用户的生活更美好

。往常

我们做到了,它真正触动人心。”透过这段文字,我们能够

感遭到
苹果所坚持的一种肉体
:专注于用户情感,对体验如虎添翼

。或许,这就是苹果的产品会让我们记住的缘由
,也是体验设计由优秀迈向出色

的秘诀。

来源:网易uedc

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章