眼間,一年一度的圣誕節又來臨了。在這個越來越受到國人重視的節日中,每個人有每個人的浪漫方式,當然程序員們也不例外。
下面就來看看程序員們是如何為這個節日增添不一樣的氣氛的。
1. 使用canvas功能繪制的簡單圣誕樹
在繪圖板中繪制下面這個圖形并不算什么難事,但是使用代碼來生成這個圣誕樹卻需要一定的HTML5基礎。
下面這個圖形使用HTML5中的<canvas>標簽來繪制,如果你熟悉HTML5,這對你來說輕而易舉。
源碼:Merry Christmas – HTML5, JS, and CSS3 – @SPJeff
2. 雪花效果
jQuery的出現,讓各種動畫效果變得更加容易。比如,你可以通過jQuery、jQuery.snow.js插件以及少量的代碼,就可以讓頁面中飄舞這雪花。
源碼:tzach/merry-christmas
3. 一個非常漂亮的圣誕賀卡
該賀卡通過Construct2制作,然后通過c2runtime.js使得該賀卡可以直接在網頁中運行。Construct2是一款用來制作HTML5應用的軟件,擁有一個清晰直觀、支持“拖拽”操作的開發環境,即使你沒有任何編程經驗也能開發自己的HTML5應用。
演示:tzach/merry-christmas
三、來自中級程序員的問候
隨著編程技能的進一步掌握,你可以使用稍復雜的技術來實現一些更絢麗的效果。
1. CSS3實現圣誕樹動畫
該動畫主要使用CSS3實現各種轉場效果,并使用了HTML5中的<audio>標簽來播放音頻文件。同時還使用了StyleFix和PrefixFree腳本,這樣在編寫代碼時可以不用為特定的CSS3屬性添加瀏覽器前綴,也可以在其他瀏覽器中播放。
演示:Christmas Experiments
源碼:podrivo/christmas
2. HTML表單元素制作的圣誕樹
下面這個圣誕樹沒有采用松樹的形式,而是采用了HTML表單元素來制作,比如輸入框、單選鈕,進度條,按鈕等。
演示:DOM Tree
源碼:hakimel/DOM-Tree
3. 3D雪花效果
該效果使用HTML5的<canvas>標簽和three.js實現了3D的雪花飛舞效果。你可以拖動鼠標進行旋轉。
演示:hakimel/DOM-Tree
源碼:sebleedelisle/live-coding-presentations
四、來自高級程序員的問候
1. 代碼不到1KB的3D圣誕樹
下面這個3D圣誕樹只用1021字節的JavaScript代碼編寫而成,逼真的3D及旋轉效果,將JavaScript功能發揮到了極致。
演示:JS1k 2010 - Demo 856
源碼如下:
avascript代碼:
M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200;)
with(M[k]=k?c.cloneNode(0):c){
width=height=k?32:W=446;with(getContext('2d'))
if(k>10|!k)for(font='60px Impact',V='rgba
(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':
V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;)
beginPath(fill(arc(U-i/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1)));
else for(;x=T(i),y=Q()*2-1,D=x*x+y*y,B=E(D-x/.9-1.5*y+1),
R=67*(B+1)*(L=k/9+.8)>>1,i++<W;)
if(D<1)beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),
moveTo(U+x*8,U+y*8),lineTo(U+x*U,U+y*U),stroke();
for(y=H=k+E(k++)*25,R=Q()*W;P=3,j<H;)J[O++]=[x+=T(R)*P+Q()*6-3,y+=Q()*U-8,
z+=T(R-11)*P+Q()*6-3,j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1]}
setInterval(function G(m,l){A=T(D-11);
if(l)return(m[2]-l[2])*A+(l[0]-m[0])*T(D);
a.clearRect(0,0,W,W);J.sort(G);for(i=0;L=J[i++];
a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1))
{if(i==2e3)a.fillText('Merry Christmas!',U,345);
if(!(i%7))a.drawImage(M[13],((157*(i*i)+T(D*5+i*i)*5)%W)>>0,
((113*i+(D*i)/60)%(290+i/99))>>0);}
D+=.02},1)
2. 代碼不到1KB的雪景效果
下面這個場景也是由不到1KB的JavaScript代碼生成。
演示:JS1k 2010 - Demo 855
源碼如下:
avascript代碼:
for(p in a)a[p[0]+(p[6]||'')]=a[p];
var M=Math,C=M.cos,S=M.sin,R=M.random,T=0,x=[],y=[],
W=innerWidth,H=innerHeight,L=2047,Z=100,V=20,N=511,M=1337;
c.width=W,b.style.overflow='hidden',b.style.margin='0px',c.height=H;
g='globalAlpha';h='fillStyle';for(i=N;i--;){x[i]=L*R();
y[i]=L*R()}setInterval(function(){T+=1/V;a[g]=0.2;
function m(c){a[h]=c}m('#002');a.fc(0,0,W,H);
a[g]=1;u=1;m('#ffc');for(i=0;i<N/3;++i){
d=u=(u*M+1)&L;u=(u*M+1)&L;if(C(T*Z+i)<0.5){a.fx("\u2605",d,u)}}a.ba();
a.arc(2*W/3,H/3,40,0,6.3,1);a.ca();a.fill();m('#cfc');
B=H-V;for(j=0;j<5;++j){s=90-j*V;a.font=s+"px serif";
F=1;for(i=0;i<W;i+=(F=(F*M)%Z)){a.fx("\u25B2",i-s/2,B+S(i)*30);
}B-=s/2;}m('#eef');for(i=N;i--;){e=x[i];f=y[i];a.fx("\u06DE",e,f);
y[i]=(f+1)%L;x[i]=(e+C(i+T)/3)%L}for(i=N*3;i--;)
{a.fc((x[i&N]+i)&L,(y[i&N]+i)&L,1,1)}for(i=W;i--;)
{d =Z+V*S(i/Z)+S(i/10);a.fc(i,H-d,1,d)}},50);
此外還有很多1KB代碼編寫的圣誕效果,大家可以訪問js1k圣誕主題頁面。
3. 游戲般的3D雪地場景
整個Demo是基于一個無限開闊的雪地場景的,里面有圣誕樹和雪人,可以像玩FPS游戲一樣在里面走動,WASD操控移動,按住鼠標左鍵拖拽控制方向,整個Demo是使用Oak3D框架制作的。
演示地址:http://christmas.oak3d.com/Scene/MerryChristmas.html
信的一舉一動,張小龍的一言一行,都是互聯網上的大新聞。昨天,在微信公開課 Pro 活動上,騰訊微信事業群張小龍罕見地現身并演講,闡述了微信的四個價值觀,然后,宣布了微信的一個 “應用號” 的規劃:
“我們將開發一個新的形態,叫做應用號。用戶關注了一個公眾號,就像安裝了一個 App 一樣,他要找這個公眾號的時候就像找一個 App 一樣。”
至于更多的信息,張小龍和微信團隊的其他人就沒有透露更多了。但是,愛范兒還是找到了曾經參與過應用號早期項目的第三方人士,了解到了不少的信息。
兩年前的伏筆,一年來的敗筆
提到這個不甚明了的 “應用號”,很多人肯定會想到兩三年前著名的 Web App 和 Native App(原生應用 / 本地應用)之爭,由于 HTML 5 的興起,加之 Native App 需要耗費大量人力來開發維護適配,給許多人以做 Web App 希望,然而,Web App 不可能單獨存在,必須有一個依托,因此,國內一些互聯網廠商就有了以 Web App 為雄兵,稱霸移動互聯網的想法。
在國內,Web App 有了新的叫法和變種,也就是我們俗稱的輕應用。
而正兒八經要去推廣輕應用的,是百度、360 和 UC,這三家都是在國內移動互聯網中很有話語權的廠商,然而,從大家的使用習慣也都看到了,這三家在這兩年時間里力推的 “輕應用” 并沒有落地,只是一個出師未捷身先死的概念。
現在,人們提起兩三年前的 Web App 和 Native App 之爭,不過報以呵呵,HTML 5 是很棒,但是基于 HTML 5 的 Web App 在體驗上完全無法和 Native App 相比,至少整體上是這樣的。
前情大概如此,回過頭來說微信,其實在其他幾個國內互聯網巨頭想推輕應用的時候,微信也不是沒有想法,事實上,微信在兩年多前就已經埋下了應用號的伏筆——JS-SDK:
“微信 JS-SDK 是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包。通過使用微信 JS-SDK,網頁開發者可借助微信高效地使用拍照、選圖、語音、位置等手機系統的能力,同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,為微信用戶提供更優質的網頁體驗。”
據消息人士透露,兩年前,微信應用號立項的時候,構想的邏輯是這樣的:主要是 JS-SDK 提供的 Native API,可以讓一個 Web App (HTML5)在保持網頁的輕便的同時,擁有音頻錄制播放、照片拍攝、掃碼、搖一搖等原生應用的功能。
因此,這套微信 JS-SDK 其實就是兩年多前微信為應用號埋下的伏筆。
而在微信重新撿起應用號之前,微信又在訂閱號之外,推出了服務號,為的是鏈接商家和用戶,提供相關的服務。但是,張小龍自己也承認,服務號沒有達到預期。這個沒有達到預期原因很簡單,服務號和訂閱號形態非常類似,都是自定義菜單加對話框的模式,層級深且不明顯,效率太低,最后,服務號就變成了一個每月只能推送四次消息的訂閱號,反而沒有突出 “服務” 的概念。從而,服務號沒做好也可以算作是微信的一個敗筆,尤其引發的,則是訂閱號和服務號合并的消息在滿天飛。
微信應用號的形態?
在討論微信應用號的形態的時候,則需要引入第二個概念:Hybrid App(混合應用 / 雜交應用 /……),Web App 優點很多,當然,缺點也很多,就此的討論一抓一大把,比如純 Web 前端架構,很多重要手機特性無法訪問,例如聯系人以及 Push Notification(消息推送非常重要)之類的。某種程度上說,微信應用號的形態就是一種 Hybrid App。
此處 Hybrid App 和 Web App 最主要最核心的區別,就是能不能調用底層的 API,實現特定功能,比如上面的獲取聯系人信息,讀取存儲文件等等。
比如最著名的 Hybrid App 開發平臺 PhoneGap 的插件能夠幫助開發者快速地抵達手機的其他 API 上面,直接使用 Javascript 來操控這些底層的 API。例如調用 Push Notification 的相應發生的事件。但是應用號有所不同的是,它依托于微信平臺,而不用像其他的一些 Hybrid App 那樣跑到應用市場分發,也就是說,常規的 Hybrid App 其實解決了開發上的難點(主要是跨平臺的問題),但是無法解決分發的問題。應用號此處的優點是,關注即可使用,分發成本很低,幾乎等同于公眾號獲取粉絲的成本。
具象到微信應用號上,其界面就已經完全脫離了之前訂閱號和服務號的形態,最直觀的,就是沒有了對話框和自定義菜單,轉而是將 Web App(HTML5)提到公眾號的第一層級,讓功能更為直觀地抵達到用戶,用戶的學習成本更低,使用效率更高,應用號直觀的形式遠比服務號下面不點開就不知道是什么的自定義菜單好。
說到這里,其實關于微信應用號已經有了非常好的展示雛形,微信 “發現” 中的 “購物”,“錢包” 里的 “美麗說”、“吃喝玩樂(大眾點評)” 等等,就可以理解為微信應用號的一種形態。
至于應用號,與合并之后的 “訂閱號 + 服務號” 的區別和分工,應該是這樣的:應用號并不屬于公眾號的一種,而是與之并列的。微信內的京東購物和京東服務號來講,在 “購物” 內買了商品,這邊的京東服務號就會推送交易信息詳情。
二者之間的合作就好像這邊我在格瓦拉應用上買了電影票,然后短信接受到票務信息。
好了,上面已經說了,JS-SDK 提供的 Native API,可以讓一個 Web App (HTML5)在保持網頁的輕便的同時,擁有音頻錄制播放、照片拍攝、掃碼、搖一搖等原生應用的功能。那么我們可以預想一下,利用這些 API 接口完成的一個應用號,暫且稱之為 “有聲賀卡”,進入了這個應用號之后,用戶可以調用相機拍照得到照片,然后調用麥克風錄制音頻,生成一張有聲賀卡朋友圈或者發給朋友。
Q&A
應用號的入口在哪里?
前面已經說到,應用號和公眾號是并列關系,因此入口就值得深思,如果入口太深,是一個類似于購票轉賬的三級菜單,勢必會影響使用效率,但是它的重要性也不及 “微信、通訊錄、發現和我” 這四個一級菜單,合理的推斷是在 “發現” 或者 “我” 之下新開一個二級菜單,并且在搜索框下有提示。
會干死 App 嗎?
當然干不死 App,都說微信想做一個操作系統,但是 HTML5 的局限性還是很大,預計應用號對整個 App 的市場沖擊會比較有限,應用號的適用場景以及想象空間都不如 Native App,比如,現在的微信 JS-SDK 還沒有開放視頻錄制的 API。并且,很多 App 的死掉,根本就不是外部競爭導致的,App Store 里面一大半的應用都是僵尸應用。
應用號比 “輕應用” 好在哪兒?
相比于瀏覽器,搜索以及應用商店,微信使用的頻率高,時間長,黏性強,應用號達到用戶的可能性也大很多。應用號和訂閱號之間可以配合,形成閉環,解決 “輕應用” 服務之后還是會脫離瀏覽器或搜索服務的問題,比如用完后還是需要切出到短信通知或系統通知等。簡而言之,應用號和訂閱號的客服通知體驗好太多。
應用號能解決 Web App 加載慢的問題嗎?
事實上,我覺得 Web App 體驗最大的痛點就是加載慢,而微信內部的一些服務也是如此,比如購買電影票。如果微信不對應用號進行緩存處理的話,我對應用號解決 Web App 加載慢的問題保持懷疑態度,尤其是加載一些復雜頁面的時候。但是,在處理一些小頁面的時候,這個問題不會太夸張。這也呼應了上面那個 “會干死 App” 的問題。
微信網頁開發者工具發布和應用號有何關系?
在微信網頁開發者工具發布之前,前端開發適配微信頁面的調試極其不便,必須通過非常多的服務端 Hacking 達到模擬線上環境,從而進行功能測試。而剛剛發布的微信網頁開發者工具能夠極大地提高調試效率,方便應用號的開發。
于H5這個名詞想必大家已經很熟悉了,似乎就是在一夜之間,各大公司的市場、公關等負責推廣和傳播的部門人員,紛紛把目光投向了H5。那么,H5到底能做什么?應該怎么去做?到哪做?可怎么玩起來?做一個H5營銷需要注意什么?有哪些值得參考的經典案例?這些都是大家期望看到的,下面就是2015打造火爆H5頁面圈攻略!
2014年7月22日,H5游戲“圍住神經貓”上線微信朋友圈,到7月25日,3天的時間便創造了用戶500萬,訪問量超1億的神話。神經病貓的動畫表情、服飾、背包開始流行,甚至有網店開始售賣圍住這只貓的攻略。
盡管H5慢慢走近更多人的視野,但這個由HTML5簡稱過來的詞匯,在大多數人聽起來,仍十分陌生且難以理解。簡單來說,H5就是一種高級網頁技術,我們平時看到那些邀請函、小游戲都是H5網頁,確切來說叫HTML5,它跟我們平時上網看到的那些網頁本質上沒有任何區別。
一.H5頁面能怎么玩?
在了解完H5的一些基礎知識后,相信大家最關心的還是H5能做什么,有哪些玩法?接下來我將列舉一些典型的例子和大家探討:
1幻燈片式玩法
以下這個特斯拉的例子相信很多人都看過,精美的圖片設計簡單的翻頁效果。
這是H5最早期也是最典型的玩法,因為簡單、實用,所以至今還很流行。其效果就是簡單的圖片展示&翻頁交互,最終整體的表現很像幻燈片展示。
其實幻燈片式的H5現在已經出現了很多在線制作軟件供大家使用,所以制作成本在現在看來幾乎是等于零的,而在之前這樣一個應用的開發可能要將近一萬。
2交互式動畫
可口可樂下面這個案例在之前的風云榜中推薦過,是運用H5繪圖功能的典型例子。當然這里面的交互還是比較簡單的,只不過它基本體現了交互式動畫的感覺。整個可口可樂的時間軸是隨著用戶向上滑動頁面“繪制”出來的。
其實除了這種敘事型的H5動畫,我們能看到的大多數H5游戲也都都屬于這一類,比如神經貓、打企鵝、2048、財務包子鋪等等,都非常值得去感受一下。
那么,H5到底能實現什么樣的動畫效果呢?我想這應該是大家在做H5時最頭疼的問題,因為不知道能做成什么樣,你也就不知道從何下手。所以下面給大家介紹一個網站,絕對可以讓你眼前一亮,思維暴漲:http://fff.cmiscm.com/。在這個網站中,你幾乎能看到所有H5能夠實現的動畫效果,引爆你的靈感,下次如果需要做H5的時候就可以跟開發說“你看,我要的就是這個效果”。
3功能型H5
看一下以下的兩個例子,第一個是百度針對地鐵漲價做的H5,它可以計算你每天坐地鐵要多少錢并且實時顯示大家的評論;第二個是STC的社交移動風云榜,很簡單,就是精品H5的展示:
這兩個H5都有一個特點,除了針對受眾的熱點內容傳播以外,它們很像一個“供用戶重復使用”的產品,這就是所謂的功能型H5。其實大家看到風云榜可能會覺得它只是一個再簡單不過的網頁,但如果從它滿足用戶需求并產生重復“使用”行為的角度,它其實是一個產品——每周更新、定期群發推薦H5的圖文、欄目更新通知等等。
功能型H5的獨特價值在于,除了具備傳播性以外,它通過用戶的重復使用行為使得H5的傳播是一個持續不斷的過程,這一點是一般的H5所不具備的。風云榜首次發布時轉發6w多,目前每月的訪問量都在10w左右。
功能型H5由于具備一定的產品特性,其最大的價值就是提高粉絲活躍度和忠誠度。我們需要根據本身品牌的形象定位以及受眾的特性設計功能型H5。舉個例子,賣洗手液的可以抽象為健康生活方式,設計一個改善生活健康狀態的功能型H5或定期更新資訊的功能型H5。
二.從功能與設計目標來看,H5專題頁主要有以下4大類型:
總體來說,H5頁面主要是以上3種類型,不過說細一點還可以從不同角度分出一些類型,下面將通過大量的經典案例來說明這一點,最好你能體驗一下這些案例。首先,從功能與設計目標來看,H5專題頁主要有以下4大類型:
1活動運營型
為活動推廣運營而打造的H5頁面是最常見的類型,形式多變,包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態廣告圖片傳播不同,如今的H5活動運營頁需要有更強的互動、更高質量、更具話題性的設計來促成用戶分享傳播。
大眾點評為電影《狂怒》設計的推廣頁深諳此道。復古擬物風格的視覺設計讓人眼前一亮,富有質感的舊票根、忽閃的霓虹燈,配以幽默的動畫與音效,恨不得每個選項都點一遍。圍繞“選擇”這個品牌關鍵詞,用引人入勝的測試題讓用戶把人生當作大片來選擇,選到最后一題引出“大眾點評選座看電影”,一鍵直達App購票頁面。即使明知是軟文也忍不住帶著“矮油不錯,這個頁面有點diao噢”的心情點擊了分享。
2品牌宣傳型
不同于講究時效性的活動運營頁,品牌宣傳型H5頁面等同于一個品牌的微官網,更傾向于品牌形象塑造,向用戶傳達品牌的精神態度。在設計上需要運用符合品牌氣質的視覺語言,讓用戶對品牌留下深刻印象。
伴隨著浪漫的鋼琴旋律,《首草先生的情書》以一位男士的口吻娓娓道來在成長歷程中對妻子的愛與愧疚,最后引出“首草——滋陰圣品,愛妻首選”的宣傳語。設計上采用回憶般的黑白色調,簡單的照片加文字,配以花瓣掉落、水面漣漪等輕動畫,渲染出唯美優雅的氣氛。“首草”這個全新的高端養生草藥品牌,用H5打出了一副走心的情感牌,讓用戶記住了“半生只為你”的愛妻品牌形象。
3產品介紹型
聚焦于產品功能介紹,運用H5的互動技術優勢盡情展示產品特性,吸引用戶買買買。
這一類型的H5頁面多見于汽車品牌,LEXUSNX是其中的優秀代表案例。精致和極富質感的建模、細膩的光效營造出酷炫的視覺風格。用手指跟隨光的軌跡切割畫面揭開序幕,通過合理優雅的觸碰、摩擦、滑動等互動形式帶領用戶一同探索產品的7大特性,宏觀和微觀都照顧周全。
4總結報告型
自從支付寶的十年賬單引發熱議后,各大企業的年終總結現也熱衷于用H5技術實現,優秀的互動體驗令原本乏味的總結報告有趣生動了起來。
《京東的十大任性》用10張橫屏頁面講述了京東在2014年的十大成就,視覺設計上采用簡潔的扁平風插畫,加入紙面質感形成復古卡片拼貼感。不同頁面間通過手指滑動實現流暢的視差滾動效果,最后還有東哥這個小彩蛋。一口氣看完后大概就了解2014年京東都干了哪些大事。
三.H5形式為功能服務,幾種常見的H5專題頁表現形式:
在確定了專題頁的功能目標之后,接下來就是關鍵的H5頁面設計階段了。如何有的放矢地進行設計,需要考慮到具體的應用場景和傳播對象,從用戶角度出發去思考什么樣的頁面是用戶最想看的最會去分享的,形式要為功能服務。以下列舉幾種常見的H5專題頁表現形式:
1簡單圖文
簡單圖文是早期最典型的H5專題頁形式。“圖”的形式千變萬化,可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作,起到類似幻燈片的傳播效果。考驗的是高質量的內容本身和講故事的能力。
滴滴打車這個案例就是典型的簡單圖文型H5專題頁,用幾張照片故事串起了整套頁面。視覺簡潔有力,采用整屏黑白照片,點綴以滴滴的品牌橙色。每切換一張圖片,文字就漸隱浮現,沒有其他互動形式,讓觀眾聚焦于內容,通過陌生人之間的真情聯系來塑造品牌的正能量形象。
也有不甘平淡的精彩案例。在除夕夜全國人民瘋狂搶紅包的時刻,微信推出了《從此看盡中國人的名與利》這樣一個專題頁。第一眼就被鎮住了,好親切的RMB~每個頁面都是一張人民幣風景局部放大圖,創作者加入巧妙的創意元素與微動態進行細膩刻畫,帶觀眾走進了人民幣的微觀世界。每一張鈔票圖案配合發人深省的文案,在推廣微信紅包的同時呼吁人們重新審視人情與名利的奧義。
2禮物/賀卡/邀請函
每個人都喜歡收到禮物的感覺,抓住這一心理,品牌推出了各種H5形式的禮物、賀卡、邀請函,通過提升用戶好感度來潛移默化地達到品牌宣傳的目的。既然是禮物,那創意和制作便是重要的加分項。
AKQA創意營銷公司在圣誕之際獻上了一份厚禮——夢幻水晶球。通過移動手機,鏡頭從水晶球外不斷搖晃推近,漸漸走進水晶球的微觀世界里。通過手機環顧四周,可以360度欣賞水晶球里的全景,搖一搖雪花便漫天飄灑。寫下你的祝福并分享給朋友,相信一定會驚艷到對方。這個H5頁面使用了重力感應、3D等技術,文字與BGM的使用也十分講究,給用戶帶來了完美的互動體驗,值得細細品味。
Evernote在過年期間也別出心裁地推出語音賀卡,通過公眾號引導用戶對其發送一條語音消息,然后把這條祝福語音結合中國風動畫做成一張獨一無二的語音賀卡發送給朋友。整體色調也是以Evernote品牌色為主,同時蘊含著一絲優雅的年味,十分討巧。
3問答/評分/測試
問答形式的H5頁面也屢見不鮮了,利用用戶的求知欲和探索欲,一路選選選,看最后到底是什么成績。一條清晰的線索是必要的,最后到達的結果頁也需要合理不突兀,如果能輔以出彩的視覺和文案,弱化答題的枯燥感那就再好不過了。
大眾點評為姜文的電影《一步之遙》做持續推廣,讓用戶為姜文的代表作評分。視覺設計依舊出彩,開腦洞的創意和動畫設計令人叫絕(一定要掃一掃體驗下!)。延續了懷舊大字報風格,字體、文案、裝飾元素等細節處理也十分用心。問答形式的H5頁面能做到這個份上也是蠻拼的。
4游戲
從“圍住神經貓”、“看你有多色”等單純小游戲再到杜蕾斯“一夜N次郎”(即山寨版“別踩白塊兒”)等品牌植入式小游戲,H5游戲因為操作簡單、競技性強,一度風靡朋友圈,但創意缺乏和同質化現象導致用戶對無腦小游戲逐漸產生了厭倦。品牌要在游戲上做到成功傳播,需要在玩法和設計上多下點功夫。
在圣誕節推出了一款名為《圣誕老人拯救計劃》的H5小游戲,操作非常簡單,只需用手指交替上滑,把角色的脖子向上拉到無限長,游戲會記錄你拉的最高距離,跟朋友比一比誰比較長。界面清新可愛,與Same的招牌畫風一致,游戲角色也是Same的品牌角色,通過幽默惡搞的游戲向用戶傳達Same獨到有趣的產品文化。
四.為H5頁面設計加分的4個要點
一個H5頁面設計品質的出眾與否,會直接影響其傳播效果,甚至影響到用戶對品牌形象的認知。在這里總結出以下的設計要點:
1細節與統一
要成就高品質的用戶體驗,必須考慮到細節與整體的統一性。復古擬物的視覺風格,那字體就不能過于現代;幽默調侃的調調,那文案措辭就不能過于嚴肅;打情感內容牌的,動效就不能過于花哨。
大眾點評姜文電影推廣系列的《九步之遙》H5專題頁便牢牢抓住了這一點。從二維碼入口到性感的著陸頁,再到最后分享提示的設計,包括文案措辭和背景音效,無不與整體的戲虐風保持一致,給到用戶一個完整統一的互動體驗。
尤其關注“分享提示”這個細節設計,比起一個簡單的箭頭和一句冷冰冰的“點這里分享”,用心的細節設計帶來的高品質和好感度是顯而易見的。關于分享提示的設計,再貼幾個精彩案例:
2緊跟熱點,利用話題效應
想要你的H5專題頁一夜爆紅,第一時間抓住熱點并火速上線,借機進行品牌宣傳也不失為一條捷徑。
天天P圖抓住武則天熱播的契機推出了風靡海內外的媚娘妝,同時《全民COS武媚娘》的H5互動頁也第一時間上線,操作簡單易上手,一鍵上傳照片就能立刻完成媚娘妝,與萬千媚娘們進行PK,娛樂了大眾又推廣了產品。
網易娛樂在武媚娘剪胸風波的風口浪尖上推出了名為《神還原武媚娘被剪胸真相》的H5專題頁,放下節操用極富想象力的粗曠草圖風向廣大觀眾“還原”了真相。一時間被瘋狂轉發,網易娛樂也算是順勢自我宣傳了一把。
3講個好故事,引發情感共鳴
不論H5的形式如何多變,有價值的內容始終是第一位的。在有限的篇幅里,學會講故事,引發用戶的情感共鳴,將對內容的傳播形成極大的推動。
LEVI’S新年優惠活動專題頁以第一人稱的口吻,用小時候簡樸卻熱鬧的新年與長大后富足卻乏味的新年做對比,用手繪風渲染出親切的懷舊氛圍。最后引出“這個新年,把壓力和束縛打包扔掉,用新鮮的眼光感受生活,一起活出趣”的品牌推廣slogan,代入感極強的故事無疑是驅動分享的源動力。
4合理運用技術,打造流暢的互動體驗
隨著技術的發展,如今的HTML5擁有眾多出彩的特性,讓我們能輕松實現繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動效果。相較于塞入各種不同種類的動效導致頁面混亂臃腫,我們更提倡的是合理運用技術,用心專注于為用戶提供流暢的互動體驗。
典型的案例是淘寶在雙12推出的預售推廣H5專題頁。在瀏覽過程中我只使用了一種向上滑動的手勢,而頁面呈現出來的效果卻猶如一個流暢的動態GIF。設計師巧妙利用圖形設計與組合,在滑動過程中營造出一種豐富的視差滾動效果,單個圖形元素的遮罩、旋轉與整體頁面的動勢配合極為默契。
五.現在H5市場究竟有哪些坑?
不過,我們可以很清楚的看到,H5市場在逐漸火爆的同時,也越來越混亂,越來越不規范。無論是第三方開發公司,還是廣告主,在面對H5營銷時都會遇到這樣那樣的問題,或者說有這樣或那樣的誤區,現在讓我們看看這里面的坑究竟在哪?
1幻想憑一款H5能一夜成名
期望高、投入少,許多市場營銷人員,特別是老板,都希望靠一款沒有任何推廣投入的H5一夜成名,但現在這種情況在微信朋友圈里已經不可能出現了。
H5頁面的推廣方式乏善可陳,無外乎軟文、朋友圈分享和微信公眾號推廣,但目前的H5營銷無論是在表現形式還是內容創意上,依舊面臨著很大的挑戰,同時微信朋友圈的用戶對日漸增多的泡沫信息感到疲勞,產生了某種程度上的抵抗力。而微信公眾號的暴增則讓打開率和閱讀量持續走低,想讓一款H5一夜爆紅的可能性不是沒有,但的確是越來越小了。在整個H5的產出中所占的比例也會低到令營銷人員所難以忍受的地步。
2營銷推廣只索取的態度無法長久
在微信里傳播就要遵守微信的游戲規則,不應該只想從微信里攝取東西,而應該轉變思維,想想我們給微信貢獻了什么?我們給用戶帶來了什么?你給微信貢獻的越多你的回報也會越大。如果有一款H5之所以能在微信朋友圈里成功,主要還是創意和制作人要始終站在為微信用戶思考的角度來制定H5策略的,我們要做讓用戶喜愛的“廣告”,用戶才會分享轉發,而不是靠強制性的要求和誘導,這種結果最終會被用戶投訴,甚至被封。
3H5本身還存在技術問題
作為一項本來還不太成熟的技術,H5是在微信的社交舞臺下才大放異彩的。目前看,H5的問題依舊比較多,技術上還有很多不足需要改進,比如頁面切換白屏、下拉菜單不流暢、多個音頻播放不流暢、移動設備件的接口API少等,無法掃描二維碼、無法用語音輸入、無法一鍵分享到朋友圈。這些對營銷人員來說,都是一個個掩藏在腳下的深坑,一不留神就掉進去了。
4易抄襲且缺乏知識產權保護
如果你有運氣,通過千辛萬苦做一款好的H5應用,例如像神經貓那樣,那么比你更開心的一定是其他抄襲者,他們可以輕易的把你的H5抄下來,換成他們的域名掛上去,然后再把廣告聯系方式改成他們自己的。神經貓、2048等就衍生出許多版本,大部分人可能都沒有訪問過原版(因為抄襲和模仿者太多),抄襲的輕者換域名,更厲害的是把你的創意拿去然后在短時間內做一個比你更好的游戲或者應用,讓你的淚兒哭干。
5作品同質化現象嚴重
很多人對H5的理解都是停留在用戶層面,邀請函、小游戲、品牌展示、抽獎等等,但大多數作品的同質化現象很嚴重,無論是形式上,還是內容創意上。這對營銷人員和制作人員的要求逐漸在提高,挑戰也越來越大,想隨隨便便做一款能夠引起注意的作品并不容易。
6寄人籬下不確定性大
H5之所以能一下子爆火,微信的功勞最大,但是微信正把H5最優質的入口收緊——朋友圈分享紅利正在逐漸消失,未來具有不確定性。微信在近期出臺了針對朋友圈分享的政策限制,誘導關注與分享,初犯將會面臨封號30天、攔截鏈接、刪除誘導增加的粉絲和關閉流量主的處罰,二次違規將直接永久封號。而且轉發量超過一定數量后微信就會屏蔽朋友圈,意味著未來微信里再也不易出現花費很少的錢獲得流量破千萬的H5.
目前需要注意的是:分享的圖片和自定義接口已變更,注意修改;不要在標題中涉及分享贏大禮、100%中獎等惡意誘導的關鍵詞;分享頁面需部署在擁有ICP備案的域名上。
7機型成千上萬適配難度大
剛剛開始做H5的企業面臨的第一個問題就是,機型適配,由于手機的型號繁多,系統、屏幕都不一樣,所以在顯示和一些功能性的接口開發時都會耗費一些時間,如果你是剛剛入手希望能做個熱門的H5應用,那么初期機型的適配會讓你吃一番苦頭,不過慢慢會知道解決,比其他前面的那些坑,是小巫見大巫。
寫在最后
有人說,HTML5做的應用究竟能否匹敵原生App?答案是,HTML5不但可以匹敵原生App,甚至它天然的很多特性超越了原生App。隨著手機硬件的升級、HTML5技術的發展以及微信平臺的開放,H5的跨平臺、低成本、快迭代等優勢被進一步凸顯,這對身處于移動互聯網大潮的企業主、品牌、設計師和開發者來說,都將是一個最好的時代。未來必將涌現更多優秀的H5頁面,讓我們拭目以待。
這是一個最壞的年代,也是一個最好的年代!
歡迎分享本文給你的朋友,匯總自網絡,精彩等你慢慢提取,關注互聯網和網絡營銷的朋友多多交流,QQ&微信:809472503。
公眾號:mumuseo,有網絡營銷干貨,網絡推廣策略,引流技巧,成功案例故事,網絡營銷思路,等諸多優質內容,提升自己的專業能力!你關注的人,決定了你看到的世界!
營銷,不止于營銷,傳播互聯網正能量!這里,不乏干貨,如果你想和我扯扯,歡迎關注
*請認真填寫需求信息,我們會在24小時內與您取得聯系。