2014至2015年，H5發展得如火如荼，各類手機端小遊戲、運營、廣告，紛紛採用H5的形式來進行產品和品牌傳播。在這裡聊一下對H5運營類頁面設計的觀察和思考，拋磚引玉。
一. 簡介
H5運營類頁面設計，是指用來承載運營活動、品牌活動或信息傳遞的移動端頁面設計；具有展示空間小、時間碎且短、操作可互動的特點；直接目的是引起用戶病毒式分享，從而提升活躍度和品牌形象。常見類型如下：
展示型：多用於圖文展示，通常採用上下滑動或者左右滑動來進行多頁切換，每頁集中一個內容點，搭配動效出現；
遊戲型：以簡單操作的小遊戲為主，交互性和趣味性更強，經常伴有挑戰記錄或者測試結果，讓用戶樂於分享；
產品型：通常會有2級頁面存在，提供內容讓用戶對運營活動有更進一步的瞭解，同時，常會有表單出現，與用戶進行互動；
進行H5設計的時候，需根據主題和內容，選擇適合自己產品的H5類型，來最大化地促進傳播和分享。
二. 用戶為何分享
為了最大化傳播效果，需要了解一下用戶分享的動機有哪些？一般有以下4類：
三. 更好地吸引用戶
除了依靠分享動機來讓用戶進行傳播，在設計層面，可以通過場景趣味化、動效、參與感、講故事的方式，來更好地吸引用戶讀下去，進一步產生分享的衝動。
1. 趣味化：在素材有限或場景不好直接構建的情況下，通過畫面的卡通、誇張，讓用戶耳目一新，產生有趣的感受，更願意進行分享；
2. 動起來：通過動效來讓用戶每一次操作都充滿未知、驚喜，從而吸引用戶閱讀到最後，大大提高常規性運營內容的閱讀樂趣。
（1）萬能某寶：通過信息可視化和動效，讓原本複雜枯燥的內容一下產生了魔力，讓你有一直滾下去的衝動；
3. 參與進來：讓用戶參與進來，讓用戶的互動成為頁面最終結果的一部分，從而產生榮耀感、專屬感，用戶也更願意去分享自己的成績單。
（1）大眾點評9塊9看大片：畫面很黃很暴力，最重要的是讓用戶參與進來，最終也讓用戶看到自己的選擇，然後順便賣個小廣告。如此黃暴的畫面，怎能不分享呢？
（2）京東母親節：無論你選擇哪個，你都是逃脫不了被打的畫面，前面玩的時候有一種被戳破的感覺，最後一頁的轉折，讓人有點小感動。你可以說他講了故事，讓你玩了遊戲，無論哪種，都比單純說教來的自然、感人。
4. 講故事：故事永遠是最吸引人類的藝術形式之一，通過沉浸式的體驗，勾起用戶的回憶，引起共鳴，從而促使用戶分享。
QQ瀏覽器的《感謝你，與我共渡的那些年》，畫面很漂亮，加上意想不到的動效細節，讓你把它拿在手中的時候，迅速進入到故事中去，勾起那些年自己也幹過的事情......主題在最末道出，或許，你也肯定想把這種感覺，分享給自己的好友吧！
四. 實用Tips
1. 字體
默認中文字體 Heiti SC ，中文名稱叫黑體-簡，一般用華文黑體來代替，兩者差異微小；
默認英文字體 Helvetica Neue LT ；
字號選擇不要小於18號，其他字號雙數，同種類別下用同一樣字號。
2. 動效類型
3. 圖片和音效大小
PNG圖片壓縮請使用tinypng.com；音效大小一般控制在100k以內
4. 適配
一般情況下用640X1136進行設計；其他安卓機器前端切圖時可以適當拉伸，變化不會太大就不用每個進行適配。
一篇精簡的文章，從0到1帶大家認識了H5頁面設計技巧、原則，希望對大家有所幫助！
閱讀更多 大德之南 的文章
