心得分享，H5移動端頁面設計心得分享(2)

3 /復雜多變的動效不一定是好的，要考慮到加載速度等用戶體驗問題。

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

或者可以在開始時是關閉狀態(tài)。但做游戲h5頁面的時候，音樂可以沒有關閉開啟按鈕，因為用戶對接下來發(fā)生的事是有預知的。

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

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

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

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

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

3 /產品型：有一些H5是作為一個長期運營的產品存在的，用戶的訪問可能會更固定，比如微信里的購物頁面等。

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