手機網(wǎng)頁也Fashion——HTML5交互亮點解析

0 評論 3650 瀏覽 1 收藏 9 分鐘

白底黑字,只有鏈接是藍(lán)色的;段落隔行只能用十個“–”來默默的表現(xiàn);圖片都小小的,沒有邊框沒有細(xì)節(jié),每逢圖片旁邊都戳著三個小小的字寫著:“看大圖”,而在用戶心里這三個字基本約等于“費流量”;“面包屑”已經(jīng)是很洋氣的術(shù)語,代表著頁面之間的層級關(guān)系和來龍去脈;3個點擊以后的頁面流量都不需要再care,因為少得可憐;沒有真正意義上的tab選項卡,沒有局部刷新,沒有質(zhì)感的控件,一切從簡。–這聽起來仿佛已經(jīng)是上個世紀(jì)的回憶,然而改變這一切的HTML5其實誕生不過才幾年前的事。

如果不太了解的童鞋要具體的問什么是HTML5,自己去搜搜吧。簡單的說它可以被俠義的理解為是HTML4的升級版本,廣義的理解上它是一套新的web系統(tǒng),由HTML5\CSS3\JS組成,這一組合可以讓手機端的web網(wǎng)站通過支持HTML5協(xié)議的瀏覽器實現(xiàn)和電腦端網(wǎng)頁幾近相似的展示與交互效果,甚至是超越電腦端的無限可能。

以手機QQ空間Wap版的幾個版本來簡單標(biāo)識一下,手機網(wǎng)頁發(fā)展的幾個進程:

 

以上兩個版本都是手機網(wǎng)站最初的普遍的樣子,為適配大部分的JAVA、MTK、Symbian手機系統(tǒng)瀏覽器而生,用戶訪問網(wǎng)頁時通過手機鍵盤上下左右按鍵甚至是數(shù)字鍵來移動“光標(biāo)”和頁面,用手機鍵盤的確認(rèn)鍵進行點擊。

【正在內(nèi)測中的新“觸屏版”】

跟普通版、3G版相比,觸屏版打破爪機網(wǎng)頁傳統(tǒng)體現(xiàn)出的不同特征一目了然,無需贅言。

相比電腦端網(wǎng)頁,HTML5所提供的特性對于手機端網(wǎng)頁的意義或許更為重大,它讓手機端web的表現(xiàn)徹底拋棄了簡陋的外衣披上了華服:

特性1 – Canvas :用于在網(wǎng)頁上繪制圖形,類似于flash在網(wǎng)頁中的作用,可編寫動畫、嵌入音視頻等。

目前網(wǎng)站上最常用到的Canvas動畫就是loading時不停轉(zhuǎn)動的daisy(俗稱,菊花…),Google+、twitter把這顆菊花修飾的很細(xì)致很漂亮,以及導(dǎo)航欄的交互設(shè)計等,精巧的搭配提升了整體的設(shè)計感與精細(xì)度,深得“細(xì)節(jié)控”高端用戶者的喜愛。

此外,利用Canvas實現(xiàn)的涂鴉功能也為人所熟知,現(xiàn)在在電腦上用鼠標(biāo)隨手繪圖已經(jīng)不新鮮,在手機上用手指當(dāng)畫筆,隨意畫圖并即時上傳發(fā)布與好友share你的繪畫才能,仿佛才是正經(jīng)事。(嘿……)

特性2-地理位置服務(wù):通過向瀏覽器請求,獲取GPS、WiFi熱點等方式定位用戶當(dāng)前地理位置。

有了HTML5,定位服務(wù)將不再是客戶端app的特有屬性,這一特性也將讓手機網(wǎng)頁用戶的分享變得更加輕松和清晰。圍繞LBS服務(wù)擴散看來的社交及商務(wù)需求已經(jīng)有了鋪天蓋地的各種實驗,對我和我的朋友來說它的意義可能更簡單一些:身邊的朋友們常常一會兒飛這,一會到那,一會兒在吃大餐,一會在party聚會,分享的信息中用地理位置“釘”一下就可以省去一段文字的描述,發(fā)條帶地理位置微博或者說說告訴你,嗨,我在這兒,來找我吧,已經(jīng)成了我們的習(xí)慣。如果在地圖展示功能上可以標(biāo)出朋友與我之間的距離與路線就更加方便了,期待這個功能。

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

聽起來好像沒什么特別的,但不妨設(shè)想一下哪天你靈感大爆發(fā)突然想寫點東西比如發(fā)篇日志什么的,在網(wǎng)絡(luò)條件不好的情況下,這一特性或許正為你所需要。我常常這樣:在路上看到一段話或聽到幾句歌詞,心里面感觸翻江倒海霎那間靈感如泉涌,想寫點什么,但心想,呆會兒回去再組織語言吧。等回到家打開電腦打開界面,腦子里卻一片空白。(呆……)當(dāng)然更常體會的是等人等車又沒有wifi的時候,刷微博刷好友動態(tài)時的痛苦。我十分非常特別討厭等……鑒于以上無聊卻又時常發(fā)生的場景需求,離線讀寫是必要性的。沒網(wǎng)絡(luò)時我先打開網(wǎng)頁寫寫,有了網(wǎng)絡(luò)時提醒一下我,確定,發(fā)送。在辦公室有wifi的的時候先幫我加載一些信息,讓我在回家路上即使是2G網(wǎng)絡(luò)或是沒有網(wǎng)絡(luò)的情況下我還可以快速的看到我的好友之前都說了些什么,這就足夠了。

特性4-音視頻播放:不用插件和flash,原生支持音視頻播放,自帶默認(rèn)播放控制器。

在此之前手機網(wǎng)站無法實現(xiàn)信息流中視頻內(nèi)容播放的,所以我要看好友分享的視頻都只能去電腦端的Qzone、人人上去看,但上班時間打開一個視頻的心里壓力是很大的,你們都懂……

什么視頻編碼之類的技術(shù)層面的事用戶并不在乎,有了這個HTML5特性,對用戶來說就是表示手機網(wǎng)頁上也可以播視頻了。在目前少數(shù)已經(jīng)實現(xiàn)該特性的網(wǎng)站上體驗來看,視頻播放起來還有些許不流暢,但技術(shù)革新是早晚的事,建議相關(guān)產(chǎn)品經(jīng)理考慮一下讓用戶可以一邊等著load視頻,一邊還可以刷動態(tài),不耽誤時間的體驗比較有愛。

【目前手機網(wǎng)頁上播放視頻的體驗還有待改善】

以上列舉了目前較為被關(guān)注的幾個HTML5特性表現(xiàn)和我對它們淺顯的認(rèn)知,分享給對HTML5感興趣的人還有不太了解HTML5是什么的童鞋。HTML5新特性中其實還有很多比如語義化標(biāo)簽、新表單元素、Communication API、Web Workers API、Web Storage API……值得研究和探討(HTML5最終版計劃在十年后發(fā)布…路漫漫其修遠(yuǎn)兮…)。另外就頁面表現(xiàn)形式上來看,CSS3+JS能幫助實現(xiàn)各種樣式豐富到華麗美好的交互方案,是可以給到用戶更加直觀更加立體的感知表現(xiàn),這一點也會在即將發(fā)布的手機QQ空間全新觸屏版產(chǎn)品中有所體現(xiàn),小小的期待一下。

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

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