::GAME2.TW::臺灣遊戲攻略

華語手機遊戲攻略,遊戲資訊專業網站

手機網頁也Fashion——HTML5交互亮點解析

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

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

以手機QQ空間Wap版的幾個版本來簡單標識一下,手機網頁發展的幾個進程:

 

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

【正在內測中的新“觸屏版”】

跟普通版、3G版相比,觸屏版打破爪機網頁傳統體現出的不同特徵一目了然,無需贅言。

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

特性1 – Canvas :用於在網頁上繪製圖形,類似於flash在網頁中的作用,可編寫動畫、嵌入音視頻等。

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

此外,利用Canvas實現的塗鴉功能也為人所熟知,現在在電腦上用鼠標隨手繪圖已經不新鮮,在手機上用手指當畫筆,隨意畫圖並即時上傳發布與好友share你的繪畫才能,彷彿才是正經事。 (嘿……)

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

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

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

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

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

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

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

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

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

感謝網友lavina zheng投稿

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy