建站推廣熱線|在線留言

鄒經理    13697542592 

H5開發常見問題有哪些?

發布時間:2019-02-20訪問人數:7458作者:海南創想未來文化傳媒有限公司
一、視覺上,慎用“光線疊加效果”或PS里面的“圖層樣式”效果。
如:給圖層加個“柔光”、“濾色”、“色相”等等效果,除非這個視覺元素可以合并為一體。
原因:給重構挖坑,導致不好切圖,無法還原視覺效果。
 
二、動畫上,盡量避免全屏動畫,優先考慮局部動畫的方式。
如:各種粒子效果全屏飄過等。
原因:如果呈現的視覺效果無法用代碼實現,就意味著要用全屏尺寸的序列幀來處理,體積上會飆升,影響加載體驗。
三、動畫上,序列幀壓縮技巧,靜態的畫面,保存較高質量。中間運動的模糊狀態,大膽的壓低畫面質量吧。
ps:壓縮體積,運動狀態就算有鋸齒也不明顯。
 
四、圖片,圖片壓縮,上“tinypng.com”,壓縮下,有效減少體積。(PSD導出的圖片還有很大的壓縮空間)
PS:支持PNG,JPG,還可以批量壓縮下載
 
五、音樂,一定要壓縮,能大大減少整體的體積。
技巧:如果沒有特殊要求,可以考慮弄成單聲道音頻文件,比特率48或更低就行了。
常見H5展現形式
密室場景
朋友圈 群聊
一鏡到底
測試答題
視頻
簡筆畫
手繪插畫
小游戲
雙屏互動
偽3D
360全景3D
 
H5創意玩法1、搖一搖
H5創意案例:百度錢包
這個都很簡單,通過搖一搖手機,可以匹配到同時段接收到信號指令的觸發功能,增加與用戶的互動。
 
H5創意玩法2,重力感應
H5創意案例:百度錢包
搖一搖通常是與重力感應聯系在一起的,手機內部一般都有重力感應處理器,支持搖晃切換所需的界面和功能,甩歌甩屏,翻轉靜音,甩動切換視頻等,是一種非常具有使用樂趣的功能。
 
H5創意玩法3,換裝填色
H5創意案例:復古換裝,看你是哪種漢服萌主!
比如案例“復古換裝”,選擇畫中你喜歡的一個卡通人物,然后點擊選項,為人物添加衣服,比如曲裾深衣、漢家服飾,還有頭型和頭飾,比如玉釵斜簪。給用戶多種選擇,讓用戶挑選喜歡的衣服、服飾、發型。
 
H5創意玩法4,視覺對比
H5創意案例:美加凈:有些事一定要在晚上做
H5案例“有些事一定要在晚上做”,通過提示,向右滑動頁面,會出現同一件事在白天與黑夜所得到的不同感受,一亮一暗的對比,讓用戶通過比較更深刻的理解產品想要傳達的含義。【H5開發】
 
H5創意玩法5,拉票集贊
H5創意案例:七夕開撕 最美新娘打PK,Baby倪妮你會支持誰?
案例《七夕開撕 最美新娘打PK,Baby倪妮你會支持誰?》是為宣傳電影《新娘大作戰》制作的H5,作為劇中的主角Baby與倪妮是敵對關系,那么誰會贏得最終的勝利呢?投票權在用戶的手里,點擊花球,拋給兩位女神,她們會爭搶花球,誰搶到了花球就為自己的獲勝機會增加了一票,想要為自己的女神增加更多花球?那就轉發給朋友們,為心愛的女神積攢花球吧。
 
H5創意玩法6,彈幕
H5創意案例:秀出你的音樂態度——我是歌手
H5《秀出你的音樂態度——我是歌手》采用了重力感應、拉票集贊等多種玩法,這里我們要講的就是彈幕,點擊“發送彈幕”,為喜歡的歌手送出自己心中想說的話語或祝福,相比“為TA點贊”這種隱形的支持,將自己對歌手的喜愛光明正大的表達出來。
 
H5創意玩法7,視頻互動
H5創意案例:神州專車:敢不敢和吳秀波對視5秒鐘?
這也是當時刷屏級的H5案例,朋友圈都在轉,各大平臺紛紛發表案例分析,與偶像對視或者與偶像進行視頻交流,肯定要比簡簡單單的幾段文字或者幾張圖片要更刺激。
【H5開發】
H5創意玩法8,翻書
H5創意案例:西貝莜面村:你吃什么決定你是什么人
需要橫屏擺放手機觀看,營造出讀書翻頁的效果,讓看慣了一頁頁圖文的用戶有耳目一新的感覺。
六、交互上,慎用向右滑動操作
如:刮刮樂涂抹效果,左右滑動翻頁等。
原因:蘋果手機上,向右滑動容易觸發返回“上一級頁面”效果。
七、 交互上,慎用橫屏展示效果
原因:體驗上,需要用戶設備開啟屏幕旋轉功能,才能正常觀看,用戶操作成本高。
對不同屏幕的手機,長寬比例不一,難以展示最佳的視覺效果。
UI設計尺寸:1136*550px
八、視覺上,功能按鈕等,遠離頁面底部(大概128px,這個尺寸不是固定值)。
具體看重構采用什么適配方式(僅供參考:640*1136 px,從上往下計算,主要內容在1008px內)。
原因:更好的適配各種屏幕的手機,避免按鈕被擋住。【H5開發】
 
常規豎屏尺寸:640*1136px or  640*1008px
H5創意玩法9,手機、微信客戶端等模擬
H5創意案例:吳亦凡入伍
就是掃完二維碼之后點進去會發現有人給你打電話,或者是常用的微信聊天頁面,這樣可以拉近與用戶的距離,就像好友在通話或者聊天一樣。
 
H5創意玩法10,語音、錄音
H5創意案例:老歌新唱,帶你認識檢察君
模擬手機音樂播放器的界面,營造出KTV的氣氛,還有鼓掌、切歌按鈕,選擇唱片,就會彈出樂曲。
 
H5創意玩法11,密室
H5創意案例:化身間諜,改變歷史
密室玩法一般是密室逃脫或者搜集物品的游戲,就像案例《化身間諜,改變歷史》,將用戶置身于二戰的歷史情境中,化身一名間諜,為了保護情報,在密室里選擇一處藏匿情報。
 
H5創意玩法12,雙屏互動
H5創意案例:《一滴奶 邂逅愛》
雙屏互動技術也很有趣,需要兩臺手機共同操作,放置在一起,才能觀看完整的H5作品,通常在需要傳達愛意的節日比如七夕、情人節等,會經常使用。
 
H5創意玩法13,擦除
H5創意案例:《新年祝福哈出來》
擦除是我們大家經常見到的交互玩法,需要用戶用手指擦除屏幕,才會出現被隱藏的內容。
 
H5創意玩法14:,360全景
H5創意案例:杜蕾斯美術館
全景技術被運用的最好的案例要數《杜蕾斯美術館》了,用技術建造了一座手機屏幕里的美術館,360°全景無死角,給用戶置身實地的體驗感。

地址: 海口市龍華區國貿路海涯國際大廈9樓C室
網站地圖sitemap.html sitemap.xml

友情鏈接: 海南海口租車 宜昌網站建設 桂林seo 昆山網站建設 襄陽網站建設 營銷型企業網站 東莞網站建設 海南網站建設

海口市龍華區國貿路海涯國際大廈9樓C室 瓊ICP備16000519號-1

關注我們

  • 案例
  • 電話
  • 首頁
  • 留言
  • 房產案例
  • PC蛋蛋预测尽享