昨天整理資料的時候，突然翻到了很早之前做的一個H5。看著那久遠的日期，我不禁沉醉在假想的美好回憶中并沾沾自喜。然而，當我打開這個作品的時候……這是什么東西？！這是想氣死誰？！不說那五顏六色的標題、時大時小的配圖，就說那N個冗雜的頁面，真是看得人頭都大了！

分頁展示是很多H5慣用的布局方式，但當我們需要呈現一些篇幅較長且關聯性很強的內容時，大量的分頁很可能會造成理解障礙或閱讀疲勞，進而影響用戶體驗。因此，在面對這種情況時，大家千萬不要像我一樣，硬著頭皮疊加頁面，而是運用意派Epub360的長頁面功能進行線性排布，在精簡內容的同時配合一些獨特的交互方式，以便為用戶提供更流暢的閱讀體驗，并有效降低流失率。

一、如何使用意派Epub360制作長頁面H5？

使用意派Epub360制作長頁面H5的方式主要有兩種，第一種是使用layer容器，第二種是改變頁面屬性。在此，我們主要介紹第二種相對簡單一點的方法（第一種方法雖然相對復雜一點，但制作功能也要更為強大，可制作橫長圖并配合一些特殊的動效等，如果感興趣的話，可以在意派Epub360官網教程中心搜索關鍵詞，以查看相關教程進行學習）。

1、登錄意派Epub360并創建一個H5作品，在右側屬性面板的頁面信息下勾選“啟用長頁面”。勾選后，畫布的底部會出現一個可以拖動的灰色小長條，如下圖：

2、向下拖動小長條后，畫布會相應地縱向延長，與此同時，畫布上會留下一條更為細長的灰色線條，這個線條就是正常畫布的出血線，可以方便H5設計師觀察長頁面中一屏的位置，如下圖：

3、除了向下拖動小長條外，我們還可以通過直接輸入具體的數值來延長畫布，如下圖：

二、如何讓你的長頁面H5更加深入人心？

細節成就品質，縱然長頁面H5有諸多優勢，但若不好好用心設計，仍舊和一張普通長圖無異，很難在用戶心中留下任何記憶點，當然，這也并不等于我們可以毫無邏輯地將各種不同種類的元素塞入其中，以提升整體的豐富度。相較于這種令頁面混亂、臃腫的錯誤做法，合理運用各式各樣的動效并為用戶提供酷炫有趣的互動體驗更值得提倡。

1、長頁面+視差滾動

視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，進而營造出立體的動感效果。長頁面+視差滾動這個組合比較適合用來描繪一些細膩又豐富的場景，可以使得作品變得更加鮮活。在具體制作時，我們需要用到Layer圖層、聯動組件等，如果感興趣的話，可以在意派Epub360官網教程中心搜索關鍵詞，以查看相關教程進行學習。

案例：《想象之上，讓價值超越價格》

2、長頁面+位置觸發

位置觸發是指將頁面滑動到指定位置時，即可觸發相應的效果。長頁面+位置觸發這個組合可在展示大量內容的同時有效提升作品整體的趣味性。在具體制作時，我們需要用到錨點組件等，如果感興趣的話，可以在意派Epub360官網教程中心搜索關鍵詞，以查看相關教程進行學習。

案例：《“菜霸”受審記》

3、長頁面+飛過花開（直線+曲線運動）

飛過花開（直線+曲線運動）是指某一元素在進行曲線移動時，可促使H5頁面不斷位移并觸發相應的動畫。長頁面+飛過花開（直線+曲線運動）這個組合可以說是線路圖設計的經典組合，可大大提升視覺體驗并吸引更多用戶。在具體制作時，我們需要用到直線/曲線運動組件等，如果感興趣的話，可以在意派Epub360官網教程中心搜索關鍵詞，以查看相關教程進行學習。

案例：《彼得羅夫·玫瑰之旅邀請函》

4、長頁面+SVG路徑動畫

SVG路徑動畫是意派Epub360的特色功能之一，主要是指讓SVG的描邊沿軌跡路徑運動的動畫效果，整體看起來像是有人在繪制一樣。長頁面+SVG路徑動畫這個組合可實現動態加載軌跡，有效提升作品的精致感。在具體制作時，我們需要用到SVG路徑組件等，如果感興趣的話，可以在意派Epub360官網教程中心搜索關鍵詞，以查看相關教程進行學習。

案例：《金融碰撞互聯網，傳統銀行受到10000點傷害？》

以上4種組合方式均可有效提升長頁面H5的傳播效果，至于要選擇何種搭配，則主要取決于大家對H5整體的策劃構思。此外，由于要將所有要素都集中在同一個頁面上進行展示，因此，如何在統一調控H5整體風格的基礎上，讓用戶又快又準地捕捉到重點信息，也非常值得大家思考。

總結

以上是生活随笔為你收集整理的h5页面笔按下默认是拖动_屡屡刷屏的长页面H5原来是这样诞生的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。