![]()
2020 年 8 月 20 日，一段 13 分钟的游戏实机视频，让《黑神话：悟空》走入大众视野，被许多人称作“梦开始的地方”。
就在昨日——四年后的 8 月 20 日！《黑神话：悟空》终于正式发布！
人们期盼《黑神话》，也许是为其国际水准的制作品质、暗黑悬疑的东方故事、“无一处无根据”的场景美术；主创“白骨之后重走西游”的情怀历程……
但也可能，是为了那份对国产游戏可以走出 20 年的迷梦、真正迈入 3A 时代的渴望！
对此，小编也是无比激动。于是我们用 PPT+SVG 用心制作了一篇交互图文《【必看！】用SVG沉浸式感受《黑神话：悟空》(附下载）》（见推文第 4 条，一定去看！），向大家推介了不起的《黑神话》。
同时将创作教程分享出来，希望更多 PPTer 学会这一招，从此不只会拿 PPT 应付工作，还能把它“七十二变”，做出酷炫的 SVG，让你的创作获得更多流量价值！SVG 作品链接和本期 PPT 源文件免费下载地址见文末！![]()
Step 1：设计交互方案
1.1/ 选定交互方式
虽然是用 PPT 来完成设计，但完整的 SVG 作为交互作品，却需要在设计环节之前想得更多。制作目的和作品结构首当其冲，其次就是交互方式。SVG 支持多种交互形式，包括点击、长按和滑动等。根据内容和目标用户选择合适的交互形式，可以是单一形式或多种组合 。在本篇交互文章中，我们选择了以下几组重要的交互方式：点击伸长：压缩凌乱的信息，让页面更加干净简洁，让用户有种别有洞天之感。滚动暂停放大：可以让多张图展示时获得更多精准的展示效果，提升阅读体验。无限选择器：四大章节，直接无缝衔接的话会导致篇幅过长，于是使用无限选择器可以减少篇幅同时增加交互的沉浸感。非全屏滑动：增加阅读的停留时间，让信息更有效的传达。自动Banner：避免重复的手动滑动，提升这段内容的阅读体验。
1.2/ 设计动画效果
虽然是用 PPT 来完成设计，但完整的 SVG 作为交互作品，却需要在设计环节之前想得更多。制作目的和作品结构首当其冲，其次就是交互方式。SVG 动画可以增强交互体验。常见的动画形式包括透明度变化、宽高度调整、元素位移、路径绘制、变换以及图片查看等 ，设计时要考虑动画的流畅性和与用户交互的协同效果。在设计 SVG 交互时，要确保动画和交互不影响用户的阅读体验，避免过度复杂的动画造成用户困扰 。此外，考虑到 SVG 在不同设备和屏幕尺寸上的广泛应用，我们还需要确保 SVG 交互设计具有良好的跨设备适配性。总之切记：在做交互方案中，我们既要认识到技术和创意虽然是相辅相成的，又要记住内容才是核心，技术只是实现创意的手段 。不要痴迷于炫技，本末倒置！Step 2：进行竖版 PPT 设计
2.1/ 修改尺寸
和传统的一图流设计+切图不同，由于 PPT 里面设计一图流后切图困难，因此我们选择使用多张无缝衔接的方式来设计。而交互图文多在移动端传播，因此我们在设计前的第一步便是修改 PPT 尺寸。根据大多数手机的尺寸和比例，优先选择 10:16 的尺寸，修改方式如下：2.2/ 内容设计
进入平面设计环节，请大家尽情发挥，此处我们仅以下面这一页为例，分享一下我们用 PPT 创作它时的一些“小心思”。（1）确定风格 & 布局
前往《黑神话：悟空》的官网，判断其为暗黑+中国风。根据我们的原稿，规划一下内容布局排版，这里可以使用我们 iSlide 的「智能参考线」功能，可以更好的分布和规范我们的设计。（2）背景优化
为了提升素材的氛围感，我们在 iSlide「插图库」中搜索关键词【火星粒子】，将修饰元素加入画面背景，进一步丰富了页面细节。
（3）文字排版
本页的核心关键词——“启程”，我们选择使用的是中国风巨浓的书法字「艾迪鹅演示引擎标题体」。正文字体，我们则选用了比较符合中国风，但平时大家设计可能少用的「楷体」和「仿宋」。根据我们之前规划的布局方式，我们将文字进行简单的排版并添加些细节设计，比如线条、英文、图标等元素，页面便设计完成了。
2.3/ 无缝拼接，生成 Layout
Layout（布局图）是 SVG 交互作品的一个重要概念，一般是指交互设计结构的平铺状态，并能够切实反映出页面关联性。在设计过程中，不同于 PS/AI，由于我们是进行分屏的设计，因此我们十分重要的考虑就是前后文的衔接。为了做好衔接，我们在设计过程中，常常使用以下方法：当然，我们经常用到的最好用的方法，那便是 iSlide 插件中的「PPT拼图」功能。不使用 PS 软件，就可以将 PPT 页面按照指定的方式排列拼接成长图，并可以添加水印保护原创。通过使用 PPT 拼图功能，我们就可以很好的预览到上下幻灯片的衔接问题，通常我们根据以下参数进行调整，可供大家参考：Step 3：素材分层导出
不少交互组件都需要对元素进行单独控制，我们在设计完 PPT 之后，开始拆分 PPT 的图层关系，然后分层导出 PNG，再进行下一步的交互开发。
3.1/ 拆解图层
根据交互逻辑拆解对应的图层关系，并通过 PPT 的图片导出功能单独导出每一个需要进行交互的图层。
在 SVG 交互图文开发中，素材的规范命名极为重要，它直接关系到项目的可维护性、开发效率以及团队协作的流畅度。比如我们在开发本篇图文之前，针对每一屏的内容都进行了单独的打包，并规范化的命名。每一个文件夹打开后对每一个相关素材精准命名，以便在开发进行中能够高效找到对应素材。图层拆解和命名越规范，才能够帮助你在进行交互开发的时候更快，更好的完成交互效果。Step 4：交互设计开发
让 PPT 设计的文件真正成为交互丰富的 SVG 动态作品，需要借助 SVG 编辑器实现。本次我们使用的是与 iSlide 同样富有“极客气质”的 E2.COOL 黑科技 SVG 编辑器（以下简称 E2 编辑器），上手简单又不失专业。
在开场页面，根据设计的分层结果我们设计包括文案浮现、按钮闪烁等叠加效果。此处的素材设计均基于整个画板导出，因而在 SVG 开发流程中应用就十分便捷，无需在后续可能出现的修改中反复变更元素的坐标参数：进入 E2编辑器（www.e2.cool），通过「自由布局」的「自动出现」、「自动位移」组件先实现核心文案前景的浮现；按相似方式，开发按钮的呼吸闪烁效果。这里我们通过多一层编组的设置，让它先经过浮现后再展示呼吸；此外，当你仔细观察：我们的开场首页的动画是「点击-伸长」，这个如何实现呢？视频部分采用了「视频号跳转美化」的交互设计，并结合了 E2 编辑器的「滚动暂停放大」组件，同样可以通过「零高结构」组合而成。
这是这期交互作品中非常出彩的环节。采用了 UGC 专区组件「无限选择器」，嵌套精致的按钮选项设计与多图滑动：这里展示其中一个选项的 SVG 排版结构，需注意该组件内应尽量采用穿透或热区型组件嵌套，避免选项失灵：SVG「无限选择器」的应用是对信息有效的折叠，将四个篇章已经大量滑动图的信息量以一定的层次性引导用户自主点选浏览，减轻阅读压力的同时增加信息的逻辑关系。点击下方图片沉浸式感受 SVG 作品，并获取免费下载地址：总结
SVG 交互动图，不仅能够通过提高用户参与度、丰富信息传递细节提升演示效果，还能通过丰富的交互、新颖的视觉呈现效果来实现设计内容与流量、传播之间距离的缩短。而现在，即便你只会用 PPT 做设计、即便你并不会写代码，也可以通过本文所讲的办法实现了。对于许多人来说，PPT 就是最主要、最常用的设计工具。既然如此，我们何不打开脑洞，让你设计的 PPT 拥有更多“打开方式”，从而感受更多元的设计乐趣？感谢 E2 编辑器和 PPT 世界理解我们的想法，并和我们共同完成了这一次探索！除了 SVG 版本外，我们也将本次设计做成了 16:9 PPT 模板。iSlide 案例库搜索#5011206，或点击下方图片跳转 iSlide 小程序即可下载。
# 留言有奖 #
如果你也感兴趣，不妨在评论区讲讲「除了办公，还希望看到PPT的哪些打开方式？」，我们将抽选 3 位回答优质的用户赠送 E2.COOL 黑科技 SVG 编辑器会员（3个月）可扫描下方二维码，报暗号“直面天命”领取 PPT 世界演示会员（7天）
