讓頁(yè)面動(dòng)起來(lái)的一些小技巧。
發(fā)表日期:2015/7/20 18:17:54 文章編輯: 瀏覽次數(shù):2424
讓頁(yè)面動(dòng)起來(lái)的一些小技巧。
而頁(yè)面動(dòng)起來(lái)的根基是功能可用的頁(yè)面,因此有必要分享一些優(yōu)化細(xì)節(jié)的技巧和方向,熟悉掌握一些方法論還是會(huì)對(duì)頁(yè)面開(kāi)發(fā)大大提高效率的,并且也能防止疏忽缺漏。
====前方高能====
(1) 動(dòng)畫(huà)雪碧圖
涉及的動(dòng)畫(huà)十分多,用的元素也十分多,請(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)求換來(lái)圖片同時(shí)加載比一張圖片慢慢加載要好,當(dāng)然,這需要具體情況去衡量。
順便提一下,我寫(xiě)動(dòng)畫(huà)的一個(gè)小技巧是把每一頁(yè)的動(dòng)畫(huà)分在一個(gè)import.css里面,然后最后在主樣式中import進(jìn)去,這樣方便調(diào)試動(dòng)畫(huà),也容易維護(hù),例如:
當(dāng)然,import不是原生支持的,這里需要一些流程化工具讓import的頁(yè)面在輸出之前經(jīng)過(guò)組裝-壓縮的步驟。
(2)圖片壓縮
圖片壓縮是老生常談,但是仍然有不少人忘記壓縮,那可是活生生的帶寬和流量的浪費(fèi)啊…
壓縮圖片需要有好工具,有智圖,TinyPNG,JPEGmini等等。
依靠工具外,還有以下方式可以優(yōu)化圖片:
1.盡量避免用PNG24。如果圖片色彩要求不高,請(qǐng)使用PNG8;
2.使用新格式,WEBP和BPG等新格式的到來(lái),在不用考慮兼容的情況下請(qǐng)大膽嘗試;
3.用SVG和ICONFONT代替簡(jiǎn)單的圖標(biāo);
4.用FUFU的字蛛來(lái)代替藝術(shù)字體切圖。
(3)多終端兼容
多終端兼容是一切的根基,要知道有人拿著腎6+,有人拿著腎4,大則414×736,小則320×416(IPHONE4在SAFARI保留上下端導(dǎo)航),因此多終端兼容是十分必要的。
曾經(jīng)有一種派系為320派系,就是大部分頁(yè)面都是320寬度,因此干脆直接用320的容器來(lái)包一切頁(yè)面,那樣也簡(jiǎn)單,然而IPHOEN6和IPHONE6+的出現(xiàn)簡(jiǎn)直是滅了這個(gè)派系。
那么到底要如何兼容呢?
這里我分了三個(gè)時(shí)期來(lái)說(shuō)說(shuō):
A.設(shè)計(jì)初期。先審視設(shè)計(jì)稿,因?yàn)?20派系的原因,大部分設(shè)計(jì)稿只考慮到IPHONE5來(lái)設(shè)計(jì),因此很多背景元素是只有320px寬度(頁(yè)面實(shí)際渲染寬度),例如下圖。
那么,這時(shí)候就需要設(shè)計(jì)提供一個(gè)較長(zhǎng)的延伸背景了,最好是可以重復(fù)的,用background-repeat可以減少圖片大小。
B.設(shè)計(jì)中期。也就是具體的兼容方法,可以使用CSS3 Media Query和類覆蓋。
1.CSS3 Media Query,按范圍兼容機(jī)型。
2.類覆蓋,這種方式適合直接為小屏或大屏做整體兼容。
首先,為小屏(大屏)加一個(gè)識(shí)別類,這里小于420表示為小屏幕(IPHONE4有上下導(dǎo)航欄):
然后,對(duì)應(yīng)識(shí)別類加上要變動(dòng)的元素覆蓋,例如:
C.設(shè)計(jì)后期。這是最后一步,整體檢查和體驗(yàn),這里面會(huì)暴露一些問(wèn)題,例如元素在IPHONE6P顯得小了或者元素在IPHONE4擠不下了,可以來(lái)最后大招解決:
1.大屏適當(dāng)用zoom:(倍率)或者transform:scale(倍率)來(lái)增大元素,實(shí)測(cè)失真根本看不出來(lái),設(shè)計(jì)師也滿意(畢竟不用多做一張圖!);
2.小屏適當(dāng)去掉一些元素,例如一些翻頁(yè)提示,一些多余圖標(biāo),可以讓優(yōu)雅降級(jí),把它們 display:none掉。
有以上幾步,基本就能兼容大部分機(jī)器了。兼容一直是個(gè)苦活,但是這是前端必修課,多練就會(huì)發(fā)覺(jué)其實(shí)也沒(méi)有那么難嘛。
(4)交互提示
前面說(shuō)了,加了音效就要加上音樂(lè)切換開(kāi)關(guān)的按鈕,不然會(huì)被用戶罵死。還有其他,例如如果你的頁(yè)面不能兼容橫屏,請(qǐng)監(jiān)聽(tīng)橫屏狀態(tài),然后加上適當(dāng)?shù)臋M屏提示。
例如:
提示越多,界面越友好,有時(shí)候設(shè)計(jì)師會(huì)漏掉一些可能出現(xiàn)的頁(yè)面情況。
作為有態(tài)度的前端,請(qǐng)好好把關(guān),讓用戶有好的體驗(yàn)。
(5)分享接口
H5做好了,要傳播分享才能展示你的牛逼轟轟。
然而分享其實(shí)是個(gè)坑,分享到微信、手Q等都有各種問(wèn)題。
A.微信
舊微信會(huì)使用WeixinJSBridge來(lái)聲明分享的縮略圖、標(biāo)題、正文等,比較方便。例如:
而最新的微信提供了新的微信SDK,需要在公眾賬號(hào)綁定所屬域名之后調(diào)用SDK作分享,可以說(shuō)分享功能會(huì)更加強(qiáng)大,坑也會(huì)更加少。
B.手Q
手Q支持聲明meta標(biāo)簽的的分享方式,例如:
而若在qq.com域名下也支持api的定義方式。
C.一般化分享
在默認(rèn)兼容舊版微信、手Q或者各種瀏覽器,平臺(tái),可以用這樣的方法:
寫(xiě)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)化)的基本做法是把頁(yè)面結(jié)構(gòu)寫(xiě)好,這包括:
1.定義精確的網(wǎng)頁(yè)標(biāo)題。你的標(biāo)題應(yīng)該有概括性,能明確告知搜索引擎和用戶你的網(wǎng)站大概內(nèi)容和目的,可以是當(dāng)前頁(yè)面標(biāo)題-所屬類型-產(chǎn)品名,例如“全民來(lái)猜歌-年費(fèi)黃鉆-QQ空間”。
2.針對(duì)頁(yè)面內(nèi)容補(bǔ)充description和keywords的meta標(biāo)簽。你需要簡(jiǎn)短總結(jié)頁(yè)面的主要目標(biāo),然后補(bǔ)充description,以及根據(jù)關(guān)鍵詞補(bǔ)充keywords。
3.優(yōu)化你的超鏈接和圖片。包括優(yōu)化超鏈接顯示的文本,要具有語(yǔ)義性也要跟超鏈接的網(wǎng)頁(yè)具有相關(guān)性,例如“空間主頁(yè)”就不要鏈接到“www.qq.com”。同時(shí),要補(bǔ)充”title”和”alt”屬性,例如“
”。
4.建立良好的網(wǎng)站導(dǎo)航和sitemap。網(wǎng)站需要有一個(gè)良好的導(dǎo)航,控制根目錄和各子目錄的關(guān)鍵,通過(guò)sitemap可以幫助網(wǎng)站主了解網(wǎng)站結(jié)構(gòu),也方便搜索引擎收錄整個(gè)站點(diǎn)。
5.優(yōu)化目錄結(jié)構(gòu)和URL。你的URL應(yīng)該有語(yǔ)義性,簡(jiǎn)短易懂,例如http://www.apple.com/macbook-air/,而且每一層級(jí)都要有它對(duì)應(yīng)的頁(yè)面展示以及語(yǔ)義。
6.善用h1-h6的標(biāo)題結(jié)構(gòu)樹(shù)。合理的標(biāo)題可以強(qiáng)調(diào)文字,也能讓搜索引擎更加了解到各標(biāo)題的重要性,因此建立良好的標(biāo)題樹(shù)十分有意義。
7.不斷致力于提供優(yōu)質(zhì)的內(nèi)容。社交化分享是網(wǎng)站曝光最快的因素,因此不斷提供了優(yōu)質(zhì)原創(chuàng)內(nèi)容才能真正提高你的網(wǎng)站曝光權(quán)重。
(6)無(wú)障礙
無(wú)障礙的普及是一件好事,這讓互聯(lián)網(wǎng)真正地為所有人可用。因此我們也應(yīng)該為之而努力,無(wú)障礙的根基是你頁(yè)面強(qiáng)壯的語(yǔ)義性和結(jié)構(gòu)性,具體可以參考《騰訊網(wǎng)無(wú)障礙說(shuō)明》了解無(wú)障礙的優(yōu)化手段。
最后,羅嗦了這么多,只是我自己的一些小經(jīng)驗(yàn),請(qǐng)輕拍磚,多交流。
-
文字改變整個(gè)設(shè)計(jì)
日期:2016-08-10 瀏覽次數(shù):2866
-
簡(jiǎn)約主義的字體排版成就優(yōu)秀網(wǎng)站設(shè)計(jì)作品。
日期:2016-08-10 瀏覽次數(shù):2917
-
省時(shí)的瀏覽器同步測(cè)試神器
日期:2016-03-27 瀏覽次數(shù):2969
-
響應(yīng)式設(shè)計(jì)的方法和注意點(diǎn)
日期:2016-03-27 瀏覽次數(shù):3011
-
教你用科學(xué)計(jì)算法計(jì)算CSS3動(dòng)畫(huà)幀數(shù)
日期:2015-09-22 瀏覽次數(shù):3284
-
免費(fèi)SSL證書(shū)申請(qǐng)網(wǎng)站topssl.cn上線
日期:2024-09-23 瀏覽次數(shù):1089
-
如何在北京順義尋找一個(gè)踏實(shí)的網(wǎng)站建設(shè)公司
日期:2023-08-10 瀏覽次數(shù):4141
-
順義網(wǎng)站建設(shè):北京順義網(wǎng)站建設(shè)的優(yōu)點(diǎn)
日期:2023-05-25 瀏覽次數(shù):4565
-
選擇網(wǎng)站公司需要考慮哪些因素
日期:2023-05-25 瀏覽次數(shù):3425
-
北京模板建站
日期:2023-03-28 瀏覽次數(shù):3606
-
如何保證網(wǎng)站安全順利的運(yùn)轉(zhuǎn)
日期:2018-10-15 瀏覽次數(shù):2389
-
什么是HTTPS以及為什么要確保您的網(wǎng)站安全
日期:2018-12-06 瀏覽次數(shù):2347
-
您的網(wǎng)站真的適合移動(dòng)設(shè)備嗎
日期:2019-06-10 瀏覽次數(shù):2059
-
PHP 網(wǎng)站開(kāi)發(fā)過(guò)程
日期:2019-04-22 瀏覽次數(shù):2102
-
網(wǎng)站設(shè)計(jì)中404錯(cuò)誤的定義及要求
日期:2019-04-08 瀏覽次數(shù):2231