北京網(wǎng)站建設(shè)—H5開(kāi)發(fā)常見(jiàn)問(wèn)題有哪些？

2019-07-22

一、視覺(jué)上，慎用“光線疊加效果”或PS里面的“圖層樣式”效果。

如：給圖層加個(gè)“柔光”、“濾色”、“色相”等等效果，除非這個(gè)視覺(jué)元素可以合并為一體。

原因：給重構(gòu)挖坑，導(dǎo)致不好切圖，無(wú)法還原視覺(jué)效果。

二、動(dòng)畫上，盡量避免全屏動(dòng)畫，優(yōu)先考慮局部動(dòng)畫的方式。

如：各種粒子效果全屏飄過(guò)等。

原因：如果呈現(xiàn)的視覺(jué)效果無(wú)法用代碼實(shí)現(xiàn)，就意味著要用全屏尺寸的序列幀來(lái)處理，體積上會(huì)飆升，影響加載體驗(yàn)。

三、動(dòng)畫上，序列幀壓縮技巧，靜態(tài)的畫面，保存較高質(zhì)量。中間運(yùn)動(dòng)的模糊狀態(tài)，大膽的壓低畫面質(zhì)量吧。

ps：壓縮體積，運(yùn)動(dòng)狀態(tài)就算有鋸齒也不明顯。

四、圖片，圖片壓縮，上“tinypng.com”，壓縮下，有效減少體積。（PSD導(dǎo)出的圖片還有很大的壓縮空間）

PS：支持PNG，JPG，還可以批量壓縮下載

五、音樂(lè)，一定要壓縮，能大大減少整體的體積。

技巧：如果沒(méi)有特殊要求，可以考慮弄成單聲道音頻文件，比特率48或更低就行了。

常見(jiàn)H5展現(xiàn)形式

密室場(chǎng)景

朋友圈群聊

一鏡到底

測(cè)試答題

視頻

簡(jiǎn)筆畫

手繪插畫

小游戲

雙屏互動(dòng)

偽3D

360全景3D

H5創(chuàng)意玩法1、搖一搖

H5創(chuàng)意案例：百度錢包

這個(gè)都很簡(jiǎn)單，通過(guò)搖一搖手機(jī)，可以匹配到同時(shí)段接收到信號(hào)指令的觸發(fā)功能，增加與用戶的互動(dòng)。

H5創(chuàng)意玩法2，重力感應(yīng)

H5創(chuàng)意案例：百度錢包

搖一搖通常是與重力感應(yīng)聯(lián)系在一起的，手機(jī)內(nèi)部一般都有重力感應(yīng)處理器，支持搖晃切換所需的界面和功能，甩歌甩屏，翻轉(zhuǎn)靜音，甩動(dòng)切換視頻等，是一種非常具有使用樂(lè)趣的功能。

H5創(chuàng)意玩法3，換裝填色

H5創(chuàng)意案例：復(fù)古換裝，看你是哪種漢服萌主！

比如案例“復(fù)古換裝”，選擇畫中你喜歡的一個(gè)卡通人物，然后點(diǎn)擊選項(xiàng)，為人物添加衣服，比如曲裾深衣、漢家服飾，還有頭型和頭飾，比如玉釵斜簪。給用戶多種選擇，讓用戶挑選喜歡的衣服、服飾、發(fā)型。

H5創(chuàng)意玩法4，視覺(jué)對(duì)比

H5創(chuàng)意案例：美加凈：有些事一定要在晚上做

H5案例“有些事一定要在晚上做”，通過(guò)提示，向右滑動(dòng)頁(yè)面，會(huì)出現(xiàn)同一件事在白天與黑夜所得到的不同感受，一亮一暗的對(duì)比，讓用戶通過(guò)比較更深刻的理解產(chǎn)品想要傳達(dá)的含義?！綡5開(kāi)發(fā)】

H5創(chuàng)意玩法5，拉票集贊

H5創(chuàng)意案例：七夕開(kāi)撕最美新娘打PK，Baby倪妮你會(huì)支持誰(shuí)？

案例《七夕開(kāi)撕最美新娘打PK，Baby倪妮你會(huì)支持誰(shuí)？》是為宣傳電影《新娘大作戰(zhàn)》制作的H5，作為劇中的主角Baby與倪妮是敵對(duì)關(guān)系，那么誰(shuí)會(huì)贏得最終的勝利呢？投票權(quán)在用戶的手里，點(diǎn)擊花球，拋給兩位女神，她們會(huì)爭(zhēng)搶花球，誰(shuí)搶到了花球就為自己的獲勝機(jī)會(huì)增加了一票，想要為自己的女神增加更多花球？那就轉(zhuǎn)發(fā)給朋友們，為心愛(ài)的女神積攢花球吧。

H5創(chuàng)意玩法6，彈幕

H5創(chuàng)意案例：秀出你的音樂(lè)態(tài)度——我是歌手

H5《秀出你的音樂(lè)態(tài)度——我是歌手》采用了重力感應(yīng)、拉票集贊等多種玩法，這里我們要講的就是彈幕，點(diǎn)擊“發(fā)送彈幕”，為喜歡的歌手送出自己心中想說(shuō)的話語(yǔ)或祝福，相比“為TA點(diǎn)贊”這種隱形的支持，將自己對(duì)歌手的喜愛(ài)光明正大的表達(dá)出來(lái)。

