前言

如果說 SVG 交互是頭部品牌公眾號的標(biāo)配，那么伸長式圖文則儼然 SVG 交互中的標(biāo)配?！盁o伸長不圖文”的思維風(fēng)靡，那些無圖文展開特效的公眾號仿佛“被落后”……

但是，基于 <height> 參數(shù)的畫布高度動畫真的萬能嗎？本期我們結(jié)合交互設(shè)計學(xué)的本質(zhì)，一方面解讀 E2 平臺上部分伸長類動畫的應(yīng)用原則，另一方面提煉伸長類動畫的設(shè)計避坑指南。

為什么要伸長

我們?E2.COOL?編輯器目前有 30+ 種伸長類圖文，但無論具體表現(xiàn)形式如何，它們的交互設(shè)計學(xué)本質(zhì)都是對信息進行了折疊。

一切利他皆為利己——這是交互設(shè)計學(xué)的心理學(xué)本質(zhì)——通過充分的利他設(shè)計，最終獲得利己的信息傳播能效回報。所以要回答「為什么要伸長？」，首先要回答「伸長在哪些層面對用戶利他并對品牌方利己？」。

我們認(rèn)為以下條件是滿足伸長動畫必要性的：

1.出于「原子設(shè)計」價值

因具備明確的層級折疊系統(tǒng)

2.出于「首屏動畫」特性考慮

開屏動畫存在某些特質(zhì)

2.出于「故事板」設(shè)計要求

劇情映射了畫面遞進關(guān)系

以上 3 種交互設(shè)計場景下，伸長式 SVG 圖文排版是有一定必要的。它們具體指什么？運營人的補課時間現(xiàn)在開始！

原子設(shè)計

Atomic Design

在超一流公眾號運營團隊的眼里，圖文其實是網(wǎng)頁開發(fā)布局。尤其對于新品發(fā)布這類信息量飽和的圖文來講，它作為一個「頁面」或「視圖」而存在，但又可以被分配至無窮小而無窮多的變量，通過層級折疊的系統(tǒng)性方法，能重組為任何整體。

一個典型的原子設(shè)計系統(tǒng)

點擊上圖放大看，頁面內(nèi)信息等級從原子到頁面，均為層層包含關(guān)系。那么以最通俗的方式套用到圖文排版中，具備明確「總-分」關(guān)系的一圖流，就都具備了雛形的原子設(shè)計思維。

如果原子設(shè)計的層級進一步增加，就理所應(yīng)當(dāng)?shù)貢霈F(xiàn)「伸長內(nèi)再伸長」的 SVG 黑科技排版訴求，比如我們交付的定制型作品《一起云上「聽」展》就十分典型了。因為它具備了「頁面-模組/組織-原子」的分層關(guān)系，存在「折疊-展開」的顯著必要性。

但我們也要考慮，折疊的層級越深，用戶的觸發(fā)動作執(zhí)行就越多，內(nèi)部原子信息的用戶流失率越大。所以這里的避坑指南是，請適當(dāng)考慮自動伸長的模型如《黑科技編輯器 | 自動伸長教程》，甚至可以設(shè)置偽觸發(fā)提示——即便用戶不點擊也會在若干秒后伸長的排版噢！

動畫特性

Animation

想象一下，你的品牌為新品制作了特效炸裂的動態(tài)，那么毫無疑問你會希望用戶在完整觀看完畢后，再向下閱讀。

一個被賦予使命的開場動畫

Apple 公眾號的《新 iPhone SE，一點一點說?！凡粌H折疊到首屏，更在首屏長時間停留，連續(xù)引導(dǎo)用戶觀看多個 GIF 動態(tài)圖。而這樣的排版設(shè)計顯然不是所謂的「總-分」邏輯，而是更多在于用沖擊力強大的特效開啟用戶的消費心理。

所以這第二個必要性條件也非常好理解，當(dāng)品牌方的圖文出現(xiàn)前置的動畫設(shè)計，并希望用戶充分停留觀賞時，伸長式 SVG 黑科技排版就有一定的必要了。

那這里需要避坑的是什么呢？它也是 Apple 公眾號經(jīng)常犯的致命錯誤——倒序加載。由于圖層順序和代碼順序的映射關(guān)系，位于下層的圖片會先行加載，導(dǎo)致用戶第一次打開時封面還沒看見，后續(xù)的畫面卻早已暴露。

這一方面導(dǎo)致邏輯層面的難以理解，也莫名提前揭曉了部分后續(xù)精彩內(nèi)容。而要解決好這一問題往往需要開發(fā)者提前通過自動動畫為各個畫面分配入場。以我們交付的喜茶定制型作品《王，榨，油，柑，BANG！》就采用了這種方法避免伸長式圖文的提前劇透。

故事板

Storyboard

雖然它是影視動畫廣告行業(yè)的基礎(chǔ)概念，但得益于 SVG 強大的動畫力和交互力，諸多頭部大號都在嘗試基于它的分鏡化長圖文創(chuàng)作。這類創(chuàng)作包括但不僅限于交互式漫畫、答題系統(tǒng)等。

一種必要的進度設(shè)計

由 E2?主編小楊操刀開發(fā)的 GQ 實驗室定制型作品《中產(chǎn)階級的劇本殺，你能撐到第幾關(guān)？》作為行業(yè)爆款伸長式圖文，一經(jīng)推出就引發(fā)了眾多效仿甚至抄襲。作為線性故事板+擬二叉樹劇情交互，它的伸長排版必要性顯而易見。

這類條件下的伸長圖文需要避坑的則是中期的盲目設(shè)計修改，它將直接破壞大量已經(jīng)部署好的參數(shù)關(guān)系。如果你需要定制服務(wù)，請確保對劇情的整體設(shè)計深思熟慮，并與我們的客服人員進行溝通聯(lián)系。

而一切的這些交互設(shè)計，無論層級折疊、動畫表達、劇情演繹都是為了幫助用戶更好的吸收圖文信息，也由此更好的促進銷售轉(zhuǎn)化。那么重新審視你接下去的品牌公眾號排期，伸長式 SVG 圖文排版都是有必要的嗎？或者會不會反而給用戶帶來閱讀障礙？

相信你閱讀過本文的專業(yè)分析后，心中已經(jīng)有了明確答案。

這里是?E2.COOL?編輯器，次時代新媒體設(shè)計引擎?？v觀行業(yè)相比之下，我們也會更多提供給你交互設(shè)計方向的高端知識體系教學(xué)。如果有任何方法論層面疑問，也歡迎留言告訴我們，或許它就會成為我們的下一期論述選題。