為平板電腦打造完美的網(wǎng)站頁面的方法(圖文教程)
發(fā)布時間:2012-05-16 10:38:40 作者:佚名
我要評論

現(xiàn)在進入平板時代了,我們做網(wǎng)頁也不能只為了兼容PC電腦的瀏覽器了.也要考慮到平板電腦用戶的體驗.平板電腦一般都是用手指來觸控操作了.這個對網(wǎng)頁的速度等方面的要求很高的.下面給介紹一下
據(jù)調(diào)研公司Gartner預(yù)測,平板的銷量每周都在增加,到2016年,全世界平板的銷量將達到6.65億臺。隨著以蘋果iPad為代表的平板電腦風(fēng)暴越演越烈,相信移動設(shè)備取代個人電腦的霸主地位,成為接入網(wǎng)絡(luò)的首選設(shè)備只是時間問題。
Adobe最近發(fā)布的數(shù)字營銷報告顯示,使用平板電腦瀏覽網(wǎng)站的用戶比普通PC訪客的每筆交易金額高出20%。這些數(shù)據(jù)意味著對于電子商務(wù)企業(yè)來說,設(shè)計對平板電腦友好的網(wǎng)站非常重要。
iPad的橫空出世讓原本死寂沉沉的平板市場重新煥發(fā)生機,可整整兩年時間過去了,很多網(wǎng)站還是沒有專門針對平板電腦進行優(yōu)化,甚至很多新建的網(wǎng)站在平板電腦上無法正 常使用。而且這當(dāng)中不只是那些不起眼的小網(wǎng)站,就連大名鼎鼎的Google Docs的用戶體驗也是相當(dāng)糟糕,不信的話就在iPad上面試試Google Docs,你會發(fā)現(xiàn)除了瀏覽什么都不能干,尤其是當(dāng)你需要編輯文檔的時候。

問題出在了哪里
諸如細(xì)節(jié)是魔鬼、細(xì)節(jié)決定成敗等等的話我們都耳熟能詳。其實導(dǎo)致上面的問題也很簡單:有些網(wǎng)站的鏈接和可點擊的圖片實在是有點小。Web可用性方面 的世界頂尖專家Jakob Nielsen一針見血的指出了問題的癥結(jié)所在,這些問題在Kindle Fire一樣的中等大小的平板上面尤為凸顯。為15寸筆記本電腦或者22寸顯示器設(shè)計的網(wǎng)站并不適合iPad的10寸屏幕,整個屏幕會顯得過于擁擠而無處下手,用戶需要經(jīng)常通過雙擊放大,這絕對不是個愉快的體驗。
平板與筆記本、臺式機的五大重要差異
大體上說來,設(shè)計適合平板的網(wǎng)站與適合臺式機/筆記本的網(wǎng)站存在如下五大差異:
尺寸
相對于筆記本和臺式機而言,平板電腦的尺寸一般較小。
屏幕分辨率
平板電腦屏幕分辨率可謂是千差萬別(從Kindle Fire的600×1024到新一代iPadd的2048 ×1536),而且因為平板電腦的屏幕方向可以旋轉(zhuǎn),所以平板電腦的網(wǎng)站需要在水平和垂直方向都能正常瀏覽。
兼容性
使用過平板的人都知道,Abobe Flash與平板的兼容性是個大問題。但是像Silverlight這樣的插件,以及一些計算任務(wù)較重的JavaScript Web程序也會導(dǎo)致麻煩。
觸摸界面
這是個大問題。觸摸界面是平板電腦和傳統(tǒng)PC最大的區(qū)別,為了方便用戶操作,就需要更大的可點擊元素和更少的導(dǎo)航元素。
內(nèi)存和CPU限制
我們都知道平板板電腦已經(jīng)進入四核時代,所以平板的性能缺陷往往很容易被忽略。事實上平板電腦的內(nèi)存和CPU性能依然遠(yuǎn)遠(yuǎn)落后于傳統(tǒng)PC,所以多媒體元素過多的網(wǎng)站對于平板電腦來說依然是個不小的挑戰(zhàn)。

