多媒体的12种多媒体

注意事项

在规划多媒体内容时，应考虑到残障用户的需求：既有通过调制解调器，蜂窝电话网络或无线网络连接到互联网的技术禁用用户，也有使用“瘦”移动设备或过时机器的用户，以及身体残疾的用户，他们的多媒体内容可能遥不可及。

网络多媒体策略
成功的网络多媒体的关键是定制您的内容供网络交付。

音频

数字音频是传递信息的一种非常有效的方式。
您必须执行的缩减采样和压缩才能使您的音频网络可交付成果将强调录制中的任何缺陷。

幻灯片放映
幻灯片放映是另一种在网络上传送多媒体的方法。静止图像比视频更有效地压缩，并且因为幻灯片不需要平滑的运动，所以电影帧率可能很低。这反过来意味着您可以将更多的数据用于图像质量和尺寸。

视频
视频是通过网络提供的最具挑战性的多媒体内容。其中一部分原因是规模庞大：一秒未压缩的全质量视频需要大约27兆字节的磁盘存储空间

• 拍摄原始视频。通过这种方式，您可以采取措施来创建可高效压缩的视频，并且在低分辨率和帧率下仍能看起来不错。
• 拍摄特写镜头。在低分辨率下，宽镜头具有太多细节。
• 尽可能针对简单的单色背景进行拍摄。这将使小视频图像更容易理解，并会提高压缩效率。
• 使用三脚架以尽量减少相机移动。锁定在一个位置的摄像机将最小化帧之间的差异，并大大提高视频压缩率。
• 避免缩放和平移。这些可以使低帧速率的电影混淆查看和解释，也可能导致它们压缩不佳。
• 编辑视频时，请在两次拍摄之间切实进行切分。谨慎使用视频编辑软件提供的过渡效果。溶解，精细擦拭或平移静止图像的“Ken Burns”效果不能有效地压缩，并且可能无法在较大的显示器尺寸上在网络上平滑播放。
• 如果您正在对原先录制的视频或电影素材进行数字化，请仔细选择您的素材。寻找包含最少动作的片段，缺乏必要的细节。运动和细节是低分辨率视频最明显的缺点。

动画
当仅用作注意力吸引装置时，网页动画的价值是有问题的。如果您将动画与主要内容放在一起，您只会破坏用户的注意力，并使其不符合您网站的目标。如果您每次访问您的网站时都要求用户通过Flash介绍进行访问，您实际上已将其转移到了门外。

也就是说，在网络上有针对性地使用动画的地方。网站主页上的简单动画可以增加适量的视觉兴趣，邀请用户探索您的材料（图12.2）。在那里，基本内容通常是一个链接菜单，所以分心的威胁比内部内容页面要小。动画在阐释概念或程序或随时间变化方面也很有用。始终提供用于启动和停止动画的可访问控件。

文字交替
确保您可以访问多媒体资料的最佳方法是提供适用于不同用户的备用版本。
媒体内容的另一个优势是它可以被搜索引擎读取和编制索引并翻译成其他语言。多媒体内容的最佳替代品是文字。

标题是为网站的口头音频元素提供等效文本的一种方式。

2、准备多媒体

处理
在为网络传送准备媒体时，您应该瞄准可以由目标受众的普通网络连接和台式机管理的文件。关键的衡量标准是数据速率，通常以千字节每秒（kbps）为单位，即用于表示一秒钟电影播放的数据量。对于用户实时播放文件而不会出现打嗝或延迟，您需要将数据传输速率设置为略低于用户连接的吞吐量。降低数据速率的方法是通过下采样和压缩。

压缩首先消除文件中的冗余数据，然后删除不太重要的数据以进一步缩小文件大小。这个过程是使用算法或“ 编解码器 ”（压缩器 - 解压缩器的缩写）来实现的，它处理媒体压缩和播放时的解压缩。用于Web传送的编解码器使用有损压缩：该过程从原始源材料中删除数据。你不应该多次压缩材料，因为每个过程都会降低质量。

交货
网络媒体技术由四个主要组件构成：服务器，网络，客户端计算机，以及使用的网络浏览器和浏览器插件。这些组件必须协同工作才能将良好的Web多媒体传送到桌面

流

流媒体技术不断地将数据发送到桌面，但不会下载整个文件。在最佳方案中，内容存储在流媒体服务器上，该服务器与客户端保持不断的对话以确定用户可以支持多少数据。根据这些信息，服务器会相应地调整数据流，并向客户端发送足够的数据。

流媒体提供了许多好处，其中第一个是随机访问。流式传输技术允许在视频流中的任何时刻查看电影。如果您的用户正在访问一小时的视频并希望仅查看最近五分钟，他或她可以使用控件向前移动到所需的起点。另一个好处是客户端机器上的存储需求较低。流媒体直接播放到显示器; 它不存储在内存或用户的硬盘上。

