承接上文《六大奇招帶你玩轉(zhuǎn)HTML5移動頁面動效》，上次說的是讓頁面動起來的一些小技巧，而頁面動起來的根基是功能可用的頁面，因此有必要分享一些優(yōu)化細(xì)節(jié)的技巧和方向，熟悉掌握一些方法論還是會對頁面開發(fā)大大提高效率的，并且也能防止疏忽缺漏 >> >

（1） 動畫雪碧圖

涉及的動畫十分多，用的元素也十分多，請務(wù)必使用雪碧圖（Sprite）！

網(wǎng)上的工具有一些可以幫助你生成雪碧圖的工具，例如CssGaga，GoPng等等，自動化構(gòu)建工具Grunt和Gulp也提供了相應(yīng)插件。

特別地，如果單張雪碧圖面積實(shí)在太大，可以拆分雪碧圖，例如拆分成2-4張，因?yàn)楝F(xiàn)代瀏覽器都支持4-6個同源請求下載，若資源實(shí)在太多，也可以考慮把靜態(tài)資源放在不同源域名下去請求，這里犧牲多幾個請求換來圖片同時加載比一張圖片慢慢加載要好，當(dāng)然，這需要具體情況去衡量。

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

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

（2） ?圖片壓縮

圖片壓縮是老生常談，但是仍然有不少人忘記壓縮，那可是活生生的帶寬和流量的浪費(fèi)啊…

壓縮圖片需要有好工具，有智圖，TinyPNG，JPEGmini等等。

依靠工具外，還有以下方式可以優(yōu)化圖片：

1.盡量避免用PNG24。如果圖片色彩要求不高，請使用PNG8；

2.使用新格式，WEBP和BPG等新格式的到來，在不用考慮兼容的情況下請大膽嘗試；

3.用SVG和ICONFONT代替簡單的圖標(biāo)；

4.用FUFU的字蛛來代替藝術(shù)字體切圖。

字蛛的介紹：《前端工程師的菜！姍姍來遲的中文Webfont（附神器推薦）》

（3）多終端兼容

多終端兼容是一切的根基，要知道有人拿著腎6+，有人拿著腎4，大則414×736，小則320×416（IPHONE4在SAFARI保留上下端導(dǎo)航），因此多終端兼容是十分必要的。

曾經(jīng)有一種派系為320派系，就是大部分頁面都是320寬度，因此干脆直接用320的容器來包一切頁面，那樣也簡單，然而iPhone 6和iPhone 6+的出現(xiàn)簡直是滅了這個派系。

那么到底要如何兼容呢？

這里我分了三個時期來說說：

A.設(shè)計(jì)初期

先審視設(shè)計(jì)稿，因?yàn)?20派系的原因，大部分設(shè)計(jì)稿只考慮到iPhone 5來設(shè)計(jì)，因此很多背景元素是只有320px寬度（頁面實(shí)際渲染寬度），例如下圖。

那么，這時候就需要設(shè)計(jì)提供一個較長的延伸背景了，最好是可以重復(fù)的，用background-repeat可以減少圖片大小。

B.設(shè)計(jì)中期

也就是具體的兼容方法，可以使用CSS3 Media Query和類覆蓋。

1.CSS3 Media Query，按范圍兼容機(jī)型。

2.類覆蓋，這種方式適合直接為小屏或大屏做整體兼容。

首先，為小屏（大屏）加一個識別類，這里小于420表示為小屏幕（IPHONE4有上下導(dǎo)航欄）：

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

C.設(shè)計(jì)后期。

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

1.大屏適當(dāng)用zoom:(倍率)或者transform:scale(倍率)來增大元素，實(shí)測失真根本看不出來，設(shè)計(jì)師也滿意（畢竟不用多做一張圖！）；

2.小屏適當(dāng)去掉一些元素，例如一些翻頁提示，一些多余圖標(biāo)，可以讓優(yōu)雅降級，把它們 display:none掉。

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

（4）交互提示

前面說了，加了音效就要加上音樂切換開關(guān)的按鈕，不然會被用戶罵死。還有其他，例如如果你的頁面不能兼容橫屏，請監(jiān)聽橫屏狀態(tài)，然后加上適當(dāng)?shù)臋M屏提示。

例如：

提示越多，界面越友好，有時候設(shè)計(jì)師會漏掉一些可能出現(xiàn)的頁面情況。

作為有態(tài)度的前端，請好好把關(guān)，讓用戶有好的體驗(yàn)。

（5）分享接口

H5做好了，要傳播分享才能展示你的牛逼轟轟。

然而分享其實(shí)是個坑，分享到微信、手Q等都有各種問題。

A.微信

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

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

B.手Q

手Q支持聲明meta標(biāo)簽的的分享方式，例如：

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

C.一般化分享

在默認(rèn)兼容舊版微信、手Q或者各種瀏覽器，平臺，可以用這樣的方法：

寫h1做標(biāo)題，p做內(nèi)容，img做縮略圖，只需要把h1隱藏掉就好，這里的縮略圖最好要大于200x200px。

例如：

當(dāng)然，這樣也有利于搜索引擎拉取信息。

分享的坑還有更多，例如不同瀏覽器例如QQ瀏覽器、Chrome也會有自己的默認(rèn)拉取方式（部分截圖作縮略圖），需要多加測試優(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.針對頁面內(nèi)容補(bǔ)充description和keywords的meta標(biāo)簽。

你需要簡短總結(jié)頁面的主要目標(biāo)，然后補(bǔ)充description，以及根據(jù)關(guān)鍵詞補(bǔ)充keywords。

3.優(yōu)化你的超鏈接和圖片。

包括優(yōu)化超鏈接顯示的文本，要具有語義性也要跟超鏈接的網(wǎng)頁具有相關(guān)性，例如“空間主頁”就不要鏈接到“www.qq.com”。同時，要補(bǔ)充”title”和”alt”屬性，例如“<img src=’images/apple.jpg’ title=’蘋果示例圖’ alt=’蘋果示例圖’ />”。

4.建立良好的網(wǎng)站導(dǎo)航和sitemap。

網(wǎng)站需要有一個良好的導(dǎo)航，控制根目錄和各子目錄的關(guān)鍵，通過sitemap可以幫助網(wǎng)站主了解網(wǎng)站結(jié)構(gòu)，也方便搜索引擎收錄整個站點(diǎn)。

5.優(yōu)化目錄結(jié)構(gòu)和URL。

你的URL應(yīng)該有語義性，簡短易懂，例如http://www.apple.com/macbook-air/，而且每一層級都要有它對應(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)，請輕拍磚，多交流。

絕對是五一出行的貼心教程】

人多多的地方如何拍出大氣感？
《五一標(biāo)配教程！如何在人多的地方拍好旅行照？》

每一個單身狗得砍頭，想愛就別怕傷痛：
《五一標(biāo)配教程單身篇！一個人旅行應(yīng)該怎樣自拍？》

單身的你奏凱！情侶的趕緊看過來！
《超實(shí)用！教你給女生拍寫真時提升顏值的幾個技巧》

原文地址：isux.tencent
作者：TQ

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量94萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：