理解用戶體驗
網(wǎng)站機構(gòu)Domain7的創(chuàng)始人Shawn Neumann說,設(shè)計網(wǎng)站最重要的一點就是要理解用戶體驗,并制定策略來滿足用戶的需求。臺式機是用來搞研究的和完成任務(wù)的,智能手機是用來臨時打發(fā)時間的,平板則是用來在家里好好享受時間的。
“有時候采取響應(yīng)的辦法是最為有效的”,Neumann建議道。響應(yīng)式的網(wǎng)站是流動的,可以根據(jù)不同的屏幕尺寸和顯示分辨率進行調(diào)整。所以理論上來 說,同一個網(wǎng)站可以同時在大屏幕和小屏幕的設(shè)備上瀏覽,但實際的結(jié)果往往是差強人意。如何克服分辨率變化這一問題,難度也是不小,專門為大顯示器設(shè)計的網(wǎng) 站在小屏幕上的顯示效果往往并不怎么好,所以,一個網(wǎng)站并不是放之四海而皆準(zhǔn)的。
究竟如何解決這一問題,大家眾說紛紜,有建議說創(chuàng)建一個移動友好型的網(wǎng)站,也有說根據(jù)用戶使用的設(shè)備來進行自定義。設(shè)計移動友好型的網(wǎng)站難度不小, 特別是是要運行不同的內(nèi)容管理體系,此外同時維護兩個網(wǎng)站難度也不小而且代價很高,而且用戶在平板上不能使用網(wǎng)站的完整版本也會令他們相當(dāng)搓火。總之不管最終選擇哪種方案,都會增加額外的開發(fā)工作和額外的費用。
使用工具軟件
當(dāng)然有時候也可以走捷徑:使用像Pressly或者OnSwipe一類的軟件。使用這一類軟件,標(biāo)準(zhǔn)的網(wǎng)站頁面就像是被施了魔法一樣,適合平板瀏覽的頁面立刻就會完美地呈現(xiàn)在用戶面前。
以上這種方案是OnSwipe的CEO兼聯(lián)合創(chuàng)始人Jason Baptiste希望看到的,他說:
“人們將逐步從“點擊時代”進入“觸屏/掃屏”時代,平板的網(wǎng)站界面將更加集中,而且要求的是不同的設(shè)計方式。有些人認(rèn)為只要設(shè)計一次網(wǎng)站頁面然后到處使用,就可以一勞永逸了,我認(rèn)為這根本站不住腳。在平板上我們要注重的是觸感,所以設(shè)計的時候也應(yīng)當(dāng)以觸感為重點。”

適合平板的網(wǎng)站頁面
那么什么樣的網(wǎng)站頁面才是適合平板電腦的?我認(rèn)為需要做到以下幾點:簡潔干凈的用戶界面,再加上大而顯眼的導(dǎo)航和控制元素,空間排布合理,盡量減少 互動性插件的使用,最好還要創(chuàng)建靈活的、能適應(yīng)多種屏幕尺寸的框架;再考慮使用第三方服務(wù),針對平板或者其他類似的設(shè)備自動對網(wǎng)站頁面進行轉(zhuǎn)換。
其實平板電腦網(wǎng)站的設(shè)計者可以多學(xué)習(xí)Flipboard和Pulse等個性化的內(nèi)容聚合服務(wù),它們設(shè)計的網(wǎng)站頁面在小型設(shè)備上的展示效果相當(dāng)不錯,所以可以對它們加以研究并借鑒它們的設(shè)計方法與風(fēng)格。
為平板打造完美的網(wǎng)站頁面的重要性已經(jīng)一目了然:要么將網(wǎng)站設(shè)計得更“平板化”,要不就等著流失用戶、收益損失的情況出現(xiàn)吧。將網(wǎng)站轉(zhuǎn)換成平板電腦 友好的環(huán)境宜早不宜遲,動作慢了,你就會和競爭對手形成差距。如果你想利用平板電腦風(fēng)暴所帶來的好處,并且創(chuàng)建一個對平板電腦友好的網(wǎng)站,趕緊行動吧!網(wǎng)站設(shè)計者們!
Via VB
(Danice 供雷鋒網(wǎng)專稿,轉(zhuǎn)載請注明!)
Adobe最近發(fā)布的數(shù)字營銷報告顯示,使用平板電腦瀏覽網(wǎng)站的用戶比普通PC訪客的每筆交易金額高出20%。這些數(shù)據(jù)意味著對于電子商務(wù)企業(yè)來說,設(shè)計對平板電腦友好的網(wǎng)站非常重要。
iPad的橫空出世讓原本死寂沉沉的平板市場重新煥發(fā)生機,可整整兩年時間過去了,很多網(wǎng)站還是沒有專門針對平板電腦進行優(yōu)化,甚至很多新建的網(wǎng)站在平板電腦上無法正 常使用。而且這當(dāng)中不只是那些不起眼的小網(wǎng)站,就連大名鼎鼎的Google Docs的用戶體驗也是相當(dāng)糟糕,不信的話就在iPad上面試試Google Docs,你會發(fā)現(xiàn)除了瀏覽什么都不能干,尤其是當(dāng)你需要編輯文檔的時候。

