动态与富态

一、动态:动画表达的设计应用

”动态“的设计常常能使页面的呈现更加动感,有活力,富有吸引力。具体来说,”动态”的设计在产品应用中常用于以下几种情形:

1.1. 丰富内涵

先试试为这段产品介绍做设计:

  • Dropbox可让您将所有照片、文档和视频随身携带,并轻松进行共享。
  • 您可从您所有的电脑、iPhone、iPad以及网络访问保存在Dropbox的任何文件。
  • 有了Dropbox,您的一切重要记忆资料和工作内容皆触手可及!

首先来看看图片的呈现:

df1

显然图片无法满足丰富内涵的表达,我们再来看看动画的呈现,动画可以表达比图片更丰富的内涵。

IMG_0203IMG_0204IMG_0205

用iOS的同学也可以亲自下载Dropbox体验一下首次进入App的引导页动态设计。

1.2. 过程描述

“动态”的设计使得用户清晰了解产品(APP或者Web)当前正在进行的操作。把过程呈现给用户,让用户知道当前产品执行的阶段,等待的过程也可以很有意思。

a67fc24ddb2b37a0374c90ada132a87843ba7977294b6-jZdUc8_fw658

1.3. 操作指引

“动态”的设计可以在不影响视觉界面的前提下,给用户更有效的指引。比如在你按下删除时,指引你进行二次确认。

33fw658

1.4. 辅助交互

“动态”的设计可以优化交互路径,让一些操作隐藏在动画里,不干扰界面。常用于下拉刷新的操作。

fw658

1.5. 即时反馈

“动态”的设计让用户得到操作的即时反馈,让界面与用户互动起来,伴随着操作的畅快感。

df12

二、富态:富交互式设计的应用

移动端上,基本的WEB交互方式主要是轻点和滑动,寻找更丰富的人机交互方式,也就是富态的设计应用。

2.1. 戳一戳

触屏上除了常用的点和划,恰当的场景让用户试试

猛戳!!!!

长按————————

df13

2.2. 摇一摇

利用手机加速计,摇一摇广泛出现在注入社交、即时通信、电商活动、移动支付等各类场景中。

df14

2.3. 吹一吹

监听传声器,获取声音强度,可以做吹气球、吹泡泡、吹蒲公英、吹蜡烛、吹一头牛等有趣玩法。

df15

2.4. 拍一拍

拿起手机启动自拍模式,和鹅厂总办们来一张没羞没臊的合照吧~

df16

2.5. 扫一扫

扫一扫不仅是用户与商品连接的方式,也是用户与用户连接的方式。

df17

2.6. 擦一擦

擦一擦:“互动体验派”,它们是一群标准的技术宅,笃信“科技改变营销”。

 

2.7. 更多主动交互方式

  • 刮一刮:触屏操作,适用于抽奖、刮券等场景
  • 哔一哔:通过NFC近场通讯,适用于支付场景
  • 移一移:使用距离传感器,适用于游戏场景
  • 咻一咻:音频输入,适用于语音录制与识别的场景
  • ……

三、动态+富态

有钳就能任性!

3.1游戏场景

射击类游戏,提供了狂戳屏幕和摇一摇两种富态玩法,结合丰富细腻的动态呈现,出彩的是还调用扬声器播放辣么妖娆的配音,小朋友玩了根本把持不住……

 

3.2. 功能场景

挑选试穿功能,动态简洁的操作引导,亮点是向上拖拽的手势操作,与牛仔裤柔软平顺的动态呈现完美的结合,塑造出高大上的品质感。

 

3.3. 故事场景

故事与广告宣传主题,元素动画简单而富有动感,通过横向滑动或竖向滑动的分屏浏览方式,每一屏只讲一个重点,是文案类表达的优选方式。

2256217259 2256496784

四、如何才能变有钳?

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/

(0)
iouedioued
上一篇 2015-10-08
下一篇 2015-10-08

