又色又爽又黄的视频女女,国产美女在线精品免费观看网址,免费国产黄网站在线看

玩轉HTML5移動頁面（優化篇）

sj33cn — Tue, 28 Apr 2015 10:56:02 +0000

承接上文《玩轉HTML5移動頁面（動效篇)》，上次說的是讓頁面動起來的一些小技巧。
而頁面動起來的根基是功能可用的頁面，因此有必要分享一些優化細節的技巧和方向，熟悉掌握一些方法論還是會對頁面開發大大提高效率的，并且也能防止疏忽缺漏。

====前方高能====

（1）動畫雪碧圖
涉及的動畫十分多，用的元素也十分多，請務必使用雪碧圖（Sprite）！
網上的工具有一些可以幫助你生成雪碧圖的工具，例如CssGaga，GoPng等等，自動化構建工具Grunt和Gulp也提供了相應插件。
特別地，如果單張雪碧圖面積實在太大，可以拆分雪碧圖，例如拆分成2-4張，因為現代瀏覽器都支持4-6個同源請求下載，若資源實在太多，也可以考慮把靜態資源放在不同源域名下去請求，這里犧牲多幾個請求換來圖片同時加載比一張圖片慢慢加載要好，當然，這需要具體情況去衡量。

順便提一下，我寫動畫的一個小技巧是把每一頁的動畫分在一個import.css里面，然后最后在主樣式中import進去，這樣方便調試動畫，也容易維護，例如：

//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");

當然，import不是原生支持的，這里需要一些流程化工具讓import的頁面在輸出之前經過組裝-壓縮的步驟。

（2）圖片壓縮
圖片壓縮是老生常談，但是仍然有不少人忘記壓縮，那可是活生生的帶寬和流量的浪費啊…
壓縮圖片需要有好工具，有智圖，TinyPNG，JPEGmini等等。
依靠工具外，還有以下方式可以優化圖片：
1.盡量避免用PNG24。如果圖片色彩要求不高，請使用PNG8；
2.使用新格式，WEBP和BPG等新格式的到來，在不用考慮兼容的情況下請大膽嘗試；
3.用SVG和ICONFONT代替簡單的圖標；
4.用FUFU的字蛛來代替藝術字體切圖。

（3）多終端兼容
多終端兼容是一切的根基，要知道有人拿著腎6+，有人拿著腎4，大則414×736，小則320×416（IPHONE4在SAFARI保留上下端導航），因此多終端兼容是十分必要的。
曾經有一種派系為320派系，就是大部分頁面都是320寬度，因此干脆直接用320的容器來包一切頁面，那樣也簡單，然而IPHOEN6和IPHONE6+的出現簡直是滅了這個派系。

那么到底要如何兼容呢？
這里我分了三個時期來說說：
A.設計初期。先審視設計稿，因為320派系的原因，大部分設計稿只考慮到IPHONE5來設計，因此很多背景元素是只有320px寬度（頁面實際渲染寬度），例如下圖。

那么，這時候就需要設計提供一個較長的延伸背景了，最好是可以重復的，用background-repeat可以減少圖片大小。
B.設計中期。也就是具體的兼容方法，可以使用CSS3 Media Query和類覆蓋。
1.CSS3 Media Query，按范圍兼容機型。

