新媒体视觉设计第5章新媒体动态交互视觉设计课件.pptx

1、第5章 新媒体动态交互视觉设计 目录5.15.2 5.1 新媒体动态设计 5.1.1 新媒体动态设计的类型根据动态制作方式分为三类1、影视片段类动图2、摄影类动图3、艺术类动图 5.1.1 新媒体动态设计的类型 影视片段类动图是指通过截取电影、电视剧、动画、综艺等视频中的片段，再通过添加字幕等方式来设计“动图”。这些动图的特征往往是幽默、夸张、搞笑的内容，这类动图凭借影视剧本身广泛的群众基础，传播速度非常快。1.影视片段类动图 5.1.1 新媒体动态设计的类型 摄影类动图一般是指由多张连续的照片连续播放制作的动图，苹果手机中的Live Photo 功能可以直接拍摄动态照片，经过软件转换就可以生

2、成动图。摄影类动图中还有一种叫做 Cinemagraph 的特殊类型，cinema 是电影摄影，graph 是图片，Cinemagraph 是指拥有动态影像元素的图像，它的独特之处在于它是局部动态的摄影作品，如展示静态女孩子的飘逸的秀发等效果。Cinemagraph 在观感上与 Gif 格式的动画类似，但拥有远胜于普通 Gif 图片的动态内容表现能力，使用目前的摄影和后期技术已经能够获取画质细腻、色彩丰富、压缩较好的动态图片，所以，Cinemagraph 通常被称为 High Fashion GIF、Rich Mans GIF。时代周刊这样描述 Cinemagraph：“它创造了一个静谧而出神

3、的瞬间，将粗制滥造的 GIF 提升为一样更为纯净优雅的事物。”2.摄影类动图 5.1.1 新媒体动态设计的类型 艺术类动图的制作难度进一步加大，完全通过计算机软件进行制作，既需要完成平面设计，也需要进行动态加工，但自定义程度更高，在商业上用途更加广泛。国外有许多艺术家团队创作了非常多优秀的此类作品，如 Gifparanoia、Golden Wolf、Julian Glander、Rafael-varona、Scorpiondagger 等。3.艺术类动图 5.1.2 新媒体动态设计的制作 影视片段类动图、摄影类动图、艺术类动图的制作方式各不相同。影视片段类动图的制作比较简单，目前比较稳定、好用

4、且免费的软件是 GifCam，它非常简单易用，只需将软件置顶在所有窗口之上，就可以像相机一样调整录制区域，移动或缩放窗口，同时拥有强大的编辑功能，可以在动图上添加文字或图像。5.1.2 新媒体动态设计的制作 普通摄影类动图可以用手机中的Live Photo功 能 或 视 频 录 制 功 能 直 接 拍 摄，制 作 Cinemagraph 类动图除了用 PhotoShop 制作外，也有非常简单的方式，市面上已经诞生了很多专门针对 Cinemagraph 制作开发的软件，如 Cinemagraph（Flixel 开发）、Kinotopic、Cliplet（微软开发）等，制作时只需先拍摄短片，然后涂

5、抹“想要运动”的位置，就可以生成 Cinemagraph 动态照片。5.1.2 新媒体动态设计的制作 艺术类动图的制作难度较大，大部分情况下需要先使用 PhotoShop（简称 PS）或 AdobeIllustrato（简称 AI）制作静态图形，然后导入 Adobe After Effects（简称 AE）等动画制作工具添加动态效果，最后生成动图，所以，需要同时掌握专业的平面设计和动画设计两类工具。设计实践1.利用 GifCam 软件制作 1 张影视片段类动图。2.利用 Cinemagraph 软件制作 1 张 Cinemagraph 动态照片。3.利用 PS、AI、AE 软件制作 1 张艺术

6、类动图。5.2 新媒体交互设计 PC 时代，设计师们就基于 H5 开发了众多交互性能强大的酷站，进入移动时代，交互设计师们更是如鱼得水，结合移动端的重力感应、竖屏显示、手势交互等全新玩法，开创了全新的交互时代，例如， 网站收录了 15 个基于 H5 创建的极具创意的网站，朋友圈 H5 的进化史可以看做是新媒体交互设计进化史。人类有五感，视觉、听觉、嗅觉、味觉、触觉，交互设计本质是通过科技赋予机器人类的五感，使得人与机器能够实现双向的沟通。交互设计的原理是通过传感器（感光传感器，音量传感器，压力传感器，湿度传感器，温度传感器，距离传感器，超声波传感器，倾斜传感器等等）捕获外界物理信号，根据接口（

