設(shè)計(jì)師視角看HTML5

HTML5被傳為Flash的殺手，是一種用于web應(yīng)用程序開(kāi)發(fā)、具有變革意義的網(wǎng)絡(luò)技術(shù)。HTML 5提供了一些新的元素和屬性，其中有些是技術(shù)上類似和標(biāo)簽，但有一定含義，例如和這種標(biāo)簽將有利于搜索引擎的索引整理、小屏幕設(shè)備和視障人士使用。同時(shí)為 其他瀏覽要素提供了新的功能，通過(guò)一個(gè)標(biāo)準(zhǔn)接口，如和標(biāo)記。

除了原先的DOM接口，HTML5增加了更多樣化的API：

實(shí)時(shí)二維繪圖——Canvas API：有關(guān)動(dòng)態(tài)產(chǎn)出與渲染圖形、圖表、圖像和動(dòng)畫的API。

定時(shí)媒體播放——HTML5音頻與視頻：HTML5里新增的元素，它們?yōu)殚_(kāi)發(fā)者提供了一套通用的、集成的、腳本式的處理音頻與視頻的API，而無(wú)需安裝任何插件。

離線存儲(chǔ)數(shù)據(jù)庫(kù)（離線網(wǎng)絡(luò)應(yīng)用程序）

編輯

拖放

跨文檔通信

通信／網(wǎng)絡(luò)——Communication APIs：構(gòu)建實(shí)時(shí)和跨源（cross-origin）通信的兩大基礎(chǔ)： 跨文檔通信（Cross Document Messaging）與 XMLHttpRequest Level 2。

瀏覽歷史管理

MIME和協(xié)議處理程序時(shí)表頭登記

微數(shù)據(jù)

以上技術(shù)說(shuō)明存在于WHATWG HTML說(shuō)明文檔中，但并沒(méi)有全部包含在W3C HTML5的說(shuō)明文檔里；W3C另對(duì)一些技術(shù)做了單獨(dú)說(shuō)明，此文不再一一贅述。

聽(tīng)起來(lái)略有些太過(guò)技術(shù)了，那么HTML5對(duì)設(shè)計(jì)將會(huì)有哪些影響呢？這是網(wǎng)頁(yè)設(shè)計(jì)師和開(kāi)發(fā)人員不厭其煩討論了編程代碼后不得不考慮的問(wèn)題。

HTML5及web app的優(yōu)勢(shì)

以移動(dòng)互聯(lián)網(wǎng)領(lǐng)域?yàn)槔鎸?duì)眾多的終端設(shè)備和平臺(tái)，設(shè)計(jì)師和開(kāi)發(fā)人員不得不在產(chǎn)品的展現(xiàn)和體驗(yàn)的一致性方面做出妥協(xié)舉措，并在疲于填鋪平臺(tái)的過(guò)程中浪費(fèi)了我們?nèi)绱硕嗟木Α．a(chǎn)品本來(lái)可以達(dá)到更高的水準(zhǔn)，但移動(dòng)終端碎片化（包括硬件和軟件）的現(xiàn)實(shí)將美好的愿望阻攔在外。

當(dāng)前主流的手機(jī)開(kāi)發(fā)平臺(tái)有：iOS、Symbian、Linux、Palm、BlackBerry、Windows Mobile、Android等。其中，iOS平臺(tái)需要針對(duì)480*320、960*640及1024*768的分辨率分別設(shè)計(jì)；Android平臺(tái)中 QVGA分辨率為240*320，WQVGA分辨率為240*400，HVGA分辨率為320*480，WVGA分辨率為480*800，F(xiàn)WVGA分辨 率為480*854等等；Symbian系統(tǒng)可謂歷史悠久，現(xiàn)在開(kāi)發(fā)主要針對(duì)S60 V3和V5兩個(gè)版本，分辨率仍有176*208、208*208、240*320/320*240、352*416/416*352及800*352等眾 多種類。即使同一個(gè)平臺(tái)，分辨率不同設(shè)計(jì)也就會(huì)有相應(yīng)的差異。加之客戶端產(chǎn)品需要不斷的更新迭代，從1.0版本、2.0版本一直到N.0版本；每開(kāi)發(fā)一次 native app就需要鋪一次平臺(tái)。并且現(xiàn)實(shí)狀況是并非所有用戶都會(huì)積極更新新版本，所以設(shè)計(jì)師和開(kāi)發(fā)人員在研發(fā)新功能的時(shí)候還要顧忌之前的舊版本會(huì)不會(huì)支持等問(wèn) 題。不同的平臺(tái)乘以不同的版本，人力物力被投入到了鋪設(shè)平臺(tái)的工作中，提高產(chǎn)品用戶體驗(yàn)的精力比較有限。

