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

第5章 新媒体动态交互视觉设计 新媒体动态设计新媒体交互设计CONTENTS目录5.15.2 5.1 新媒体动态设计 5.1.1 新媒体动态设计的类型根据动态制作方式分为三类1、影视片段类动图2、摄影类动图3、艺术类动图 5.1.1 新媒体动态设计的类型 影视片段类动图是指通过截取电影、电视剧、动画、综艺等视频中的片段，再通过添加字幕等方式来设计“动图”这些动图的特征往往是幽默、夸张、搞笑的内容，这类动图凭借影视剧本身广泛的群众基础，传播速度非常快1.影视片段类动图 5.1.1 新媒体动态设计的类型 摄影类动图一般是指由多张连续的照片连续播放制作的动图，苹果中的Live Photo 功能可以直接拍摄动态照片，经过软件转换就可以生成动图摄影类动图中还有一种叫做 Cinemagraph 的特殊类型，cinema 是电影摄影，graph 是图片，Cinemagraph 是指拥有动态影像元素的图像，它的独特之处在于它是局部动态的摄影作品，如展示静态女孩子的飘逸的秀发等效果Cinemagraph 在观感上与 Gif 格式的动画类似，但拥有远胜于普通 Gif 图片的动态内容表现能力，使用目前的摄影和后期技术已经能够获取画质细腻、色彩丰富、压缩较好的动态图片，所以，Cinemagraph 通常被称为 High Fashion GIF、Rich Mans GIF。

时代周刊这样描述 Cinemagraph：“它创造了一个静谧而出神的瞬间，将粗制滥造的 GIF 提升为一样更为纯净优雅的事物2.摄影类动图 5.1.1 新媒体动态设计的类型 艺术类动图的制作难度进一步加大，完全通过计算机软件进行制作，既需要完成平面设计，也需要进行动态加工，但自定义程度更高，在商业上用途更加广泛国外有许多艺术家团队创作了非常多优秀的此类作品，如 Gifparanoia、Golden Wolf、Julian Glander、Rafael-varona、Scorpiondagger 等3.艺术类动图 5.1.2 新媒体动态设计的制作 影视片段类动图、摄影类动图、艺术类动图的制作方式各不相同影视片段类动图的制作比较简单，目前比较稳定、好用且免费的软件是 GifCam，它非常简单易用，只需将软件置顶在所有窗口之上，就可以像相机一样调整录制区域，移动或缩放窗口，同时拥有强大的编辑功能，可以在动图上添加文字或图像5.1.2 新媒体动态设计的制作 普通摄影类动图可以用中的Live Photo功 能 或 视 频 录 制 功 能 直 接 拍 摄，制 作 Cinemagraph 类动图除了用 PhotoShop 制作外，也有非常简单的方式，市面上已经诞生了很多专门针对 Cinemagraph 制作开发的软件，如 Cinemagraph（Flixel 开发）、Kinotopic、Cliplet（微软开发）等，制作时只需先拍摄短片，然后涂抹“想要运动”的位置，就可以生成 Cinemagraph 动态照片。

5.1.2 新媒体动态设计的制作 艺术类动图的制作难度较大，大部分情况下需要先使用 PhotoShop（简称 PS）或 AdobeIllustrato（简称 AI）制作静态图形，然后导入 Adobe After Effects（简称 AE）等动画制作工具添加动态效果，最后生成动图，所以，需要同时掌握专业的平面设计和动画设计两类工具设计实践1.利用 GifCam 软件制作 1 张影视片段类动图2.利用 Cinemagraph 软件制作 1 张 Cinemagraph 动态照片3.利用 PS、AI、AE 软件制作 1 张艺术类动图5.2 新媒体交互设计 PC 时代，设计师们就基于 H5 开发了众多交互性能强大的酷站，进入移动时代，交互设计师们更是如鱼得水，结合移动端的重力感应、竖屏显示、手势交互等全新玩法，开创了全新的交互时代，例如， 网站收录了 15 个基于 H5 创建的极具创意的网站，朋友圈 H5 的进化史可以看做是新媒体交互设计进化史人类有五感，视觉、听觉、嗅觉、味觉、触觉，交互设计本质是通过科技赋予机器人类的五感，使得人与机器能够实现双向的沟通交互设计的原理是通过传感器（感光传感器，音量传感器，压力传感器，湿度传感器，温度传感器，距离传感器，超声波传感器，倾斜传感器等等）捕获外界物理信号，根据接口（USB，串口，火线接口，蓝牙，红外，射频等），通过一定的传输协议转化为计算机可以理解的数字或模拟信号，再通过特定的程序编译（Java，C+，Actionsccript，processing 等等）处理，将捕获的信号结合其他综合素材，通过显示器或其他物理界面呈现给外界，经过新号的输入处理输出这一流程，实现人与计算机间的交互。

