談談互聯網的發展與 HTML5 用戶體驗

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

我們的生活與互聯網的發展息息相關

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

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

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

用戶體驗很重要

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

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

HTML5 帶來一致而現代的用戶體驗

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

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

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

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

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

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

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

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

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

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