談談互聯(lián)網(wǎng)的發(fā)展與 HTML5 用戶體驗

隨著互聯(lián)網(wǎng)的蓬勃發(fā)展，我們已然邁入了 Web 2.0 時代。在這個時代里，用戶是主體，互聯(lián)網(wǎng)以人為本，用戶可以在網(wǎng)上發(fā)表觀點、參與互動，可以分享、聚合信息。這比多年前甚至更久以前的用戶單純從互聯(lián)網(wǎng)接收信息，有了很大的進步。由此，我們也可以看見互聯(lián)網(wǎng)的一個基本的發(fā)展趨勢，那就是被人們所用，為人們提供更好的服務和更優(yōu)的用戶體驗。在將來，隨著普適計算的推進，我們身邊的設備可能都能接入互聯(lián)網(wǎng)，與人們智能交互，互聯(lián)網(wǎng)和信息技術也會更加透明地***到人們生活的點點滴滴。

我們的生活與互聯(lián)網(wǎng)的發(fā)展息息相關

互聯(lián)網(wǎng)的發(fā)展也離不開寬帶建設和運營的發(fā)展，在北京，我們看到很多小區(qū)都已近光纖入戶，在不久的將來，光線到戶可能成為一種標準，隨小區(qū)的建設一同實施，而運營資格由各家運營商競標決定，這也是值得欣喜的。寬帶基礎設施服務也一直是IT和互聯(lián)網(wǎng)發(fā)展中的一個重要環(huán)節(jié)和有力的支撐，從十年前的電話撥號到幾年前的2Mb、4Mb ADSL，再到現(xiàn)在的10Mb、20Mb光線，用戶能享受到高速互聯(lián)網(wǎng)帶來的暢快體驗和無延遲獲取信息、參與網(wǎng)絡交互的能力。在高性能計算、高帶寬容量的互聯(lián)網(wǎng)上，云計算開始蓬勃發(fā)展，它為企業(yè)節(jié)省了購買服務器和電費以及招聘眾多IT管理人員的成本，而是以集中式的數(shù)據(jù)中心，向企業(yè)用戶提供他們所需的服務，而且這種方式的使用是可計量的，用戶用多少付多少，而且可能靈活根據(jù)當前的需求提升或者降級資源使用量。我們消費者也從基于云的服務獲益不少，例如不論過什么節(jié)假日，淘寶網(wǎng)基于云計算的服務能夠保證穩(wěn)定的運行，大家一起登錄、一起搶的時候，您依然可以瀏覽您所需的東西，并順暢地完成下單，而不會經(jīng)常提示您該服務暫時無法訪問?；ヂ?lián)網(wǎng)的分布式計算的研究和云計算的研究給大規(guī)模高性能的穩(wěn)健計算提供了保障。

咱撇開云計算神馬的不說，對于我們用戶的日常生活和工作而言，試想，您所使用的計算機或者手機突然沒有了網(wǎng)絡接入，您會覺得怎樣？

我們似乎已經(jīng)離不開這個接入了互聯(lián)網(wǎng)的社會了?，F(xiàn)代人平均每人擁有超過1部的智能設備（包括手機和電腦），每天與它們相處的時間里，我們很大一部分時間是在跟互聯(lián)網(wǎng)打交道，使用本地單機應用程序、游戲的時間相對越來越少。像新浪微博、人人網(wǎng)、開心網(wǎng)這樣的SNS網(wǎng)絡是非常受歡迎的，當然網(wǎng)游和視頻網(wǎng)站（優(yōu)酷、56等）也是很火熱的，另外，電子商務（淘寶、京東、各種團購等）和服務類網(wǎng)站（12306火車訂票網(wǎng)等）也成了大家口中的生活熱點話題。然而，在使用這些互聯(lián)網(wǎng)服務的時候，您是否有注意到用戶體驗的重要性呢？

用戶體驗很重要

