一、視覺(jué)上,慎用“光線疊加效果”或PS里面的“圖層樣式”效果。如:給圖層加個(gè)“柔光”、“濾色”、“色相”等等效果,除非這個(gè)視覺(jué)元素可以合并為一體。原因:給重構(gòu)挖坑,導(dǎo)致不好切圖,無(wú)法還原視覺(jué)效果。 二、動(dòng)畫(huà)上,盡量避免全屏動(dòng)畫(huà),優(yōu)先考慮局部動(dòng)畫(huà)的方式。如:各種粒子效果全屏飄過(guò)等。原因:如果呈現(xiàn)的視覺(jué)效果無(wú)法用代碼實(shí)現(xiàn),就意味著要用全屏尺寸的序列幀來(lái)處理,體積上會(huì)飆升,影響加載體驗(yàn)。三、動(dòng)畫(huà)上,序列幀壓縮技巧,靜態(tài)的畫(huà)面,保存較高質(zhì)量。中間運(yùn)動(dòng)的模糊狀態(tài),大膽的壓低畫(huà)面質(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)筆畫(huà)手繪插畫(huà)小游戲雙屏互動(dòng)偽3D360全景3D H5創(chuàng)意玩法1、搖一搖H5創(chuàng)意案例:百度錢(qián)包這個(gè)都很簡(jiǎn)單,通過(guò)搖一搖手機(jī),可以匹配到同時(shí)段接收到信號(hào)指令的觸發(fā)功能,增加與用戶(hù)的互動(dòng)。 H5創(chuàng)意玩法2,重力感應(yīng)H5創(chuàng)意案例:百度錢(qián)包搖一搖通常是與重力感應(yīng)聯(lián)系在一起的,手機(jī)內(nèi)部一般都有重力感應(yīng)處理器,支持搖晃切換所需的界面和功能,甩歌甩屏,翻轉(zhuǎn)靜音,甩動(dòng)切換視頻等,是一種非常具有使用樂(lè)趣的功能。 H5創(chuàng)意玩法3,換裝填色H5創(chuàng)意案例:復(fù)古換裝,看你是哪種漢服萌主!比如案例“復(fù)古換裝”,選擇畫(huà)中你喜歡的一個(gè)卡通人物,然后點(diǎn)擊選項(xiàng),為人物添加衣服,比如曲裾深衣、漢家服飾,還有頭型和頭飾,比如玉釵斜簪。給用戶(hù)多種選擇,讓用戶(hù)挑選喜歡的衣服、服飾、發(fā)型。 H5創(chuàng)意玩法4,視覺(jué)對(duì)比H5創(chuàng)意案例:美加凈:有些事一定要在晚上做H5案例“有些事一定要在晚上做”,通過(guò)提示,向右滑動(dòng)頁(yè)面,會(huì)出現(xiàn)同一件事在白天與黑夜所得到的不同感受,一亮一暗的對(duì)比,讓用戶(hù)通過(guò)比較更深刻的理解產(chǎn)品想要傳達(dá)的含義。【H5開(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)在用戶(hù)的手里,點(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ǔ)或祝福,相比“為T(mén)A點(diǎn)贊”這種隱形的支持,將自己對(duì)歌手的喜愛(ài)光明正大的表達(dá)出來(lái)。 H5創(chuàng)意玩法7,視頻互動(dòng)H5創(chuàng)意案例:神州專(zhuān)車(chē):敢不敢和吳秀波對(duì)視5秒鐘?這也是當(dāng)時(shí)刷屏級(jí)的H5案例,朋友圈都在轉(zhuǎn),各大平臺(tái)紛紛發(fā)表案例分析,與偶像對(duì)視或者與偶像進(jìn)行視頻交流,肯定要比簡(jiǎn)簡(jiǎn)單單的幾段文字或者幾張圖片要更刺激?!綡5開(kāi)發(fā)】H5創(chuàng)意玩法8,翻書(shū)H5創(chuàng)意案例:西貝莜面村:你吃什么決定你是什么人需要橫屏擺放手機(jī)觀看,營(yíng)造出讀書(shū)翻頁(yè)的效果,讓看慣了一頁(yè)頁(yè)圖文的用戶(hù)有耳目一新的感覺(jué)。六、交互上,慎用向右滑動(dòng)操作如:刮刮樂(lè)涂抹效果,左右滑動(dòng)翻頁(yè)等。原因:蘋(píng)果手機(jī)上,向右滑動(dòng)容易觸發(fā)返回“上一級(jí)頁(yè)面”效果。七、交互上,慎用橫屏展示效果原因:體驗(yàn)上,需要用戶(hù)設(shè)備開(kāi)啟屏幕旋轉(zhuǎn)功能,才能正常觀看,用戶(hù)操作成本高。對(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*1008pxH5創(chuàng)意玩法9,手機(jī)、微信客戶(hù)端等模擬H5創(chuàng)意案例:吳亦凡入伍就是掃完二維碼之后點(diǎn)進(jìn)去會(huì)發(fā)現(xiàn)有人給你打電話,或者是常用的微信聊天頁(yè)面,這樣可以拉近與用戶(hù)的距離,就像好友在通話或者聊天一樣。 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)意案例:化身間諜,改變歷史密室玩法一般是密室逃脫或者搜集物品的游戲,就像案例《化身間諜,改變歷史》,將用戶(hù)置身于二戰(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)到的交互玩法,需要用戶(hù)用手指擦除屏幕,才會(huì)出現(xiàn)被隱藏的內(nèi)容。 H5創(chuàng)意玩法14:,360全景H5創(chuàng)意案例:杜蕾斯美術(shù)館全景技術(shù)被運(yùn)用的最好的案例要數(shù)《杜蕾斯美術(shù)館》了,用技術(shù)建造了一座手機(jī)屏幕里的美術(shù)館,360°全景無(wú)死角,給用戶(hù)置身實(shí)地的體驗(yàn)感。
分享文章:H5開(kāi)發(fā)常見(jiàn)問(wèn)題有哪些?
網(wǎng)頁(yè)URL:http://muchs.cn/news27/55577.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、App設(shè)計(jì)、虛擬主機(jī)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)