相关推荐

  • 色彩在交互设计中的应用

    UI设计微课堂关注将获得一对一解答,设计、资源、分享😛听说很多同学都置顶了我的公众号这样就能第一时间收到我精选的UI设计精品教程感谢大家的支持!↓↓下方高能↓↓对于交互设计师来说,通常交互原型都做为黑白稿。为什么要做黑白稿呢?那是因为在前期交互设计中,交互设计师为了更专注于产品的流程、跳转,避免前期投入更多的精力在UI效果制作方面。对于很多小公司或小团队来说,通常只有一个设计师或者设计资源很少,设计师拿到需求后,直接就出高保真效果图了(...

    2018-04-24
  • 从用户体验到品牌形象,营销的道路有多远?

    在数字化时代,如何提升品牌形象和用户体验,是两个营销的核心问题,品牌形象塑造消费感知,用户体验决定消费忠诚。企业重要的战略资源之一是:优质化的内容。而真正做内容营销的门槛极高,唯有真正强大的IP内容,才具有引爆市场与号召市场的能力。什么是营销IP,即知识产权(Intellectual Property),大IP,本身是产业链也延伸,具有黑洞版的吸金能力,是从招牌、内容、产业链等的延伸式营销。举个目前比较火热的例子,电影《魔兽》,根据网络...

    2018-02-02
  • 对交互有疑问的同学可以进行在线提问了

    目前PC端体验做的还可以,手机端暂时不支持,请登录电脑端网站进行提问! 提问页面入口    阿西答疑主题帖

    2016-04-12
  • 交互设计:如何设计更好用更舒适的触控手势?

    引言:我们生活在一个人机互动频繁,由设备驱动的世界中。 随着触摸屏逐渐成为移动设备的标配,多点触控手势的广泛应用,让我们与手机、平板电脑甚至是笔记本电脑之间建立起了一种更宽广的联系方式。我们通过模…

    2017-08-04
  • 没去过赌场,别谈用户体验

    订 [图片] 阅20———— Jun. ————A大叔说的 第09篇 文章既然最终决策是“人”,就要思考人性什么是好的产品?罗辑思维演讲时提过一个观点:能占用用户时间的产品就是好产品。如果把这个概念加以延伸,应该可以这么说:消耗了用户很多时间,但用户不自知,一段时间未使用就会再次

    微信热点 2018-04-08
  • 用户体验“大不同”,合作伙伴分享会

    2018年3月15日,“用户体验“大不同”,合作伙伴分享会”在福建省科威技术发展有限公司举行。虽然屋外下了很大的雨,但也没能减小屋里同行朋友们的热情。分享会一开始,惠普华南区业务开发经理李浩泉就以十分轻松幽默的氛围,将与会者带入状态。随后介绍了页宽产品的主要特点,并对惠普A3页宽复合机作了产品推介。惠普新一代A3智能复合机页宽产品的主要特点是:最新技术(集激光/喷墨优势于一身)高速(40ppm~80ppm输出速度)经济(购买/使用/维护...

    2018-03-17
  • 40个创意单页面网站设计

    Web设计灵感总是帮助我们走在新趋势, 设计结构、颜色和总体设计过程。有很多灵感的网站列出的主题就是我想要这一个是不同的。所以在这个今天的帖子我收集了40个创意单页面网站设计欣赏,为你找设计的灵感。

    2017-06-03
  • 译文 | 4种帮助设计师整理设计思路的方法

    当我们刚刚接手一个项目的时候,我们总能在初期迸发出很多有趣的想法,很多闪光的细节都是偶然闪现的,但当我们在设计的过程中,有多少能够真正落地到产出中呢?怎样才能成功捕捉到这些有趣的创意,并使之在后续的产品设计中表达出来?本文向大家推荐了四种方法,帮助大家整理设计思路,避免创意在你的脑海里逃走!下面进入译文。

    2017-05-25
  • 【原创译文】面向对象的用户体验设计

    原文:Object-Oriented UX 2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,…

    2015-11-20
  • 全民关注用户体验的时代已经到来

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    微信热点 2018-03-22