很多人可能沒有太關注和思考過用戶體驗的問題，只要大家沒有遇到瀏覽網(wǎng)站和使用服務過程中的阻斷性問題（例如頁面打不開、頁面某些功能無法使用、支付不成功等），大家就覺得這個網(wǎng)站是可用的，而好不好用、應該怎么調(diào)整、我該怎么反饋意見和建議是鮮有思考的。當然，網(wǎng)游就不一樣，如果服務器經(jīng)常延遲響應，用戶覺得慢，或者覺得不好玩、沒有意思，那用戶自然不會再往里面投錢。所以在互聯(lián)網(wǎng)娛樂和服務中，我們能看見用戶體驗普遍比較好的，用戶滿意度比較高的，就是這些網(wǎng)絡游戲，拼質(zhì)量、拼畫面、拼服務器延遲低、拼游戲內(nèi)容好玩是他們的努力方向。而您可能注意到，一些其他類型的大一點的互聯(lián)網(wǎng)公司，也會懂得關注用戶體驗的重要性，例如我們可以看見新浪微博、人人網(wǎng)、淘寶網(wǎng)等網(wǎng)站的持續(xù)改進，而像12306這樣的火車票網(wǎng)站，用戶可能就不太在乎其美不美觀、好不好用，大家但求他能用即可。

既然互聯(lián)網(wǎng)的發(fā)展是以用戶為重的，用戶體驗自然應當?shù)玫街匾?，一個良好的用戶體驗有助于提升用戶瀏覽的流暢性和內(nèi)容呈現(xiàn)上的合理性。這個道理很簡單，一個美觀實用的網(wǎng)站，用戶自然會打心底里用起來愛不釋手，才會覺得舒服暢快?，F(xiàn)在的HTML5技術就是對以往的網(wǎng)頁編寫語言的又一次升級，那么在技術上為什么W3C要推行HTML5？多年前的 Web 1.0 時代，用戶以接收和獲取信息為主，一些網(wǎng)站的用戶體驗不需要做到很絢麗或者設計很多交互功能，而在現(xiàn)在的 Web 2.0 時代，用戶的參與和交互的要求越來越高，用戶也喜愛富互聯(lián)網(wǎng)用戶體驗，因此用戶的需求導致了技術需求上的更加豐富和復雜的網(wǎng)頁內(nèi)容。、

HTML5 帶來一致而現(xiàn)代的用戶體驗

我們知道，以往很多網(wǎng)站的內(nèi)容都是通過Flash或者其他插件呈現(xiàn)的，這會有什么問題呢？在我看來，它的局限性主要存在于兩個方面，第一，眾多插件導致了瀏覽器的負擔過重，對生態(tài)環(huán)境造成了影響甚至是破壞，一個性能沒有調(diào)優(yōu)或者尚未完好測試的插件肯能夠導致用戶瀏覽器的全盤崩潰或者無響應。這里還是以微軟的IE瀏覽器為例，很多用戶都會遇到IE無響應、打不開、瀏覽器崩潰等問題，其實這并不是IE本身的問題，絕大多數(shù)的案例里面，是第三方插件和第三方軟件引起的問題，很多用戶在沒有太注意的情形下，很容易在安裝一些下載的軟件中被捆綁安裝眾多瀏覽器插件。第二，像Flash等一些插件，本身就可能有性能問題，曾經(jīng)我們看見過，當多個網(wǎng)頁含有Flash并且同時打開這些網(wǎng)頁時，會覺得瀏覽器有卡頓的現(xiàn)象，而我在之前的博文里面也寫過，騰訊QQ的組件一樣會導致IE瀏覽器在打開含有Flash的網(wǎng)頁時，可能會造成瀏覽器假死。除了性能問題，像Flash一樣的插件的局限性還體現(xiàn)在開發(fā)人員的負擔中。開發(fā)人員必須遵照Adobe Flash的準則進行開發(fā)，得使用Adobe的開發(fā)工具，并可能因此耗費很多時間。而且Flash提供的能力是有限的，例如開發(fā)一些更為復雜的3D圖形圖像，或者Flash不能跳出這個插件容器，與網(wǎng)頁其他內(nèi)容自由編排，因此很難做出渾然天成的效果，除非你整個版面是一大塊Flash，文字也是Flash的一部分。

