在面临课题总结或者小组活动的时候,我们几乎都避免不了使用PPT的情境。而制作一个质量较高的PPT可能需要花费比较长的时间1 。倘若你是个“完美主义者”,对细节要求几近苛刻,而知识储备并不是很尽如人意的话,往往会弄得是一头絮乱,制作一个PPT可能是种折磨...

制作一个好的PPT,在一些演讲的情境中,对于演讲者来说,也是自信的源泉,也有可能会让演讲的表现力提升一个档次。

那接下来就我个人认知和使用,粗浅的说下个人观点...

PowerPoint

谈及到PPT的使用,微软的PowerPoint和Apple的Keynote都是我们日常使用居多的幻灯片制作工具。

以老牌的课件制作工具PowerPoint为例。
优点:

  1. 可塑性强,可对组件,动画等进行简单的编辑;
  2. 强大的SmartArt工具以及丰富的图表样式;
  3. 支持数学公式,对理科老师有用;
  4. 适用于大部分设备;
  5. 因为广泛使用,更容易传播;
  6. 丰富的插件(PPT动画大师,Nordri Tools,iSlide等)。

缺点:

  1. 自带的组件相对来说不够美观,动画效果比较僵。
  2. 对于非深度使用者来说很多功能几乎用不上。
  3. 操作界面相对不够直观,需要大量编辑,也就造成了需要投入大量时间,却又吃力不讨好的局面。
  4. 不同设备之间的同步不够方便。

Keynote

而Keynote苹果iOS,OS X系统(分别对应移动端系统和非移动端系统)上的一款制作课件软件。刚推出的时候曾经以“闪烁”和“火焰”等酷炫效果占据几乎所有Keynote演示场合。
优点:

  1. 可以短时间做出一个看上去不太丑的课件。
  2. 操作方便,在Keynote3.3的更新内容中,在运行iOS11的iPad上,可以通过多任务管理在Keynote和其他应用之间拖放文本,图像等,使得Keynote的操作效率更加快捷,简单。
  3. 自带模板比较美观,风格偏扁平化,动画效果比较平滑,带有缓冲,弹性的效果,可观性很强。
  4. 设备之间可以通过iCloud同步非常方便,也可以通过AirDrop来传输。
  5. 讲座时可以将手机当成翻页笔来控制电脑上正在放映的Keynote演示。

缺点:

  1. 对于插件、第三方软件兼容性相对差。
  2. 相对比较难对课件做深度设计。
  3. iOS平台的限制性,不能被广泛使用。

接下来说说我们的主角...

reveal.js

reveal动词形式直译的话有揭露,[神]启示的意思,名词形式直译的意思有揭示,展现的意思。

正如他的名词解释一样,reveal.js是一个基本Web的展示框架。简单来说就是用网页来制作很棒的交互式的幻灯片

Vertical Slides

正常的幻灯都是水平布局,左右切换,而reveal.js可以垂直布局,上下切换,有点类似于PowerPoint中"节"的使用。减少水平布局的幻灯片过多的压力,以防概览很乱,垂直分布使主题分成几个"小节"一目了然。嵌入在下方的幻灯片可以用作对上方(等级较高的)幻灯片补充额外的细节的作用。

▲ Vertical Slides

一些快捷键

  • ← ↑ → ↓:控制幻灯片的切换。
  • ESC:对幻灯片做个整体的概览。
  • ALT+click :类似PowerPoint放映的时候的放大镜的效果,镜头迅速拉近。
  • S:开启演讲者模式,这点和PowerPoint类似,分成四个板块:当前幻灯片的显示,下一张幻灯片的预览,当前演讲时间以及演讲的备注笔记。
  • B:暂时停止当前的幻灯片的放映,呈现黑屏。在演讲时,当你希望听众能把注意力集中在你身上的时候,非常有用。

Slides

reveal.js是基于WEB的框架,基本网页能实现的内容,reveal都能实现。然而我们的目的只是制作一个简约,有逼格的幻灯片。不是一个程序员,不会代码,不是个问题。关于reveal.js有一个充满特色的线上可视化编辑应用网页,注册下登录即可开始简单的制作了。磁力

用Slides制作幻灯片

Slides是一个用作创造(create),展示(presenting)和分享的(sharing)的幻灯片制作的平台。因为Web的特性,使得它可以在几乎任何有网络的地方都能被你获得和编辑。让你抛开的平台的限制以及其他因素,进行轻量级的使用。

Create

在不牺牲简单易用的优势下,Slide 的布局是非常精确和灵活的。通过背景的网格基准线可以使内容排版非常轻松,也可以通过拖选得方式,同时移动多个模块内容。

▲ 拖选、吸附的基准线