5.2.1 基于触觉的交互设计 1971 年，Samuel Hurst 博士发明了触摸传感器，这个传感器就是触控屏的雏形三年后，他设计了第一款透明的触控屏1977 年，触控屏技术得到了很大的改善，一直到今天仍在被广泛使用并且飞速发展基于触控技术的发展，人们可以通过手指来触碰屏幕进行操作并接受反馈信息，实现人与界面的有效沟通与互动与鼠标操作相比较，手指的操作在多点触碰、滑动控制、模拟真实动作等方面占有很大优势1.触摸传感器 5.2.1 基于触觉的交互设计 目前，比较常见的基于触屏技术的交互操作有：点击、长按、滑动、跟随等点击交互最常见的应用在答题类 H5 及小游戏中，比如，顺丰丰修的 H5 广告“测测你的七夕情书”就属于典型的点击交互，用户选择对应的情感状态后，系统生成对应的测试结果5.2.1 基于触觉的交互设计 许多公众号设计中采用的隐藏样式也是利用点击进行交互，一般是需要读者去点击某块区域，才能显示隐藏的图片或者文字比如，公众号我要 WhatYouNeed在推文他们是最后一批，用固定谈恋爱的人中就使用了这种交互5.2.1 基于触觉的交互设计世界名画抖抖抖抖起来了利用长按进行交互，长按界面就能切换到抖音界面。

5.2.1 基于触觉的交互设计 一些公众号推文会将大段的文字或者图片，集中在屏幕的一块区域读者可以上下滚动该区域，查看完整内容滑动样式的好处是，将一部分文字或者图片内容收集在一个区域，从而使这些内容不占过多的篇幅读者可以自由选择是否滑动这块区域去查看内容比如，公众号梅赛德斯-奔驰在推文钥匙背后的秘密是中使用了滑动交互来展示猎青行动的优势 5.2.1 基于触觉的交互设计乔布斯发布世界上第一款带陀螺仪感应的时，让玩极品飞车等体感游戏成为可能2.陀螺仪传感器 5.2.1 基于触觉的交互设计当我们浏览重力感应类 H5 时，只要稍微移动或旋转，界面就会发生相应的变化，比如，网易出品的 H5抬头见喜，就巧妙地利用了重力感应，当用户抬起的时候，画面会由龙尾向上移动，直至出现龙头5.2.1 基于触觉的交互设计重力与方向感应特征表现在界面与视觉设计方面并没有特殊之处，而重力技术的运用使得用户通过针对手持设备的移动直接反馈给游戏对象，同样是人与界面通过触觉交流的一种表现的“摇一摇”也是典型的利用陀螺仪传感器的功能许多 H5 广告是基于摇一摇功能进行设计，产生了非常有趣的交互效果，比如腾讯推出的 H5 广告|“求个门神守护你”，用户摇一摇，就可以抽到个性化的门神海报。

5.2.1 基于触觉的交互设计加拿大啤酒厂商 Farnham 贴心地为球迷准备了一款互动装置根据自家啤酒的度数，Farnham 推出了一款“苦度沙袋”人们可以把输球后失败的怨气发泄在沙袋上，根据沙袋受力的程度，装置会智能地给用户推荐相应度数的啤酒当你击打沙袋时越用力，得到啤酒的苦度相应的也会越高5.2.1 基于触觉的交互设计还有一支 H5 的动效不容忽视Burberry 的从伦敦到上海的旅程这支 H5 是当时交互体验的集大成者摇一摇”，进入 H5 页面；“点一点”，探索油画般的伦敦清晨；“擦一擦”，使屏幕上的晨雾散去；点击“河面”，河水会随之泛起涟漪；最后点击屏幕上的白点，抵达终点上海5.2.2 基于视觉的交互设计基于视觉的交互设计使用的核心工具是摄像头，比如，人民日报推出的穿上军装H5 就采用了摄像头拍照并显示在最终海报中的方法5.2.2 基于视觉的交互设计2017 年 9 月，阿里巴巴发起的“人人 3 小时，公益亿起来”活动中，采用了“与明星视频聊天”的交互式在淘宝 APP 搜索栏输入“人人 3 小时”“95公益周”等关键词，就会出现吴京、赵薇、何炅、汪涵、张一山等明星，以视频互动方式在“3 小时公益”平台亮相，和网友“面对面”聊公益。