于是人們受夠了終端設(shè)備碎片化的折磨，開(kāi)始期盼著一種有別于native app的事物出現(xiàn)。由HTML5技術(shù)開(kāi)發(fā)的web app的出現(xiàn)給予了設(shè)計(jì)師和開(kāi)發(fā)人員美好愿景。HTML5技術(shù)的渲染過(guò)程主要是由瀏覽器、內(nèi)嵌HTML5解析器的應(yīng)用程序、支持書簽打開(kāi)方式的應(yīng)用程序抑 或是移動(dòng)手機(jī)產(chǎn)品進(jìn)行的。如此，產(chǎn)品的上線和版本更新不再需要花費(fèi)那么長(zhǎng)時(shí)間來(lái)鋪平臺(tái)，Appcelerator的內(nèi)部邏輯會(huì)將產(chǎn)品的UI轉(zhuǎn)換為iOS或 Android等平臺(tái)的原生界面。同時(shí)，web app形式的產(chǎn)品不需要用戶下載更新，通過(guò)網(wǎng)絡(luò)即可以訪問(wèn)最新版本；也便于設(shè)計(jì)師和開(kāi)發(fā)人員調(diào)試和修正錯(cuò)誤，不再存在同時(shí)兼顧新舊版本的問(wèn)題。

HTML5可以實(shí)現(xiàn)的效果

HTML5威力如此強(qiáng)大，確實(shí)擁有提高互聯(lián)網(wǎng)產(chǎn)品質(zhì)量、改善開(kāi)發(fā)人員現(xiàn)實(shí)環(huán)境的潛力。因此設(shè)計(jì)師和開(kāi)發(fā)人員需要對(duì)它進(jìn)行必要的了解。但這并不意味著 設(shè)計(jì)師就要放下自己手中的工作開(kāi)始學(xué)習(xí)編程技術(shù)了，而是應(yīng)當(dāng)考慮HTML5對(duì)具體的設(shè)計(jì)將會(huì)有哪些明顯的改變，HTML5技術(shù)可以實(shí)現(xiàn)什么樣的設(shè)計(jì)效果？

在蘋果、谷歌及微軟等巨頭公司的積極倡導(dǎo)下，HTML5技術(shù)進(jìn)步神速，web app可以實(shí)現(xiàn)的效果愈來(lái)愈豐富。很多web app確實(shí)已經(jīng)可以和native app相媲美了。對(duì)HTML5支持最好的瀏覽器是Safari和Chrome，F(xiàn)irefox和Opera差強(qiáng)人意，IE瀏覽器支持度最低。如下圖所示：

現(xiàn)在網(wǎng)絡(luò)上常常會(huì)見(jiàn)到類似《使用HTML5開(kāi)發(fā)的19個(gè)網(wǎng)站》、《25款超棒的 HTML5 Canvas 游戲》等相關(guān)介紹文章，設(shè)計(jì)師可以時(shí)常拿來(lái)把玩體驗(yàn)一番。本文囿于篇幅限制，在此只舉幾個(gè)應(yīng)用HTML5技術(shù)比較典型的網(wǎng)站產(chǎn)品進(jìn)行示例說(shuō)明。

移動(dòng)終端

1.Gmail

2.Youtube

3.Vesseltracker

4.GeoCongress

5.BusinessesForSale.com

6.TriOut Mobile

7.ING Direct

8.AOI

9.Naver

10.百度無(wú)線小說(shuō)

PC端

1. Flickr Browser

2. X-Worlds

3. CSSWarp

4. CSS3.0 Maker

5.Tiny Fluid Grid

6. HootSuite

7. Aviary’s Image Editor

8. Twimbow

9. Scribd

10. Google Body Browser

設(shè)計(jì)師通過(guò)親自體驗(yàn)這些HTML5手機(jī)應(yīng)用或網(wǎng)站，對(duì)HTML5所能支持的效果細(xì)節(jié)會(huì)有一個(gè)大概的、感性的認(rèn)知。籍此獲得的設(shè)計(jì)感知能力遠(yuǎn)比看幾行讓人頭暈的代碼要深刻、易于運(yùn)用。

HTML5近期為什么無(wú)法成為主流

