文章目录[隐藏]
一、动态：动画表达的设计应用
”动态“的设计常常能使页面的呈现更加动感，有活力，富有吸引力。具体来说，”动态”的设计在产品应用中常用于以下几种情形：
1.1. 丰富内涵
先试试为这段产品介绍做设计：
- Dropbox可让您将所有照片、文档和视频随身携带，并轻松进行共享。
- 您可从您所有的电脑、iPhone、iPad以及网络访问保存在Dropbox的任何文件。
- 有了Dropbox，您的一切重要记忆资料和工作内容皆触手可及！
首先来看看图片的呈现：
显然图片无法满足丰富内涵的表达，我们再来看看动画的呈现，动画可以表达比图片更丰富的内涵。
用iOS的同学也可以亲自下载Dropbox体验一下首次进入App的引导页动态设计。
1.2. 过程描述
“动态”的设计使得用户清晰了解产品（APP或者Web）当前正在进行的操作。把过程呈现给用户，让用户知道当前产品执行的阶段，等待的过程也可以很有意思。
1.3. 操作指引
“动态”的设计可以在不影响视觉界面的前提下，给用户更有效的指引。比如在你按下删除时，指引你进行二次确认。
1.4. 辅助交互
“动态”的设计可以优化交互路径，让一些操作隐藏在动画里，不干扰界面。常用于下拉刷新的操作。
1.5. 即时反馈
“动态”的设计让用户得到操作的即时反馈，让界面与用户互动起来，伴随着操作的畅快感。
二、富态：富交互式设计的应用
移动端上，基本的WEB交互方式主要是轻点和滑动，寻找更丰富的人机交互方式，也就是富态的设计应用。
2.1. 戳一戳
触屏上除了常用的点和划，恰当的场景让用户试试
猛戳！！！！
长按————————
2.2. 摇一摇
利用手机加速计，摇一摇广泛出现在注入社交、即时通信、电商活动、移动支付等各类场景中。
2.3. 吹一吹
监听传声器，获取声音强度，可以做吹气球、吹泡泡、吹蒲公英、吹蜡烛、吹一头牛等有趣玩法。
2.4. 拍一拍
拿起手机启动自拍模式，和鹅厂总办们来一张没羞没臊的合照吧~
2.5. 扫一扫
扫一扫不仅是用户与商品连接的方式，也是用户与用户连接的方式。
2.6. 擦一擦
擦一擦：“互动体验派”，它们是一群标准的技术宅，笃信“科技改变营销”。
2.7. 更多主动交互方式
- 刮一刮：触屏操作，适用于抽奖、刮券等场景
- 哔一哔：通过NFC近场通讯，适用于支付场景
- 移一移：使用距离传感器，适用于游戏场景
- 咻一咻：音频输入，适用于语音录制与识别的场景
- ……
三、动态+富态
有钳就能任性！
3.1游戏场景
射击类游戏，提供了狂戳屏幕和摇一摇两种富态玩法，结合丰富细腻的动态呈现，出彩的是还调用扬声器播放辣么妖娆的配音，小朋友玩了根本把持不住……
3.2. 功能场景
挑选试穿功能，动态简洁的操作引导，亮点是向上拖拽的手势操作，与牛仔裤柔软平顺的动态呈现完美的结合，塑造出高大上的品质感。
3.3. 故事场景
故事与广告宣传主题，元素动画简单而富有动感，通过横向滑动或竖向滑动的分屏浏览方式，每一屏只讲一个重点，是文案类表达的优选方式。
四、如何才能变有钳？
4.1. 动态创意来源
花瓣网：http://huaban.com/boards/13457687/?md=newbn&web
Material Design：https://material.angularjs.org/
4.2. 富态api资源
W3C Device API：http://www.w3.org/2009/dap/
Android Sensors Overview：http://developer.android.com/guide/topics/sensors/sensors_overview.html
4.3. 相关框架
单页视差滚动插件SkrollrJs：https://github.com/Prinzhorn/skrollr#rd
多页视差滚动插件Parallax：https://github.com/hahnzhu/parallax.js
…
最后感谢大家阅读，转载请注明出处！O(∩_∩)O谢谢！
原创文章，作者：ioued，如若转载，请注明出处：https://www.iamue.com/9921/