5.2.2 基于视觉的交互设计摄像头 结合人脸识别技术，又可以有新玩法，比如 Kraft Foods 的一则广告，通过识别用户嘴型，匹配弯曲程度5.2.2 基于视觉的交互设计比如，Tic Tac 发布了三款不同口味的口香糖玩家需要先吃一颗 Tic Tac的口香糖，然后靠“嚼”来控制 Snapchat 滤镜游戏里的小人的前置摄像头会捕捉玩家嘴部的动作5.2.2 基于视觉的交互设计针对不同的味道，Tic Tac 还设计了两款风格不一样的游戏一旦反应慢了一拍，没有控制好咀嚼的节奏，你就会被路面上的鳄鱼或是海上的鲨鱼所吞食5.2.2 基于视觉的交互设计摄像头 结合动作识别技术，比如，Nike 为推广鞋子曾经做过一次户外广告，广告牌一开始是全黑的，旁边的广告语是“动起来才能看到广告”，也就是说只有当用户经过的时候，广告牌才会显示5.2.2 基于视觉的交互设计新西兰广告公司 Resn 为 GAP 打造的一支广告中，用户仅仅穿上普通的条纹衫，对准摄像头舞动，即可制作出完整的音乐5.2.2 基于视觉的交互设计Resn 开发的系统能自动分析图像中的颜色变化，定位条纹的边界和分清不同的区域，跟踪用户手部运动，量化节拍和处理混音，将用户舞动画面转化为音乐。

5.2.2 基于视觉的交互设计比利时 ALS（肌肉萎缩症）组织搭建了一个公益网站，整个网站不能用鼠标，只能打开摄像头，让系统捕捉用户的眼睛，用户只能利用眼睛来控制输入，闭眼代表点击，就好像 ALS 病患平时在做的一样（体验网址：http:/www.eyeclickdonation.org/）5.2.2 基于视觉的交互设计此外，摄像头还可以和 VR、AR 技术结合，VR 广告还在萌芽期，AR 已经迅速火起来了，部分原因是 AR 并不依赖其他穿戴设备，Snapchat 经常在其平台上搞AR 活动AR 也已经悄然进入移动网页和其他 APP 了天猫、淘宝、京东、谷歌、苹果都可以提供简单的开发工具创造 AR 体验部分淘宝店铺支持用户在虚拟世界中试用产品，使得购物体验更加真实，比如，你要买个垃圾桶，想先看下买回来后放在家里的效果，就可以用“AR 购物”功能体验效果5.2.3 基于听觉的交互设计基于听觉的交互设计使用的核心工具是麦克风（基于音量传感器制作）Axtel 的广告建立了一片即将消失的模拟森林，用户通过对麦克风喊话，阻止森林消失，声音越大效果越明显5.2.3 基于听觉的交互设计比 如，啤 酒 品 牌 Farnham 在街头放置的一个互动啤酒售货机，只要对着机器大声喊出你的苦，机器便会根据分贝来判断苦的程度，然后吐出一瓶相应等级苦味的啤酒给你。

5.2.3 基于听觉的交互设计2018 年 9 月荔枝 FM 推出的 H5“声音艺术馆”引导用户录制自己的声音，并生成用户声音的鉴定海报，包含音乐画作、音色鉴定、音色评分和声音密码等5.2.3 基于听觉的交互设计百事和 Alexander Wang 携手，推出百 事 可 乐 无 糖 alexanderwang x Pepsi联名限量系列“为原创正名”拨打或扫描二维码，用户将听到 AlexanderWang 的神秘留言5.2.4 基于嗅觉的交互设计以夸张、魔性著称的男性护理品牌 Old Spice 近日在 GQ 杂志上刊登了一则平面广告，在广告内。