看了以上網(wǎng)站的效果，是不是感覺(jué)HTML5很酷？既然它這么優(yōu)秀，既可以就解決終端碎片化的困擾，又便于開(kāi)發(fā)人員實(shí)現(xiàn)，那么為什么我們不趕緊將 HTML5推廣開(kāi)來(lái)？我們到底在等待什么？然而殘酷的現(xiàn)實(shí)告訴我們，HTML5的時(shí)代還沒(méi)有真正到來(lái)，在近期內(nèi)仍無(wú)法取代native app成為主流。筆者根據(jù)自己的理解，將原因歸結(jié)為以下幾點(diǎn)：

HTML5本身

W3C表示在2014年之前不會(huì)公布有關(guān)HTML5的標(biāo)準(zhǔn)。現(xiàn)在各大公司積極開(kāi)發(fā)意圖走在web app產(chǎn)品研發(fā)中的前列，但仍處于探索階段。HTML5還沒(méi)有清晰明確的統(tǒng)一標(biāo)準(zhǔn)，也就難以大范圍的推廣。等待該技術(shù)成為主流，仍需尚待時(shí)日。

瀏覽器

沒(méi)錯(cuò)，web app確實(shí)只需要網(wǎng)絡(luò)訪問(wèn)就可以。但是產(chǎn)品的效果需要支持HTML5技術(shù)的瀏覽器進(jìn)行渲染，產(chǎn)品的組件需要瀏覽器的控件庫(kù)來(lái)搭建完成。現(xiàn)有的瀏覽器在控件 庫(kù)方面都存在漏洞，致使web app的效果無(wú)法全部施展，加載速度較慢。HTML5大行其道，一個(gè)強(qiáng)大的瀏覽器的作用非比尋常。而這個(gè)強(qiáng)大的瀏覽器什么時(shí)候才可以出現(xiàn)，還沒(méi)人知道。

網(wǎng)絡(luò)信號(hào)

Native app 在離線狀態(tài)下依然可以使用一些功能，穩(wěn)定性比較好。相比之下Web app對(duì)網(wǎng)絡(luò)的依賴性更大。這一點(diǎn)和“云”有些相似，沒(méi)有接通網(wǎng)絡(luò)就無(wú)法使用其服務(wù)（雖然HTML5支持離線存儲(chǔ)）。現(xiàn)今國(guó)內(nèi)的wifi普及率還非常 低，3G網(wǎng)絡(luò)覆蓋率也有待完善而且費(fèi)用偏高、穩(wěn)定性不強(qiáng)。無(wú)論從穩(wěn)定性還是流量資費(fèi)角度考慮，用戶都沒(méi)有能力舍棄native app.

移動(dòng)終端

移動(dòng)終端（主要是手機(jī)）的市場(chǎng)分布情況也是HTML5的影響因素之一。智能手機(jī)的市場(chǎng)份額還比較小，功能手機(jī)仍占有絕對(duì)的優(yōu)勢(shì)地位。而在web app的支持性方面智能手機(jī)無(wú)疑是最好的，其次是社交手機(jī)，功能手機(jī)支持性最差。移動(dòng)終端的市場(chǎng)份額分布情況成為HTML5近期推廣的瓶頸。如圖所示：

設(shè)計(jì)師應(yīng)如何應(yīng)對(duì)HTML5？

在了解了HTML5技術(shù)的優(yōu)勢(shì)、效果以及實(shí)現(xiàn)進(jìn)度之后，設(shè)計(jì)師應(yīng)該考慮自己接下來(lái)需要做些什么了。HTML5是互聯(lián)網(wǎng)研發(fā)的必然趨勢(shì)之一， 具有提高產(chǎn)品品質(zhì)的巨大潛力。設(shè)計(jì)師唯有順應(yīng)這一潮流的發(fā)展，積極投身到HTML5的試驗(yàn)研發(fā)中，才能在時(shí)代的大潮中握有先機(jī)。那，我們應(yīng)當(dāng)怎么做抑或做 些什么呢？筆者有幾個(gè)淺薄的建議分享給大家：

形成企業(yè)的一致風(fēng)格，增強(qiáng)識(shí)別性