諸如細(xì)節(jié)是魔鬼、細(xì)節(jié)決定成敗等等的話我們都耳熟能詳。其實導(dǎo)致上面的問題也很簡單:有些網(wǎng)站的鏈接和可點擊的圖片實在是有點小。Web可用性方面 的世界頂尖專家Jakob Nielsen一針見血的指出了問題的癥結(jié)所在,這些問題在Kindle Fire一樣的中等大小的平板上面尤為凸顯。為15寸筆記本電腦或者22寸顯示器設(shè)計的網(wǎng)站并不適合iPad的10寸屏幕,整個屏幕會顯得過于擁擠而無處下手,用戶需要經(jīng)常通過雙擊放大,這絕對不是個愉快的體驗。
平板與筆記本、臺式機的五大重要差異
大體上說來,設(shè)計適合平板的網(wǎng)站與適合臺式機/筆記本的網(wǎng)站存在如下五大差異:
尺寸
相對于筆記本和臺式機而言,平板電腦的尺寸一般較小。
屏幕分辨率
平板電腦屏幕分辨率可謂是千差萬別(從Kindle Fire的600×1024到新一代iPadd的2048 ×1536),而且因為平板電腦的屏幕方向可以旋轉(zhuǎn),所以平板電腦的網(wǎng)站需要在水平和垂直方向都能正常瀏覽。
兼容性
使用過平板的人都知道,Abobe Flash與平板的兼容性是個大問題。但是像Silverlight這樣的插件,以及一些計算任務(wù)較重的JavaScript Web程序也會導(dǎo)致麻煩。
觸摸界面
這是個大問題。觸摸界面是平板電腦和傳統(tǒng)PC最大的區(qū)別,為了方便用戶操作,就需要更大的可點擊元素和更少的導(dǎo)航元素。
內(nèi)存和CPU限制
我們都知道平板板電腦已經(jīng)進入四核時代,所以平板的性能缺陷往往很容易被忽略。事實上平板電腦的內(nèi)存和CPU性能依然遠(yuǎn)遠(yuǎn)落后于傳統(tǒng)PC,所以多媒體元素過多的網(wǎng)站對于平板電腦來說依然是個不小的挑戰(zhàn)。

網(wǎng)站機構(gòu)Domain7的創(chuàng)始人Shawn Neumann說,設(shè)計網(wǎng)站最重要的一點就是要理解用戶體驗,并制定策略來滿足用戶的需求。臺式機是用來搞研究的和完成任務(wù)的,智能手機是用來臨時打發(fā)時間的,平板則是用來在家里好好享受時間的。
“有時候采取響應(yīng)的辦法是最為有效的”,Neumann建議道。響應(yīng)式的網(wǎng)站是流動的,可以根據(jù)不同的屏幕尺寸和顯示分辨率進行調(diào)整。所以理論上來 說,同一個網(wǎng)站可以同時在大屏幕和小屏幕的設(shè)備上瀏覽,但實際的結(jié)果往往是差強人意。如何克服分辨率變化這一問題,難度也是不小,專門為大顯示器設(shè)計的網(wǎng) 站在小屏幕上的顯示效果往往并不怎么好,所以,一個網(wǎng)站并不是放之四海而皆準(zhǔn)的。
究竟如何解決這一問題,大家眾說紛紜,有建議說創(chuàng)建一個移動友好型的網(wǎng)站,也有說根據(jù)用戶使用的設(shè)備來進行自定義。設(shè)計移動友好型的網(wǎng)站難度不小, 特別是是要運行不同的內(nèi)容管理體系,此外同時維護兩個網(wǎng)站難度也不小而且代價很高,而且用戶在平板上不能使用網(wǎng)站的完整版本也會令他們相當(dāng)搓火。總之不管最終選擇哪種方案,都會增加額外的開發(fā)工作和額外的費用。
使用工具軟件
當(dāng)然有時候也可以走捷徑:使用像Pressly或者OnSwipe一類的軟件。使用這一類軟件,標(biāo)準(zhǔn)的網(wǎng)站頁面就像是被施了魔法一樣,適合平板瀏覽的頁面立刻就會完美地呈現(xiàn)在用戶面前。
以上這種方案是OnSwipe的CEO兼聯(lián)合創(chuàng)始人Jason Baptiste希望看到的,他說:
“人們將逐步從“點擊時代”進入“觸屏/掃屏”時代,平板的網(wǎng)站界面將更加集中,而且要求的是不同的設(shè)計方式。有些人認(rèn)為只要設(shè)計一次網(wǎng)站頁面然后到處使用,就可以一勞永逸了,我認(rèn)為這根本站不住腳。在平板上我們要注重的是觸感,所以設(shè)計的時候也應(yīng)當(dāng)以觸感為重點。”

