下载此文档

实战:如何设计移动端交互动效.docx


文档分类:IT计算机 | 页数:约5页 举报非法文档有奖
1/5
下载提示
  • 1.该资料是网友上传的,本站提供全文预览,预览什么样,下载就什么样。
  • 2.下载该文档所得收入归上传者、原创者。
  • 3.下载的文档,不会出现我们的网址水印。
1/5 下载此文档
文档列表 文档介绍
实战:如何设计移动端交互动效
iOS7的发布带来了苹果历史上最大的一次设计风格的改变,强调依从于内容的扁平化UI、纤细的字体和鲜明的图标、带有纵深感的层次与动画表现构成了它的全新设计特点。撇开饱受争议的细节设计,静观iOS7,不难发现,许多让我们眼前一亮的瞬间,来自以下一些交互动效设计的创新点:
3D视差
3D视差(Parallax Effect)是在用户倾斜和移动屏幕的时候,IOS主屏可以根据感应器数据,调整壁纸和图标的相对位置,产生一种三维空间上的景深效果。
拟真动态
将现实中的运动现象简化抽象,形成了iOS 7中一些蛮有特色的动画效果。天气应用中,全屏的气象动画优雅而逼真,洋洋洒洒的雪粒、悠然飘浮的云朵、划破天际的闪电传达出一种独特的表现力,赢得了发布会上的阵阵掌声。指南针工具中的水平仪动画,采用两个圆圈逐渐相合的过程生动地表现了水平校准的过程。iOS7中还增加了动态图标,时钟图标和设置图标还原了时针分针走动和齿轮转动的状态。
弹性
信息应用中,聊天气泡随着文字一起被丢上屏幕,当用户滚动屏幕,它们互相碰撞并产生挤压缓动。类似的,一打开Game Center,六个鲜艳的泡泡富有节奏地弹出然后在与手指的交互过程中弹开消散。IOS7中的通知中心可以从锁屏界面激活,而激活过程中面板会与屏幕底部碰撞产生回弹效果。
缩放(Zoom)当用户解锁之后,图标以屏幕中心为轴渐次缩放每个图标,产生一种由远及近贴到主屏上的感觉,点击打开应用、打开分组均采用放大展开的形式,这里的缩放更多地体现了系统的空间感。
手指跟随
iOS7中跟随手势的动画很多,比如点击拨号键盘相应的按钮会变为半透明,右滑返回中当前页面的拖动效果,滑动解锁过程中的渐变动效,这些为我们带来了很强的操纵体验。
如果说之前在移动端交互设计中,动效可有可无,那IOS7的出现,可以说宣告了动效设计已经不容忽视。还记得在《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》一书中,探讨了如何创造卓越的IOS用户体验,提出了“令人惊叹”的设计要素这一概念,即那些给用户带来的体验感受可以达到其心中某个“情感阀值”的表现层元素。
而以下三方面因素将决定着产品带来的体验感受能否跨越用户心中的“情感阀值”:
1)符合直觉:保证设计能引导用户做出最符合直觉的操作;
2)差异化的创新特征:设计中要有显著的创新特征,即让用户感觉到某些不同寻常的产品体验;
3)积极响应:设计方案要以积极的姿态去缓解那些由于差异化导致的用户陌生感。
书中还提出,上述的三点推动因素主要在三个属性维度上得以体现:
1)界面外观:即基本的静态视觉元素;
2)交互方式:包括人机物理交互、手势以及其他常规的输入方式;
3)交互动效:包括哪些能够为产品赋予生机的动态的界面元素及视觉效果,这些交互效果通常与特定的响应行为相关,甚至包括那些与交互行为没有直接关联的临时状态。
在某一方面做到出类拔萃,产品就会让人印象深刻。对照iOS7的设计不难发现,Apple选择了交互动效这一方向进行着重,而这也让我们记住了iOS。翻看iOS7的HIG,文档中这样描述动效的作用“精细而恰当的动画效果可以传达状态、增强用户对于直

实战:如何设计移动端交互动效 来自淘豆网www.taodocs.com转载请标明出处.

非法内容举报中心
文档信息
  • 页数5
  • 收藏数0 收藏
  • 顶次数0
  • 上传人文档大全
  • 文件大小21 KB
  • 时间2018-04-21