心得分享，H5移動(dòng)端頁面設(shè)計(jì)心得分享(2)

3 /復(fù)雜多變的動(dòng)效不一定是好的，要考慮到加載速度等用戶體驗(yàn)問題。

1 / 考慮到用戶使用場景的多樣性，那種介紹類的如果要加背景音樂，盡量不要太粗暴。有一點(diǎn)循序漸進(jìn)最好，給用戶留時(shí)間在騷擾別人之前可以關(guān)閉。

或者可以在開始時(shí)是關(guān)閉狀態(tài)。但做游戲h5頁面的時(shí)候，音樂可以沒有關(guān)閉開啟按鈕，因?yàn)橛脩魧酉聛戆l(fā)生的事是有預(yù)知的。

2 / 考慮每一頁音樂按鈕放置的明顯性。如果能用其他頁面元素去替代音樂符號(hào)作為按鈕也是極好的。

給前端設(shè)計(jì)師的音樂文件：格式為mp3等 ，單軌，最好30秒以內(nèi) 。為了加載速度，文件大小盡量控制在：100k以內(nèi)最佳，可以用Adobe Audition等軟件來壓縮。作為無限循環(huán)的背景音樂，截取時(shí)一定要注意頭尾得連接得上。

1 / 展示型: 有很多種不同的交互方式，最常見的是翻頁，這種方式制作起來相對簡單，多用于展示一些新的產(chǎn)品，功能，或者活動(dòng)介紹等。技術(shù)上現(xiàn)在市面上已經(jīng)有H5在線生成器，基本上給圖片和文字就可以幫你進(jìn)行處理。

除了翻頁以外，還有點(diǎn)擊，輸入文字，擦除屏幕，滑動(dòng)屏幕等，玩法非常豐富。在“拍拍圣誕活動(dòng)”里就用到了重力感應(yīng)，搖一搖可以隨機(jī)判斷，讓用戶有了自己參與的樂趣。

2 /游戲型：像是起初朋友圈紅過的圍住神經(jīng)貓，或者是我們的“拍拍Jump”這類需要計(jì)算邏輯，得出分?jǐn)?shù)或者結(jié)論的小游戲。

3 /產(chǎn)品型：有一些H5是作為一個(gè)長期運(yùn)營的產(chǎn)品存在的，用戶的訪問可能會(huì)更固定，比如微信里的購物頁面等。

手機(jī)端之間：一般我們先用640X1136進(jìn)行設(shè)計(jì)，參考線會(huì)標(biāo)在960高的地方，主要元素最好不要過高以適配各種機(jī)型。其他安卓機(jī)器前端切圖時(shí)可以適當(dāng)拉伸，變化不會(huì)太大就不用每個(gè)進(jìn)行適配。