HTML5的出現(xiàn)，解放了網(wǎng)頁內(nèi)容被插件禁錮的局面，開發(fā)者使用HTML5語言+JavaScript就可以創(chuàng)造出豐富而多彩的網(wǎng)站，滿足消費者的審美要求和交互要求，同時還會有比較好的性能和渾然天成的效果。而且，HTML5的出現(xiàn)，對于統(tǒng)一跨平臺開發(fā)代碼也是意義非凡的。說實話，IE9之前，微軟的瀏覽器自成體系，要求開發(fā)者使用微軟自己定義的一些元素和標簽，這是不利于互聯(lián)網(wǎng)生態(tài)系統(tǒng)的，反而給開發(fā)者造成了極大的負擔，因為他們?yōu)榱酥С植煌脑O備和不同的瀏覽器，得制作不同版本的代碼，明明是同一件事情、同樣的網(wǎng)站內(nèi)容，但是實施起來得寫好幾套代碼?，F(xiàn)在用戶們一般安裝的各種各樣的新版瀏覽器，大多都支持HTML5，只要開發(fā)者編寫網(wǎng)站的時候使用的是HTML5 + JavaScript，并且制作的比較精美，相信您會被新的技術所呈現(xiàn)的內(nèi)容而震撼。

(點擊圖片前往該網(wǎng)站體驗)

如果再使用CSS3里面的一些新特性，例如內(nèi)容根據(jù)屏幕尺寸自適應，那么，開發(fā)一遍的內(nèi)容，同樣可以直接在平板、手機等支持HTML5的瀏覽器中以合適的方式呈現(xiàn)。

新的瀏覽器和新的用戶體驗

隨著HTML5的成熟和普及推廣，越來越多的瀏覽器廠商提供新版的支持HTML5的瀏覽器。我個人一直習慣使用IE瀏覽器，對于其他廠商的眾多優(yōu)秀瀏覽器也有一定的了解，其實就目前而言，主流各家的瀏覽器基本都能很好地適應和呈現(xiàn)HTML5的內(nèi)容，所以大家不妨下載一個然后訪問一下HTML5網(wǎng)站試試。

在這里，我還得談一談當時走在HTML5前列的IE9瀏覽器和現(xiàn)在剛推出不久的IE10瀏覽器。記得IE9是2011年第一季度發(fā)布的，當時我去過發(fā)布會現(xiàn)場。IE9的特性宣傳的有許多，但是我個人最喜歡的有3點，其一，徹底告別了微軟IE壟斷的HTML元素標簽方法等等，開始兼容統(tǒng)一的一套標準，即HTML5 + CSS3 + JavaScript，當然還有其他一部分新的通用技術；其二， IE9 使用了GPU進行方式，全面加速了圖形圖像和JavaScript呈現(xiàn)，復雜的HTML5和原有的JavaScript編寫的內(nèi)容得以快速呈現(xiàn)，性能非常好，如果您有獨顯的機器和IE9，相信您已經(jīng)從中嘗到了甜頭；其三，一個以內(nèi)容為重的UI設計理念和風格。隨著Web 2.0的演進，更多的網(wǎng)站不再是像一個單純的網(wǎng)頁，而是變成了一個帶有豐富體驗的應用。為什么應用程序一定要是傳統(tǒng)的那種exe或者其他的桌面和手機應用程序呢？為什么網(wǎng)站就不能是一個應用呢？我覺得完全可以，像人人、新浪微博、支付寶、豆瓣電臺、淘寶等等，完全都可以是一個應用的概念，通過瀏覽器的窗口，用戶可以訪問這一網(wǎng)絡程序所提供的服務。所以IE9針對"瀏覽器是舞臺，網(wǎng)站及內(nèi)容才是舞臺劇和表演者"的概念，將UI極簡化，給內(nèi)容更多空間，并且一個網(wǎng)站可以單獨鎖定到 Windows 7 任務欄，有單獨的顏色風格和圖標，啟動一個網(wǎng)站如同啟動一個鎖定到任務欄的傳統(tǒng)應用一樣簡單。我個人認為，這是一個很新穎和優(yōu)秀的概念。相信在未來的Web 3.0時代，不僅網(wǎng)站像一個應用，而且更加智能，更加開放（開發(fā)接口與數(shù)據(jù)整合互聯(lián)）。