7、USB，串口，火线接口，蓝牙，红外，射频等），通过一定的传输协议转化为计算机可以理解的数字或模拟信号，再通过特定的程序编译（Java，C+，Actionsccript，processing 等等）处理，将捕获的信号结合其他综合素材，通过显示器或其他物理界面呈现给外界，经过新号的输入处理输出这一流程，实现人与计算机间的交互。5.2.1 基于触觉的交互设计 1971 年，Samuel Hurst 博士发明了触摸传感器，这个传感器就是触控屏的雏形。三年后，他设计了第一款透明的触控屏。1977 年，触控屏技术得到了很大的改善，一直到今天仍在被广泛使用并且飞速发展。基于触控技术的发展，人们可以通过手指来

8、触碰屏幕进行操作并接受反馈信息，实现人与界面的有效沟通与互动。与鼠标操作相比较，手指的操作在多点触碰、滑动控制、模拟真实动作等方面占有很大优势。1.触摸传感器 5.2.1 基于触觉的交互设计 目前，比较常见的基于触屏技术的交互操作有：点击、长按、滑动、跟随等。点击交互最常见的应用在答题类 H5 及小游戏中，比如，顺丰丰修的 H5 广告“测测你的七夕情书”就属于典型的点击交互，用户选择对应的情感状态后，系统生成对应的测试结果。5.2.1 基于触觉的交互设计 许多公众号设计中采用的隐藏样式也是利用点击进行交互，一般是需要读者去点击某块区域，才能显示隐藏的图片或者文字。比如，公众号我要 WhatYo

9、uNeed在推文他们是最后一批，用固定电话谈恋爱的人。中就使用了这种交互。5.2.1 基于触觉的交互设计世界名画抖抖抖抖起来了利用长按进行交互，长按界面就能切换到抖音界面。5.2.1 基于触觉的交互设计 一些公众号推文会将大段的文字或者图片，集中在屏幕的一块区域。读者可以上下滚动该区域，查看完整内容。滑动样式的好处是，将一部分文字或者图片内容收集在一个区域，从而使这些内容不占过多的篇幅。读者可以自由选择是否滑动这块区域去查看内容。比如，公众号梅赛德斯-奔驰在推文钥匙背后的秘密是中使用了滑动交互来展示猎青行动的优势 5.2.1 基于触觉的交互设计乔布斯发布世界上第一款带陀螺仪感应的手机时，让手机

10、玩极品飞车等体感游戏成为可能。2.陀螺仪传感器 5.2.1 基于触觉的交互设计当我们浏览重力感应类 H5 时，只要稍微移动或旋转手机，手机界面就会发生相应的变化，比如，网易出品的 H5抬头见喜，就巧妙地利用了重力感应，当用户抬起手机的时候，画面会由龙尾向上移动，直至出现龙头。5.2.1 基于触觉的交互设计重力与方向感应特征表现在界面与视觉设计方面并没有特殊之处，而重力技术的运用使得用户通过针对手持设备的移动直接反馈给游戏对象，同样是人与界面通过触觉交流的一种表现。微信的“摇一摇”也是典型的利用陀螺仪传感器的功能。许多 H5 广告是基于摇一摇功能进行设计，产生了非常有趣的交互效果，比如腾讯推出的

11、 H5 广告|“求个门神守护你”，用户摇一摇手机，就可以抽到个性化的门神海报。5.2.1 基于触觉的交互设计加拿大啤酒厂商 Farnham 贴心地为球迷准备了一款互动装置。根据自家啤酒的度数，Farnham 推出了一款“苦度沙袋”。人们可以把输球后失败的怨气发泄在沙袋上，根据沙袋受力的程度，装置会智能地给用户推荐相应度数的啤酒。当你击打沙袋时越用力，得到啤酒的苦度相应的也会越高。5.2.1 基于触觉的交互设计还有一支 H5 的动效不容忽视Burberry 的从伦敦到上海的旅程。这支 H5 是当时交互体验的集大成者。“摇一摇”，进入 H5 页面；“点一点”，探索油画般的伦敦清晨；“擦一擦”，使屏

12、幕上的晨雾散去；点击“河面”，河水会随之泛起涟漪；最后点击屏幕上的白点，抵达终点上海。5.2.2 基于视觉的交互设计基于视觉的交互设计使用的核心工具是摄像头，比如，人民日报推出的穿上军装H5 就采用了手机摄像头拍照并显示在最终海报中的方法。5.2.2 基于视觉的交互设计2017 年 9 月，阿里巴巴发起的“人人 3 小时，公益亿起来”活动中，采用了“与明星视频聊天”的交互式。在淘宝 APP 搜索栏输入“人人 3 小时”“95公益周”等关键词，就会出现吴京、赵薇、何炅、汪涵、张一山等明星，以视频互动方式在“3 小时公益”平台亮相，和网友“面对面”聊公益。5.2.2 基于视觉的交互设计摄像头 结合

