當(dāng)設(shè)計(jì)師遭遇HTML5
HTML5,被傳為Flash 的殺手,是一種用于web 應(yīng)用程序開發(fā)、具有變革意義的網(wǎng)絡(luò)技術(shù)。HTML 5提供了一些新的元素和屬性,其中有些是技術(shù)上類似<div>和<span>標(biāo)簽,但有一定含義,例如<nav>和<footer>。這種標(biāo)簽將有利于搜索引擎的索引整理、小屏幕設(shè)備和視障人士使用。同時為其他瀏覽要素提供了新的功能,通過一個標(biāo)準(zhǔn)接口,如<audio>和<video>標(biāo)記。
除了原先的DOM接口,HTML5增加了更多樣化的API:
- 實(shí)時二維繪圖
Canvas API:有關(guān)動態(tài)產(chǎn)出與渲染圖形、圖表、圖像和動畫的API。
- 定時媒體播放
HTML5 音頻與視頻:HTML5里新增的元素,它們?yōu)殚_發(fā)者提供了一套通用的、集成的、腳本式的處理音頻與視頻的API,而無需安裝任何插件。
- 離線存儲數(shù)據(jù)庫(離線網(wǎng)絡(luò)應(yīng)用程序)
- 編輯
- 拖放
- 跨文檔通信
- 通信/網(wǎng)絡(luò)
Communication APIs:構(gòu)建實(shí)時和跨源(cross-origin)通信的兩大基礎(chǔ): 跨文檔通信(Cross Document Messaging)與 XMLHttpRequest Level 2。
- 瀏覽歷史管理
- MIME和協(xié)議處理程序時表頭登記
- 微數(shù)據(jù)
以上技術(shù)說明存在于WHATWG HTML說明文檔中,但并沒有全部包含在W3C HTML5的說明文檔里;W3C另對一些技術(shù)做了單獨(dú)說明,此文不再一一贅述。
聽起來略有些太過技術(shù)了,那么HTML5對設(shè)計(jì)將會有哪些影響呢?這是網(wǎng)頁設(shè)計(jì)師和開發(fā)人員不厭其煩討論了編程代碼后不得不考慮的問題。
HTML5及web app 的優(yōu)勢
以移動互聯(lián)網(wǎng)領(lǐng)域?yàn)槔?,面對眾多的終端設(shè)備和平臺,設(shè)計(jì)師和開發(fā)人員不得不在產(chǎn)品的展現(xiàn)和體驗(yàn)的一致性方面做出妥協(xié)舉措,并在疲于填鋪平臺的過程中浪費(fèi)了我們?nèi)绱硕嗟木Α.a(chǎn)品本來可以達(dá)到更高的水準(zhǔn),但移動終端碎片化(包括硬件和軟件)的現(xiàn)實(shí)將美好的愿望阻攔在外。
當(dāng)前主流的手機(jī)開發(fā)平臺有:iOS、Symbian、Linux、Palm、BlackBerry、Windows Mobile、Android等。其中,iOS平臺需要針對480*320、960*640及1024*768的分辨率分別設(shè)計(jì);Android平臺中QVGA分辨率為240*320,WQVGA分辨率為240*400,HVGA分辨率為320*480,WVGA分辨率為480*800,F(xiàn)WVGA分辨率為480*854等等;Symbian系統(tǒng)可謂歷史悠久,現(xiàn)在開發(fā)主要針對S60 V3和V5兩個版本,分辨率仍有176*208、208*208、240*320/320*240、352*416/416*352及800*352等眾多種類。即使同一個平臺,分辨率不同設(shè)計(jì)也就會有相應(yīng)的差異。加之客戶端產(chǎn)品需要不斷的更新迭代,從1.0版本、2.0版本一直到N.0版本;每開發(fā)一次native app 就需要鋪一次平臺。并且現(xiàn)實(shí)狀況是并非所有用戶都會積極更新新版本,所以設(shè)計(jì)師和開發(fā)人員在研發(fā)新功能的時候還要顧忌之前的舊版本會不會支持等問題。不同的平臺乘以不同的版本,人力物力被投入到了鋪設(shè)平臺的工作中,提高產(chǎn)品用戶體驗(yàn)的精力比較有限。
于是人們受夠了終端設(shè)備碎片化的折磨,開始期盼著一種有別于native app的事物出現(xiàn)。由HTML5技術(shù)開發(fā)的web app的出現(xiàn)給予了設(shè)計(jì)師和開發(fā)人員美好愿景。HTML5技術(shù)的渲染過程主要是由瀏覽器、內(nèi)嵌HTML5解析器的應(yīng)用程序、支持書簽打開方式的應(yīng)用程序抑或是移動手機(jī)產(chǎn)品進(jìn)行的。如此,產(chǎn)品的上線和版本更新不再需要花費(fèi)那么長時間來鋪平臺, Appcelerator的內(nèi)部邏輯會將產(chǎn)品的UI轉(zhuǎn)換為iOS或Android等平臺的原生界面。同時,web app形式的產(chǎn)品不需要用戶下載更新,通過網(wǎng)絡(luò)即可以訪問最新版本;也便于設(shè)計(jì)師和開發(fā)人員調(diào)試和修正錯誤,不再存在同時兼顧新舊版本的問題。
HTML5可以實(shí)現(xiàn)的效果
HTML5威力如此強(qiáng)大,確實(shí)擁有提高互聯(lián)網(wǎng)產(chǎn)品質(zhì)量、改善開發(fā)人員現(xiàn)實(shí)環(huán)境的潛力。因此設(shè)計(jì)師和開發(fā)人員需要對它進(jìn)行必要的了解。但這并不意味著設(shè)計(jì)師就要放下自己手中的工作開始學(xué)習(xí)編程技術(shù)了,而是應(yīng)當(dāng)考慮HTML5對具體的設(shè)計(jì)將會有哪些明顯的改變,HTML5技術(shù)可以實(shí)現(xiàn)什么樣的設(shè)計(jì)效果?
在蘋果、谷歌及微軟等巨頭公司的積極倡導(dǎo)下,HTML5技術(shù)進(jìn)步神速,web app可以實(shí)現(xiàn)的效果愈來愈豐富。很多web app確實(shí)已經(jīng)可以和native app相媲美了。對HTML5支持最好的瀏覽器是Safari和Chrome,F(xiàn)irefox和 Opera差強(qiáng)人意,IE瀏覽器支持度最低。如下圖所示:
現(xiàn)在網(wǎng)絡(luò)上常常會見到類似《使用HTML5開發(fā)的19個網(wǎng)站》、《25款超棒的 HTML5 Canvas 游戲》等相關(guān)介紹文章,設(shè)計(jì)師可以時常拿來把玩體驗(yàn)一番。本文囿于篇幅限制,在此只舉幾個應(yīng)用HTML5技術(shù)比較典型的網(wǎng)站產(chǎn)品進(jìn)行示例說明。
移動終端1.Gmail
2.Youtube
、
3.Vesseltracker
4.GeoCongress
5.BusinessesForSale.com
6.TriOut Mobile
7.ING Direct
8.AOI
9.Naver
10.百度無線小說
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ì)師通過親自體驗(yàn)這些HTML5手機(jī)應(yīng)用或網(wǎng)站,對HTML5所能支持的效果細(xì)節(jié)會有一個大概的、感性的認(rèn)知。籍此獲得的設(shè)計(jì)感知能力遠(yuǎn)比看幾行讓人頭暈的代碼要深刻、易于運(yùn)用。
HTML5近期為什么無法成為主流
看了以上網(wǎng)站的效果,是不是感覺HTML5很酷?既然它這么優(yōu)秀,既可以就解決終端碎片化的困擾,又便于開發(fā)人員實(shí)現(xiàn),那么為什么我們不趕緊將HTML5推廣開來?我們到底在等待什么?然而殘酷的現(xiàn)實(shí)告訴我們,HTML5的時代還沒有真正到來,在近期內(nèi)仍無法取代native app成為主流。筆者根據(jù)自己的理解,將原因歸結(jié)為以下幾點(diǎn):
HTML5本身
W3C表示在2014年之前不會公布有關(guān)HTML5的標(biāo)準(zhǔn)。現(xiàn)在各大公司積極開發(fā)意圖走在web app 產(chǎn)品研發(fā)中的前列,但仍處于探索階段。HTML5還沒有清晰明確的統(tǒng)一標(biāo)準(zhǔn),也就難以大范圍的推廣。等待該技術(shù)成為主流,仍需尚待時日。
瀏覽器
沒錯,web app確實(shí)只需要網(wǎng)絡(luò)訪問就可以。但是產(chǎn)品的效果需要支持HTML5技術(shù)的瀏覽器進(jìn)行渲染,產(chǎn)品的組件需要瀏覽器的控件庫來搭建完成?,F(xiàn)有的瀏覽器在控件庫方面都存在漏洞,致使web app的效果無法全部施展,加載速度較慢。HTML5大行其道,一個強(qiáng)大的瀏覽器的作用非比尋常。而這個強(qiáng)大的瀏覽器什么時候才可以出現(xiàn),還沒人知道。
網(wǎng)絡(luò)信號
Native app 在離線狀態(tài)下依然可以使用一些功能,穩(wěn)定性比較好。相比之下Web app對網(wǎng)絡(luò)的依賴性更大。這一點(diǎn)和“云”有些相似,沒有接通網(wǎng)絡(luò)就無法使用其服務(wù)(雖然HTML5支持離線存儲)?,F(xiàn)今國內(nèi)的wifi普及率還非常低,3G網(wǎng)絡(luò)覆蓋率也有待完善而且費(fèi)用偏高、穩(wěn)定性不強(qiáng)。無論從穩(wěn)定性還是流量資費(fèi)角度考慮,用戶都沒有能力舍棄native app.
移動終端
移動終端(主要是手機(jī))的市場分布情況也是HTML5的影響因素之一。智能手機(jī)的市場份額還比較小,功能手機(jī)仍占有絕對的優(yōu)勢地位。而在web app的支持性方面智能手機(jī)無疑是最好的,其次是社交手機(jī),功能手機(jī)支持性最差。移動終端的市場份額分布情況成為HTML5近期推廣的瓶頸。如圖所示:
設(shè)計(jì)師應(yīng)如何應(yīng)對HTML5?
在了解了HTML5技術(shù)的優(yōu)勢、效果以及實(shí)現(xiàn)進(jìn)度之后,設(shè)計(jì)師應(yīng)該考慮自己接下來需要做些什么了。HTML5是互聯(lián)網(wǎng)研發(fā)的必然趨勢之一, 具有提高產(chǎn)品品質(zhì)的巨大潛力。設(shè)計(jì)師唯有順應(yīng)這一潮流的發(fā)展,積極投身到HTML5的試驗(yàn)研發(fā)中,才能在時代的大潮中握有先機(jī)。那,我們應(yīng)當(dāng)怎么做抑或做些什么呢?筆者有幾個淺薄的建議分享給大家:
形成企業(yè)的一致風(fēng)格,增強(qiáng)識別性
現(xiàn)在的native app 都需要經(jīng)過嚴(yán)厲的審核才能上架“應(yīng)用商店”,即使如此,應(yīng)用程序已經(jīng)開始數(shù)量激增,找到一個滿意的應(yīng)用談何容易。如果web app的時代到來,用戶只需要通過瀏覽器就可以輕松使用某個應(yīng)用程序,沒有了“應(yīng)用商店”的限制,應(yīng)用程序產(chǎn)品的數(shù)量將難以估計(jì)。這個時候我們需要擔(dān)心我們的產(chǎn)品會不會被淹沒在其中。為了避免這樣的悲劇,一個有效的辦法是使同一個公司的產(chǎn)品具有一致風(fēng)格,并且鮮明有特點(diǎn),這樣可以更有效的抓去用戶的注意力,增強(qiáng)產(chǎn)品的識別性。
開始注重特定瀏覽器的適配
為特定用戶而設(shè)計(jì),也就需要為用戶所使用的特定瀏覽器而設(shè)計(jì)。只有當(dāng)我們控制了使用環(huán)境,我們才能控制確保用戶角度的產(chǎn)品效果更好。也許HTML5的時代不需要再頻繁的鋪平臺,但為特定的瀏覽器設(shè)計(jì)特定的效果是進(jìn)一步提高用戶體驗(yàn)的重要舉措。
Google Wave是一個不錯的例子。Google Wave試圖把博客、郵箱、即時通訊以及wikis結(jié)合起來,成為一款強(qiáng)大的網(wǎng)絡(luò)交流服務(wù)。它是由HTML5編寫的,并不支持在所有瀏覽器上使用。雖然因?yàn)殛P(guān)注度不高被Google停止服務(wù),但Google Wave作為一次嘗試,已經(jīng)在HTML5的發(fā)展道路上走了很遠(yuǎn)很遠(yuǎn)。
打破思維定勢,注重運(yùn)用技巧
這一建議來源于實(shí)際的工作,針對的也是實(shí)際工作中會遇到的情況。Web app 的設(shè)計(jì)工作中,所需要應(yīng)用的HTML5技術(shù)效果往往沒有那么多;即使有,團(tuán)隊(duì)中的RD也未必全都做得出來。其實(shí)用戶不關(guān)心這個效果是使用什么編程語言完成的,用戶關(guān)心的是交互是否順暢、視覺感官上是否有品味。因此設(shè)計(jì)師需要在細(xì)節(jié)上注重提升web app的品質(zhì)感,比如邊框的設(shè)計(jì),比如翻頁的設(shè)計(jì),比如子產(chǎn)品列表的設(shè)計(jì)等等。甚至可以嘗試做一些“偽app效果”。這方面m.naver.com做得非常棒,布局設(shè)計(jì)、功能按鈕的設(shè)計(jì)都酷似native app, 子產(chǎn)品的列表全部做成高品質(zhì)的icon樣式;其實(shí) 不過是一個圖標(biāo)加一個鏈接那么簡單。
重視移動互聯(lián)網(wǎng)
HTML5在移動互聯(lián)網(wǎng)中的需求最旺盛,潛力也最大。適配碎片化嚴(yán)重的移動終端從長遠(yuǎn)看不是理想的辦法,但現(xiàn)階段還擺脫不了這一現(xiàn)實(shí)?,F(xiàn)在我們所擁有的最好的移動實(shí)驗(yàn)平臺是iphone,它的適配比例已經(jīng)足夠高了。如果做Html5新產(chǎn)品的API支持測試,建議還是使用iPhone.
總結(jié)
HTML5技術(shù)正引領(lǐng)互聯(lián)網(wǎng)朝web app方向發(fā)展,這是互聯(lián)網(wǎng)發(fā)展的必然趨勢之一。Web app將越來越多的走到用戶面前。設(shè)計(jì)師在面對HTML5技術(shù)的時候,既需要了解當(dāng)前該技術(shù)可以實(shí)現(xiàn)的效果,又需要在實(shí)際的工作中不斷摸索和總結(jié)設(shè)計(jì)技巧和策略。緊跟web app的發(fā)展,不斷嘗試,對設(shè)計(jì)師來說既是一次冒險,也是一次難得的機(jī)遇!
來源:http://thinkingrain.lofter.com/post/3f64_1d5cd
- 目前還沒評論,等你發(fā)揮!