白底黑字，只有鏈接是藍(lán)色的；段落隔行只能用十個(gè)“–”來(lái)默默的表現(xiàn)；圖片都小小的，沒(méi)有邊框沒(méi)有細(xì)節(jié)，每逢圖片旁邊都戳著三個(gè)小小的字寫(xiě)著：“看大圖”，而在用戶心里這三個(gè)字基本約等于“費(fèi)流量”；“面包屑”已經(jīng)是很洋氣的術(shù)語(yǔ)，代表著頁(yè)面之間的層級(jí)關(guān)系和來(lái)龍去脈；3個(gè)點(diǎn)擊以后的頁(yè)面流量都不需要再care，因?yàn)樯俚每蓱z；沒(méi)有真正意義上的tab選項(xiàng)卡，沒(méi)有局部刷新，沒(méi)有質(zhì)感的控件，一切從簡(jiǎn)。–這聽(tīng)起來(lái)仿佛已經(jīng)是上個(gè)世紀(jì)的回憶，然而改變這一切的HTML5其實(shí)誕生不過(guò)才幾年前的事。
如果不太了解的童鞋要具體的問(wèn)什么是HTML5，自己去搜搜吧。簡(jiǎn)單的說(shuō)它可以被俠義的理解為是HTML4的升級(jí)版本，廣義的理解上它是一套新的web系統(tǒng)，由HTML5\CSS3\JS組成，這一組合可以讓手機(jī)端的web網(wǎng)站通過(guò)支持HTML5協(xié)議的瀏覽器實(shí)現(xiàn)和電腦端網(wǎng)頁(yè)幾近相似的展示與交互效果，甚至是超越電腦端的無(wú)限可能。
以手機(jī)QQ空間Wap版的幾個(gè)版本來(lái)簡(jiǎn)單標(biāo)識(shí)一下，手機(jī)網(wǎng)頁(yè)發(fā)展的幾個(gè)進(jìn)程：
以上兩個(gè)版本都是手機(jī)網(wǎng)站最初的普遍的樣子，為適配大部分的JAVA、MTK、Symbian手機(jī)系統(tǒng)瀏覽器而生，用戶訪問(wèn)網(wǎng)頁(yè)時(shí)通過(guò)手機(jī)鍵盤(pán)上下左右按鍵甚至是數(shù)字鍵來(lái)移動(dòng)“光標(biāo)”和頁(yè)面，用手機(jī)鍵盤(pán)的確認(rèn)鍵進(jìn)行點(diǎn)擊。
【正在內(nèi)測(cè)中的新“觸屏版”】
跟普通版、3G版相比，觸屏版打破爪機(jī)網(wǎng)頁(yè)傳統(tǒng)體現(xiàn)出的不同特征一目了然，無(wú)需贅言。
相比電腦端網(wǎng)頁(yè)，HTML5所提供的特性對(duì)于手機(jī)端網(wǎng)頁(yè)的意義或許更為重大，它讓手機(jī)端web的表現(xiàn)徹底拋棄了簡(jiǎn)陋的外衣披上了華服：
特性1 – Canvas ：用于在網(wǎng)頁(yè)上繪制圖形，類似于flash在網(wǎng)頁(yè)中的作用，可編寫(xiě)動(dòng)畫(huà)、嵌入音視頻等。
目前網(wǎng)站上最常用到的Canvas動(dòng)畫(huà)就是loading時(shí)不停轉(zhuǎn)動(dòng)的daisy（俗稱，菊花…），Google+、twitter把這顆菊花修飾的很細(xì)致很漂亮，以及導(dǎo)航欄的交互設(shè)計(jì)等，精巧的搭配提升了整體的設(shè)計(jì)感與精細(xì)度，深得“細(xì)節(jié)控”高端用戶者的喜愛(ài)。
此外，利用Canvas實(shí)現(xiàn)的涂鴉功能也為人所熟知，現(xiàn)在在電腦上用鼠標(biāo)隨手繪圖已經(jīng)不新鮮，在手機(jī)上用手指當(dāng)畫(huà)筆，隨意畫(huà)圖并即時(shí)上傳發(fā)布與好友share你的繪畫(huà)才能，仿佛才是正經(jīng)事。（嘿……）
特性2-地理位置服務(wù)：通過(guò)向?yàn)g覽器請(qǐng)求，獲取GPS、WiFi熱點(diǎn)等方式定位用戶當(dāng)前地理位置。
有了HTML5，定位服務(wù)將不再是客戶端app的特有屬性，這一特性也將讓手機(jī)網(wǎng)頁(yè)用戶的分享變得更加輕松和清晰。圍繞LBS服務(wù)擴(kuò)散看來(lái)的社交及商務(wù)需求已經(jīng)有了鋪天蓋地的各種實(shí)驗(yàn)，對(duì)我和我的朋友來(lái)說(shuō)它的意義可能更簡(jiǎn)單一些：身邊的朋友們常常一會(huì)兒飛這，一會(huì)到那，一會(huì)兒在吃大餐，一會(huì)在party聚會(huì)，分享的信息中用地理位置“釘”一下就可以省去一段文字的描述，發(fā)條帶地理位置微博或者說(shuō)說(shuō)告訴你，嗨，我在這兒，來(lái)找我吧，已經(jīng)成了我們的習(xí)慣。如果在地圖展示功能上可以標(biāo)出朋友與我之間的距離與路線就更加方便了，期待這個(gè)功能。
特性3-離線運(yùn)用：使web程序也能像客戶端程序般在無(wú)網(wǎng)絡(luò)情況下運(yùn)行部分功能。
聽(tīng)起來(lái)好像沒(méi)什么特別的，但不妨設(shè)想一下哪天你靈感大爆發(fā)突然想寫(xiě)點(diǎn)東西比如發(fā)篇日志什么的，在網(wǎng)絡(luò)條件不好的情況下，這一特性或許正為你所需要。我常常這樣：在路上看到一段話或聽(tīng)到幾句歌詞，心里面感觸翻江倒海霎那間靈感如泉涌，想寫(xiě)點(diǎn)什么，但心想，呆會(huì)兒回去再組織語(yǔ)言吧。等回到家打開(kāi)電腦打開(kāi)界面，腦子里卻一片空白。（呆……）當(dāng)然更常體會(huì)的是等人等車(chē)又沒(méi)有wifi的時(shí)候，刷微博刷好友動(dòng)態(tài)時(shí)的痛苦。我十分非常特別討厭等……鑒于以上無(wú)聊卻又時(shí)常發(fā)生的場(chǎng)景需求，離線讀寫(xiě)是必要性的。沒(méi)網(wǎng)絡(luò)時(shí)我先打開(kāi)網(wǎng)頁(yè)寫(xiě)寫(xiě)，有了網(wǎng)絡(luò)時(shí)提醒一下我，確定，發(fā)送。在辦公室有wifi的的時(shí)候先幫我加載一些信息，讓我在回家路上即使是2G網(wǎng)絡(luò)或是沒(méi)有網(wǎng)絡(luò)的情況下我還可以快速的看到我的好友之前都說(shuō)了些什么，這就足夠了。
特性4-音視頻播放：不用插件和flash，原生支持音視頻播放，自帶默認(rèn)播放控制器。
在此之前手機(jī)網(wǎng)站無(wú)法實(shí)現(xiàn)信息流中視頻內(nèi)容播放的，所以我要看好友分享的視頻都只能去電腦端的Qzone、人人上去看，但上班時(shí)間打開(kāi)一個(gè)視頻的心里壓力是很大的，你們都懂……
什么視頻編碼之類的技術(shù)層面的事用戶并不在乎，有了這個(gè)HTML5特性，對(duì)用戶來(lái)說(shuō)就是表示手機(jī)網(wǎng)頁(yè)上也可以播視頻了。在目前少數(shù)已經(jīng)實(shí)現(xiàn)該特性的網(wǎng)站上體驗(yàn)來(lái)看，視頻播放起來(lái)還有些許不流暢，但技術(shù)革新是早晚的事，建議相關(guān)產(chǎn)品經(jīng)理考慮一下讓用戶可以一邊等著load視頻，一邊還可以刷動(dòng)態(tài)，不耽誤時(shí)間的體驗(yàn)比較有愛(ài)。
【目前手機(jī)網(wǎng)頁(yè)上播放視頻的體驗(yàn)還有待改善】
以上列舉了目前較為被關(guān)注的幾個(gè)HTML5特性表現(xiàn)和我對(duì)它們淺顯的認(rèn)知，分享給對(duì)HTML5感興趣的人還有不太了解HTML5是什么的童鞋。HTML5新特性中其實(shí)還有很多比如語(yǔ)義化標(biāo)簽、新表單元素、Communication API、Web Workers API、Web Storage API……值得研究和探討（HTML5最終版計(jì)劃在十年后發(fā)布…路漫漫其修遠(yuǎn)兮…）。另外就頁(yè)面表現(xiàn)形式上來(lái)看，CSS3+JS能幫助實(shí)現(xiàn)各種樣式豐富到華麗美好的交互方案，是可以給到用戶更加直觀更加立體的感知表現(xiàn)，這一點(diǎn)也會(huì)在即將發(fā)布的手機(jī)QQ空間全新觸屏版產(chǎn)品中有所體現(xiàn)，小小的期待一下。
聯(lián)系客服
