承接上文《玩轉(zhuǎn)HTML5移動(dòng)頁面（動(dòng)效篇)》，上次說的是讓頁面動(dòng)起來的一些小技巧。
而頁面動(dòng)起來的根基是功能可用的頁面，因此有必要分享一些優(yōu)化細(xì)節(jié)的技巧和方向，熟悉掌握一些方法論還是會(huì)對(duì)頁面開發(fā)大大提高效率的，并且也能防止疏忽缺漏。
====前方高能====
（1） 動(dòng)畫雪碧圖
涉及的動(dòng)畫十分多，用的元素也十分多，請(qǐng)務(wù)必使用雪碧圖（Sprite）！
網(wǎng)上的工具有一些可以幫助你生成雪碧圖的工具，例如CssGaga，GoPng等等，自動(dòng)化構(gòu)建工具Grunt和Gulp也提供了相應(yīng)插件。
特別地，如果單張雪碧圖面積實(shí)在太大，可以拆分雪碧圖，例如拆分成2-4張，因?yàn)楝F(xiàn)代瀏覽器都支持4-6個(gè)同源請(qǐng)求下載，若資源實(shí)在太多，也可以考慮把靜態(tài)資源放在不同源域名下去請(qǐng)求，這里犧牲多幾個(gè)請(qǐng)求換來圖片同時(shí)加載比一張圖片慢慢加載要好，當(dāng)然，這需要具體情況去衡量。
順便提一下，我寫動(dòng)畫的一個(gè)小技巧是把每一頁的動(dòng)畫分在一個(gè)import.css里面，然后最后在主樣式中import進(jìn)去，這樣方便調(diào)試動(dòng)畫，也容易維護(hù)，例如：
//style.css
@import url("reset.import.css");
@import url("loading.import.css");
@import url("m-animate-1.import.css");
@import url("m-animate-2.import.css");
@import url("m-animate-3.import.css");
|
當(dāng)然，import不是原生支持的，這里需要一些流程化工具讓import的頁面在輸出之前經(jīng)過組裝-壓縮的步驟。
（2） 圖片壓縮
圖片壓縮是老生常談，但是仍然有不少人忘記壓縮，那可是活生生的帶寬和流量的浪費(fèi)啊…
壓縮圖片需要有好工具，有智圖，TinyPNG，JPEGmini等等。
依靠工具外，還有以下方式可以優(yōu)化圖片：
1.盡量避免用PNG24。如果圖片色彩要求不高，請(qǐng)使用PNG8；
2.使用新格式，WEBP和BPG等新格式的到來，在不用考慮兼容的情況下請(qǐng)大膽嘗試；
3.用SVG和ICONFONT代替簡(jiǎn)單的圖標(biāo)；
4.用FUFU的字蛛來代替藝術(shù)字體切圖。
（3）多終端兼容
多終端兼容是一切的根基，要知道有人拿著腎6+，有人拿著腎4，大則414×736，小則320×416（IPHONE4在SAFARI保留上下端導(dǎo)航），因此多終端兼容是十分必要的。
曾經(jīng)有一種派系為320派系，就是大部分頁面都是320寬度，因此干脆直接用320的容器來包一切頁面，那樣也簡(jiǎn)單，然而IPHOEN6和IPHONE6+的出現(xiàn)簡(jiǎn)直是滅了這個(gè)派系。
那么到底要如何兼容呢？
這里我分了三個(gè)時(shí)期來說說：
A.設(shè)計(jì)初期。先審視設(shè)計(jì)稿，因?yàn)?20派系的原因，大部分設(shè)計(jì)稿只考慮到IPHONE5來設(shè)計(jì)，因此很多背景元素是只有320px寬度（頁面實(shí)際渲染寬度），例如下圖。
那么，這時(shí)候就需要設(shè)計(jì)提供一個(gè)較長(zhǎng)的延伸背景了，最好是可以重復(fù)的，用background-repeat可以減少圖片大小。
B.設(shè)計(jì)中期。也就是具體的兼容方法，可以使用CSS3 Media Query和類覆蓋。
1.CSS3 Media Query，按范圍兼容機(jī)型。
/*iphone6*/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
.page6 .ele-building{top: 69px;}
.page6 .ele-runner{top: 100px;}
.page6 .ele-pophome{top: 16px;}
}
|
2.類覆蓋，這種方式適合直接為小屏或大屏做整體兼容。
首先，為小屏（大屏）加一個(gè)識(shí)別類，這里小于420表示為小屏幕（IPHONE4有上下導(dǎo)航欄）：
var bh = $(window).height();
// 480 - 64 = 416 iphone4
if(bh<420){
$('body').addClass('low-screen');
}
|
然后，對(duì)應(yīng)識(shí)別類加上要變動(dòng)的元素覆蓋，例如：
.page6 .ele-bg{top: 10px;}
.low-screen .page6 .ele-bg{top: 0px;}
|
C.設(shè)計(jì)后期。這是最后一步，整體檢查和體驗(yàn)，這里面會(huì)暴露一些問題，例如元素在IPHONE6P顯得小了或者元素在IPHONE4擠不下了，可以來最后大招解決：
1.大屏適當(dāng)用zoom:(倍率)或者transform:scale(倍率)來增大元素，實(shí)測(cè)失真根本看不出來，設(shè)計(jì)師也滿意（畢竟不用多做一張圖！）；
2.小屏適當(dāng)去掉一些元素，例如一些翻頁提示，一些多余圖標(biāo)，可以讓優(yōu)雅降級(jí)，把它們 display:none掉。
有以上幾步，基本就能兼容大部分機(jī)器了。兼容一直是個(gè)苦活，但是這是前端必修課，多練就會(huì)發(fā)覺其實(shí)也沒有那么難嘛。
（4）交互提示
前面說了，加了音效就要加上音樂切換開關(guān)的按鈕，不然會(huì)被用戶罵死。還有其他，例如如果你的頁面不能兼容橫屏，請(qǐng)監(jiān)聽橫屏狀態(tài)，然后加上適當(dāng)?shù)臋M屏提示。
例如：
// 橫屏監(jiān)聽
var updateOrientation = function(){
if(window.orientation=='-90' || window.orientation=='90'){
$('.landscape-wrap').removeClass('hide');
console.log('為了更好的體驗(yàn)，請(qǐng)將手機(jī)/平板豎過來！');
}else{
$('.landscape-wrap').addClass('hide');
console.log('豎屏狀態(tài)');
}
};
window.onorientationchange = updateOrientation;
|
提示越多，界面越友好，有時(shí)候設(shè)計(jì)師會(huì)漏掉一些可能出現(xiàn)的頁面情況。
作為有態(tài)度的前端，請(qǐng)好好把關(guān)，讓用戶有好的體驗(yàn)。
（5）分享接口
H5做好了，要傳播分享才能展示你的牛逼轟轟。
然而分享其實(shí)是個(gè)坑，分享到微信、手Q等都有各種問題。
A.微信
舊微信會(huì)使用WeixinJSBridge來聲明分享的縮略圖、標(biāo)題、正文等，比較方便。例如：
而最新的微信提供了新的微信SDK，需要在公眾賬號(hào)綁定所屬域名之后調(diào)用SDK作分享，可以說分享功能會(huì)更加強(qiáng)大，坑也會(huì)更加少。
B.手Q
手Q支持聲明meta標(biāo)簽的的分享方式，例如：
而若在qq.com域名下也支持api的定義方式。
C.一般化分享
在默認(rèn)兼容舊版微信、手Q或者各種瀏覽器，平臺(tái)，可以用這樣的方法：
寫h1做標(biāo)題，p做內(nèi)容，img做縮略圖，只需要把h1隱藏掉就好，這里的縮略圖最好要大于200x200px。
例如：
當(dāng)然，這樣也有利于搜索引擎拉取信息。
分享的坑還有更多，例如不同瀏覽器例如QQ瀏覽器、Chrome也會(huì)有自己的默認(rèn)拉取方式（部分截圖作縮略圖），需要多加測(cè)試優(yōu)化。
（5）SEO搜索引擎優(yōu)化
SEO（搜索引擎優(yōu)化）的基本做法是把頁面結(jié)構(gòu)寫好，這包括：
1.定義精確的網(wǎng)頁標(biāo)題。你的標(biāo)題應(yīng)該有概括性，能明確告知搜索引擎和用戶你的網(wǎng)站大概內(nèi)容和目的，可以是當(dāng)前頁面標(biāo)題-所屬類型-產(chǎn)品名，例如“全民來猜歌-年費(fèi)黃鉆-QQ空間”。
2.針對(duì)頁面內(nèi)容補(bǔ)充description和keywords的meta標(biāo)簽。你需要簡(jiǎn)短總結(jié)頁面的主要目標(biāo)，然后補(bǔ)充description，以及根據(jù)關(guān)鍵詞補(bǔ)充keywords。
3.優(yōu)化你的超鏈接和圖片。包括優(yōu)化超鏈接顯示的文本，要具有語義性也要跟超鏈接的網(wǎng)頁具有相關(guān)性，例如“空間主頁”就不要鏈接到“www.qq.com”。同時(shí)，要補(bǔ)充”title”和”alt”屬性，例如“<img src=’images/apple.jpg’ title=’蘋果示例圖’ alt=’蘋果示例圖’ />”。
4.建立良好的網(wǎng)站導(dǎo)航和sitemap。網(wǎng)站需要有一個(gè)良好的導(dǎo)航，控制根目錄和各子目錄的關(guān)鍵，通過sitemap可以幫助網(wǎng)站主了解網(wǎng)站結(jié)構(gòu)，也方便搜索引擎收錄整個(gè)站點(diǎn)。
5.優(yōu)化目錄結(jié)構(gòu)和URL。你的URL應(yīng)該有語義性，簡(jiǎn)短易懂，例如http://www.apple.com/macbook-air/，而且每一層級(jí)都要有它對(duì)應(yīng)的頁面展示以及語義。
6.善用h1-h6的標(biāo)題結(jié)構(gòu)樹。合理的標(biāo)題可以強(qiáng)調(diào)文字，也能讓搜索引擎更加了解到各標(biāo)題的重要性，因此建立良好的標(biāo)題樹十分有意義。
7.不斷致力于提供優(yōu)質(zhì)的內(nèi)容。社交化分享是網(wǎng)站曝光最快的因素，因此不斷提供了優(yōu)質(zhì)原創(chuàng)內(nèi)容才能真正提高你的網(wǎng)站曝光權(quán)重。
（6）無障礙
無障礙的普及是一件好事，這讓互聯(lián)網(wǎng)真正地為所有人可用。因此我們也應(yīng)該為之而努力，無障礙的根基是你頁面強(qiáng)壯的語義性和結(jié)構(gòu)性，具體可以參考《騰訊網(wǎng)無障礙說明》了解無障礙的優(yōu)化手段。
最后，羅嗦了這么多，只是我自己的一些小經(jīng)驗(yàn)，請(qǐng)輕拍磚，多交流。
原文鏈接: 騰迅ISUX
]]>
作為一名前端，在拿到設(shè)計(jì)稿時(shí)你有兩種選擇：
這次就來談?wù)勔恍﹦?dòng)畫設(shè)計(jì)的小技巧，能在你時(shí)間不多又沒有動(dòng)畫想法的時(shí)候瞬間讓頁面增色不少。
====前方高能====
（1） CSS3時(shí)序錯(cuò)開漸顯動(dòng)畫
效果就是兩個(gè)元素分別從上面掉下來，這里有個(gè)小細(xì)節(jié)（keyframes），為了讓掉下來的動(dòng)畫生動(dòng)點(diǎn)，應(yīng)該是在90%的時(shí)候先掉下一點(diǎn)點(diǎn)，然后瞬間在100%時(shí)回跳5px。
還有個(gè)細(xì)節(jié)，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是漸變動(dòng)畫不能停止在最后一幀。有這樣一個(gè)解決方案：
1.用Modernizr去檢測(cè)是否支持這個(gè)屬性，加上識(shí)別類.no-animation-fill-mode；
2.根據(jù)識(shí)別類采取以下措施：
（1）用js模擬同樣效果；
（2）用css屏蔽掉動(dòng)畫；
（3）或者直接全部都用transition來做（不要keyframes）。
示例頁面如下（查看DEMO）：
分兩種情況：
2.如果時(shí)間緊湊，又不像桑尼一樣擅長(zhǎng)于動(dòng)畫細(xì)節(jié)，可以使用一些輔助工具：
（3）SVG動(dòng)畫
再使用CSS3的animation控制stroke-dashoffset：
效果不難吧！SVG還有各種用途，例如制作ICONFONT等，可以深入挖掘。
====最后總結(jié)====
當(dāng)然，真正要做到高效制作動(dòng)態(tài)H5頁面，還是靠積累，因此平時(shí)做好的細(xì)節(jié)動(dòng)畫自己都積累起來，下次分分鐘就能用得上。
原文鏈接:騰訊ISUX
]]>功能與目標(biāo)
首先從功能與設(shè)計(jì)目標(biāo)來看， H5專題頁主要有以下4大類型：
1.活動(dòng)運(yùn)營(yíng)型
為活動(dòng)推廣運(yùn)營(yíng)而打造的H5頁面是最常見的類型，形式多變，包括游戲、邀請(qǐng)函、賀卡、測(cè)試題等形式。與以往簡(jiǎn)單的靜態(tài)廣告圖片傳播不同，如今的H5活動(dòng)運(yùn)營(yíng)頁需要有更強(qiáng)的互動(dòng)、更高質(zhì)量、更具話題性的設(shè)計(jì)來促成用戶分享傳播。從進(jìn)入微信H5頁面到最后落地到品牌App內(nèi)部，如何設(shè)計(jì)一套合適的引流路線也頗為重要。
大眾點(diǎn)評(píng)為電影《狂怒》設(shè)計(jì)的推廣頁便深諳此道。復(fù)古擬物風(fēng)格的視覺設(shè)計(jì)讓人眼前一亮，富有質(zhì)感的舊票根、忽閃的霓虹燈，配以幽默的動(dòng)畫與音效，恨不得每個(gè)選項(xiàng)都點(diǎn)一遍。圍繞“選擇”這個(gè)品牌關(guān)鍵詞，用引人入勝的測(cè)試題讓用戶把人生當(dāng)作大片來選擇，選到最后一題引出“大眾點(diǎn)評(píng)選座看電影”，一鍵直達(dá)App購票頁面。即使明知是軟文也忍不住帶著“矮油不錯(cuò)，這個(gè)頁面有點(diǎn)diao噢”的心情點(diǎn)擊了分享。
2.品牌宣傳型
不同于講究時(shí)效性的活動(dòng)運(yùn)營(yíng)頁，品牌宣傳型H5頁面等同于一個(gè)品牌的微官網(wǎng)，更傾向于品牌形象塑造，向用戶傳達(dá)品牌的精神態(tài)度。在設(shè)計(jì)上需要運(yùn)用符合品牌氣質(zhì)的視覺語言，讓用戶對(duì)品牌留下深刻印象。
伴隨著浪漫的鋼琴旋律，《首草先生的情書》以一位男士的口吻娓娓道來在成長(zhǎng)歷程中對(duì)妻子的愛與愧疚，最后引出“首草——滋陰圣品，愛妻首選”的宣傳語。設(shè)計(jì)上采用回憶般的黑白色調(diào)，簡(jiǎn)單的照片加文字，配以花瓣掉落、水面漣漪等輕動(dòng)畫，渲染出唯美優(yōu)雅的氣氛。“首草”這個(gè)全新的高端養(yǎng)生草藥品牌，用H5打出了一副走心的情感牌，讓用戶記住了“半生只為你”的愛妻品牌形象。
3.產(chǎn)品介紹型
聚焦于產(chǎn)品功能介紹，運(yùn)用H5的互動(dòng)技術(shù)優(yōu)勢(shì)盡情展示產(chǎn)品特性，吸引用戶買買買。
這一類型的H5頁面多見于汽車品牌，LEXUS NX是其中的優(yōu)秀代表案例。精致和極富質(zhì)感的建模、細(xì)膩的光效營(yíng)造出酷炫的視覺風(fēng)格。用手指跟隨光的軌跡切割畫面揭開序幕，通過合理優(yōu)雅的觸碰、摩擦、滑動(dòng)等互動(dòng)形式帶領(lǐng)用戶一同探索產(chǎn)品的7大特性，宏觀和微觀都照顧周全。
4.總結(jié)報(bào)告型
自從支付寶的十年賬單引發(fā)熱議后，各大企業(yè)的年終總結(jié)現(xiàn)也熱衷于用H5技術(shù)實(shí)現(xiàn)，優(yōu)秀的互動(dòng)體驗(yàn)令原本乏味的總結(jié)報(bào)告有趣生動(dòng)了起來。
《京東的十大任性》用10張橫屏頁面講述了京東在2014年的十大成就，視覺設(shè)計(jì)上采用簡(jiǎn)潔的扁平風(fēng)插畫，加入紙面質(zhì)感形成復(fù)古卡片拼貼感。不同頁面間通過手指滑動(dòng)實(shí)現(xiàn)流暢的視差滾動(dòng)效果，最后還有劉總這個(gè)小彩蛋。一口氣看完后大概就了解2014年京東都干了哪些大事。
二．形式為功能服務(wù)
在確定了專題頁的功能目標(biāo)之后，接下來就是關(guān)鍵的設(shè)計(jì)階段了。如何有的放矢地進(jìn)行設(shè)計(jì)，需要考慮到具體的應(yīng)用場(chǎng)景和傳播對(duì)象，從用戶角度出發(fā)去思考什么樣的頁面是用戶最想看的最會(huì)去分享的。以下列舉幾種常見的H5專題頁表現(xiàn)形式：
1.簡(jiǎn)單圖文
簡(jiǎn)單圖文是早期最典型的H5專題頁形式。“圖”的形式千變?nèi)f化，可以是照片、插畫、GIF等。通過翻頁等簡(jiǎn)單的交互操作，起到類似幻燈片的傳播效果。考驗(yàn)的是高質(zhì)量的內(nèi)容本身和講故事的能力。
滴滴打車這個(gè)案例就是典型的簡(jiǎn)單圖文型H5專題頁，用幾張照片故事串起了整套頁面。視覺簡(jiǎn)潔有力，采用整屏黑白照片，點(diǎn)綴以滴滴的品牌橙色。每切換一張圖片，文字就漸隱浮現(xiàn)，沒有其他互動(dòng)形式，讓觀眾聚焦于內(nèi)容，通過陌生人之間的真情聯(lián)系來塑造品牌的正能量形象。
也有不甘平淡的精彩案例。在除夕夜全國(guó)人民瘋狂搶紅包的時(shí)刻，微信推出了《從此看盡中國(guó)人的名與利》這樣一個(gè)專題頁。第一眼就被鎮(zhèn)住了，好親切的RMB~每個(gè)頁面都是一張人民幣風(fēng)景局部放大圖，創(chuàng)作者加入巧妙的創(chuàng)意元素與微動(dòng)態(tài)進(jìn)行細(xì)膩刻畫，帶觀眾走進(jìn)了人民幣的微觀世界。每一張鈔票圖案配合發(fā)人深省的文案，在推廣微信紅包的同時(shí)呼吁人們重新審視人情與名利的奧義。
2.禮物/賀卡/邀請(qǐng)函
每個(gè)人都喜歡收到禮物的感覺，抓住這一心理，品牌推出了各種H5形式的禮物、賀卡、邀請(qǐng)函，通過提升用戶好感度來潛移默化地達(dá)到品牌宣傳的目的。既然是禮物，那創(chuàng)意和制作便是重要的加分項(xiàng)。
AKQA創(chuàng)意營(yíng)銷公司在圣誕之際獻(xiàn)上了一份厚禮——夢(mèng)幻水晶球。通過移動(dòng)手機(jī)，鏡頭從水晶球外不斷搖晃推近，漸漸走進(jìn)水晶球的微觀世界里。通過手機(jī)環(huán)顧四周，可以360度欣賞水晶球里的全景，搖一搖雪花便漫天飄灑。寫下你的祝福并分享給朋友，相信一定會(huì)驚艷到對(duì)方。這個(gè)H5頁面使用了重力感應(yīng)、3D等技術(shù)，文字與BGM的使用也十分講究，給用戶帶來了完美的互動(dòng)體驗(yàn)，值得細(xì)細(xì)品味。
Evernote在過年期間也別出心裁地推出語音賀卡，通過公眾號(hào)引導(dǎo)用戶對(duì)其發(fā)送一條語音消息，然后把這條祝福語音結(jié)合中國(guó)風(fēng)動(dòng)畫做成一張獨(dú)一無二的語音賀卡發(fā)送給朋友。整體色調(diào)也是以Evernote品牌色為主，同時(shí)蘊(yùn)含著一絲優(yōu)雅的年味，十分討巧。
3.問答/評(píng)分/測(cè)試
問答形式的H5頁面也屢見不鮮了，利用用戶的求知欲和探索欲，一路選選選，看最后到底是什么成績(jī)。一條清晰的線索是必要的，最后到達(dá)的結(jié)果頁也需要合理不突兀，如果能輔以出彩的視覺和文案，弱化答題的枯燥感那就再好不過了。
與本文開頭一樣也是大眾點(diǎn)評(píng)的項(xiàng)目，這次是為姜文的電影《一步之遙》做持續(xù)推廣，讓用戶為姜文的代表作評(píng)分。視覺設(shè)計(jì)依舊出彩，開腦洞的創(chuàng)意和動(dòng)畫設(shè)計(jì)令人叫絕（一定要掃一掃體驗(yàn)下！）。延續(xù)了懷舊大字報(bào)風(fēng)格，字體、文案、裝飾元素等細(xì)節(jié)處理也十分用心。問答形式的H5頁面能做到這個(gè)份上也是蠻拼的。
4.游戲
從 “圍住神經(jīng)貓”、“看你有多色”等單純小游戲再到杜蕾斯“一夜N次郎”（即山寨版“別踩白塊兒”）等品牌植入式小游戲，H5游戲因?yàn)椴僮骱?jiǎn)單、競(jìng)技性強(qiáng)，一度風(fēng)靡朋友圈，但創(chuàng)意缺乏和同質(zhì)化現(xiàn)象導(dǎo)致用戶對(duì)無腦小游戲逐漸產(chǎn)生了厭倦。品牌要在游戲上做到成功傳播，需要在玩法和設(shè)計(jì)上多下點(diǎn)功夫。
Same在圣誕節(jié)推出了一款名為《圣誕老人拯救計(jì)劃》的H5小游戲，操作非常簡(jiǎn)單，只需用手指交替上滑，把角色的脖子向上拉到無限長(zhǎng)，游戲會(huì)記錄你拉的最高距離，跟朋友比一比誰比較長(zhǎng)。界面清新可愛，與Same的招牌畫風(fēng)一致，游戲角色也是Same的品牌角色，通過幽默惡搞的游戲向用戶傳達(dá)Same獨(dú)到有趣的產(chǎn)品文化。
三．為設(shè)計(jì)加分的4個(gè)要點(diǎn)
一個(gè)H5頁面設(shè)計(jì)品質(zhì)的出眾與否，會(huì)直接影響其傳播效果，甚至影響到用戶對(duì)品牌形象的認(rèn)知。在這里總結(jié)出以下的設(shè)計(jì)要點(diǎn)：
1.細(xì)節(jié)與統(tǒng)一
要成就高品質(zhì)的用戶體驗(yàn)，必須考慮到細(xì)節(jié)與整體的統(tǒng)一性。復(fù)古擬物的視覺風(fēng)格，那字體就不能過于現(xiàn)代；幽默調(diào)侃的調(diào)調(diào)，那文案措辭就不能過于嚴(yán)肅；打情感內(nèi)容牌的，動(dòng)效就不能過于花哨。
大眾點(diǎn)評(píng)姜文電影推廣系列的《九步之遙》H5專題頁便牢牢抓住了這一點(diǎn)。從二維碼入口到性感的loading頁，再到最后分享提示的設(shè)計(jì)，包括文案措辭和背景音效，無不與整體的戲虐風(fēng)保持一致，給到用戶一個(gè)完整統(tǒng)一的互動(dòng)體驗(yàn)。
尤其關(guān)注“分享提示”這個(gè)細(xì)節(jié)設(shè)計(jì)，比起一個(gè)簡(jiǎn)單的箭頭和一句冷冰冰的“點(diǎn)這里分享”，用心的細(xì)節(jié)設(shè)計(jì)帶來的高品質(zhì)和好感度是顯而易見的。再貼幾個(gè)精彩案例：
2.緊跟熱點(diǎn)，利用話題效應(yīng)
想要你的H5專題頁一夜爆紅，第一時(shí)間抓住熱點(diǎn)并火速上線，借機(jī)進(jìn)行品牌宣傳也不失為一條捷徑。
天天P圖抓住武則天熱播的契機(jī)推出了風(fēng)靡海內(nèi)外的媚娘妝，同時(shí)《全民COS武媚娘》的H5互動(dòng)頁也第一時(shí)間上線，操作簡(jiǎn)單易上手，一鍵上傳照片就能立刻完成媚娘妝，與萬千媚娘們進(jìn)行PK，娛樂了大眾又推廣了產(chǎn)品。
網(wǎng)易娛樂在武媚娘剪胸風(fēng)波的風(fēng)口浪尖上推出了名為《神還原武媚娘被剪胸真相》的H5專題頁，放下節(jié)操用極富想象力的粗曠草圖風(fēng)向廣大觀眾“還原”了真相。一時(shí)間被瘋狂轉(zhuǎn)發(fā)，網(wǎng)易娛樂也算是順勢(shì)自我宣傳了一把。
3.講個(gè)好故事，引發(fā)情感共鳴
不論H5的形式如何多變，有價(jià)值的內(nèi)容始終是第一位的。在有限的篇幅里，學(xué)會(huì)講故事，引發(fā)用戶的情感共鳴，將對(duì)內(nèi)容的傳播形成極大的推動(dòng)。
LEVI’S新年優(yōu)惠活動(dòng)專題頁以第一人稱的口吻，用小時(shí)候簡(jiǎn)樸卻熱鬧的新年與長(zhǎng)大后富足卻乏味的新年做對(duì)比，用手繪風(fēng)渲染出親切的懷舊氛圍。最后引出“這個(gè)新年，把壓力和束縛打包扔掉，用新鮮的眼光感受生活，一起活出趣”的品牌推廣slogan，代入感極強(qiáng)的故事無疑是驅(qū)動(dòng)分享的源動(dòng)力。
4.合理運(yùn)用技術(shù)，打造流暢的互動(dòng)體驗(yàn)
隨著技術(shù)的發(fā)展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實(shí)現(xiàn)繪圖、擦除、搖一搖、重力感應(yīng)、擦除、3D視圖等互動(dòng)效果。（有興趣的話可以點(diǎn)擊這個(gè)網(wǎng)站 http://fff.cmiscm.com/幾乎有所有H5動(dòng)態(tài)效果的展示）。相較于塞入各種不同種類的動(dòng)效導(dǎo)致頁面混亂臃腫，我們更提倡的是合理運(yùn)用技術(shù)，用心專注于為用戶提供流暢的互動(dòng)體驗(yàn)。
典型的案例是淘寶在雙12推出的預(yù)售推廣H5專題頁。在瀏覽過程中我只使用了一種向上滑動(dòng)的手勢(shì)，而頁面呈現(xiàn)出來的效果卻猶如一個(gè)流暢的動(dòng)態(tài)GIF。設(shè)計(jì)師巧妙利用圖形設(shè)計(jì)與組合，在滑動(dòng)過程中營(yíng)造出一種豐富的視差滾動(dòng)效果，單個(gè)圖形元素的遮罩、旋轉(zhuǎn)與整體頁面的動(dòng)勢(shì)配合極為默契。
結(jié)語
隨著手機(jī)硬件的升級(jí)、HTML5技術(shù)的發(fā)展以及微信平臺(tái)的開放，HTML5的跨平臺(tái)、低成本、快迭代等優(yōu)勢(shì)被進(jìn)一步凸顯，這對(duì)身處于移動(dòng)互聯(lián)網(wǎng)大潮的企業(yè)主、品牌、設(shè)計(jì)師和開發(fā)者來說，都將是一個(gè)最好的時(shí)代。未來必將涌現(xiàn)更多優(yōu)秀的H5頁面，讓我們拭目以待。
]]>
Mix Event
Commande en ligne NOURA
Ford Answers
Happy New Year
Easy Rocket Studio
Sulliwan Studio
Santa Stories
Cotonificio Olcese
FIVE MINUTES
The Portfolio of Jonathan Patterson
BMW Motorrad Special online shop
Superhero Cheesecake
Christmas Experiments
The Joe Boxer Jingle Joes by Kmart
Rosewater
Green Chameleon
Ricardo de la Blanca Brigati
The Selfie Collection
Behance Portfolio Review #3
Flatty Shadow
Rolex Awards 2014
The all new MINI 5-Door Hatch
PEEL Entertainment
Marcelo Duende
Digital For All Now
Ziggo OMG? LOL!
Thought.is
CHAPOLEONE
#7MML
Traveling Vineyard
Big Hero 6 Official Website
Spacejunk
]]>
Sound City Project
Orange #Futureself
Portfolio 2014
BeloeSuhoe
Reebok Fall/Winter ’14 Lookbook
Hashtag My Ass
Dinoalatrata
Multilingual WordPress Themes
La Piece
adidas Predator
Hibou Digital
Evoking Emotion
GreenCampusGuide – ProjectGreen
3D Grapher – Launch
Google I/O 2013 Experiment
30.000 Particles: A study creating performant particles with Canvas 2D
The warehouse
Interactive Typography Effects
Ball pool
Flat surface shader
Ripples
Surface waves
The planetarium
Wiper typography
Block based destruction of HTML5 video
The scream