流媒体的优势也是它的缺点。要实时播放电影，播放器软件需要跟上从服务器发送的传入数据。因此，如果网络中有故障或客户机无法处理播放，则媒体数据可能会丢失。流媒体播放需要强大的处理能力，因此如果观众的计算机处理器必须放弃视频帧才能与输入流保持同步，则播放效果可能不理想。

下载
可下载媒体存储在客户端机器上的内存或查看器的硬盘上。大多数可下载媒体是渐进式的，这意味着播放所需的信息存储在文件的开头。渐进式下载允许观众在整个文件下载之前开始观看视频。可下载的媒体使用与网页相同的http协议发送到客户端，因此不需要特殊的服务器。只要下载速度保持在电影的数据速率以上，播放就不会中断。
可下载媒体的质量通常高于流媒体的质量。由于数据速率不会被迫保持足够低以实时播放素材，因此可以将更多数据用于图像质量和动作。可下载的媒体也具有完整性：原始电影中的所有数据都包含在下载的版本中。

可下载媒体的主要缺点是它在查看器的计算机上放置的存储需求。即使是短时间的视频也需要很多兆字节的临时存储空间，如果观众有近乎满的硬盘，这可能是一个问题。另一个问题是可下载的媒体不允许随机访问。如果您只想查看长剪辑的最后几分钟，则必须等待整个剪辑下载。解决这两个问题的一个办法是将更长的媒体片段分成更小的块。这减少了对客户机器的需求，并允许用户更直接地访问他们想要的材料。分割更长的视频片段很像分块的文本内容：网络用户并不期望像电视观众那样长时间的视频节目。大多数网络视频都是短时间内关注焦点话题的点对点片段。

4、设计和多媒体

低带宽考虑和有限接口选项的结合为将多媒体元素并入网站带来了有趣的设计挑战。 设计多媒体的关键指导方针是告知用户何时进入高带宽区域，并为他们提供控制其体验所需的工具。

通知您的用户
对于像多媒体一样技术要求高的内容，为用户提供足够的信息以在点击之前作出明智的决定尤为重要，以便他们知道期望什么并准备好接收您的材料。

提供控制
当您演示多媒体资料时，请务必给予用户状态信息和控件。 如果您不包含控件，用户将无法控制自己的查看环境，从而无法访问您的页面。
在设计媒体界面时，让观众选择何时以及如何聆听媒体内容。 始终包含用户控件（如媒体控制器栏），并确保用户有办法关闭播放。 避免使用自动播放或循环等选项来控制用户。
设计您的媒体界面，以便文件仅在用户明确选择启动播放时播放。

支持键盘互动
并非所有的用户都可以或者选择使用点击鼠标等设备来管理交互，而并非所有设备都提供指向控件
要设计通用访问和可用性，请确保您的媒体控制器可使用键盘进行操作。

优惠选择
对于这个问题没有单一的答案：“我应该使用哪种格式来确保每个人都可以访问我的多媒体内容？”相反，最好的方法是提供一系列选择，并允许用户选择最适合他的格式或她的环境和首选访问方法。

嵌入式版本具有在网站上下文中呈现的好处，这意味着视频可以具有支持视频材料的伴随文本和图像。 相比之下，可下载的媒体可以在不同的设备上查看，包括电视和便携式设备。 播客允许用户下载媒体以进行离线访问，同时还可以订阅，从而自动下载新的媒体文件。 这些场景中的每一个都有其优点和缺点，具体取决于用户上下文。 提供所有选项并不需要设计师付出额外的努力，并允许用户选择最适合他们的选项

课堂笔记：

1、好设计将清晰思维可视化（Good design is clear thinking made visible.
）—Edward Tufte

2、图像&视频 和 �Web 设计的关系？
内容的一部分
：页面结构 Page structure
vs. html文字：区块、档案大小、来源安版
使用网页图像
选择正确的文件格式

平面视觉的一部分
视觉结构 Visual structure
vs. 文字：色块、平面设计大小、布局
界面元素
照片与图示

3、图像&视频 和 �Internet的关系？
新设备：
为屏幕优化屏幕图像
分辨率和像素密度 Resolution and pixel density
Retina

新产销方式：
互联网电视
差距：观影习惯、广告、….
互联网平台
社交媒体平台
媒介融合

4、在线视频 v.s.电影和电视
起初
在线视频向电影和电视看齐，模仿其传统长格式的风格，包括电影式的长段开场和闭幕，以及20分钟或更长的影片长度。

变局
但随着人们视YouTube，Vimeo，Facebook等数字媒体网站为正式的媒体分销渠道，用视频说故事本身发生了根本性的转变，出现了一种新型的短纪录片丶短新闻和短宣传视频。

结果
这些新兴的短视频长度从十几秒到十分钟不等，平均值在三到四分钟。

在线视频 成为 一种主要的传播渠道
在线视频是一个主要的传播渠道，广泛应用于商业传播丶电子商务丶市场营销丶教育丶和流行广电节目，在线视频是一种发布媒介，和现存的广播电视竞争受众，这竞争体现在收视人数和观看时长上。

