方法论｜一言不合就伸长？浅谈伸长式SVG图文排版原则
前言
如果说 SVG 交互是头部品牌公众号的标配，那么伸长式图文则俨然 SVG 交互中的标配。“无伸长不图文”的思维风靡，那些无图文展开特效的公众号仿佛“被落后”……
但是，基于 <height> 参数的画布高度动画真的万能吗？本期我们结合交互设计学的本质，一方面解读 E2 平台上部分伸长类动画的应用原则，另一方面提炼伸长类动画的设计避坑指南。
为什么要伸长
我们 E2.COOL 编辑器目前有 30+ 种伸长类图文，但无论具体表现形式如何，它们的交互设计学本质都是对信息进行了折叠。
一切利他皆为利己——这是交互设计学的心理学本质——通过充分的利他设计，最终获得利己的信息传播能效回报。所以要回答「为什么要伸长？」，首先要回答「伸长在哪些层面对用户利他并对品牌方利己？」。
我们认为以下条件是满足伸长动画必要性的：
1.出于「原子设计」价值
因具备明确的层级折叠系统
2.出于「首屏动画」特性考虑
开屏动画存在某些特质
2.出于「故事板」设计要求
剧情映射了画面递进关系
以上 3 种交互设计场景下，伸长式 SVG 图文排版是有一定必要的。它们具体指什么？运营人的补课时间现在开始！
原子设计
Atomic Design
在超一流公众号运营团队的眼里，图文其实是网页开发布局。尤其对于新品发布这类信息量饱和的图文来讲，它作为一个「页面」或「视图」而存在，但又可以被分配至无穷小而无穷多的变量，通过层级折叠的系统性方法，能重组为任何整体。
一个典型的原子设计系统
点击上图放大看，页面内信息等级从原子到页面，均为层层包含关系。那么以最通俗的方式套用到图文排版中，具备明确「总-分」关系的一图流，就都具备了雏形的原子设计思维。
如果原子设计的层级进一步增加，就理所应当地会出现「伸长内再伸长」的 SVG 黑科技排版诉求，比如我们交付的定制型作品《一起云上「听」展》就十分典型了。因为它具备了「页面-模组/组织-原子」的分层关系，存在「折叠-展开」的显著必要性。
但我们也要考虑，折叠的层级越深，用户的触发动作执行就越多，内部原子信息的用户流失率越大。所以这里的避坑指南是，请适当考虑自动伸长的模型如《黑科技编辑器 | 自动伸长教程》，甚至可以设置伪触发提示——即便用户不点击也会在若干秒后伸长的排版噢！
动画特性
Animation
想象一下，你的品牌为新品制作了特效炸裂的动态，那么毫无疑问你会希望用户在完整观看完毕后，再向下阅读。
一个被赋予使命的开场动画
Apple 公众号的《新 iPhone SE，一点一点说。》不仅折叠到首屏，更在首屏长时间停留，连续引导用户观看多个 GIF 动态图。而这样的排版设计显然不是所谓的「总-分」逻辑，而是更多在于用冲击力强大的特效开启用户的消费心理。
所以这第二个必要性条件也非常好理解，当品牌方的图文出现前置的动画设计，并希望用户充分停留观赏时，伸长式 SVG 黑科技排版就有一定的必要了。
那这里需要避坑的是什么呢？它也是 Apple 公众号经常犯的致命错误——倒序加载。由于图层顺序和代码顺序的映射关系，位于下层的图片会先行加载，导致用户第一次打开时封面还没看见，后续的画面却早已暴露。
这一方面导致逻辑层面的难以理解，也莫名提前揭晓了部分后续精彩内容。而要解决好这一问题往往需要开发者提前通过自动动画为各个画面分配入场。以我们交付的喜茶定制型作品《王，榨，油，柑，BANG！》就采用了这种方法避免伸长式图文的提前剧透。
故事板
Storyboard
虽然它是影视动画广告行业的基础概念，但得益于 SVG 强大的动画力和交互力，诸多头部大号都在尝试基于它的分镜化长图文创作。这类创作包括但不仅限于交互式漫画、答题系统等。
一种必要的进度设计
由 E2 主编小杨操刀开发的 GQ 实验室定制型作品《中产阶级的剧本杀，你能撑到第几关？》作为行业爆款伸长式图文，一经推出就引发了众多效仿甚至抄袭。作为线性故事板+拟二叉树剧情交互，它的伸长排版必要性显而易见。
这类条件下的伸长图文需要避坑的则是中期的盲目设计修改，它将直接破坏大量已经部署好的参数关系。如果你需要定制服务，请确保对剧情的整体设计深思熟虑，并与我们的客服人员进行沟通联系。
而一切的这些交互设计，无论层级折叠、动画表达、剧情演绎都是为了帮助用户更好的吸收图文信息，也由此更好的促进销售转化。那么重新审视你接下去的品牌公众号排期，伸长式 SVG 图文排版都是有必要的吗？或者会不会反而给用户带来阅读障碍？
相信你阅读过本文的专业分析后，心中已经有了明确答案。
这里是 E2.COOL 编辑器，次时代新媒体设计引擎。纵观行业相比之下，我们也会更多提供给你交互设计方向的高端知识体系教学。如果有任何方法论层面疑问，也欢迎留言告诉我们，或许它就会成为我们的下一期论述选题。