H5創(chuàng)意玩法7，視頻互動(dòng)

H5創(chuàng)意案例：神州專車：敢不敢和吳秀波對(duì)視5秒鐘？

這也是當(dāng)時(shí)刷屏級(jí)的H5案例，朋友圈都在轉(zhuǎn)，各大平臺(tái)紛紛發(fā)表案例分析，與偶像對(duì)視或者與偶像進(jìn)行視頻交流，肯定要比簡(jiǎn)簡(jiǎn)單單的幾段文字或者幾張圖片要更刺激。

【H5開(kāi)發(fā)】

H5創(chuàng)意玩法8，翻書

H5創(chuàng)意案例：西貝莜面村：你吃什么決定你是什么人

需要橫屏擺放手機(jī)觀看，營(yíng)造出讀書翻頁(yè)的效果，讓看慣了一頁(yè)頁(yè)圖文的用戶有耳目一新的感覺(jué)。

六、交互上，慎用向右滑動(dòng)操作

如：刮刮樂(lè)涂抹效果，左右滑動(dòng)翻頁(yè)等。

原因：蘋果手機(jī)上，向右滑動(dòng)容易觸發(fā)返回“上一級(jí)頁(yè)面”效果。

七、交互上，慎用橫屏展示效果

原因：體驗(yàn)上，需要用戶設(shè)備開(kāi)啟屏幕旋轉(zhuǎn)功能，才能正常觀看，用戶操作成本高。

對(duì)不同屏幕的手機(jī)，長(zhǎng)寬比例不一，難以展示最佳的視覺(jué)效果。

UI設(shè)計(jì)尺寸：1136*550px

八、視覺(jué)上，功能按鈕等，遠(yuǎn)離頁(yè)面底部（大概128px，這個(gè)尺寸不是固定值）。

具體看重構(gòu)采用什么適配方式（僅供參考：640*1136 px，從上往下計(jì)算，主要內(nèi)容在1008px內(nèi)）。

原因：更好的適配各種屏幕的手機(jī)，避免按鈕被擋住?！綡5開(kāi)發(fā)】

常規(guī)豎屏尺寸：640*1136px or 640*1008px

H5創(chuàng)意玩法9，手機(jī)、微信客戶端等模擬

H5創(chuàng)意案例：吳亦凡入伍

就是掃完二維碼之后點(diǎn)進(jìn)去會(huì)發(fā)現(xiàn)有人給你打電話，或者是常用的微信聊天頁(yè)面，這樣可以拉近與用戶的距離，就像好友在通話或者聊天一樣。

H5創(chuàng)意玩法10，語(yǔ)音、錄音

H5創(chuàng)意案例：老歌新唱，帶你認(rèn)識(shí)檢察君

模擬手機(jī)音樂(lè)播放器的界面，營(yíng)造出KTV的氣氛，還有鼓掌、切歌按鈕，選擇唱片，就會(huì)彈出樂(lè)曲。

H5創(chuàng)意玩法11，密室

H5創(chuàng)意案例：化身間諜，改變歷史

密室玩法一般是密室逃脫或者搜集物品的游戲，就像案例《化身間諜，改變歷史》，將用戶置身于二戰(zhàn)的歷史情境中，化身一名間諜，為了保護(hù)情報(bào)，在密室里選擇一處藏匿情報(bào)。

H5創(chuàng)意玩法12，雙屏互動(dòng)

H5創(chuàng)意案例：《一滴奶邂逅愛(ài)》

雙屏互動(dòng)技術(shù)也很有趣，需要兩臺(tái)手機(jī)共同操作，放置在一起，才能觀看完整的H5作品，通常在需要傳達(dá)愛(ài)意的節(jié)日比如七夕、情人節(jié)等，會(huì)經(jīng)常使用。

H5創(chuàng)意玩法13，擦除

H5創(chuàng)意案例：《新年祝福哈出來(lái)》

擦除是我們大家經(jīng)常見(jiàn)到的交互玩法，需要用戶用手指擦除屏幕，才會(huì)出現(xiàn)被隱藏的內(nèi)容。

H5創(chuàng)意玩法14:，360全景

H5創(chuàng)意案例：杜蕾斯美術(shù)館

全景技術(shù)被運(yùn)用的最好的案例要數(shù)《杜蕾斯美術(shù)館》了，用技術(shù)建造了一座手機(jī)屏幕里的美術(shù)館，360°全景無(wú)死角，給用戶置身實(shí)地的體驗(yàn)感。

本文章來(lái)源快幫云：H5網(wǎng)站建設(shè)

文章內(nèi)容來(lái)源于網(wǎng)絡(luò)，侵刪

知識(shí)產(chǎn)權(quán)

工商財(cái)稅

數(shù)字化建設(shè)

資質(zhì)認(rèn)證

人事服務(wù)

北京網(wǎng)站建設(shè)—H5開(kāi)發(fā)常見(jiàn)問(wèn)題有哪些？

推薦閱讀

知識(shí)產(chǎn)權(quán)

工商財(cái)稅

數(shù)字化建設(shè)

資質(zhì)認(rèn)證

人事服務(wù)

北京網(wǎng)站建設(shè)—H5開(kāi)發(fā)常見(jiàn)問(wèn)題有哪些？

推薦閱讀

北京網(wǎng)站建設(shè)—H5開(kāi)發(fā)常見(jiàn)問(wèn)題有哪些？