13、人脸识别技术，又可以有新玩法，比如 Kraft Foods 的一则广告，通过识别用户嘴型，匹配弯曲程度。5.2.2 基于视觉的交互设计比如，Tic Tac 发布了三款不同口味的口香糖。玩家需要先吃一颗 Tic Tac的口香糖，然后靠“嚼”来控制 Snapchat 滤镜游戏里的小人。手机的前置摄像头会捕捉玩家嘴部的动作。5.2.2 基于视觉的交互设计针对不同的味道，Tic Tac 还设计了两款风格不一样的游戏。一旦反应慢了一拍，没有控制好咀嚼的节奏，你就会被路面上的鳄鱼或是海上的鲨鱼所吞食。5.2.2 基于视觉的交互设计摄像头 结合动作识别技术，比如，Nike 为推广鞋子曾经做过一次户外广告，广

14、告牌一开始是全黑的，旁边的广告语是“动起来才能看到广告”，也就是说只有当用户经过的时候，广告牌才会显示。5.2.2 基于视觉的交互设计新西兰广告公司 Resn 为 GAP 打造的一支广告中，用户仅仅穿上普通的条纹衫，对准摄像头舞动，即可制作出完整的音乐。5.2.2 基于视觉的交互设计Resn 开发的系统能自动分析图像中的颜色变化，定位条纹的边界和分清不同的区域，跟踪用户手部运动，量化节拍和处理混音，将用户舞动画面转化为音乐。5.2.2 基于视觉的交互设计比利时 ALS（肌肉萎缩症）组织搭建了一个公益网站，整个网站不能用鼠标，只能打开摄像头，让系统捕捉用户的眼睛，用户只能利用眼睛来控制输入，闭眼

15、代表点击，就好像 ALS 病患平时在做的一样（体验网址：http:/www.eyeclickdonation.org/）。5.2.2 基于视觉的交互设计此外，摄像头还可以和 VR、AR 技术结合，VR 广告还在萌芽期，AR 已经迅速火起来了，部分原因是 AR 并不依赖其他穿戴设备，Snapchat 经常在其平台上搞AR 活动。AR 也已经悄然进入移动网页和其他 APP 了。天猫、淘宝、京东、谷歌、苹果都可以提供简单的开发工具创造 AR 体验。部分淘宝店铺支持用户在虚拟世界中试用产品，使得购物体验更加真实，比如，你要买个垃圾桶，想先看下买回来后放在家里的效果，就可以用“AR 购物”功能体验效果。

16、5.2.3 基于听觉的交互设计基于听觉的交互设计使用的核心工具是麦克风（基于音量传感器制作）。Axtel 的广告建立了一片即将消失的模拟森林，用户通过对麦克风喊话，阻止森林消失，声音越大效果越明显。5.2.3 基于听觉的交互设计比 如，啤 酒 品 牌 Farnham 在街头放置的一个互动啤酒售货机，只要对着机器大声喊出你的苦，机器便会根据分贝来判断苦的程度，然后吐出一瓶相应等级苦味的啤酒给你。5.2.3 基于听觉的交互设计2018 年 9 月荔枝 FM 推出的 H5“声音艺术馆”引导用户录制自己的声音，并生成用户声音的鉴定海报，包含音乐画作、音色鉴定、音色评分和声音密码等。5.2.3 基于听觉

17、的交互设计百事和 Alexander Wang 携手，推出百 事 可 乐 无 糖 alexanderwang x Pepsi联名限量系列“为原创正名”。拨打电话或扫描二维码，用户将听到 AlexanderWang 的神秘留言。5.2.4 基于嗅觉的交互设计以夸张、魔性著称的男性护理品牌 Old Spice 近日在 GQ 杂志上刊登了一则平面广告，在广告内页放置着一件红色的一次性纸外套，这件纸外套符合人体尺寸太小并带有 Old Spice 的香氛味道。当读者打开 GQ 杂志，翻阅到这一页时，猝不及防就会感受到“男人的香气”。当然你还可以把这件纸质外套穿在身上，体验被“男人香气”包围的感受，鲜艳的

18、红色也能引来超高的回头率。5.2.4 基于嗅觉的交互设计宜家在迪拜 Good 杂志背面刊登的一支广告令人耳目一新。拆去杂志前面的内容，宜家特别设计了能提高人们睡眠质量的小工具。这个小工具有两个小心机，首先是用薰衣草油墨印制的图案，其中正面的图案由宜家的床垫产品组成，可以持续释放香气；其次这个小工具还可以折叠，插上 USB，就可以播放白噪音。设计实践1.搜集 2 个基于触觉交互的新媒体设计案例，并分析其设计的优缺点。2.搜集 2 个基于视觉交互的新媒体设计案例，并分析其设计的优缺点。3.搜集 2 个基于听觉交互的新媒体设计案例，并分析其设计的优缺点。4.搜集 2 个基于嗅觉交互的新媒体设计案例，并分析其设计的优缺点。