走出移動(dòng)互聯(lián)網(wǎng)的迷宮:網(wǎng)站移動(dòng)化的方法策略

2011-11-26 17:11:34來(lái)源:beforweb作者:

眼下,移動(dòng)互聯(lián)網(wǎng)正扮演著越來(lái)越重要的角色,無(wú)論開(kāi)發(fā)者還是普通用戶,幾乎所有人都在談?wù)撍鹘y(tǒng)互聯(lián)網(wǎng)用戶所習(xí)慣的那些訪問(wèn)內(nèi)容、使用服務(wù)的交互方式正在被智能手機(jī)、平板電腦等設(shè)備迅猛的改變。作為線上內(nèi)容及服

眼下,移動(dòng)互聯(lián)網(wǎng)正扮演著越來(lái)越重要的角色,無(wú)論開(kāi)發(fā)者還是普通用戶,幾乎所有人都在談?wù)撍。傳統(tǒng)互聯(lián)網(wǎng)用戶所習(xí)慣的那些訪問(wèn)內(nèi)容、使用服務(wù)的交互方式正在被智能手機(jī)、平板電腦等設(shè)備迅猛的改變。作為線上內(nèi)容及服務(wù)的提供者,我們必須盡快進(jìn)入這個(gè)新興市場(chǎng),學(xué)習(xí)新的游戲規(guī)則

愿望是好的,“移動(dòng)化”的方式卻會(huì)時(shí)常讓人找不著北。究竟應(yīng)該怎么做?開(kāi)發(fā)一款iPhone或Android應(yīng)用嗎?還是為網(wǎng)站專(zhuān)門(mén)搞一套或N套適用于不同移動(dòng)設(shè)備的設(shè)計(jì)方案?最重要的莫過(guò)于首先對(duì)自己產(chǎn)品的內(nèi)容及功能進(jìn)行正確定位,對(duì)移動(dòng)化需求的程度進(jìn)行合理的評(píng)估;在此基礎(chǔ)上,嘗試最適合自己的移動(dòng)化方式。目前,有一些比較常見(jiàn)的思路可以供我們參考選擇:

什么也不做...

這確實(shí)是一種選擇,而且沒(méi)有聽(tīng)上去那么讓人沮喪。

使網(wǎng)站在桌面瀏覽器與移動(dòng)設(shè)備中的渲染方式保持一致——這種處理方式并非不可行,尤其是在缺乏各方面開(kāi)發(fā)資源的情況下。對(duì)于iPhone或iPad一類(lèi)擁有多點(diǎn)觸摸等功能的相對(duì)高端的設(shè)備來(lái)說(shuō),用戶多數(shù)已經(jīng)習(xí)慣了、甚至樂(lè)于進(jìn)行轉(zhuǎn)屏及雙指放大操作。何苦為了移動(dòng)而移動(dòng)的去為這些用戶提供一個(gè)縮水版本的網(wǎng)站呢?

這自然是再廉價(jià)不過(guò)的方案了。不過(guò),平板電腦畢竟不是小型PC,智能手機(jī)也并非小型平板電腦,在很多方面,它們自身的特點(diǎn)都決定了獨(dú)特的交互方式。如果想切實(shí)提升網(wǎng)站內(nèi)容或功能在不同設(shè)備上的適應(yīng)能力,單獨(dú)開(kāi)發(fā)移動(dòng)版本顯然是一條必經(jīng)之路。

響應(yīng)式頁(yè)面設(shè)計(jì)

響應(yīng)式頁(yè)面設(shè)計(jì)的主要思路是,頁(yè)面對(duì)瀏覽環(huán)境的尺寸所處的規(guī)格范圍進(jìn)行判斷,并加載對(duì)應(yīng)的預(yù)設(shè)樣式方案,從而響應(yīng)式的調(diào)整布局結(jié)構(gòu)、內(nèi)容元素的尺寸等。

如果頁(yè)面的內(nèi)容結(jié)構(gòu)與樣式分離的足夠好,那么這種方式是具有長(zhǎng)遠(yuǎn)保證的,我們不需要為任何現(xiàn)有或?qū)?lái)的、擁有不同屏幕分辨率的設(shè)備面面俱到的進(jìn)行單獨(dú)設(shè)計(jì)開(kāi)發(fā)。這種方式無(wú)論從交互設(shè)計(jì)還是UI視覺(jué)等方面,其實(shí)仍屬于相對(duì)傳統(tǒng)的頁(yè)面設(shè)計(jì)開(kāi)發(fā)模式,并不會(huì)增加太多的成本,可以說(shuō)是一種性?xún)r(jià)比很高的選擇。

關(guān)于響應(yīng)式Web設(shè)計(jì)的概念、組成要素、基本實(shí)現(xiàn)思路和開(kāi)發(fā)方式等,可以參考我們之前的兩篇文章:“什么是響應(yīng)式Web設(shè)計(jì)?怎樣進(jìn)行?” 以及 “通過(guò)CSS3 Media Query實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)”。

showcase-of-responsive-web-design-for-mobile-website

Web應(yīng)用(Web App)

