我的书签
添加书签
移除书签第8章 动作大戏——加入动作效果的技巧，让幻灯片媲美软件演示
结束了澳大利亚的美妙假期，让我们再次回到充满战斗力的职场吧。这一次，我们将再次提高自身的战斗实力，从零开始，做出一个Mac软件的的演示。
从内容上讲，本章将会参考Mac的音乐播放器软件iTunes制作一个第三方音乐播放器，拟定取名为ABC player（ABC播放器），同时也会模仿苹果介绍新产品的方式，从设计、技术规格、特色功能等三方面入手表现。并且，通过一些非常小的技巧，模拟出一种软件运行的效果。
从技巧上说，文字加形状的自如组合、自定义线条的合理搭配、构件的出现和消失都已经变成我们从熟练到精通的常规武器。本章将会第一次向大家介绍使用“动画效果”里的“动作”部分，也是在动态表现力上的一次重大升级。其次，本章也将第一次引入音频文件，为Keynote添加多媒体色彩。
在本章的实例中，幻灯片中所展现的说明性文字数量将再次降到一个新的低点。
当制作出一款产品，比如一款软件时，希望用户们去安装、去使用，自然会渴望向产品的目标用户去推广和宣讲产品的种种优势和亮点。不过很多情况下，第一批营销对象却不是最终用户，而是身边的同事。
不管设计者有什么改变世界的想法，除非是独行侠式的创业者，当面对公司内的设计、制作、开发、测试、市场等众多人员时，如果产品的蓝图都没有打动他们，又怎么能号召大家一起齐心协力来实现这个想法呢？
这次Keynote的目标观众依然定位于公司内部。假定此次产品内容属于刚刚立项，还未有任何具体的设计或开发内容，大部分内容都还是从产品文档以及需求中的蓝图而来。而此时要做的就是，面对组内的协力的同事，依然是二十多人的规模，以及组外可能和此产品有联系的同事，向他们表达出这个产品的方方面面。
而且，在本章的实例中，幻灯片中所展现的说明性文字数量将再次降到一个新的低点。至多会运用一些精准的短词语（包括英文）。这样的做法也延续了本书一贯的思路：宣讲者和宣讲者的语言讲解才是主体。一切高质量且优美的Keynote都应该只是为宣讲而服务。
内容的安排大致如下：
标题页，1页；
设计引言，2页；
设计思路、设计过程，8页；
技术规格，4页；
特色功能，5页；
收尾，3页。
从整个Keynote的风格看，依然会选用“渐变”这个主题模板，只不过在标题页会稍微借用一下“黑板”（见图8-01）这个主题模板。不同的主题模板穿插应用的例子在后面的章节也会越来越多。
图8-01
正所谓大道至简。哪怕产品再复杂，也应该训练自己能够在一块小黑板上，用简单的几笔几画描述出它最核心的功用和最重要的流程。
在工作中，常常可以看到以下情景：不少人在介绍一个产品的时候，往往口若悬河，毫不吝惜任何能用上的词汇，生怕漏过任何的细枝末节。使用“还有”、“另外”这样的字眼替代句号，急切的心情和观众疲惫的眼神形成莫大的对比。
提取简洁、干练的核心内容并予以展示，这样的道理并不只局限于制作幻灯片的时候。正所谓大道至简。哪怕产品再复杂，也应该训练自己能够在一块小黑板上，用简单的几笔几画描述出它最核心的功用和最重要的流程。
沿着这样的思路，将本章的标题页也定义为一块用来勾画需求的黑板。但是，由于新版的Keynote已经不允许用户再像老版本中那样，可以直接在一个幻灯片中不断切换主题，所以，如果想在主题页单独使用“黑板”的话，只能先建立一个“黑板”的主题幻灯片，然后将整个页复制到“渐变”的主题内即可（见图8-02）。
“黑板”主题模板所用的默认字体是Chalkboard，即专门的黑板书写字体。不过，为了让效果更有张力，可选用材质感更强一些的Chalkduster字体，并拉大字号，输入产品名称：ABC player（见图8-03）。
图8-02
图8-03
关于这款软件产品的核心点也化繁为简，就以三个形容词来表示：stylish，powerful，easy to use。意指充满个性风格的设计、强大的技术规格，以及非常简单易用的体验。三个词利用三个文本框分开写成（见图8-04），并利用检查器的“排列”部分为它们调出一点角度，让观众能够感觉到这三个词正是从ABC player中绽放而出的（见图8-05）。
图8-04
图8-05
当然，别忘署名“designed by yourname（由某某设计）”，以及外加一句“for Mac only（只为Mac电脑打造）”来介绍自己和这款产品的平台属性（见图8-06）。
只是把一堆粉笔字码在黑板上就显得太凌乱了，还得通过检查器的“动画效果”里的构件出现、构件消失来设计一下。首先，“ABC player”固定出现在黑板上，并不参与构件动态效果。署名的部分在手动单击时出现，同时也在手动单击时消失，并自动衔接上“只为Mac电脑打造”（见图8-07）。“stylish，powerful，easy to use”三个词汇在上一句消失的时候同时出现即可，仍是“打字效果”，持续时间可以稍微缩短一点，显得更利落（见图8-08）。
好了，黑板报式的标题页就正式完成了，最后，别忘了给它加上一个符合黑板特性的简单从下到上的“移入”效果作为过渡（见图8-09）。
图8-06
图8-07
图8-08
图8-09
对于“动作”来说，它在Keynote。6.0下面的一大法宝就是可以创建连续的动作。
个人电脑上的音乐播放器软件多种多样，各不相同。每家每户也都有自己的风格特色。当开始制作一款Mac电脑上的音乐播放器软件的时候，是否应该先确立一下自己与众不同的风格呢？
针对已知的音乐播放器，只要能写出名字的，就往幻灯片上摆放吧（见图8-10）。最后尽量铺成一个圈，空出整个幻灯片画面中间的部分，字号等属性也可以根据输入内容的多少进行调整。只是别忘了，在一片文字名称中预先藏好要体现的内容：Mac style，即Mac电脑风格（见图8-11）。
图8-10
图8-11
大家可以看到，这样的排版展示方法比较反常规，密密麻麻的一片常会令人厌恶。不过，这里也留下了两个伏笔，一是中间的空余部分，二是已经“潜伏”好的重要内容。通过这样的对比展示，希望可以从一片大众风格展现出自身风格的设计思路。
为了使“Mac电脑风格”隆重登场，本页实例中将首次运用到构件体系中的三大核心的最后一个（前两个是构件出现和构件消失）：动作。
开工之前，先来见识一下“动作”里都有什么神奇的功夫吧。“动作”属性里包含两部分：基本效果和加重效果。前者有“不透明度”、“放大”、“旋转”、“移到”；后者则是“弹入弹出”、“弹跳”、“抖动”、“翻转”、“跳动”、“闪烁”（见图8-12）。
光从这些名称看，“动作”里面的东西似乎和“构件出现”、“构件消失”有很大的相似之处。这点倒是没错，因为确实可以把“动作”理解为构件升级版本。比如说“移动”效果，实际上可以看作是构件效果里“移入”和“移出”的结合，只是这一次任何元素都不必从画面外再来到画面外去，而是可以直接在幻灯片画面内，按设定的轨道来移动。再比如看“放大”，实际上也和构件效果中的“放大”类似，只是这一次具体缩放的比例要自定义。
不过，如果只是这种动画效果层面上的升级，恐怕苹果也不会特意单辟出一块区域给到“动作”。对于“动作”来说，它在Keynote 6.0下面的一大法宝即是：可以创建连续的动作（老版本Keynote 5.0里，“动作”和现在的版本可是天差地别）。
举例来说，当一个元素添加了“放大”的动作时会看到，该元素的下方出现了一个带着“+”符号的菱形按钮。同时，右侧功能区域里也有一个“添加动作”的按钮，这两者的功效是一样的。单击之后，都会再浮出动作效果的菜单（见图8-13）。针对任何一张图、一句话、一个形状都可以为它们添加一系列动作，可以让它们从A点移动到B点，翻个跟头旋转一下，再慢慢变大，挪到C点，最后再来个欢快的抖动，并增加不透明度消失……只要你想，你就是导演！
图8-12
图8-13
虽然介绍了这么多，但还是要在实际操作中慢慢熟悉“动作”的使用。这里为了让大家看得清晰一些，暂时去掉了其他文字，只剩下“Mac电脑风格”。单击选中它，然后在“动作”一栏中选择“移到”效果。
这时会发现，原来的文字出现了一个具有透明度的“分身”，并且由一根红线相连。这根细细的红线就代表文字要移动的轨迹。通过拖曳文字的“分身”，可以调整到想要的位置（见图8-14）。此外，还可以通过单击或按Tab键来切换选择“正身”和“分身”，以便快捷地给元素的不同阶段添加动作（见图8-15）。
图8-14
图8-15
因为暂时还用不到更多的动作，所以还是先来完成手头的工作吧。将“Mac电脑风格”移动到之前空余出来的画面中央（拖曳分身即可）。但是，光移动过去还不完整，还要在它的前后继续添加词语，凑成一句话，分别是“What is（什么是）”和“?（问号）”。这样，整句话连起来就是“What is MAC style（什么是Mac电脑风格）”，如图8-16所示。
再从整体的角度看一下页面内容，其中包括三个部分：“Mac电脑风格”、“什么是”，以及大量的背景文字（见图8-17）。这里可将其他所有背景文字进行群组，以方便编辑。
图8-16
图8-17
最后，再用构件效果整理顺序。首先，将“Mac电脑风格”移动到中央；然后，所有成组的背景文字自动消失（见图8-18）。紧接着，则是“什么是”出现，汇成一句完整的话（见图8-19）。
图8-18
图8-19
不仅针对此次的音乐播放器，在进行任何宣讲的时候，只要宣讲者想突出自己的与众不同，想突出那种从众多选择中脱颖而出的效果，都可以尝试使用该方法。
用一种提问或一种思路的分享来提升观众的同步思考与关注。在观众的心中预埋一些可期待的点，保持他们的好奇度。
一路看到这里的读者都有这样的感受，在每章实例中，都会尽量提出一些预设的问题或思想历程：一是希望通过这样的形式来与观众进行互动，用一种提问或一种思路的分享来提升观众的同步思考与关注；二来也能在观众的心中预埋一些可期待的点，保持他们的好奇度。
所以，既然提出了“什么是Mac电脑风格”这样的问题，就要有问有答。但是，这时候不必让播放器软件出场，而是应该让最有资格的Mac电脑来回答这个问题。
新建一页幻灯片后，直接插入一张Mac电脑的图片，以外型优美的iMac最佳，底色填充，纯白色即可（见图8-20）。然后，输入Mac电脑风格的内容：
设计 极简美学 去掉冗余部分；
功能 强大的软硬件效能；
操作 易于上手 流畅体验。
文字内容稍微区分一下字号大小，前面的大一些，后面的解读小一些（见图8-21）。细心的读者应该能发现，这里所讲的三个风格特色：设计、功能和操作，其实正是对应着标题页写下的三个特色标语。
图8-20
图8-21
不过，只有文配图还是显得有些单调，此时，可以通过一些小技巧来让页面变得丰满、生动。通过标准的线条，适当加粗，改为红色，配上阴影，放置在“去掉冗余部分”的上面（见图8-22），使其更形象化。剩下的两句则通过输入法打上对勾即可（见图8-23）。整体效果就是一个横线，外加两个对勾。
图8-22
图8-23
照例仍然是利用检查器的“动画效果”来调整一下构件的出场顺序。首先是iMac电脑的大图，可以自动跟随在幻灯片之后（见图8-24）。第一句话和红线都是在单击时出现，等讲解到“去掉冗余部分”的时候，可以让代表“去掉”意思的红线以“擦除”的效果划出（见图8-25），而两个对勾则可以跟在后面两句话之后自动出现（见图8-26）。
图8-24
图8-25
图8-26
构件、动作、过渡，可能原先看起来并没有任何联系的三个功能，只要设计者细心挖掘，就会产生很多出色的效果。
本章的文字说明内容力求简洁，这不但包括具体内容页的层面，还包括在各级子标题页。不再启用多级标题来表示每一节，而是顺应本章的主要技巧教程，用“构件出现”配合“动作”，以及幻灯片本身的“过渡”来教大家做一个连贯的动作效果。
卡片本身依然使用普通矩形来制作，颜色选为渐变填充，用两种相差不大的灰色来呈现渐变即可。例如，本例使用的是银白色和银色，卡片的边框选择稍微不规则的一种（见图8-27）。双击后输入文字“Design（设计）”，字体换成手写的“Bradley Hand ITC TT”，字号拉大（见图8-28）。
图8-27
图8-28
下面让构件效果登场。为这个卡片选择一个“扭曲和缩放”的构件出现效果。这样，整个卡片以及上面的文字都会形成一道优美的曲线，从画面之外飘至画面正中。
这时候，宣讲者也可以通过自己的宣讲，向观众大概介绍一下今天要讲的几部分内容，比如，从设计思路开始到技术特点，再到特色功能等。说完之后，这张卡片也该适时消失了。
首先，在“动作”里为卡片添加一个“放大”的效果。当然了，实际上我们追求的效果是缩小，可通过鼠标自行缩小，也可以通过右侧的功能来滑动“放大”值，如本例是20%（见图8-29）。此时并未结束，再单击“添加动作”按钮，为已经缩小的卡片添加一个“不透明度”的动作，“不透明度”调至0，即完全看不到（见图8-30）。
图8-29
图8-30
那么，最后用什么让这个构件效果和两个动作效果连贯起来呢？当然是构件顺序。在构件顺序窗口中，卡片的构件出现效果可以跟在幻灯片过渡之后（见图8-31），而卡片的两个动作则一起进行（见图8-32）。
图8-31
图8-32
为了让本页幻灯片更连贯地衔接下一页，也可以为幻灯片本身的过渡做一个小小调整。暂时不用任何过渡效果，而是将“开始过渡”选为“自动”（见图8-33）。这样，在卡片缩小并消失不见后，幻灯片会自动切换到下一页。
图8-33
构件、动作、过渡，可能原先看起来并没有任何联系的三个功能，只要设计者细心挖掘，就会产生很多出色的效果。
好的设计无须绕行太远。从身边出发，从贴近用户习惯的地方出发，自然可以水到渠成。
很多人做产品设计的时候，往往都会参考一些尽可能“远”的事物，力求自己的设计能够标新立异，充满新奇感。笔者认为，好的设计无须绕行太远。从身边出发，从贴近用户习惯的地方出发，自然可以水到渠成。设计一个Mac电脑上的音乐播放器软件，有什么能够比以Mac标准的软件结构为蓝本出发，更能在使用习惯上贴近用户呢？
所以，本节的参考设计蓝本就是Mac自带的邮件软件——Mail（见图8-34）。
图8-34
用户可以将自己使用的Mail软件截图，插入到幻灯片之中（见图8-35）。在为观众讲解的过程中，需要突出两个主要内容：Mail的良好层级结构，以及Mail的简单操作与清晰标识。为了满足这样的效果，需要用到两页幻灯片，但其中的基本元素（即Mail的截图）是一致的。
先说展示层级的方法。可以将普通的线条直接铺在截图之上，为观众明确出Mail的层级。为了更突出线条的存在，除了使用明亮的颜色之外，还可以利用“动作”里的“不透明度”效果增强这种对比。
单击选中Mail截图，在“动作”菜单中为它选择一个“不透明度”效果，“不透明度”调节为30%（见图8-36）。这之后再把体现层级的线条都画出来，颜色选为亮黄色，像素稍微加粗一些（见图8-37）。为了让大家看清楚，暂时隐去截图。此时在偏暗色的底色上面的黄色线条更具视觉穿透力了（见图8-38）。
图8-35
图8-36
图8-37
图8-38
将线条成组，并和Mail的动作效果一起搭配好构件顺序。首先，是Mail截图的“不透明度”先出现。接下来，成组的黄色线条自动跟随出现，让观众看清楚结果（见图8-39）。待讲解完毕后，再让黄色线条以渐隐的方式消失（见图8-40）。
图8-39
图8-40
同样，针对产品结构的内容讲解依然需要两页幻灯片，所以在幻灯片本身的的过渡模块里，还是把“开始过渡”则选为“自动”（见图8-41）。这样，幻灯片就会在黄色线条消失后自动进入下一页。
图8-41
在第二页，Mail截图依然保留，但是其不透明度的方式正好和前一页相反，需要从30%再回到100%，以此来完成一个“明—暗—明”的整体流程。
刚开始，截图的位置都不变，通过检查器的“样式”功能将其不透明度调为30%（见图8-42），而在动作里的“不透明度”之中，再将“不透明度”调为100%（见图8-43）。如此一来，在观众的眼中同样的一张截图，就又重新“亮”了起来。
图8-42
图8-43
在表明Mail的操作和标识方面，可以通过圆形形状将填充调为无，改为红色带笔迹的笔画，分别摆放在层级菜单、“+”操作按钮以及新邮件标识的蓝点上面（见图8-44）。最终，通过构件抽屉来调整顺序，先是出现不透明效果，然后三个圆圈同时出现（见图8-45）。
图8-44
图8-45
以观众的视角来看，前后两页完全是一次无缝的效果变化展示。对于设计者来说，也只是用一个动作效果执行两次相反的流程。在面对多种效果组合展示的时候，不妨考虑进行这样简单的拆分。
参照物展示完了，该是向观众介绍这款音乐播放器整体结构的时候了。首先，肯定会是参考Mail的左右式菜单加内容形式，同时也会参考iTunes，增加一个顶部的音乐播放信息区域。
先以矩形画出一个长方形的框体，改为无填充，并加上一个大大的问号（见图8-46），预示着产品结构即将揭晓。再用细细的蓝线划分出刚刚提到的上部，以及左右部的区间（见图8-47）。同时，还可以为播放器加入主结构之外的一些浮动式窗口，这里只需使用简单的矩形加三角形形状的组合来展示即可（见图8-48）。
在调整构件顺序的时候，先是默认出现的“问号”消失（见图8-49），然后自动跟随第一条横蓝线，随着宣讲者的讲解和单击才出现第二条竖蓝线（见图8-50），最后则是三个浮窗同时出现（见图8-51）。
图8-46
图8-47
图8-48
图8-49
图8-50
图8-51
在现场的讲解中，宣讲者完全可以承接前面的Mail参考思路，告诉观众为什么要如此划分结构，而且除了这一部分，播放器还是辅助的浮窗界面。
虽然只是两页幻灯片，但对于观众来说，他们依然看到一种无缝移动加色彩变幻的效果。
音乐播放器的头部区域制作并不复杂，但是为了做到一种高度拟真的效果，确实需要不少细致的步骤来完成。
首先拉出一个无边框圆角矩形，颜色可以和前面的卡片一样都是很浅的灰色渐变，并从外部插入一张示意用的音乐专辑图片（见图8-52）。具体的音乐播放信息展示窗口，可以再拉出一个小一点的圆角矩形，为其添加细细的笔画线条；而中间的类老式液晶屏幕效果，则可以在选择绿颜色之后，通过调低不透明度来实现（见图8-53）。
图8-52
图8-53
将专辑图和信息展示窗口对齐摆放，并输入一些音乐相关的文字信息来完成更具象的效果，如专辑名、歌曲名等（见图8-54）。循环和随机两个图标不必用Keynote制作（也确实麻烦），大家可以直接使用，从外部找来的可用素材。值得一提的是进度条的制作。进度条实际上是由两个圆角矩形组成，一个有细细的笔画边框但是没有填充色，一个则只有深灰色的填充色，简单组合一下就能产生进度条的效果（见图8-55）。而进度条上面的拖动块则更简单，用形状里的菱形制作即可（见图8-56）。
图8-54
图8-55
图8-56
头部右侧的区域则留给播放按钮和音量条控制。音量条的制作也是圆角矩形和圆形的简单的组合（见图8-57）。至于播放时的前进和后退，则完全是形状中标准三角形的几种叠加。由于非常简单，因此这里不再详述（见图8-58）。
图8-57
图8-58
为了能够让观众更直接地找到音乐播放器头部区域的主要功能点，可以将几个输入数字后的无边红色圆形放置在相应的功能区域中，以示说明（见图8-59）。至于加不加文字，则完全取决于宣讲内容的比例。如果可以用语言描述清楚，那么这里也就无须再附加更多文字。
这样，音乐播放器的头部就制作完成了。不复杂，但须细致。就头部本身而言，暂时不需要任何动态效果来呈现。但是前面也提到过，这个头部是模仿iTunes的样式，所以可以为它带来一点点iTunes独有的效果展现。
用过iTunes的读者就会知道，最新版的iTunes可以根据音乐专辑封面图的大致颜色分布自动计算出一套渐变色来展示，可以说，每个专辑都能做出多彩效果。在这个实例中，也可以直接搬来这个效果，只不过是出现在头部区域上。
由于需要头部区域的所有元素，且只是挪动一下位置，因此在过渡中，选用上一章刚刚运用过的“神奇移动”效果（见图8-60）。
图8-59
图8-60
新建一页幻灯片，头部区域的内容全部保留（最好成组），整体位置挪至画面的中央，去掉红色圆形说明点。原本灰色的渐变则可以根据使用的音乐专辑图样子，调出一个大致近似的渐变效果（见图8-61）。
图8-61
同样是两页幻灯片，但是对于观众来说，他们依然看到了一种无缝的移动加色彩变幻的效果。
由于菜单和音乐内容部分是左右结构，因此可以拉出一个大的圆角矩形，并通过一个条细线条来划出左右区域（见图8-62）。
左侧的菜单区域，模仿Mail软件的样式，以纯文字的方式（比如各类榜单等）来体现多层级菜单（见图8-63），以“+”和“-”即可简单地表达出添加和展开，而新歌曲出现榜单则用蓝色的圆点来表现（见图8-64）。
右侧的内容更为简单，只需将一些音乐专辑图片对齐之后码放在这里即可（见图8-65）。
图8-62
图8-63
图8-64
图8-65
最后，依然可以效仿前面关于头部说明的做法，通过加入一些带数字圆形来说明主要的功能区域，并为其设置一个出场效果（见图8-66）。
新建一页，将头部和下面的部分拼接在一起，为观众呈现出“ABC音乐播放器”的整体面貌（见图8-67）。至此，设计部分的内容也全部制作完毕了。
图8-66
图8-67
一般来说，技术是一种看不见但能体验到的事物。因此，需要有一个带有隐喻的物件来代表音乐播放器软件本身。
讲完了设计历程，该轮到技术规格出场了。和前面的卡片制作方法以及流程一样，需要一张新的卡片，输入“Tech Specs（技术规格）”（见图8-68）。构件和动作的流程也完全一致（见图8-69）。这样，一个卡片式的标题页就制作完成了。
图8-68
图8-69
讲述技术规格时自然免不了有一些文字或数字的介绍，大家都知道，图文并茂是一种非常好的效果。不过，搭配什么样的图呢？能否把前面小节里制作的图形截图过来当成素材？当然可以，但这似乎不是最优的解决方案。
一般来说，技术是一种看不见但能体验到事物，若对写实的画面处理不当，很容易喧宾夺主，影响本来出镜率就不高的简单文字、数字说明。因此，需要有一个带有隐喻的物件来代表音乐播放器软件本身。
好在这样的例子依然可以从身边找到。
有Mac电脑的读者应该知道，OS X上面的软件安装图标大多是一个打开的盒子，寓意一件物品被开箱解封，要拿出来使用。可以借鉴这个思路制作一个简单的盒子效果。
因为这个盒子要力求能有立体的效果出现，所以需要以大约侧面45°视角来观察并展现它。首先，用自定义线条来画出盒子的顶部（见图8-70）。正面相对简单，只是一个普通正方形（见图8-71）。再往后，为了增加盒子的立体效果，需要来一点透视的手法将盒子被挡住的三个立面也表现出来。同样是矩形或线条的组合，但是以虚线来表示（见图8-72）。最后，底部的立面则可以完全复制一份顶部的自定义线条图形，只是线条都换成虚线（见图8-73）。当然，最后别忘了用一根实线线条来遮盖住。
图8-70
图8-71
图8-72
图8-73
整个盒子完成之后，可以在正立面的矩形中输入文字：ABC player（见图8-74）。将整个盒子的元素成组，方便后面的演示工作。
在构件出现的效果上，若希望整个盒子的出场能够稍显活泼，而不是僵硬死板地成为技术术语的背景，可选择“滑落”效果，持续时间调低至1秒。这样，既显得干净利落，又比普通移入效果生动许多（见图8-75）。
图8-74
图8-75
关于盒子的打开效果，大可不必费尽周折再制作一个拥有更复杂立体效果的打开式盒子，只需要借鉴动画片制作中的常用技巧，用线条做出拟人化的形态（例如聊天的时候，打出“|||”代表流汗）即可。
使用三个普通矩形，缩小体型后对齐摆在一起，并把两边的矩形变形为45°角倾斜，来完成一个“打开”或“有反应”的寓意 （见图8-76）。同时，把它们进行成组，自动跟随在盒子后出现（见图8-77）。
图8-76
图8-77
制作完盒子后，输入介绍文字，分别是“超小空间占用=100MB”、“超低内存消耗<50MB”和“超大容量支持>100万曲库”（见图8-78）。这三句话使用排比手法，都以“超”字开头。同时，“小”、“低”、“大”字样使用楷体，以求更清晰的对比效果。
收尾的时候别忘了再给三句话添加构件出现效果，可以在盒子和三条矩形的系列效果之后，再各自随着单击出现“打字效果”（见图8-79）。
图8-78
图8-79
代表软件的盒子登场了。不过，它可不是出现这么一下就闪退了，还需要设计者让它肩负更多的技术规格展示。
声音是一种波的形式，如同水面的涟漪不断扩散，传达到更远的地方。因此，用最简单的形状制作出最直观的声波效果，使其成为优选方案。
对于一个音乐播放器来说，无论是用户还是开发者，都比较会关注一个问题，那就是音源质量。并非所有人都有一双鉴赏家的耳朵，但品质越好的音乐则越容易受到用户青睐。在常见的技术表达中，人们通常会将品质进行单位数值化，以kpbs（位速率）来代表。
相关的详尽技术文献，读者可以在网上参考各类wiki和百科，这里就不再详述了。总之，这一页要表达的是：ABC player支持相对无损音质的320kpbs高标准。
那么，如何表现高标准的数值呢？直观的例子就在身边，或者说，出现在科学常识中。声音是一种波的形式，如同水面的涟漪不断扩散，传达到更远的地方。因此，用最简单的形状制作出最直观的声波效果，使其成为优选方案。
新建一页幻灯片，还是那个盒子，位置也不变，一切都无须变化（见图8-80）。用一个白色边框的无填充色圆形形状叠加在盒子上面，居中对齐，边框加粗到6磅，完成第一条声波线（见图8-81）。依次复制这个圆环，并逐级拉大，距离也不要一致，空隙越来越大才好，即使超出画面范围也没有问题（见图8-82）。在所有的声波线都制作完成后，再来细致地调节一下它们的粗细程度——最外围的最粗，越往里面越细。
为了将声波的扩散效果做得更拟真一些，还需要用构件效果为所有的声波线安排一个“放大”的构件出现效果，四个形状全部同时出现（见图8-83）。
图8-80
图8-81
图8-82
图8-83
接下来，需要在每个声波线的外侧输入逐步增高的位速率，从64kpbs开始，一直到最大的320kbps，字号也逐步加大。其中，“320kpbs”还可以用单独的黄色来表示（见图8-84）。所有的文字内容都可以成组，并自动跟随在声波线之后出现（见图8-85）。
现在，从头到尾预览一下自己制作出来的精美效果吧！完全是最简单的形状加文字，只要有合理的细节效果，就可以实现出完美的声波效果。
图8-84
图8-85
千变万化的云朵造型对于icon制作（图标制作）来说，可能就是几个简单的形状组合。
仿佛一夜之间，所有的程序都接入了云端。这个时代的产品若不带云属性，都显得跟不上时代。在国内，由于互联网音乐的“特色”环境，各家逐步走向正版的道路，在线音乐播放、云曲库的概念也就应运而生。
所以，作为一款与时俱进的新时代音乐播放器，ABC palyer同样也加入了云曲库这样一个功能。具体来说，就是用户的各种播放记录、收藏夹、下载的音乐等，都可以被记录到云端，并推送到用户的其他设备上。
至于表现手法，先从一朵白云开始吧。
千变万化的云朵造型对于icon制作（图标制作）来说，可能就是几个简单的形状组合。这里就以苹果的iCloud图标为参照制作。首先，拉出一个圆角矩形，将填充色改为纯白，通过圆角矩形自带的圆角调整绿点，将圆角的弧度加大，呈胶囊状（见图8-86）。另外，再准备好两个圆形，同样填充白色，一大一小（见图8-87）。三个形状拼接在一起，圆角矩形作为底部，两个圆形紧挨着作为云朵的曲线。最后，插入一个文本框，输入“云曲库”。将它们成组，这样看上去就是一个整体的云朵造型了（见图8-88）。
再来安排一下画面上各元素的大致位置。可爱的盒子依然纹丝不动地占据着原始位置，云曲库则被安排在居中显示（见图8-89），右侧的空间留给各个设备的图标、包括手机、Pad、笔记本电脑。
图8-86
图8-87
图8-88
图8-89
既然说到手机、Pad和笔记本电脑的图标，就不难回忆起第5章学习过的技巧。具体的制作流程不再重复。
只是，在“渐变”这个主题模板下，原先制作的图标都是黑色底，会比较靠色，可以通过检查器来微调成灰色（见图8-90）。这样快速处理之后，所有元素就码放齐全了（见图8-91）。为了表达清楚这几个图标的关系，还需要加入箭头线条，从盒子到云曲库用实线箭头，从云曲库再到各设备的推送则使用虚线箭头（见图8-92）。
图8-90
图8-91
图8-92
最后，用构件来梳理出场顺序。实线箭头以擦除的方式第一个出现（见图9-93），云朵的成组造型则是自动跟随其后（见图9-94）。介绍完云曲库后，三条虚线箭头会随着宣讲者的单击再同时出现（见图9-95），而末尾则是手机、Pad、笔记本电脑三个图标（见图9-96）。
图8-93
图8-94
图8-95
图8-96
到这里，关于ABC音乐播放器的技术规格方面就全部制作完成了。下一节开始，将会向观众介绍ABC音乐播放器的特色使用功能。
新内容开始之前，照例制作卡片式的小节题目页（见图8-97）。这次的内容是介绍Features（特色功能）。构件和动作流程继续保持不变。
图8-97
特色功能里第一个要介绍的就是前面制作过的音乐播放器菜单部分，当时留下了一个大大的“+”在左下角。实际上，这个按钮可以看作是用户单击后，再次添加相应类型音乐的操作入口。
为了表现“用户单击”个动作，可以制作出一个按钮示意符号。方法是通过两个圆形叠加，外围无填充色并加粗笔画至11磅，边框线条为橘色（见图8-98），中间的颜色填充为橘色，但是无边框（见图8-99）。一圆一圈，相互叠加，合二为一。这样的组合，也是产品设计文档中常见的用于表示单击的符号（见图8-100）。单击符号的构件出现和构件消失是自动跟随在一起的，出现的效果是普通的“出现”。其中，消失的效果选为“弹入弹出”更能体现出“单击”的感觉（见图8-101）。
图8-98
图8-99
图8-100
图8-101
在“+”按钮被按下后，我们希望整个音乐播放器的节目能够暗下去，并出现一个可操作的浮窗区域。这时候，就需要用到动作里的“不透明度”一栏。将整个音乐播放器的所有元素成组，“不透明度”数值调到50%即可（见图8-102）。
之后，用灰色填充的圆角矩形来充当浮窗菜单，其中，以普通的线条分隔里面的内容（见图8-103）。菜单上可以随意输入一些表示不同音乐内容的文字，并用白色填充的矩形来表示未选中，用绿色填充的矩形加上对勾表示选中状态（见图8-104）。同时，再以两个圆角矩形加文字来表示确定和取消按钮（见图8-105）。整个浮窗的所有元素齐备之后，将它们成组，并给予一个“放大”的构件出现效果（见图8-106）。
用构件顺序整理所有构件的时候，单击符号的出现和消失是自动连在一起，最先出现的；而音乐播放器的不透明度以及浮窗的出现，都是跟随在其后出现的（见图8-107）。
还记得在介绍ABC音乐播放器整体结构的时候介绍的浮窗功能吗？下面就开始逐一介绍它们的功用。
图8-102
图8-103
图8-104
图8-105
图8-106
图8-107
光有简单的动态效果还远远不够，不如干脆让它“真正”播放一首歌曲给观众听。
用过Mac的读者都知道，Mac上面的所有软件，其菜单都在公用屏幕顶部的位置，这样的设计是为了无论在任何程序状态下，都能有更准确的鼠标定位。OS X系统的自带的时间、电池、wifi管理，包括第三方的软件（如QQ、sogou输入法等）也都会占据在顶部菜单上，有一个可单击并直接管理的浮窗菜单。
ABC音乐播放器也沿用这个特色，在顶部菜单中有一个icon（图标），并在单击后出现简易播放窗口。
既然要制作顶部菜单，就需要还原一下OS X的桌面。首先，把自己Mac电脑上顶部菜单截个图放到Keynote的顶部（见图8-108）。不过，为了凸显这个简易的播放窗口，无须百分之百还原OS X桌面，而是通过线条和形状为观众作出交代即可。
之前在第5章也做过类似的训练，以一个自定义线条合围成的梯形作为dock的样式（见图8-109），而dock程序图标也可以用最普通的圆形、方形、菱形指代即可（见图8-110）。观众既可以马上会意，又不至于被过多的效果吸引走。
由于顶部菜单过于瘦小，若再制作一个更小的图标就会过于劳神，不如以一个亮色填充的方块代表其位置（见图8-111）。再往后，选择一张尽量纯色的专辑图，并制作一和专辑图靠近颜色的三角形，拼接成一个弹出的播放窗口（见图8-112）。用同样较亮、较浅的蓝色做成播放按钮，代表进度条的圆环，前后歌曲切换的箭头（见图8-113）。
图8-108
图8-109
图8-110
图8-111
图8-112
图8-113
到这里，这个简易播放窗口就制作完成了。不过，在准备通过检查器为它添加各种构件效果的时候，应该再进一步思考一下，光是有简单的动态效果还远远不够，不如干脆让它“真正”播放一首歌曲给观众听。
想要实现大胆的想法就必须有细致的执行。“真正”播放当然不是真正写出一个音乐播放程序或只是通过Keynote播放一首插入的歌曲文件这样简单。和前面见过的众多“高难度”效果类似，实现的过程其实很简单，但需要很细致。
以简易播放窗口内的圆环进度线为出发点，希望在音乐文件真正播放的时候，该进度条是真实变化的。即，慢慢走动，最后形成一个圆环。不过，由于构件模块对于整个圆形的擦除效果都是双向进行的，无法达到“单程”效果，所以需要制作一小段进度条。考虑到演示时只会点到即止，不会播放完整首歌曲，只需制作大约二分之一的圆环即可。
方法很简单，就是求助于自定义线条。首先，单击确定第一个端点，然后按住Shift键，可以得到笔直的第二个点。但是，不要单击，而要按住鼠标拖动一点出来。最后单击，完成一个近二分之一圆环（见图8-114）。为了更精确一些，将半个环贴合在已有的圆形边上，并通过调整它的角度，使其尽量契合（见图8-115）。调整完毕，将颜色调成和原有的亮蓝色一样，并适当加粗（见图8-116）。
图8-114
图8-115
图8-116
音乐开始播放后，播放的三角箭头也要切换为双竖杠的停止符号（见图8-117）。现在，再从头整理一遍构件顺序：一开始默认的播放三角图标、左右切换图标、圆环进度条全部成组为一个，在单击时消失（见图8-118）。停止符号则是自动跟随出现（见图8-119）。最后，摆上刚刚制作完成的四分之一圆环，与停止符号一起出现，“擦除”的效果，从左上方开始，但是持续时间长一点，起码为30秒（见图8-120）。因为并不需要它走完全部的“擦除”历程，只是通过这个效果给观众一个示意罢了。
万事俱备，就只欠音乐文件了。单击Keynote工具栏中的“媒体”，在本地曲库中选择相应的歌曲，并拖曳到Keynote中（见图8-121）。对于音乐文件来说，它只是作为一个符号出现在编辑画面中，而在实际播放幻灯片的时候，用户是看不到它的。所以对它的摆放位置没有要求。同时，它的构件效果也只是开始播放/停止播放这样而已。在这里，希望歌曲和停止符号、进度条一起开始，并在单击时再停止（见图8-122）。
图8-117
图8-118
图8-119
图8-120
图8-121
图8-122
就这样，一个完全可以以假乱真的音乐播放场景就诞生了。看惯了各种幻灯片特效，突然加入一首优美的歌曲，相信观众会对宣讲者的精心准备大加赞赏。
再来说说音乐播放器本身可以支持的可拖曳式浮窗。这样的设计实际也是参考了Mac软件的设计思路。
而这一次，使用百分百还原的真实桌面，也是为了让观众看到实际的操作效果（见图8-123）。
成组后的音乐播放器软件整体依然居中显示（见图8-124）。第一个出现的窗口设定为单击头部区域的专辑图片后出现，内容则是专辑的相关介绍，同样是非常简单的深灰色矩形和三角形组合（见图8-125），这里就不再进行拆解详述了。说到单击，别忘了刚刚在前面制作过的单击符号，可直接拿来使用（见图8-126）。顺序依然是单击符号“出现”，然后再自动“弹入弹出”消失，刚才的专辑内容介绍浮窗再跟随着“渐隐渐现”出现（见图8-127）。而第二个出现的窗口设定为单击内容区域的专辑图片后出现，内容是歌曲和歌词，相关的单击按钮制作以及构件流程可完全复制前面的一对（见图8-128）。
图8-123
图8-124
图8-125
图8-126
图8-127
图8-128
表现拖曳的效果可通过新建一页幻灯片完成。桌面截图、音乐播放器软件本体和第二个浮窗（这里去掉那个三角形）保留，其余的则全部去除（见图8-129）。为了拖曳，也可以以单击符号为基础，改造出一个表示拖曳的符号。为了区别，只是外圈的圆形改为虚线笔画（见图8-130）。
图8-129
图8-130
说是拖曳，其实在制作的角度上，就是拖曳动作符号和浮窗一起移动到另一个地点。于是，再次启用“动作”里的“移动”。先来确定符号的移动位置（见图8-131），然后调试浮窗的移动位置（见图8-132）。如果担心相对位置出现偏差，可以通过实际播放幻灯来观察一下效果，多摆放几次即可。最后，保证拖曳符号和浮窗一起行动，并在到达移动位置后自动消失（见图8-133）。
图8-131
图8-132
图8-133
从这个例子看，还是移动这个动作效果，只要运用得当，就能模拟出电脑中的很多实际操作效果。而特色功能的部分也全部制作完成。
本次示例中的移动路线整体还是一条直线。在实际制作中，可以根据自身的需求，通过拖动移动的分身来达到折线移动效果。
刚刚还是说到移动效果，不过前两个例子都是两点一线的移动。下面尝试一下在移动轨迹中添加端点，形成多点轨迹移动。
特色功能说完了，先制作一个小节标题页面，只不过这次的新内容不再是一个单词，而是一句话：When can we get the ABC player（我们什么时候能够用上ABC播放器）？动画效果也和之前一样，不再赘述（见图8-134）。
这时候，再次请出可爱的小盒子，并在它的下面以圆角矩形画出一道代表时间的线条（见图8-135），然后加上三个间距相同的圆形，代表时间结点（见图9-136）。时间线先出现，三个时间结点自动跟随其后（见图8-137）。
下面开始打造重点的移动效果了。首先还是通过动作效果为小方盒选择移动，并将落脚位置对齐到第二个时间结点上（见图9-138）。添加第二个移动端点，可以按”添加动作”按钮或直接单击移动分身下面的那个红色菱形按钮，再为小方盒增加一段移动距离，移动并对齐到第三个时间结点之上（见图8-139）。
图8-134
图8-135
图8-136
图8-137
图8-138
图8-139
当然，除了简单的移动，还要有点文字说明。利用形状里的矩形对话气泡，制作一个简单的说明窗口，输入“3月开发设计”，放在小盒子的上方（见图8-140）。并依次在两个移动位置上放置其余两个气泡窗口，输入“4月alpha版”和“5月beta版”（见图8-141）。
图8-140
图8-141
构件的顺序需要细心安排一下。3月气泡在小盒子移动前出现，开始移动后自动消失（见图8-142）。4月气泡也是如此，小盒子移到第二个时间点的时候出现，并再次移动时消失（见图8-143）。最后的5月气泡，因为已经是移动的末尾，所有就只有出现的效果（见图8-144）。
图8-142
图8-143
图8-144
因为时间线的关系，本次示例中的移动路线整体还是一条直线。在实际制作中，可以根据自身的需求拖动移动的分身，从而达到折线移动效果。
幻灯片末尾，再次感谢大家观看幻灯片，并可以附上相关的社交媒体信息（见图8-145）。
图8-145
一篇从零开始的软件模型制作和演示的幻灯就制作完毕了。希望大家通过本章内容的学习，不但会使用“动作”这个高级构件效果，更巩固了之前学习到的技巧。
第一次接触动作，希望这些“小小”的动态效果能给讲解带来更多的加分效果：
渐变主题，外加一个复制来的黑板主题；
关于直线、圆形和矩形的更巧妙组合；
检查器→动画效果→动作；
音频的加入，以及和自定义线条的配合。
心得篇：可能还是有读者会问和上一章类似的问题，如果我正好没有去澳大利亚旅游，如果正好没有要制作一个音乐播放器，还能用本章介绍的这些内容吗？
答案依然是肯定的。素材、内容、主题是可以千变万化的，但是技巧和经验思路却是一脉相承的。本章多次谈到“从身边发现”的问题。做音乐软件可以以iTunes为例，做邮件软件可以参考Mail，做日历软件可以参考iCal……表现声波就用简单的圆形，表现云端可以用矩形加圆形，表现软件可以用自定义线条搭出的盒子。抬头看看身边的事物就会发现，可以参考参照的例子是如此之多。
软件篇：不用多说，iTunes是Mac电脑上的标配音乐软件。除了播放音乐之外，它也一手包办了各种iPhone、iPad和Mac同步的问题。在iWork三剑客中，所有媒体窗口内的图片都默认来自iPhoto图库，而所有音乐都默认来自iTunes曲库，包括很多第三方软件也沿用了这个设置。
生活中，会听到很多人抱怨iTunes太封闭、太难用、前者源自苹果基因中的闭环优秀体验思想，至于后者，如果交给一个每天有上亿用户使用的软件，又会怎么改进呢？