5、新产销方式：用户/装置数据分析

在线消费视频成倍增长，特别是在移动设备上。
然而，移动用户也不会逗留太久，所以必需得马上抓住用户的注意力，给他们一些得停下来看的东西。

新产销方式：平台竞争

6、延伸内容及知识
信息图形的起源�Sidebar: The Origins of Information
与颜色相关的术语�Sidebar: Color Terminology

《媒介融合》
《信息可视化》

7、颜色选择及基本知识
Adobe Color Wheel
https://color.adobe.com/zh/create/color-wheel/
Chrome 操作
颜色选择器
CMYK , RGB, HEX, HSL, RGBA, etc,
熟悉基本术语，中英文
熟悉数据转换方式，最大与最小值

8、相片是屏幕秀还是打印好？
屏幕
72-96dpi
RGB

打印
300-1200dpi
CMYK

9、色彩与媒介的关系
RGB…screen：即使在 72－96 ppi 的状况下，网络上 的照片在全彩屏幕 上总是看起来很 棒，原因是照片在屏幕上比打印时有更广的动态范围

CMYK…print：在屏幕上，照片确实照耀着我们的眼，屏幕产生的灯光和深色比彩色印刷页反射的光线有着更丰富的色彩范围。

找找世界排名第一大学的�代表色码?
然后做出配色 !

10、图形 Graphics (WSG, Ch11)
11.1 网络用图策略�
11.2 关于网页图像
11.3 使用网页图像
选择正确的文件格式
为图像提供替换文字
为屏幕优化屏幕图像

界面和品牌
界面和品牌
图像类型
图像文件格式

WEB IMAGING STRATEGIES p.325

ABOUT WEB IMAGES p.327
USING WEB IMAGES
Choosing the right file format
Providing alternatives for images
Optimizing images for screen

网络用图策略
优秀的、有趣的图像元素能够让你的网站与众不同、让用户耳目一新。图像能够表达复杂的数据内容，能够跨越语言障碍，能够集合文字形成整合信息。
网新技术让我们能更轻松的制作图像素材，而网络也提供了一种相比书籍更为多彩的多媒体平台。

内容图像Content images p.325
Illustrations: 图像有优秀的展示功能
Diagrams: 数据图像和进度图像
Quantitative data: 图表帮助解释科学、经济领域的数据内容（数据可视化）
Analysis and causality：图形能够展示分析过程、因果逻辑等
Integration: 图像是文字、数据、图形的综合应用

图像---风格
网页上的图像占据了大量区域。页头以及其他区域具有一致性风格样式的图片，帮助用户轻易的分辨出哪些网页属于同一个“网站”。

图像类型 p.327
Bitmap or raster images
位图／点阵图或 光栅图

Vector images
矢量图像
SVG 可伸缩矢量图形

图像文件格式 p.329
GIF
JPEG
PNG

位图／点阵图或 光栅图
Bitmap or raster images
由像素 (pixels，也就是图片元素) 为基本单元所组成的细粒网格。每个像素都有其特定的颜色，因此由于像素很小丶又可以是数百万种颜色中的任何一色，所以光栅图像格式通常用于照片和复杂的图稿。

矢量图像
Vector images
矢量图使用线条丶多边形丶点丶曲线和填充效果的数学描述来创建图像。矢量图像通常是简单和图解形式的，像图（graphs）丶数据图（charts）和图解（diagrams）；矢量图很少有光栅图（如照片）有深度或复杂度。但是矢量图，和光栅图相比具有一些重要的优势：

矢量图优势
因为矢量图像文件只是形状的简略描述，所以文档小，下载快。
矢量图像可以缩放到任何大小，而不减损其质量。
虽然矢量图大多是图解式的，若配加以复杂的阴影和颜色，矢量图可以变得非常写实。

工具
点阵图
Adobe Photoshop

GIMP

矢量图
Adobe Illustrator

Inkscape

工具：Vector Magic

Web主要图像文件格式 �Primary Graphic Files
png ——(“ping”)
gif ——( “jiff”)
jpeg ——(“jay-peg”)

重要观念及术语
compression
dithering
conventional vs. interlaced
transparent

full-color images
“lossy” compression

save your original uncompressed images

11.5.6 总结： 文件格式
GIF文件的优点：GIF是网站上接受范罔最广的图形格式。
示意图的GIF 图像效果看起来要比JPEG 格式的好。
GIF支持透明和隔行显示。

JPEG图像的优点
：JPEG 的压缩比率高， 这意味着能被快速下载。
绝大多数照片和复杂的困像采用JPEG 格式都可以得到优良的效果。
JPEG 支持全彩（ 24 位，真彩色〉图像。

装逼的时候到了：要长一点，才够X

教会我们拍照技巧

FIGURE 12.7 外景拍摄技巧

连结及延伸的課：
叙事/营销：
数字音视频编辑
数字图像处理
矢量图形设计
媒介融合

交互/界面：
用户与视觉界面设计
H5互动技术与应用