手機(jī)網(wǎng)頁(yè)也Fashion——HTML5交互亮點(diǎn)解析

0 評(píng)論 3650 瀏覽 1 收藏 9 分鐘

白底黑字,只有鏈接是藍(lán)色的;段落隔行只能用十個(gè)“–”來(lái)默默的表現(xiàn);圖片都小小的,沒(méi)有邊框沒(méi)有細(xì)節(jié),每逢圖片旁邊都戳著三個(gè)小小的字寫(xiě)著:“看大圖”,而在用戶(hù)心里這三個(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)瀏覽器而生,用戶(hù)訪問(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è)上繪制圖形,類(lèi)似于flash在網(wǎng)頁(yè)中的作用,可編寫(xiě)動(dòng)畫(huà)、嵌入音視頻等。

目前網(wǎng)站上最常用到的Canvas動(dòng)畫(huà)就是loading時(shí)不停轉(zhuǎn)動(dòng)的daisy(俗稱(chēng),菊花…),Google+、twitter把這顆菊花修飾的很細(xì)致很漂亮,以及導(dǎo)航欄的交互設(shè)計(jì)等,精巧的搭配提升了整體的設(shè)計(jì)感與精細(xì)度,深得“細(xì)節(jié)控”高端用戶(hù)者的喜愛(à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)等方式定位用戶(hù)當(dāng)前地理位置。

有了HTML5,定位服務(wù)將不再是客戶(hù)端app的特有屬性,這一特性也將讓手機(jī)網(wǎng)頁(yè)用戶(hù)的分享變得更加輕松和清晰。圍繞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)出朋友與我之間的距離與路線(xiàn)就更加方便了,期待這個(gè)功能。

特性3-離線(xiàn)運(yùn)用:使web程序也能像客戶(hù)端程序般在無(wú)網(wǎng)絡(luò)情況下運(yùn)行部分功能。

聽(tīng)起來(lái)好像沒(méi)什么特別的,但不妨設(shè)想一下哪天你靈感大爆發(fā)突然想寫(xiě)點(diǎn)東西比如發(fā)篇日志什么的,在網(wǎng)絡(luò)條件不好的情況下,這一特性或許正為你所需要。我常常這樣:在路上看到一段話(huà)或聽(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àn)讀寫(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è)視頻的心里壓力是很大的,你們都懂……

什么視頻編碼之類(lèi)的技術(shù)層面的事用戶(hù)并不在乎,有了這個(gè)HTML5特性,對(duì)用戶(hù)來(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)理考慮一下讓用戶(hù)可以一邊等著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)各種樣式豐富到華麗美好的交互方案,是可以給到用戶(hù)更加直觀更加立體的感知表現(xiàn),這一點(diǎn)也會(huì)在即將發(fā)布的手機(jī)QQ空間全新觸屏版產(chǎn)品中有所體現(xiàn),小小的期待一下。

感謝網(wǎng)友lavina zheng投稿

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!