我們都在竭盡心力想做出一個成功的H5作品。

1.?什么是H5

暫先不說“成功”如何定義，你能告訴我什么是H5嗎？

我們都知道，H5是HTML5的縮寫。但HTML5只是一個頁面實現(xiàn)方式的技術名詞，難道我們平日所指的就是這個技術名詞嗎？顯然不是。

準確的說，我們所說的是以Html5方式實現(xiàn)的在移動端展示的功能頁面。

如果把頁面比作人，那么HTML是他的骨架，CSS是他的肌肉皮膚，JavaScript是這個人的行為反應，比如蒼蠅飛到臉上了，人會一巴掌拍過去（West World有追的嗎）。

這樣說來，與頁面交互最相關的是JavaScript，而不是HTML。而且，現(xiàn)在各平臺上出現(xiàn)的大部分H5作品其實都沒有用到HTML5的特性，用以往的HTML技術就足以實現(xiàn)。

可見我們平常所說的H5，和技術名詞HTML5沒有太大關系，是一個被大家叫習慣了的產(chǎn)品名詞而已，本質(zhì)上就是在移動端展示的功能頁面。但為什么我們所說的H5顯得如此特殊呢？

原因其實是蘊藏其背后的運營目的。

2.?怎樣的H5算是成功？

《圍住神經(jīng)貓》的爆紅雖然是個巧合，但一直以來被當做一個典型的成功案例為大家所知。但它真的算是成功的H5作品嗎？玩過之后，你記住了什么？

大部分人記住的只是這種“賤兮兮小游戲”的游戲概念和交互方式。用戶就算玩過10遍也不一定知道這個H5的制作團隊是誰，這個團隊想要宣傳什么。

《吳某凡要入伍》也一度刷爆朋友圈，信息展示方式很有創(chuàng)意，乃至現(xiàn)在都還有很多作品沿用這種在真實頁面背景上做創(chuàng)意的表現(xiàn)形式。但同樣還是那個問題，玩過之后，除了吳某凡這個名字和酷炫的交互方式，你還記住了什么？如果用戶在體驗了整個設計之后都不知道這個H5宣傳的主體是什么，能稱之為成功嗎？

注：當然我沒有具體數(shù)據(jù)表明以上H5上線之后對用戶下載等方面數(shù)據(jù)的影響，但從我對小范圍用戶的調(diào)研來看，和H5本身的影響力不對等。

那到底怎樣的H5作品是成功的呢？如圖所示：

所指運營目的無非就是拉新、日活、品牌曝光等；用戶目的比較常被利用的有占便宜、獵奇、追星、炫耀、情感共鳴等。而作為設計師要做的，就是利用可用資源設計一種方式，委婉的誘導用戶實現(xiàn)其用戶目的，從而協(xié)助產(chǎn)品達成運營目的。

(>_>)用詞是不是太邪惡了？

回頭再來看《吳某凡要入伍》這個案例：

如果沒有特別注意，很容易誤認為這個H5主要是為騰訊新聞做宣傳。因為除了騰訊新聞的標題以外，H5的曝光主角“全民突擊”游戲名只出現(xiàn)在了結束頁的左上角，以及吳某凡視頻的口頭描述中。除了左上角視覺表達上不夠突出外，在H5傳播環(huán)境下，用音頻傳遞重要信息本身也不是很高效的方式。

套用上圖邏輯來說，就是用戶雖然在此H5中達到了用戶目的（獵奇、追星…），但并未成功轉(zhuǎn)化為達成運營目的條件。

小結

筆者當然沒有一套理論總結如何能百分百做出一個成功的H5作品，畢竟一個作品的成功除了設計師本身的素質(zhì)外，還受很多其他因素的影響。就像前段時間乘著洪荒少女的熱浪火起來的“網(wǎng)易噠噠-用洪荒之力畫小人”，有一些其他H5作品，比如“361°創(chuàng)造屬于你的熱愛”在更早時用了相同的表現(xiàn)形式卻沒能達到前者一樣的傳播效果。有些評論稱之為抄襲，對此筆者只能說，希望自己也能抄襲出很多這樣成功傳播的作品。

H5的成功從來就是這樣，充滿了不確定因素，有些作品費盡心血和成本，最后換來用戶的一句“恩，挺好看的”然后點擊關閉，沒有驚起半點波瀾。而有的作品雖簡單，卻能準確地擊中用戶要害，達到運營目的。作為交互設計師，我希望自己能最大限度的保證當這種機會降臨的時候，在交互設計的層面上，我已完全做好準備。

本文旨在和大家分享筆者對H5設計的一些想法，如有不妥之處還請大家包涵。

作者：杰克蝶

來源：微信公眾號【ME網(wǎng)易移動設計】