跳出思惟圈，「類H5」助你市場推廣一臂之力

HTML5，也就是咱們常說的H5，它是一種標記語言，主要用於網站的編寫和Web App的開發。H5製做的網頁能夠說是如今網絡推廣、促銷方面的利器。其優勢主要體如今兩個方面，一是豐富的動效支持，二是查看方便。H5近年來愈來愈受到人們的喜好。

可是，使用H5作開發，並非人人都能作的，須要大量的編程語言和開發的基礎，而一些所謂的簡單設計H5的工具功能又不完善。若是我不會js，不會HTML5語言，怎麼能作出一個「類H5」的簡單App呢？

做爲產品小白的熊先生最近正在悶頭作原型，在製做的過程當中突然發現，本身的設計其實徹底能夠應用到H5網頁這樣的推廣當中。最近正在作一個旅遊相關的app，那麼我就幫忙幫到底，作一個旅遊活動推廣的「類H5」推廣原型吧。

開始以前，咱們須要肯定一個原型設計工具，就用Mockplus好了，最近一直在用，拿來也比較順手。

而後，列好大鋼，編輯項目樹。良好的規劃是優秀的設計中必不可少的一部分。

接下來，咱們開始頁面的設計。

第一步：載入動畫。

載入動畫是H5頁面標誌性的效果之一，「類H5」固然也不能忘記這一點。

方法：導入須要的圖片，根據頁面的內容，設置某些組件爲不可見；拖拽它們各自的連接點設置「載入時」顯示本身的交互效果。而且給部分組件設置上移動的動畫效果，使得整個頁面更加生動。

第二步：設置交互效果。

使用原型設計工具來設置「類H5」網頁最大的優點就在於：原型設計工具備更多的交互效果，你想要的總有辦法能夠實現。這裏咱們先簡單的設置一些彈窗的效果。好比，關於旅行社的介紹、導遊的相關資質、旅遊線路的介紹等等。

方法：拖拽出相應的彈窗組件，雙擊打開設計。而後拖拽頁面中組件的連接點到彈窗上，最後設置彈出的效果。

第三步：頁面跳轉。

在用戶比較感興趣的內容區域設置頁面的跳轉，重點內容用新的頁面來說解，減小其餘內容的干擾，不只保證了吸引用戶的眼球，更加保障頁面運行的流暢程度。

方法：設置頁面的跳轉效果對原型設計工具來講徹底是小菜一碟，Mockplus只須要一個簡單的拖拽動做就能夠搞定了。

第四部：在線發佈。

設計作的再好，沒人欣賞怎麼行？但是，要怎麼才能把這樣一個「類H5」的原型項目發出去呢？

方法：發佈。有了這個功能，你就能夠把作好的做品上傳到Mockplus的服務器，而後拿着這個連接分享給你的客戶們了。並且，Mockplus能夠很簡單的就作到全屏演示的效果。怎麼樣，是否是很神奇？

設計的內容比較簡單，主要是但願你們可以明白這個意思。

熊先生以爲：市場也好，設計也好，咱們更注重的是獲得的結果，而不是手中的工具。雖然使用原型設計工具來實現H5網頁彷佛有些風馬牛不相及，可是隻要可以解決實際的問題，何須要墨守在固定的模式裏呢？