石家莊辦公軟件/軟件開發(fā)

隨著H5技術(shù)的不斷應(yīng)用，H5頁面越來越受大家歡迎，使得市面上的H5層出不窮，但是就是因為市面上H5頁面的越來越多，使得H5頁面的一些規(guī)范被忽略掉，今天，西安弈聰花了大量的時間和心思為大家總結(jié)一些H5頁面制作技巧與規(guī)范(大全)!

　　一、H5頁面制作規(guī)范

　　1、交互：慎用向右滑動的操作方式。慎用向右滑動的操作方式原因：蘋果手機上，向右滑動容易觸發(fā)返回“上一級頁面”效果。

　　2、交互：慎用橫屏展示效果。慎用橫屏找事效果原因：體驗上，需要用戶設(shè)備開啟屏幕旋轉(zhuǎn)功能，才能正常觀看，用戶操作成本高。對不同屏幕的手機，長寬比例不一，難以展示最佳的視覺效果。

　　3、視覺：功能按鈕等，遠離頁面底部(大概128px，這個尺寸不是固定值)，具體看重構(gòu)采用什么適配方式(僅供參考：640*1136 px，從上往下計算，主要內(nèi)容在1008px內(nèi))。原因：更好的設(shè)備各種屏幕的手機，避免按鈕被擋住。

　　4、視覺：慎用“光線疊加效果”或PS里面的“圖層樣式”效果。如：給圖層加個“柔光”、“濾色”、“色相”等等效果，除非這個視覺元素可以合并為一體。原因：給重構(gòu)挖坑，導(dǎo)致不好切圖，無法還原視覺效果。

　　5、視覺：矢量圖? 想做簡單的動畫? 導(dǎo)出SVG格式試試!　原因：能減少體積的事，為什么拒絕呢……

　　6、動畫：盡量避免全屏動畫，優(yōu)先考慮局部動畫的方式。如：各種粒子效果全屏飄過等。原因：如果呈現(xiàn)的視覺效果無法用代碼實現(xiàn)，就意味著要用全屏尺寸的序列幀來處理，體積上會飆升，影響加載體驗。

　　7、動畫：序列幀壓縮小技巧，靜態(tài)的畫面，保存較高質(zhì)量。中間運動的模糊狀態(tài)，大膽的壓低畫面質(zhì)量吧。原因：壓縮體積，運動狀態(tài)就算有鋸齒也不明顯。

　　8、重構(gòu)：圖片請上“tinypng.com”，壓縮下，有效減少體積。原因：額，這個也要說原因?好吧，偷偷告訴你，現(xiàn)在這網(wǎng)站不止可以壓縮png，還可以壓縮jpg，更重要的是……支持批量下載了!

　　9、重構(gòu)：音樂請壓縮下，能大大減少整體的體積。技巧：如果沒有特殊要求，可以考慮弄成單聲道音頻文件，比特率48或更低就行了。

　　10、重構(gòu)：安卓機不支持多個音頻同時播放……意味著無法背景音樂跟音效同時播放!

　　11、重構(gòu)：視頻無法自動播放，首次播放需要用戶點擊觸發(fā)

　　12、重構(gòu)：測試請多留意“魅族”手機和華為P6/P7等，屏幕底部采用虛擬按鈕的手機。設(shè)備容易出問題。

　　二、H5頁面制作技巧

　　1.故事化

　　H5本身是一個信息承載和傳達的工具。講故事是讓信息快速傳達的最好方式。你要將品牌故事融入H5，借助H5的技術(shù)優(yōu)勢將品牌價值文化理念傳達給用戶，讓其永久的記住你。H5融入場景一是讓用戶能在參與中，找到熟悉感以更容易的接受里面的信息，而是場景承載的品牌信息，用戶在特定場景里，喚起他們的認知，從而加深用戶對品牌的印象。

石家莊辦公軟件/軟件開發(fā)

　　2、CSS3時序錯開漸顯動畫

　　這是一種比較常用的動畫，它的優(yōu)點是節(jié)奏感強，做法就是先讓每個元素隱藏，然后當頁面呈現(xiàn)后每個元素錯開時間出現(xiàn)。

　　3、如果時間緊湊，又不像桑尼一樣擅長于動畫細節(jié)，可以使用一些輔助工具：

　　Animate.css，通過直接預(yù)覽選擇想要的動效，然后下載它的CSS把對應(yīng)的keyframe扒下來就好了(引用整個CSS是資源浪費)。

　　4、　動效前期跟前端設(shè)計師進行溝通，討論頁面中元素的動效呈現(xiàn)。例如一些元素的位移，旋轉(zhuǎn)，翻轉(zhuǎn)，縮放，逐楨，淡入淡出，粒子效果，照片處理等等，還有3D展示效果。 (http://fffNaNiscm.com 這個網(wǎng)站里有h5所能實現(xiàn)的效果)， 背景動效其實比較推薦緩動效果，如“京東管培生招聘”的例子里星空中一閃而過的流星，間歇性出現(xiàn)不搶主角風頭再好不過了，復(fù)雜多變的動效不一定是好的，要考慮到加載速度等用戶體驗問題。

石家莊辦公軟件/軟件開發(fā)

　　5.話題性

　　想要你的H5專題頁一夜爆紅，第一時間抓住熱點并火速上線，借機進行品牌宣傳也不失為一條捷徑。注意借勢營銷具有很強時效性。要分清主次用熱點去推廣產(chǎn)品。

　　6.流暢性

　　隨著技術(shù)的發(fā)展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實現(xiàn)繪圖、擦除、搖一搖、重力感應(yīng)、吹起、3D視圖等互動效果。但是切記實現(xiàn)動效的前提是保證流暢性。有些流暢性可以通過動效進行掩蓋，但有的時候動效可能會影響畫面的流暢性，所以產(chǎn)品經(jīng)理要根據(jù)具體情況具體對待。

　　目前這些制作H5頁面的技巧很多，在這里，承德泓達羅列出一部分供大家參考，也歡迎大家在下面留言談一談你的建議!承德泓達祝大家生活愉快!
石家莊辦公軟件/軟件開發(fā)