动态与富态

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

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

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

相关推荐

  • 交互设计连载1:什么是交互设计?

    三年前...当时我还是一名刚入行的UI设计师。在一个无聊的周末,看到一篇介绍交互设计的文章,一时间特别兴奋。这篇文章大致告诉了我什么是交互,什么是交互设计。从那以后,我把注意力的侧重点逐渐往交互上靠拢,以至于后来有机会转行成为了一名交互设计师。下面po出这篇文章:《从零开始成为优秀的交互设计师》,可以去网上搜一下这篇文章,干货满满。回到主题,什么是交互设计呢?交互设计英文称之为Interaction Design。你来我往视为交互。你点...

    2018-02-07
  • 米尔顿格拉泽谈动态设计

    上周我参加了谷歌的I/O大会,加入了一个关于跨平台设计的小组座谈,这一次会议有非常多有趣的新事物,让人有种第一次走在拉斯维加斯大道上一样的惊奇。

    2014-12-30
  • 交互设计七大定律之The Law Of Proximity 接近法则

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    2015-08-27
  • web表格设计攻略

    在后台管理系统、数据类产品等的设计中,表格作为一种常见的信息组织整理手段,甚至是web页面的基础设施之一,其重要性不言自明。结合最近做的几个项目和相关设计经验总结,特此整理出这样一篇设计攻略,希望能够对你的设计有所帮助。

    2017-04-28
  • 交互设计师的60日计划之第五天

    你好,8月。7月份的尾巴喜欢上一个人,花了太多心思,8月份一来终于知道不会有结果,所以要赶紧忘记,把心思花回自己身上。 2015/08/01 职场其实很可怕 今天一整天都去帮同事搬家了,虽然没干什么大的体力活,但是…

    交互专题 2015-08-20
  • 6个实用消费者心理学

    消费者究竟是不是傻子?这事儿真要分两面来看。有时傻的天理不容,有时精的六亲不认。傻子是这个世界最幸福的人群,哪里会有那么多傻子,只不过都是分时段的智商休眠而已,至于什么时间休眠,这完全取决于消费者出于…

    交互设计 2014-12-03
  • 福睿斯幸福号春运列车的背后:营销回归用户体验

    爆竹声中辞旧岁,品牌送暖入屠苏。一年一度的春节,不仅是万家团圆的时刻,也是品牌们“秀肌肉”,送暖消费者的黄金期。每到这时,煽情、怀旧、调侃、明星、红包、互动……各大品牌总会使出浑身解数以俘获消费者“芳心”。而今年最暖的,莫过于福睿斯推出的“幸福号春运列车”。今年春节期间,长安福特福睿斯联手凤凰网、12306客户端、高铁杂志《旅伴》等平台,在1月30日至3月31日期间联手为春节回家的朋友打造往返于成都—上海的“福睿斯幸福号”专属列车(D3...

    2018-03-29
  • 在网页设计中如何少让用户费脑筋,保持操作流畅

    除了引导用户,还要减少他们的认知流程,以保持流畅状态。千万别把计算这种事情丢给用户,让计算机来处理。

    2017-05-23
  • 五大新玩法和新设计方向,教你设计出不一样的年货节页面

    年关将近,今天就主要分享一下我对这些年的年货节页面看到的一些现象,发表一些自己的看法和思考。“天哪,怎么几乎所有的年货节页面都是红红火火毛笔字,高高兴兴过大年的手绘风格啊?这让我们这些不会写毛笔字也不会手绘的人怎么活?”“抢年货”
    “钜惠来袭”
    “有礼贺新年“
    “贺岁狂欢“
    “年货盛典”
    “年味中国”
    “春节不打烊”
    ………………..

    2017-05-10