工具栏

最左侧的工具栏也就是幻灯片保存,撤销,预览,导入/出等基础的文件功能。

毛笔状的style,主要是设置当前幻灯片的主题色彩,字体样式,转场动画以及背景转场动画。整体风格偏简约,扁平化,几乎都挺实用的。发挥自己的想象,明暗背景的转场会有不错的效果

▲ 主题样式

页面左侧的media library可以上传一些制作PPT的需要使用素材,也可以用作素材的堆积库。

▲ media library

工具

可以分为文本,图片,视频,图形,线形,表格,代码块区域,数学公式区域块等。每个工具组件都有网页组件的特性,页边距,边框等,动画效果有自定义的延迟和持续时间的属性修改。利用动画效果的特性可以做出很nice的呈现。

▲ 算是比较nice的个人制作 orz

比较特殊的是Iframe,通过url或者<iframe>标签实现在幻灯片嵌入幻灯片的效果以及其他网页的嵌入

背景工具栏

▲ 背景工具栏
背景设置
  • 颜色:CSS所支持的颜色都涵盖...
  • 图片:可以选择media library中的图片作为背景,也可以通过工具栏下方的设定按钮开启"开发者模式",将图片平铺。
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
  • 视频:添加media library的视频作为背景。
  • 动图:动图居然也可以作为背景233...
▲ gayf emmm...
片段放映

闪电状功能主要将当前幻灯片的各组件分段显示。单击需要编辑的组件,组件被阴影遮罩遮住,即可进入显示次序排列的编辑。转到当前幻灯片的时候,按照设定的层次显示次序,通过切换幻灯片的动作,依次显示..

▲ 层级
演讲备注笔记

演讲者笔记是通过在当前幻灯片添加,并在演讲者视角开启时,才能看得到。如果想要分享自己的备注笔记的话,也可以在左下角的deck setting里开启选项。这样所有浏览模式的人都可以看见笔记了。

▲ shanre notes
编辑html
▲ Editor Settings

需要通过左下角的editor setting中开启。获得三个权限:

  • 幻灯片的html编辑
  • 通过导出reveal.js,可以获得制作完的幻灯片的html源码。
  • 可以添加class names。通过传统的CSS来添加所需的内容。

Present

speaker view

通过工具栏的放映键位进入放映界面。

开启演讲者视角即

http://slides.com/用户名/幻灯片名/speaker

▲ 演讲者视角

remote control

可以通过移动设备控制:

▲ 终端控制

send SMS的方式,打开链接,从移动设备通过点击和滑动来控制幻灯片的放映,即在手机上打开speaker view的url。

▲ SMS发送url

present live

通过工具栏的present live的link即可进入幻灯片的实时放映页面,任何都可以通过链接,进行实时的访问。

http://slides.com/用户名/幻灯片名/live

勾选fullscreen让幻灯全屏显示,然后点击Start presetation,开始幻灯片的放映,打开"live"url的人就能看到你的放映了!

▲ 记住勾选 Fullscreen

Share

通过左下角的Share功能,可以将幻灯片全部概览,分享出去。

  • link
http://slides.com/用户名/幻灯片名/fullscreen
  • Embed通过<iframe>标签嵌入到其他网页,可以直接嵌入到另一张幻灯片。
  • E-mail通过e-mail发送简讯...
▲ 分享

Export

▲ 导出

可以离线保存幻灯片的html文件,但不包括外部的资源,例如图片等,不适合离线使用。

也可以将reveal.js的框架资源下载下来,把本幻灯片的源码资源在index.html中替换掉,即可形成完整的项目资源。

导出zip,pdf则需要升级Pro...

尾巴

reveal.js的开发者模式的有关介绍,链接

综上,reveal.js 制作PPT的优势

  • 制作简单,对于前端攻城狮来说就是做个页面;对于小白可以使用Slides
  • 运行简单,导出的HTML文件只要设备上有浏览器即可运行。
  • 功能强大,灵活。由于基本Web的特性,用HTML+CSS+JS,几乎可以实现一切想要的效果。内联PPT,解析Markdown等功能也是很强大。

  • 交互性强,观者可以通过自己的设备与演讲者进行实时交互。例如与现场用户进行交互(用户在手机上进行投票,页面上实时显示投票数)。
  • 逼格够高 orz

要说reveal.js缺点的话,目前直观看来,应该是图表的制作,可能还是PowerPoint来的直观迅速,虽说可以添加外部的CSS样式的图表...
不会CSS的话,也不用担心,用PowerPoint图表制作完成后,图片直接导入到slides就行了,或者用Numebers等其他一些图表制作的软件(图表本身就是个麻烦活..)。