現(xiàn)在的native app都需要經(jīng)過(guò)嚴(yán)厲的審核才能上架“應(yīng)用商店”，即使如此，應(yīng)用程序已經(jīng)開(kāi)始數(shù)量激增，找到一個(gè)滿意的應(yīng)用談何容易。如果web app的時(shí)代到來(lái)，用戶只需要通過(guò)瀏覽器就可以輕松使用某個(gè)應(yīng)用程序，沒(méi)有了“應(yīng)用商店”的限制，應(yīng)用程序產(chǎn)品的數(shù)量將難以估計(jì)。這個(gè)時(shí)候我們需要擔(dān)心我 們的產(chǎn)品會(huì)不會(huì)被淹沒(méi)在其中。為了避免這樣的悲劇，一個(gè)有效的辦法是使同一個(gè)公司的產(chǎn)品具有一致風(fēng)格，并且鮮明有特點(diǎn)，這樣可以更有效的抓去用戶的注意 力，增強(qiáng)產(chǎn)品的識(shí)別性。

開(kāi)始注重特定瀏覽器的適配

為特定用戶而設(shè)計(jì)，也就需要為用戶所使用的特定瀏覽器而設(shè)計(jì)。只有當(dāng)我們控制了使用環(huán)境，我們才能控制確保用戶角度的產(chǎn)品效果更好。也許HTML5的時(shí)代不需要再頻繁的鋪平臺(tái)，但為特定的瀏覽器設(shè)計(jì)特定的效果是進(jìn)一步提高用戶體驗(yàn)的重要舉措。

Google Wave是一個(gè)不錯(cuò)的例子。Google Wave試圖把博客、郵箱、即時(shí)通訊以及wikis結(jié)合起來(lái)，成為一款強(qiáng)大的網(wǎng)絡(luò)交流服務(wù)。它是由HTML5編寫的，并不支持在所有瀏覽器上使用。雖然因 為關(guān)注度不高被Google停止服務(wù)，但Google Wave作為一次嘗試，已經(jīng)在HTML5的發(fā)展道路上走了很遠(yuǎn)很遠(yuǎn)。

打破思維定勢(shì)，注重運(yùn)用技巧

這一建議來(lái)源于實(shí)際的工作，針對(duì)的也是實(shí)際工作中會(huì)遇到的情況。Web app 的設(shè)計(jì)工作中，所需要應(yīng)用的HTML5技術(shù)效果往往沒(méi)有那么多；即使有，團(tuán)隊(duì)中的RD也未必全都做得出來(lái)。其實(shí)用戶不關(guān)心這個(gè)效果是使用什么編程語(yǔ)言完成 的，用戶關(guān)心的是交互是否順暢、視覺(jué)感官上是否有品味。因此設(shè)計(jì)師需要在細(xì)節(jié)上注重提升web app的品質(zhì)感，比如邊框的設(shè)計(jì)，比如翻頁(yè)的設(shè)計(jì)，比如子產(chǎn)品列表的設(shè)計(jì)等等。甚至可以嘗試做一些“偽app效果”。這方面m.naver.com做得非 常棒，布局設(shè)計(jì)、功能按鈕的設(shè)計(jì)都酷似native app,子產(chǎn)品的列表全部做成高品質(zhì)的icon樣式；其實(shí)不過(guò)是一個(gè)圖標(biāo)加一個(gè)鏈接那么簡(jiǎn)單。

重視移動(dòng)互聯(lián)網(wǎng)

HTML5在移動(dòng)互聯(lián)網(wǎng)中的需求最旺盛，潛力也最大。適配碎片化嚴(yán)重的移動(dòng)終端從長(zhǎng)遠(yuǎn)看不是理想的辦法，但現(xiàn)階段還擺脫不了這一現(xiàn)實(shí)。現(xiàn)在我們所擁 有的最好的移動(dòng)實(shí)驗(yàn)平臺(tái)是iphone，它的適配比例已經(jīng)足夠高了。如果做Html5新產(chǎn)品的API支持測(cè)試，建議還是使用iPhone.

總結(jié)

HTML5技術(shù)正引領(lǐng)互聯(lián)網(wǎng)朝web app方向發(fā)展，這是互聯(lián)網(wǎng)發(fā)展的必然趨勢(shì)之一。Web app將越來(lái)越多的走到用戶面前。設(shè)計(jì)師在面對(duì)HTML5技術(shù)的時(shí)候，既需要了解當(dāng)前該技術(shù)可以實(shí)現(xiàn)的效果，又需要在實(shí)際的工作中不斷摸索和總結(jié)設(shè)計(jì)技巧 和策略。緊跟web app的發(fā)展，不斷嘗試，對(duì)設(shè)計(jì)師來(lái)說(shuō)既是一次冒險(xiǎn)，也是一次難得的機(jī)遇！

本文由HTML5中國(guó)網(wǎng)站小編整理發(fā)布，轉(zhuǎn)載請(qǐng)注明出處。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com