跳出思維圈,“類H5”助你市場推廣一臂之力
跳出思維圈,“類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網頁似乎有些風馬牛不相及,但是只要能夠解決實際的問題,何必要墨守在固定的模式里呢?

投稿者:熊先生

本文鏈接:http://www.casaleticia.com/h5-help-your-marketing.html
本文標簽: , , , ,