IE10 在傳承IE9的優(yōu)點的基礎上，還有更進一步的改進，它隨著HTML5技術的成熟，提供了更多的HTML5、CSS3和其他主流技術趨勢的特性支持，而且在 Windows 8 的 Metro 風格的 IE10 中，非常好地支持了沉浸式用戶體驗和觸摸。沉浸式用戶體驗能夠讓網(wǎng)站以全屏方式呈現(xiàn)，讓用戶徹底地關注網(wǎng)站內(nèi)容，而不是瀏覽器本身，但是有必要操作的時候，瀏覽器的一些功能和界面能夠通過獨特的手勢調(diào)出來，所以瀏覽也同樣方便。Web的發(fā)展同樣需要更加自然的人際交互體驗，IE10引入觸摸，也促進和鼓勵開發(fā)者們開發(fā)出基于HTML5的精美觸摸應用，配合觸摸屏、平板設備以及觸摸手機端的瀏覽器，用戶可以更加自然地與網(wǎng)站和其內(nèi)容讀物進行良好的交互，用起來更方便、更喜歡。

如上圖所示，這是一個割繩子游戲，但它卻不是一個本地的應用或者Metro風格的應用程序，而是實實在在的一個網(wǎng)頁版，只不過，我用的是平板電腦上的Metro版IE10訪問的，所以可以有全屏的沉浸式用戶體驗+觸摸交互。大家也不妨點擊圖片去體驗一下。這個網(wǎng)站是基于HTML5等新技術開發(fā)的，記得當時微軟還介紹過該團隊的開發(fā)背后的故事。我嘗試用Windows Phone 7.5 上的IE Mobile瀏覽器打開它，發(fā)現(xiàn)將屏幕橫過來后剛好，也是能夠正常呈現(xiàn)的，這就是HTML5時代最直觀的一個可以做到的優(yōu)勢。IE10 已經(jīng)提供了一個MS Pointers API，去方便開發(fā)人員開發(fā)出適合觸控的HTML5網(wǎng)站應用和游戲。

最后，客觀地說，由于改造的人力和金錢成本，中國的網(wǎng)站似乎還沒有看見太多優(yōu)秀而實用的新HTML5版，這需要行業(yè)和眾多互聯(lián)網(wǎng)公司的共同努力和推進，開發(fā)者們是其中不可或缺的重要角色。我想，HTML5是未來的趨勢，我們沒有什么理由要繼續(xù)保留現(xiàn)有的技術架構而不接納HTML5.而且，可以預見的未來是，F(xiàn)lash等插件的支持性可能會越來越差，因為隨著用戶需求和Web技術的發(fā)展，相信現(xiàn)有的舊有技術是不能很好地可持續(xù)發(fā)展、去滿足用戶更加豐富、更加智能的交互體驗的，就像現(xiàn)在的人們都已經(jīng)開始使用防盜門和新型鎖具取代過去的鐵門木門和簡單鎖具一樣。記得一兩年前，Adobe公司已經(jīng)宣布放棄對TV和手機等移動設備上的Flash支持的開發(fā)，我相信Adobe公司也已經(jīng)看清了大勢，重新調(diào)整了業(yè)務結構，以適應新的發(fā)展。IE平臺上的開發(fā)者們，如今一樣可以使用改進的F12開發(fā)人員工具，去更直觀地發(fā)現(xiàn)代碼和性能問題，開發(fā)出優(yōu)秀的HTML5網(wǎng)站。我們看到，像cnBeta等站點已經(jīng)開發(fā)出了基于HTML5，甚至是觸摸優(yōu)化的新版網(wǎng)站與現(xiàn)在的網(wǎng)站并存。我覺得這是一個可取的方式，所以，在Web公司開展新業(yè)務或者進行業(yè)務調(diào)整、網(wǎng)站改版的時候，不妨去嘗試一下HTML5，也許這是個獲得改變的好時機。