北京網(wǎng)站建設(shè)—H5開發(fā)常見問題有哪些？
來源：尚品中國|
類型：開發(fā)
|時間：2018-11-20
一、視覺上，慎用“光線疊加效果”或PS里面的“圖層樣式”效果。
如：給圖層加個“柔光”、“濾色”、“色相”等等效果，除非這個視覺元素可以合并為一體。
原因：給重構(gòu)挖坑，導(dǎo)致不好切圖，無法還原視覺效果。
二、動畫上，盡量避免全屏動畫，優(yōu)先考慮局部動畫的方式。
如：各種粒子效果全屏飄過等。
原因：如果呈現(xiàn)的視覺效果無法用代碼實現(xiàn)，就意味著要用全屏尺寸的序列幀來處理，體積上會飆升，影響加載體驗。
三、動畫上，序列幀壓縮技巧，靜態(tài)的畫面，保存較高質(zhì)量。中間運動的模糊狀態(tài)，大膽的壓低畫面質(zhì)量吧。
ps：壓縮體積，運動狀態(tài)就算有鋸齒也不明顯。
四、圖片，圖片壓縮，上“tinypng.com”，壓縮下，有效減少體積。（PSD導(dǎo)出的圖片還有很大的壓縮空間）
PS：支持PNG，JPG，還可以批量壓縮下載
五、音樂，一定要壓縮，能大大減少整體的體積。
技巧：如果沒有特殊要求，可以考慮弄成單聲道音頻文件，比特率48或更低就行了。
常見H5展現(xiàn)形式
密室場景
朋友圈 群聊
一鏡到底
測試答題
視頻
簡筆畫
手繪插畫
小游戲
雙屏互動
偽3D
360全景3D
H5創(chuàng)意玩法1、搖一搖
H5創(chuàng)意案例：百度錢包
這個都很簡單，通過搖一搖手機，可以匹配到同時段接收到信號指令的觸發(fā)功能，增加與用戶的互動。
H5創(chuàng)意玩法2，重力感應(yīng)
H5創(chuàng)意案例：百度錢包
搖一搖通常是與重力感應(yīng)聯(lián)系在一起的，手機內(nèi)部一般都有重力感應(yīng)處理器，支持搖晃切換所需的界面和功能，甩歌甩屏，翻轉(zhuǎn)靜音，甩動切換視頻等，是一種非常具有使用樂趣的功能。
H5創(chuàng)意玩法3，換裝填色
H5創(chuàng)意案例：復(fù)古換裝，看你是哪種漢服萌主！
比如案例“復(fù)古換裝”，選擇畫中你喜歡的一個卡通人物，然后點擊選項，為人物添加衣服，比如曲裾深衣、漢家服飾，還有頭型和頭飾，比如玉釵斜簪。給用戶多種選擇，讓用戶挑選喜歡的衣服、服飾、發(fā)型。
H5創(chuàng)意玩法4，視覺對比
H5創(chuàng)意案例：美加凈：有些事一定要在晚上做
H5案例“有些事一定要在晚上做”，通過提示，向右滑動頁面，會出現(xiàn)同一件事在白天與黑夜所得到的不同感受，一亮一暗的對比，讓用戶通過比較更深刻的理解產(chǎn)品想要傳達(dá)的含義。【H5開發(fā)】
H5創(chuàng)意玩法5，拉票集贊
H5創(chuàng)意案例：七夕開撕 最美新娘打PK，Baby倪妮你會支持誰？
案例《七夕開撕 最美新娘打PK，Baby倪妮你會支持誰？》是為宣傳電影《新娘大作戰(zhàn)》制作的H5，作為劇中的主角Baby與倪妮是敵對關(guān)系，那么誰會贏得最終的勝利呢？投票權(quán)在用戶的手里，點擊花球，拋給兩位女神，她們會爭搶花球，誰搶到了花球就為自己的獲勝機會增加了一票，想要為自己的女神增加更多花球？那就轉(zhuǎn)發(fā)給朋友們，為心愛的女神積攢花球吧。
H5創(chuàng)意玩法6，彈幕
H5創(chuàng)意案例：秀出你的音樂態(tài)度——我是歌手
H5《秀出你的音樂態(tài)度——我是歌手》采用了重力感應(yīng)、拉票集贊等多種玩法，這里我們要講的就是彈幕，點擊“發(fā)送彈幕”，為喜歡的歌手送出自己心中想說的話語或祝福，相比“為TA點贊”這種隱形的支持，將自己對歌手的喜愛光明正大的表達(dá)出來。
H5創(chuàng)意玩法7，視頻互動
H5創(chuàng)意案例：神州專車：敢不敢和吳秀波對視5秒鐘？
這也是當(dāng)時刷屏級的H5案例，朋友圈都在轉(zhuǎn)，各大平臺紛紛發(fā)表案例分析，與偶像對視或者與偶像進(jìn)行視頻交流，肯定要比簡簡單單的幾段文字或者幾張圖片要更刺激。
【H5開發(fā)】
H5創(chuàng)意玩法8，翻書
H5創(chuàng)意案例：西貝莜面村：你吃什么決定你是什么人
需要橫屏擺放手機觀看，營造出讀書翻頁的效果，讓看慣了一頁頁圖文的用戶有耳目一新的感覺。
六、交互上，慎用向右滑動操作
如：刮刮樂涂抹效果，左右滑動翻頁等。
原因：蘋果手機上，向右滑動容易觸發(fā)返回“上一級頁面”效果。
七、 交互上，慎用橫屏展示效果
原因：體驗上，需要用戶設(shè)備開啟屏幕旋轉(zhuǎn)功能，才能正常觀看，用戶操作成本高。
對不同屏幕的手機，長寬比例不一，難以展示最佳的視覺效果。
UI設(shè)計尺寸：1136*550px
八、視覺上，功能按鈕等，遠(yuǎn)離頁面底部（大概128px，這個尺寸不是固定值）。
具體看重構(gòu)采用什么適配方式（僅供參考：640*1136 px，從上往下計算，主要內(nèi)容在1008px內(nèi)）。
原因：更好的適配各種屏幕的手機，避免按鈕被擋住。【H5開發(fā)】
常規(guī)豎屏尺寸：640*1136px or 640*1008px
H5創(chuàng)意玩法9，手機、微信客戶端等模擬
H5創(chuàng)意案例：吳亦凡入伍
就是掃完二維碼之后點進(jìn)去會發(fā)現(xiàn)有人給你打電話，或者是常用的微信聊天頁面，這樣可以拉近與用戶的距離，就像好友在通話或者聊天一樣。
H5創(chuàng)意玩法10，語音、錄音
H5創(chuàng)意案例：老歌新唱，帶你認(rèn)識檢察君
模擬手機音樂播放器的界面，營造出KTV的氣氛，還有鼓掌、切歌按鈕，選擇唱片，就會彈出樂曲。
H5創(chuàng)意玩法11，密室
H5創(chuàng)意案例：化身間諜，改變歷史
密室玩法一般是密室逃脫或者搜集物品的游戲，就像案例《化身間諜，改變歷史》，將用戶置身于二戰(zhàn)的歷史情境中，化身一名間諜，為了保護情報，在密室里選擇一處藏匿情報。
H5創(chuàng)意玩法12，雙屏互動
H5創(chuàng)意案例：《一滴奶 邂逅愛》
雙屏互動技術(shù)也很有趣，需要兩臺手機共同操作，放置在一起，才能觀看完整的H5作品，通常在需要傳達(dá)愛意的節(jié)日比如七夕、情人節(jié)等，會經(jīng)常使用。
H5創(chuàng)意玩法13，擦除
H5創(chuàng)意案例：《新年祝福哈出來》
擦除是我們大家經(jīng)常見到的交互玩法，需要用戶用手指擦除屏幕，才會出現(xiàn)被隱藏的內(nèi)容。
H5創(chuàng)意玩法14:，360全景
H5創(chuàng)意案例：杜蕾斯美術(shù)館
全景技術(shù)被運用的最好的案例要數(shù)《杜蕾斯美術(shù)館》了，用技術(shù)建造了一座手機屏幕里的美術(shù)館，360°全景無死角，給用戶置身實地的體驗感。
本文章來源尚品中國：H5網(wǎng)站建設(shè)
來源聲明：本文章系尚品中國編輯原創(chuàng)或采編整理，如需轉(zhuǎn)載請注明來自尚品中國。以上內(nèi)容部分(包含圖片、文字)來源于網(wǎng)絡(luò)，如有侵權(quán)，請及時與本站聯(lián)系（010-60259772）。
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁面設(shè)計風(fēng)格
-
確認(rèn)交付使用
-
資料錄入優(yōu)化
-
程序設(shè)計開發(fā)
-
后續(xù)跟蹤服務(wù)
-
聯(lián)系電話
010-60259772
熱門標(biāo)簽
- 微信小程序開發(fā)
- 小程序開發(fā)
- 洛陽網(wǎng)站建設(shè)
- 北京網(wǎng)站定制開發(fā)
- 沈陽網(wǎng)站設(shè)計
- 鄭州網(wǎng)站設(shè)計
- 廊坊網(wǎng)站設(shè)計
- 高端網(wǎng)站設(shè)計
- 網(wǎng)站設(shè)計
- 石家莊網(wǎng)站制作
- 天津網(wǎng)站建設(shè)
- 教育網(wǎng)站建設(shè)
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
一個好的企業(yè)官網(wǎng)設(shè)計應(yīng)該如何設(shè)計？
目前，在設(shè)計優(yōu)秀的企業(yè)官方網(wǎng)站時，有必要根據(jù)這些特定的客戶需求來設(shè)計優(yōu)...
2021-05-11 -
微信二次開發(fā)訂閱號和服務(wù)號的區(qū)別
微信的快速發(fā)展，讓微信公眾平臺越來越受到大家的關(guān)注和使用，目前微信平臺...
2015-07-28 -
科技公司網(wǎng)站開發(fā)怎么做？
科技公司網(wǎng)站建設(shè)是一項十分關(guān)鍵的工作。一個優(yōu)秀的科技公司網(wǎng)站能夠傳遞公...
2023-06-12 -
移動端網(wǎng)站優(yōu)化有哪些好的方法？
雖然每個人都在手機上下載了很多APP軟件，但如果他們真的想搜索問題并了...
2020-04-13 -
集群網(wǎng)站開發(fā)需要具備哪些條件？
網(wǎng)站已經(jīng)成為企業(yè)展示形象、推廣業(yè)務(wù)的重要途徑。而集群網(wǎng)站開發(fā)，則可以更...
2023-06-05 -
網(wǎng)站開發(fā)有哪些方法？
1. 靜態(tài)網(wǎng)站開發(fā)：通過HTML和CSS靜態(tài)頁面進(jìn)行搭建，在內(nèi)容不怎么...
2023-05-19
如果您的網(wǎng)站可以增加轉(zhuǎn)化次數(shù)并提高客戶滿意度，該怎么辦？
預(yù)約專業(yè)咨詢顧問溝通！
Copyright ? 2025 恒久尚品 版權(quán)所有 | 京ICP備09066521號
| 公安機關(guān)備案號:11011502003910
免責(zé)聲明
誠信企業(yè)
尚品專注高端網(wǎng)站建設(shè)，系統(tǒng)平臺開發(fā)，微信小程序及APP開發(fā)服務(wù)
尚品專注高端網(wǎng)站建設(shè)，系統(tǒng)平臺開發(fā)，微信小程序及APP開發(fā)服務(wù)
免責(zé)聲明
非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前，請您仔細(xì)閱讀本聲明的所有條款。
1、本站部分內(nèi)容來源自網(wǎng)絡(luò)，涉及到的部分文章和圖片版權(quán)屬于原作者，本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流，切勿用于任何商業(yè)活動。
2、本站不承擔(dān)用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī)，當(dāng)本聲明與國家法律法規(guī)沖突時，以國家法律法規(guī)為準(zhǔn)。
4、如果侵害了您的合法權(quán)益，請您及時與我們,我們會在第一時間刪除相關(guān)內(nèi)容!
聯(lián)系方式：010-60259772
電子郵件：394588593@qq.com
