HTML5按咒，也就是我們常說的H5迟隅，它是一種標記語言，主要用于網(wǎng)站的編寫和Web App的開發(fā)胖齐。H5制作的網(wǎng)頁可以說是現(xiàn)在網(wǎng)絡(luò)推廣玻淑、促銷方面的利器。其優(yōu)點主要體現(xiàn)在兩個方面呀伙，一是豐富的動效支持补履，二是查看方便。H5近年來越來越受到人們的喜愛剿另。
但是箫锤，使用H5做開發(fā)贬蛙，并不是人人都能做的，需要大量的編程語言和開發(fā)的基礎(chǔ)谚攒，而一些所謂的簡單設(shè)計H5的工具功能又不完善阳准。如果我不會js，不會HTML5語言馏臭，怎么能做出一個“類H5”的簡單App呢野蝇？
作為產(chǎn)品小白的熊先生最近正在悶頭做原型，在制作的過程中忽然發(fā)現(xiàn)括儒，自己的設(shè)計其實完全可以應(yīng)用到H5網(wǎng)頁這樣的推廣當中绕沈。最近正在做一個旅游相關(guān)的app，那么我就幫忙幫到底帮寻，做一個旅游活動推廣的“類H5”推廣原型吧乍狐。
開始之前，我們需要確定一個原型設(shè)計工具固逗，就用Mockplus好了浅蚪，最近一直在用，拿來也比較順手烫罩。
然后惜傲，列好大鋼，編輯項目樹嗡髓。良好的規(guī)劃是優(yōu)秀的設(shè)計中必不可少的一部分操漠。
接下來，我們開始頁面的設(shè)計饿这。
第一步：載入動畫浊伙。
載入動畫是H5頁面標志性的效果之一，“類H5”當然也不能忘記這一點长捧。
方法：導(dǎo)入需要的圖片嚣鄙，根據(jù)頁面的內(nèi)容，設(shè)置某些組件為不可見串结；拖拽它們各自的鏈接點設(shè)置“載入時”顯示自己的交互效果哑子。并且給部分組件設(shè)置上移動的動畫效果，使得整個頁面更加生動肌割。
第二步：設(shè)置交互效果卧蜓。
使用原型設(shè)計工具來設(shè)置“類H5”網(wǎng)頁最大的優(yōu)勢就在于：原型設(shè)計工具有更多的交互效果，你想要的總有辦法可以實現(xiàn)把敞。這里我們先簡單的設(shè)置一些彈窗的效果弥奸。比如，關(guān)于旅行社的介紹奋早、導(dǎo)游的相關(guān)資質(zhì)盛霎、旅游線路的介紹等等赠橙。
方法：拖拽出相應(yīng)的彈窗組件，雙擊打開設(shè)計愤炸。然后拖拽頁面中組件的鏈接點到彈窗上期揪，最后設(shè)置彈出的效果。
第三步：頁面跳轉(zhuǎn)规个。
在用戶比較感興趣的內(nèi)容區(qū)域設(shè)置頁面的跳轉(zhuǎn)凤薛，重點內(nèi)容用新的頁面來講解，減少其他內(nèi)容的干擾诞仓，不僅保證了吸引用戶的眼球枉侧，更加保障頁面運行的流暢程度。
方法：設(shè)置頁面的跳轉(zhuǎn)效果對原型設(shè)計工具來說完全是小菜一碟狂芋，Mockplus只需要一個簡單的拖拽動作就可以搞定了。
第四部：在線發(fā)布憨栽。
設(shè)計做的再好帜矾，沒人欣賞怎么行？可是屑柔，要怎么才能把這樣一個“類H5”的原型項目發(fā)出去呢屡萤？
方法：發(fā)布。有了這個功能掸宛，你就可以把做好的作品上傳到Mockplus的服務(wù)器死陆，然后拿著這個鏈接分享給你的客戶們了。而且唧瘾，Mockplus可以很簡單的就做到全屏演示的效果措译。怎么樣，是不是很神奇饰序？
設(shè)計的內(nèi)容比較簡單领虹，主要是希望大家能夠明白這個意思。
熊先生覺得：市場也好求豫，設(shè)計也好塌衰，我們更注重的是得到的結(jié)果，而不是手中的工具蝠嘉。雖然使用原型設(shè)計工具來實現(xiàn)H5網(wǎng)頁似乎有些風(fēng)馬牛不相及最疆，但是只要能夠解決實際的問題，何必要墨守在固定的模式里呢蚤告？