/*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.類覆蓋，這種方式適合直接為小屏或大屏做整體兼容。
首先，為小屏（大屏）加一個識別類，這里小于420表示為小屏幕（IPHONE4有上下導航欄）：

var bh = $(window).height();
// 480 - 64 = 416 iphone4
if(bh<420){
$('body').addClass('low-screen');
}

然后，對應識別類加上要變動的元素覆蓋，例如：

.page6 .ele-bg{top: 10px;}
.low-screen .page6 .ele-bg{top: 0px;}

C.設計后期。這是最后一步，整體檢查和體驗，這里面會暴露一些問題，例如元素在IPHONE6P顯得小了或者元素在IPHONE4擠不下了，可以來最后大招解決：

1.大屏適當用zoom:(倍率)或者transform:scale(倍率)來增大元素，實測失真根本看不出來，設計師也滿意（畢竟不用多做一張圖！）；
2.小屏適當去掉一些元素，例如一些翻頁提示，一些多余圖標，可以讓優雅降級，把它們 display:none掉。

有以上幾步，基本就能兼容大部分機器了。兼容一直是個苦活，但是這是前端必修課，多練就會發覺其實也沒有那么難嘛。

（4）交互提示
前面說了，加了音效就要加上音樂切換開關的按鈕，不然會被用戶罵死。還有其他，例如如果你的頁面不能兼容橫屏，請監聽橫屏狀態，然后加上適當的橫屏提示。
例如：

// 橫屏監聽
var updateOrientation = function(){
if(window.orientation=='-90' || window.orientation=='90'){
$('.landscape-wrap').removeClass('hide');
console.log('為了更好的體驗，請將手機/平板豎過來！');
}else{
$('.landscape-wrap').addClass('hide');
console.log('豎屏狀態');
}
};
window.onorientationchange = updateOrientation;

提示越多，界面越友好，有時候設計師會漏掉一些可能出現的頁面情況。
作為有態度的前端，請好好把關，讓用戶有好的體驗。

（5）分享接口
H5做好了，要傳播分享才能展示你的牛逼轟轟。
然而分享其實是個坑，分享到微信、手Q等都有各種問題。

A.微信
舊微信會使用WeixinJSBridge來聲明分享的縮略圖、標題、正文等，比較方便。例如：

而最新的微信提供了新的微信SDK，需要在公眾賬號綁定所屬域名之后調用SDK作分享，可以說分享功能會更加強大，坑也會更加少。

B.手Q
手Q支持聲明meta標簽的的分享方式，例如：

而若在qq.com域名下也支持api的定義方式。

C.一般化分享
在默認兼容舊版微信、手Q或者各種瀏覽器，平臺，可以用這樣的方法：
寫h1做標題，p做內容，img做縮略圖，只需要把h1隱藏掉就好，這里的縮略圖最好要大于200x200px。

例如：

當然，這樣也有利于搜索引擎拉取信息。

分享的坑還有更多，例如不同瀏覽器例如QQ瀏覽器、Chrome也會有自己的默認拉取方式（部分截圖作縮略圖），需要多加測試優化。

（5）SEO搜索引擎優化
SEO（搜索引擎優化）的基本做法是把頁面結構寫好，這包括：

1.定義精確的網頁標題。你的標題應該有概括性，能明確告知搜索引擎和用戶你的網站大概內容和目的，可以是當前頁面標題-所屬類型-產品名，例如“全民來猜歌-年費黃鉆-QQ空間”。

2.針對頁面內容補充description和keywords的meta標簽。你需要簡短總結頁面的主要目標，然后補充description，以及根據關鍵詞補充keywords。

3.優化你的超鏈接和圖片。包括優化超鏈接顯示的文本，要具有語義性也要跟超鏈接的網頁具有相關性，例如“空間主頁”就不要鏈接到“www.qq.com”。同時，要補充”title”和”alt”屬性，例如“”。

4.建立良好的網站導航和sitemap。網站需要有一個良好的導航，控制根目錄和各子目錄的關鍵，通過sitemap可以幫助網站主了解網站結構，也方便搜索引擎收錄整個站點。

5.優化目錄結構和URL。你的URL應該有語義性，簡短易懂，例如http://www.apple.com/macbook-air/，而且每一層級都要有它對應的頁面展示以及語義。

6.善用h1-h6的標題結構樹。合理的標題可以強調文字，也能讓搜索引擎更加了解到各標題的重要性，因此建立良好的標題樹十分有意義。

7.不斷致力于提供優質的內容。社交化分享是網站曝光最快的因素，因此不斷提供了優質原創內容才能真正提高你的網站曝光權重。

（6）無障礙

無障礙的普及是一件好事，這讓互聯網真正地為所有人可用。因此我們也應該為之而努力，無障礙的根基是你頁面強壯的語義性和結構性，具體可以參考《騰訊網無障礙說明》了解無障礙的優化手段。

最后，羅嗦了這么多，只是我自己的一些小經驗，請輕拍磚，多交流。

原文鏈接: 騰迅ISUX

玩轉HTML5移動頁面（動效篇）

sj33cn — Tue, 28 Apr 2015 10:47:20 +0000

作為一名前端，在拿到設計稿時你有兩種選擇：

1.快速輸出靜態頁面

2.加上高級大氣上檔次狂拽炫酷屌炸天的動畫讓頁面動起來

作為一個有志向的前端，當然是選2啦！可是需求時間又很短很短，怎么辦呢？

這次就來談談一些動畫設計的小技巧，能在你時間不多又沒有動畫想法的時候瞬間讓頁面增色不少。

同時也會談及移動端H5頁面的優化細節與關鍵點，因此本文章將分為動效篇和優化篇。

====前方高能====

（1） CSS3時序錯開漸顯動畫

這是一種比較常用的動畫，它的優點是節奏感強，做法就是先讓每個元素隱藏，然后當頁面呈現后每個元素錯開時間出現。

例子（忽略兼容前綴和無關屬性）：

效果就是兩個元素分別從上面掉下來，這里有個小細節（keyframes），為了讓掉下來的動畫生動點，應該是在90%的時候先掉下一點點，然后瞬間在100%時回跳5px。

還有個細節，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是漸變動畫不能停止在最后一幀。有這樣一個解決方案：

1.用Modernizr去檢測是否支持這個屬性，加上識別類.no-animation-fill-mode；

2.根據識別類采取以下措施：
（1）用js模擬同樣效果；
（2）用css屏蔽掉動畫；
（3）或者直接全部都用transition來做（不要keyframes）。

示例頁面如下（查看DEMO）：

（2） CSS3細節強調動畫

一些局部細節如果還是漸現顯示，會枯燥沒什么感覺，例如標題、按鈕等，需要一種強調。

分兩種情況：

1.如果時間允許的話，基本做法是先把一個元素切成不同的塊狀，例如小人的手腳都切成不同圖片，然后讓它們重新組合，再通過賦予不同的CSS動畫來讓它生動起來，這里引用個webank的例子：

（查看DEMO）

2.如果時間緊湊，又不像桑尼一樣擅長于動畫細節，可以使用一些輔助工具：

Animate.css，通過直接預覽選擇想要的動效，然后下載它的CSS把對應的keyframe扒下來就好了（引用整個CSS是資源浪費）。

（3）SVG動畫

SVG技術越來越不陌生，使用門檻也漸漸降低，而且SVG動畫還可以使用CSS控制。

先看個生日頁面，是個SVG的蛋糕：

（查看DEMO）

可見SVG是很強大的！彌補了CSS3的不足。

然而這種動畫也是略耗時，但有一種比較常用的，就是線條的描繪動畫，CSS3比較難實現，這里可以用SVG，看圖：

介紹一個PS插件svgArtisan（目前還未有主頁），這個工具可以直接根據PSD的路徑圖層生成SVG圖形。

接下來就簡單了，將設計稿上的路徑圖形用插件生成對應的SVG，例如是這樣的：

（注意，其中的foreignObject標簽內是不支持svg的瀏覽器會看到一張.m3-svg-nosupport標簽下的圖片。）

再使用CSS3的animation控制stroke-dashoffset：

效果不難吧！SVG還有各種用途，例如制作ICONFONT等，可以深入挖掘。

（4）重力陀螺儀

想讓頁面更有層次感，不妨讓設計提供一些碎片元素，例如彩花，星星之類，然后把它們單獨切出來放畫面前景，使用陀螺儀伴隨著手機運動碎片也跟著運動，多么好玩！

這里提供一個工具可以輕松實現陀螺儀重力效果的：parallax.js

用法簡單，定義一個parallax-obj的父類，把需要動的元素加上layer的類，然后設置動的范圍data-depth：

（5）背景音樂&音效

H5頁面要炫酷，畫面生動還是不夠的，一定要配合生動的音樂。因此可以主動跟設計或產品溝通，讓他們可以提供音樂資源，分分鐘導致UV猛漲有木有！

當然，有了音樂，前端也不是直接引用的，還是有點要求：

1.音樂不宜過長，30s為佳，而且音樂要加上漸現漸隱效果，方便循環播放；

2.音樂體積要小，音質和流量，在手機上還是優先考慮流量吧。

一般背景音樂體積可以接受的范圍是200K以下，若太大，可以使用格式工廠等軟件，降低它的比特率和聲道來改變體積。

接著，只需要簡單引用：

這里有個問題，IOS是不能自動播放音樂的，一定要觸發一個用戶交互事件，例如點擊。

但是有一種hack的方法可以讓IOS微信側頁面自動播放（SAFARI依舊無效）：

通過new一張圖片，監聽一張圖片的onload事件，結束后回調執行音頻播放audio.play()即可，原理估計是動了dom結構，相當于執行了一次交互。（有人也用過createEvent模擬，原理也是動了dom。）

因此，記得暴露一個音樂關閉/打開的按鈕，不然肯定被用戶罵死。

（6）有趣的loading

Loading頁還是要有的，萬一用戶網速慢呢？

以上做了那么多事，如果沒有資源加載都是玩不來的，因此還需要一個loading的支持。一般情況下頁面體積大于3m則要加上loading頁。

然而loading還是可以做得很有趣的，一般的做法是：

1.引入品牌，例如APP宣傳頁；

2.引入有趣動畫，放一個賤賤的人物跳舞給你看；

3.一切從簡，用CSS3簡單動畫。

====最后總結====

最后，給一個例子結尾吧。

這是空間5.0預約頁第二版，使用了以上的若干方法論，例如loading動畫，CSS3動畫，SVG星空連線，首屏星球重力感應，音樂（這里使用開啟按鈕后播放）等等。

（由于活動已結束，很多運營處都被刪掉從簡了，忽略那些細節）

（查看DEMO）

當然，真正要做到高效制作動態H5頁面，還是靠積累，因此平時做好的細節動畫自己都積累起來，下次分分鐘就能用得上。

原文鏈接:騰訊ISUX

讓人過目不忘的H5頁面

sj33cn — Tue, 17 Mar 2015 06:22:27 +0000

從引爆朋友圈的H5小游戲《圍住神經貓》，到顛覆傳統廣告的大眾點評H5專題頁《我們之間只有一個字》，從2014下半年起，各種H5游戲和專題頁紛紛嶄露頭角。“H5”，這個由HTML5簡化而來的詞匯，借由微信這個移動社交平臺，正在走進更多人的視野。本文聚焦于基于微信傳播的H5頁面的視覺設計，通過一些案例分析來談談設計思路與方法，希望與大家進行交流探討。

功能與目標

首先從功能與設計目標來看， H5專題頁主要有以下4大類型：

1.活動運營型

為活動推廣運營而打造的H5頁面是最常見的類型，形式多變，包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態廣告圖片傳播不同，如今的H5活動運營頁需要有更強的互動、更高質量、更具話題性的設計來促成用戶分享傳播。從進入微信H5頁面到最后落地到品牌App內部，如何設計一套合適的引流路線也頗為重要。

大眾點評為電影《狂怒》設計的推廣頁便深諳此道。復古擬物風格的視覺設計讓人眼前一亮，富有質感的舊票根、忽閃的霓虹燈，配以幽默的動畫與音效，恨不得每個選項都點一遍。圍繞“選擇”這個品牌關鍵詞，用引人入勝的測試題讓用戶把人生當作大片來選擇，選到最后一題引出“大眾點評選座看電影”，一鍵直達App購票頁面。即使明知是軟文也忍不住帶著“矮油不錯，這個頁面有點diao噢”的心情點擊了分享。

2.品牌宣傳型

不同于講究時效性的活動運營頁，品牌宣傳型H5頁面等同于一個品牌的微官網，更傾向于品牌形象塑造，向用戶傳達品牌的精神態度。在設計上需要運用符合品牌氣質的視覺語言，讓用戶對品牌留下深刻印象。

伴隨著浪漫的鋼琴旋律，《首草先生的情書》以一位男士的口吻娓娓道來在成長歷程中對妻子的愛與愧疚，最后引出“首草——滋陰圣品，愛妻首選”的宣傳語。設計上采用回憶般的黑白色調，簡單的照片加文字，配以花瓣掉落、水面漣漪等輕動畫，渲染出唯美優雅的氣氛。“首草”這個全新的高端養生草藥品牌，用H5打出了一副走心的情感牌，讓用戶記住了“半生只為你”的愛妻品牌形象。

3.產品介紹型

聚焦于產品功能介紹，運用H5的互動技術優勢盡情展示產品特性，吸引用戶買買買。

這一類型的H5頁面多見于汽車品牌，LEXUS NX是其中的優秀代表案例。精致和極富質感的建模、細膩的光效營造出酷炫的視覺風格。用手指跟隨光的軌跡切割畫面揭開序幕，通過合理優雅的觸碰、摩擦、滑動等互動形式帶領用戶一同探索產品的7大特性，宏觀和微觀都照顧周全。

4.總結報告型

自從支付寶的十年賬單引發熱議后，各大企業的年終總結現也熱衷于用H5技術實現，優秀的互動體驗令原本乏味的總結報告有趣生動了起來。

《京東的十大任性》用10張橫屏頁面講述了京東在2014年的十大成就，視覺設計上采用簡潔的扁平風插畫，加入紙面質感形成復古卡片拼貼感。不同頁面間通過手指滑動實現流暢的視差滾動效果，最后還有劉總這個小彩蛋。一口氣看完后大概就了解2014年京東都干了哪些大事。

二．形式為功能服務

在確定了專題頁的功能目標之后，接下來就是關鍵的設計階段了。如何有的放矢地進行設計，需要考慮到具體的應用場景和傳播對象，從用戶角度出發去思考什么樣的頁面是用戶最想看的最會去分享的。以下列舉幾種常見的H5專題頁表現形式：

1.簡單圖文

簡單圖文是早期最典型的H5專題頁形式。“圖”的形式千變萬化，可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作，起到類似幻燈片的傳播效果。考驗的是高質量的內容本身和講故事的能力。

滴滴打車這個案例就是典型的簡單圖文型H5專題頁，用幾張照片故事串起了整套頁面。視覺簡潔有力，采用整屏黑白照片，點綴以滴滴的品牌橙色。每切換一張圖片，文字就漸隱浮現，沒有其他互動形式，讓觀眾聚焦于內容，通過陌生人之間的真情聯系來塑造品牌的正能量形象。

也有不甘平淡的精彩案例。在除夕夜全國人民瘋狂搶紅包的時刻，微信推出了《從此看盡中國人的名與利》這樣一個專題頁。第一眼就被鎮住了，好親切的RMB~每個頁面都是一張人民幣風景局部放大圖，創作者加入巧妙的創意元素與微動態進行細膩刻畫，帶觀眾走進了人民幣的微觀世界。每一張鈔票圖案配合發人深省的文案，在推廣微信紅包的同時呼吁人們重新審視人情與名利的奧義。

2.禮物/賀卡/邀請函

每個人都喜歡收到禮物的感覺，抓住這一心理，品牌推出了各種H5形式的禮物、賀卡、邀請函，通過提升用戶好感度來潛移默化地達到品牌宣傳的目的。既然是禮物，那創意和制作便是重要的加分項。

AKQA創意營銷公司在圣誕之際獻上了一份厚禮——夢幻水晶球。通過移動手機，鏡頭從水晶球外不斷搖晃推近，漸漸走進水晶球的微觀世界里。通過手機環顧四周，可以360度欣賞水晶球里的全景，搖一搖雪花便漫天飄灑。寫下你的祝福并分享給朋友，相信一定會驚艷到對方。這個H5頁面使用了重力感應、3D等技術，文字與BGM的使用也十分講究，給用戶帶來了完美的互動體驗，值得細細品味。

Evernote在過年期間也別出心裁地推出語音賀卡，通過公眾號引導用戶對其發送一條語音消息，然后把這條祝福語音結合中國風動畫做成一張獨一無二的語音賀卡發送給朋友。整體色調也是以Evernote品牌色為主，同時蘊含著一絲優雅的年味，十分討巧。

3.問答/評分/測試

問答形式的H5頁面也屢見不鮮了，利用用戶的求知欲和探索欲，一路選選選，看最后到底是什么成績。一條清晰的線索是必要的，最后到達的結果頁也需要合理不突兀，如果能輔以出彩的視覺和文案，弱化答題的枯燥感那就再好不過了。

與本文開頭一樣也是大眾點評的項目，這次是為姜文的電影《一步之遙》做持續推廣，讓用戶為姜文的代表作評分。視覺設計依舊出彩，開腦洞的創意和動畫設計令人叫絕（一定要掃一掃體驗下！）。延續了懷舊大字報風格，字體、文案、裝飾元素等細節處理也十分用心。問答形式的H5頁面能做到這個份上也是蠻拼的。

4.游戲

從 “圍住神經貓”、“看你有多色”等單純小游戲再到杜蕾斯“一夜N次郎”（即山寨版“別踩白塊兒”）等品牌植入式小游戲，H5游戲因為操作簡單、競技性強，一度風靡朋友圈，但創意缺乏和同質化現象導致用戶對無腦小游戲逐漸產生了厭倦。品牌要在游戲上做到成功傳播，需要在玩法和設計上多下點功夫。

Same在圣誕節推出了一款名為《圣誕老人拯救計劃》的H5小游戲，操作非常簡單，只需用手指交替上滑，把角色的脖子向上拉到無限長，游戲會記錄你拉的最高距離，跟朋友比一比誰比較長。界面清新可愛，與Same的招牌畫風一致，游戲角色也是Same的品牌角色，通過幽默惡搞的游戲向用戶傳達Same獨到有趣的產品文化。

三．為設計加分的4個要點

一個H5頁面設計品質的出眾與否，會直接影響其傳播效果，甚至影響到用戶對品牌形象的認知。在這里總結出以下的設計要點：

1.細節與統一

要成就高品質的用戶體驗，必須考慮到細節與整體的統一性。復古擬物的視覺風格，那字體就不能過于現代；幽默調侃的調調，那文案措辭就不能過于嚴肅；打情感內容牌的，動效就不能過于花哨。

大眾點評姜文電影推廣系列的《九步之遙》H5專題頁便牢牢抓住了這一點。從二維碼入口到性感的loading頁，再到最后分享提示的設計，包括文案措辭和背景音效，無不與整體的戲虐風保持一致，給到用戶一個完整統一的互動體驗。

尤其關注“分享提示”這個細節設計，比起一個簡單的箭頭和一句冷冰冰的“點這里分享”，用心的細節設計帶來的高品質和好感度是顯而易見的。再貼幾個精彩案例：

2.緊跟熱點，利用話題效應

想要你的H5專題頁一夜爆紅，第一時間抓住熱點并火速上線，借機進行品牌宣傳也不失為一條捷徑。

天天P圖抓住武則天熱播的契機推出了風靡海內外的媚娘妝，同時《全民COS武媚娘》的H5互動頁也第一時間上線，操作簡單易上手，一鍵上傳照片就能立刻完成媚娘妝，與萬千媚娘們進行PK，娛樂了大眾又推廣了產品。

網易娛樂在武媚娘剪胸風波的風口浪尖上推出了名為《神還原武媚娘被剪胸真相》的H5專題頁，放下節操用極富想象力的粗曠草圖風向廣大觀眾“還原”了真相。一時間被瘋狂轉發，網易娛樂也算是順勢自我宣傳了一把。

3.講個好故事，引發情感共鳴

不論H5的形式如何多變，有價值的內容始終是第一位的。在有限的篇幅里，學會講故事，引發用戶的情感共鳴，將對內容的傳播形成極大的推動。

LEVI’S新年優惠活動專題頁以第一人稱的口吻，用小時候簡樸卻熱鬧的新年與長大后富足卻乏味的新年做對比，用手繪風渲染出親切的懷舊氛圍。最后引出“這個新年，把壓力和束縛打包扔掉，用新鮮的眼光感受生活，一起活出趣”的品牌推廣slogan，代入感極強的故事無疑是驅動分享的源動力。

4.合理運用技術，打造流暢的互動體驗

隨著技術的發展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實現繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動效果。（有興趣的話可以點擊這個網站 http://fff.cmiscm.com/幾乎有所有H5動態效果的展示）。相較于塞入各種不同種類的動效導致頁面混亂臃腫，我們更提倡的是合理運用技術，用心專注于為用戶提供流暢的互動體驗。

典型的案例是淘寶在雙12推出的預售推廣H5專題頁。在瀏覽過程中我只使用了一種向上滑動的手勢，而頁面呈現出來的效果卻猶如一個流暢的動態GIF。設計師巧妙利用圖形設計與組合，在滑動過程中營造出一種豐富的視差滾動效果，單個圖形元素的遮罩、旋轉與整體頁面的動勢配合極為默契。

結語

隨著手機硬件的升級、HTML5技術的發展以及微信平臺的開放，HTML5的跨平臺、低成本、快迭代等優勢被進一步凸顯，這對身處于移動互聯網大潮的企業主、品牌、設計師和開發者來說，都將是一個最好的時代。未來必將涌現更多優秀的H5頁面，讓我們拭目以待。

26個HTML5網站設計欣賞

sj33cn — Tue, 03 Feb 2015 06:13:54 +0000

又色又爽又黄的视频女女,国产美女在线精品免费观看网址,免费国产黄网站在线看

玩轉HTML5移動頁面（優化篇）

玩轉HTML5移動頁面（動效篇）

讓人過目不忘的H5頁面

功能與目標

1.活動運營型

2.品牌宣傳型

3.產品介紹型

4.總結報告型

二．形式為功能服務

1.簡單圖文

2.禮物/賀卡/邀請函

3.問答/評分/測試

4.游戲

三．為設計加分的4個要點

1.細節與統一

2.緊跟熱點，利用話題效應

3.講個好故事，引發情感共鳴

4.合理運用技術，打造流暢的互動體驗

結語

26個HTML5網站設計欣賞

Trippeo

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 Stephen Hawking Effect

Bticino consumer

La Maison Tanguay

Vi som har solgt

Keroth

engine of our regional economy

Stoyan Kutsev Art Projects

DUO!h3>

ROI·DNA

YARA’N’YARED

surpris.es

We Are Zaion

20個漂亮的HTML5網站設計

25個HTML5-CSS3網站設計欣賞

36個國外HTML5-CSS3網頁設計欣賞

25個HTML5網站設計欣賞

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

Pitch & Smith Swedenc

Premium icons

The Few and Far Between

Plus Minus

KUTIKAI

Deja Vu

Celebrating 40th together

Vizio Slam Dunk Poetry

G-Star RAW

Return to Hope

MY STORIES

Paulig Presidentti 3D

40個漂亮的HTML5網站欣賞

27個創意HTML5演示和體驗

Motion graphic typeface

3D Grapher – Launch

Google I/O 2013 Experiment