那么什么樣的網(wǎng)站頁面才是適合平板電腦的?我認(rèn)為需要做到以下幾點:簡潔干凈的用戶界面,再加上大而顯眼的導(dǎo)航和控制元素,空間排布合理,盡量減少 互動性插件的使用,最好還要創(chuàng)建靈活的、能適應(yīng)多種屏幕尺寸的框架;再考慮使用第三方服務(wù),針對平板或者其他類似的設(shè)備自動對網(wǎng)站頁面進行轉(zhuǎn)換。
其實平板電腦網(wǎng)站的設(shè)計者可以多學(xué)習(xí)Flipboard和Pulse等個性化的內(nèi)容聚合服務(wù),它們設(shè)計的網(wǎng)站頁面在小型設(shè)備上的展示效果相當(dāng)不錯,所以可以對它們加以研究并借鑒它們的設(shè)計方法與風(fēng)格。
為平板打造完美的網(wǎng)站頁面的重要性已經(jīng)一目了然:要么將網(wǎng)站設(shè)計得更“平板化”,要不就等著流失用戶、收益損失的情況出現(xiàn)吧。將網(wǎng)站轉(zhuǎn)換成平板電腦 友好的環(huán)境宜早不宜遲,動作慢了,你就會和競爭對手形成差距。如果你想利用平板電腦風(fēng)暴所帶來的好處,并且創(chuàng)建一個對平板電腦友好的網(wǎng)站,趕緊行動吧!網(wǎng)站設(shè)計者們!
Via VB
(Danice 供雷鋒網(wǎng)專稿,轉(zhuǎn)載請注明!)
相關(guān)文章
- 平板電腦怎么上網(wǎng),平板電腦如何上網(wǎng)?我們這里以優(yōu)擇F2C平板電腦為例給大家講解平板電腦有線上網(wǎng)教程。2012-02-02
神舟飛天A10平板電腦安裝Win8的詳細(xì)步驟(圖文教程)
神舟飛天A10是一款平板.自帶的系統(tǒng)不太好用.怎么裝WIN8呢.下面我們來介紹一下2012-07-31- 其實對于飛觸平板電腦筆者所了解的并不多,以前在國美電器看過該品牌平板電腦,不過個人覺得也沒有多大特色,今天剛好有網(wǎng)友又問到了,所以查閱了不少資料,下面根據(jù)大家的2012-10-09
- 平板電腦時下正變得越來越流行,平板電腦作為隨身便攜娛樂設(shè)備,在年輕的時尚一族朋友手中比較常見。由于平板電腦實用性不如電腦與手機登設(shè)備,因此在國內(nèi)并沒有得到過多媒2012-08-17
- 本文教你讓平板也打上電話2012-06-21
iPad mini怎么樣 iPad mini平板電腦使用感受及優(yōu)缺點介紹
對于這款iPad mini平板電腦怎么樣不是很了解,網(wǎng)上對于這款產(chǎn)品多數(shù)被看好,但也有部分用戶覺得這款平板電腦屏幕分辨率太低,不夠主流,事實如何呢?下面筆者為大家分享個人2013-01-28WM8650固件工具 WM8650平板電腦固件 Uberoid Tool v1.02 綠色免費版
WM8650固件工具(Uberoid Tool) 為你安裝一個全新的WM8650平板電腦固件2012-07-17平板電腦用的是什么系統(tǒng) 平板電腦中什么什么系統(tǒng)比好
平板電腦越來越普及了.其中用的系統(tǒng)也分好幾種2012-09-27- 平板電腦和筆記本的區(qū)別是什么,兩種產(chǎn)品應(yīng)該如何選擇,平板和筆記本在應(yīng)用上有哪些相同點和不同點,未來的趨勢平板會取代筆記本嗎?2012-07-25
華碩PadFone2平板電腦怎么樣 華碩PadFone2好用嗎
這款華碩PadFone2平板電腦或者說華碩PadFone2手機的好處顯而易見,你只需要一個硬件核心,卻可以同時擁有兩套移動設(shè)備,解析來介紹下華碩PadFone2平板電腦怎么樣2013-02-21