起點分享會|HTML 5制作工具和制作團隊(附案例分析)
下面的提到的主要作品都附帶H5鏈接,可以直接點擊鏈接看作品。
Web?app、Hybrid?app與Native?app
HTML5是一種Web?技術,由瀏覽器解析和執(zhí)行,無需安裝插件。廣義指的HTML5是包括HTML、CSS和JavaScript在內(nèi)的一套技術組合。而我們一般說的H5是國內(nèi)的簡稱,主要通過微信端在朋友圈或者好友上傳播的載體,比如說產(chǎn)品展示、人物介紹、邀請函、小游戲、抽獎等。
H5屬于web?app,區(qū)別于我們平時下載的app。因此我會大概介紹一下web?app、hybrid?app、native?app的區(qū)別。以及H5制作平臺和優(yōu)秀的H5創(chuàng)作團隊。
Web?App?:采用Html5語言寫出的,直接由瀏覽器解析,無需下載安裝。優(yōu)點是開發(fā)成本低,周期短,更新快,傳播效果好,能夠跨多個平臺和終端;缺點:用戶留存率低,UI和交互體驗較差,生命周期短,容易被模仿抄襲。
比如W的陌生來電,TGideas的吳某凡入伍交互視頻,刷遍整個朋友圈,隨后大家都開始模仿。
輕應用:無需下載、即搜即用的全功能?App,既有媲美甚至超越native app的用戶體驗,又具備web app的可被檢索與智能分發(fā)的特性。
Hybrid?APP指的是半原生半Web的混合類App。需要下載安裝,看上去類似Native?App,但只有很少的UI?Web?View(App中嵌入網(wǎng)頁內(nèi)容,通常情況下是html格式的網(wǎng)頁),訪問的內(nèi)容是?Web?。有類似于Native?App?的體驗,但仍受限于技術,網(wǎng)速等等很多因素。
Native?APP?指的是原生程序,需要下載安裝,一般依托于操作系統(tǒng),有很強的交互,可拓展性強。優(yōu)點:用戶體驗好,性能穩(wěn)定,操作速度快,可節(jié)省帶寬成本,訪問本地資源(通訊錄,相冊),用戶留存率高;缺點:分發(fā)成本高(適配),維護成本高(維護舊版本),更新緩慢。
我是站在運營的角度上理解這些概念的,而不是站在技術的層面上分析的。接下來會和大家講一下H5制作平臺和優(yōu)秀的H5創(chuàng)作團隊。
H5制作平臺
目前H5創(chuàng)作平臺很多,iH5和Epub360是比較專業(yè)性的,功能強大、效果多、靈活,但是學習成本相對較高。而簡單便利的平臺有易企秀、云來、MAKA、初頁、兔展等,易上手,可滿足基本的創(chuàng)作需求,但是內(nèi)容的表現(xiàn)方式有限。
iH5
iH5(互動大師),www.ih5.cn,可實現(xiàn)效果很多,比如說微官網(wǎng)、翻頁展示、測試題、交互視頻、小游戲、評論、抽獎、砍價等。而交互動方式也非常多樣:點擊、滑動、擦除、碰撞、拖拽、搖一搖、重力感應等。
這些都是用戶做的非常有趣的小案例,可以看看:
- 對學霸來說,拿A挺難的??http://www.ih5.cn/idea/q_My_je
- 我看見城市的光??http://www.ih5.cn/idea/tEBbO6M
- 領唱未來?數(shù)字音樂專輯一周年??www.ih5.cn/idea/SpyOa4b
- 小游戲:竊取酵母??http://www.ih5.cn/idea/I0EAwmY
Epub360
Epub360的特色功能:svg、序列幀、助力投票組件、系統(tǒng)參數(shù)(判斷是否關注公眾號以及識別手機系統(tǒng))。針對企業(yè)他們推出了很多商業(yè)化服務:導出html包、更改授權信息、綁定域名、自定義尺寸、推廣渠道統(tǒng)計、企業(yè)主子賬戶管理等。
易企秀
易企秀,僅16個月就收獲1000多萬用戶,雖然能夠實現(xiàn)的交互效果有限,但是簡單易上手,并且為用戶提供了大量素材。豐富的素材庫、一鍵加入地圖、送花、投票、特效(煙花、飄雪)等。
A輪融資之后,易企秀的產(chǎn)品戰(zhàn)略也有調(diào)整,國內(nèi):從H5延伸打造輕印刷設計平臺,而國外已成立公司、海外產(chǎn)品去年10月份就上線了。
H5優(yōu)秀團隊和案例
除H5制作平臺之外,有很多H5優(yōu)秀團隊,包括W公司、TGideas、朋沃、環(huán)時互動、合谷互動、LxU?Studio等。他們出品了大量高質(zhì)量,且大部分是具有引領潮流能力的H5作品,刷爆了朋友圈。
TGideas
隸屬于騰訊互動娛樂業(yè)務系統(tǒng),是一支專注于運營和營銷領域的用戶體驗設計團隊,工作范圍涉及產(chǎn)品包裝、廣告創(chuàng)意、品牌建設、互動設計等。主要作品:
- 生命之下,想象之上
- 吳某凡入伍
- 發(fā)現(xiàn)平行宇宙之美。
案例:移動頁面用戶行為報告:http://tgideas.qq.com/act/a20150428report/index.html?ADTAG=tgi.wx.relay
整個H5很簡單,除了翻頁效果就是一些簡單的動效,但里面的數(shù)據(jù)值得我們關注。H5訪問高峰集中在中午12點和晚上10點的休息時間,如果一個H5加載超過5秒就有74%的用戶選擇放棄,因此在優(yōu)化這一步是非常重要的;第五頁的流失率高于50%。
W公司
主要H5:
- 這個陌生來電你敢接嗎?
- 1步1步看清韓寒
- 大眾點評:爸,我想你了
- 大眾點評:我們之間就一個字
- 字首草先生的情書
等等都是大家所熟悉的。
案例:首草先生的情書,http://love.bungba.com/
首草先生的情書是我個人很喜歡一個作品。整個H5沒有選擇呈現(xiàn)過多的互動技巧,只是靜靜地用大段文案和黑白影像向你訴說一段男人的心路,配樂的選擇也很走心。雖然文字和頁面有點多,但是不會使喜愛的人對這個H5的整體效果打折。
很多人都認為W是一個做H5為主的團隊,但其實不對,他們是一家以品牌全案咨詢?yōu)楹献骰A,以品牌戰(zhàn)略為核心推動的新型營銷機構,不是單純的H5制作團隊。主要作品是:H5和TVC。
朋沃
給QQ音樂、天天炫斗、手機管家等合作出品過眾多H5頁面。他們是一家以品牌策略為導向的新媒體視覺設計公司。我個人覺得該團隊的H5主題及其鮮明,整體的視覺風格也是不錯的。
案例:努比亞z9手機發(fā)布會邀請函,http://weixin.nubia.cn/share/z9
其主要目的是傳播發(fā)布會信息和簡要的產(chǎn)品信息,為新品發(fā)布會做宣傳,該H5只有5個頁面,除了首尾頁,中間3個頁面展現(xiàn)了手機的全部信息:
- 手機的無邊框、無按鍵
- 攝像頭超高配置、傳說中可以拍星星的手機
- 超贊音質(zhì)效果。
環(huán)時互動
一家專注于社交網(wǎng)絡的品牌構建公司。致力于在社交網(wǎng)絡中,基于消費者洞察,通過數(shù)據(jù)挖掘與創(chuàng)新服務,重塑品牌的數(shù)字化影響力。主要客戶:杜蕾斯、京東、聯(lián)想等。杜蕾斯美術展館和孤獨實驗室等是H5作品是非常具有特色的。
http://m.durex.com.cn/qr/artmuseum/
無疑,現(xiàn)在H5作品很多,但是能不能夠做一個刷遍朋友圈的H5作品,就得想創(chuàng)意了。我們平臺有一個用戶,做了一個輸入姓名的測試題,播放次數(shù)五千多萬。雖然不是每個團隊都可以做出像W公司、吳某凡入伍或者是前幾天“2016微信公開課PRO版”那種H5作品,但是創(chuàng)意是無止境的。
對于不會寫代碼的設計師或者是新媒體運營,可以選擇使用H5制作平臺去。很多優(yōu)秀的H5創(chuàng)作平臺,都是免費的,大家可以根據(jù)自己的需求去選擇。
本文為iH5(互動大師)平臺運營@豆豆 在起點公開課7群(微信群)做的H5分享交流會,由人人都是產(chǎn)品經(jīng)理團隊@半個 速記整理。編輯有修改。
現(xiàn)在做H5的真多,同學也去學做H5方面的了
贊
?? ?? ?? ?? ?? 半個and豆豆好樣的
闊闊,你也好棒