通過(guò)對(duì)HTML5、CSS3、JavaScript或相關(guān)前端開(kāi)發(fā)框架(SenchajQuery Mobile等)的配合使用,我們可以創(chuàng)建出一種獨(dú)特的頁(yè)面內(nèi)容呈現(xiàn)及功能使用模式,無(wú)論是視覺(jué)風(fēng)格還是交互方式,它都更像應(yīng)用程序,而非我們習(xí)慣于在桌面瀏覽器中看到的頁(yè)面。

任何安裝了現(xiàn)代瀏覽器的設(shè)備都可以瀏覽使用Web應(yīng)用,從這個(gè)角度講,它具有一定的跨平臺(tái)性。根據(jù)資源條件,你可以只做一款Web應(yīng)用,也可以使用不同的UI元素風(fēng)格為iOS、Android或是Windows打造不同的皮膚及相應(yīng)的行為觸發(fā)方式。

然而,Web應(yīng)用的本質(zhì)仍然是頁(yè)面,它依賴(lài)于瀏覽器環(huán)境。所以,雖然在外觀和行為方面可以做到與原生客戶端應(yīng)用很相似,但從功能和用戶體驗(yàn)的角度來(lái)說(shuō),它仍然是一種局限很大的方式。

jquery-mobile-framework-html5-css3-javascript

原生客戶端應(yīng)用(Native App)

在內(nèi)容呈現(xiàn)方式與操作行為方面,原生客戶端應(yīng)用與網(wǎng)站網(wǎng)頁(yè)有著巨大的差異。這種方式可以挖掘移動(dòng)設(shè)備的硬件與系統(tǒng)所蘊(yùn)藏的各種技術(shù)功能,比如羅盤(pán)、陀螺儀、攝像頭、存儲(chǔ)介質(zhì)(包括離線存儲(chǔ)或云端)、NFC(什么是NFC?Near Field Communication,近距離無(wú)線通信、近場(chǎng)通信)等。

原生客戶端還可以給用戶帶來(lái)最流暢的操作體驗(yàn),因?yàn)橛幸徽讟?biāo)準(zhǔn)的原生UI組件和交互方式供開(kāi)發(fā)者使用和遵循。

相應(yīng)的,這種方式的開(kāi)發(fā)成本也是以上幾種方案中最高的,無(wú)論技術(shù)能力還是開(kāi)發(fā)時(shí)間等方面。而且,我們需要針對(duì)每種系統(tǒng)環(huán)境及設(shè)備類(lèi)型進(jìn)行獨(dú)立開(kāi)發(fā)。原生客戶端基本不具備跨平臺(tái)性。

iphone-ios-app-store-application

應(yīng)該選擇哪種方式?

在制定網(wǎng)站產(chǎn)品移動(dòng)化策略的時(shí)候,我們需要考慮以下幾點(diǎn)因素:

我需要客戶端應(yīng)用嗎?

無(wú)論Web應(yīng)用還是本地原生客戶端,它們主要適用于提供一種特定的功能,幫助用戶完成特定的任務(wù)。如果需求是將企業(yè)站點(diǎn)或同類(lèi)型的網(wǎng)站整體移動(dòng)化,那么客戶端應(yīng)用并不是合適的選擇。如果目標(biāo)網(wǎng)站屬于客戶服務(wù)、電子商務(wù)、在線工具等類(lèi)型,那么客戶端的形式是值得考慮的。

我需要客戶端應(yīng)用,但用戶是否真的需要呢?

我們必須了解我們的網(wǎng)站及產(chǎn)品的目標(biāo)用戶群,并且做切實(shí)的調(diào)研,了解主要用戶群是否會(huì)通過(guò)移動(dòng)客戶端的方式使用我們的服務(wù)。

不同的群體傾向于不同類(lèi)型的設(shè)備,使用同類(lèi)型設(shè)備的用戶群體又需要根據(jù)不同的設(shè)備系統(tǒng)環(huán)境做進(jìn)一步的劃分,譬如iOS用戶對(duì)App Store的使用頻率會(huì)高于Android用戶使用安桌市場(chǎng)的頻率。

如果產(chǎn)品的目標(biāo)用戶群范圍過(guò)大,那么除非我們有足夠的資源來(lái)支持幾條戰(zhàn)線上的、長(zhǎng)期的開(kāi)發(fā)和維護(hù)工作,否則原生客戶端未必是最好的選擇。這種情況下,Web 應(yīng)用的方式是值得嘗試的。雖然在用戶體驗(yàn)等方面趕不上原生客戶端,但是從平臺(tái)適應(yīng)性及開(kāi)發(fā)成本的角度來(lái)說(shuō),整體性?xún)r(jià)比卻不錯(cuò)。

我不需要客戶端應(yīng)用

除非決定什么也不做,否則響應(yīng)式Web設(shè)計(jì)就是我們的最佳實(shí)踐方式了。不過(guò)雖然問(wèn)題表面是關(guān)于樣式和呈現(xiàn)方面的,但是在頁(yè)面代碼結(jié)構(gòu)上,也許需要進(jìn)行很多的重構(gòu)工作。當(dāng)然,如果你的網(wǎng)站在結(jié)構(gòu)和表現(xiàn)分離等Web標(biāo)準(zhǔn)化方面已經(jīng)做到了足夠的無(wú)懈可擊,那么可以相對(duì)輕松很多。

翻譯原文:http://beforweb.com/node/12

英文原文:http://boagworld.com/business-strategy/mobile-maze/