開發(fā)移動版網(wǎng)頁的技巧:一個案例
在智能手機(jī)日益普遍的今天,網(wǎng)頁設(shè)計必須考慮到小屏幕智能手機(jī)的要求。專門開發(fā)手機(jī)應(yīng)用自然是一個不錯的方案,但是畢竟耗費精力,況且還需要針對不同設(shè)備進(jìn)行開發(fā)和維護(hù)。
開發(fā)移動版網(wǎng)頁是另一個不錯的選擇。這件事情看起來簡單,卻也有許多細(xì)節(jié)和門道。Useit 網(wǎng)站最近的一篇文章對手機(jī)版網(wǎng)頁設(shè)計的探討值得參考。
這篇文章以報道韓國流行明星資訊的網(wǎng)站 allkpop.com 為例。Allkpop 的手機(jī)版網(wǎng)頁是這樣的:
AllKpop 做對了好幾件事情
一是內(nèi)容,Useit 的調(diào)查認(rèn)為手機(jī)上的殺手級應(yīng)用是消耗時間(這個可以探討)
二是專門的移動版網(wǎng)頁,即使有 Opera 這樣的瀏覽器能夠為手機(jī)優(yōu)化網(wǎng)頁,也不如專門的移動版網(wǎng)頁體驗更好。
三是自動探測,服務(wù)器自動探測用戶設(shè)備,提供特定頁面,而不是為移動網(wǎng)頁設(shè)置單獨的地址。
四是信息可點擊區(qū)域比較大。
五是標(biāo)題中關(guān)鍵字在前端,因為標(biāo)題比較長,這樣做能突出重點。
那么,這個網(wǎng)頁設(shè)計有沒有問題呢?以我一個外行人的眼光看,也能發(fā)現(xiàn)一些小問題。首先是對空間的利用不好,日期擠占了大部分空間而且是重復(fù)出現(xiàn);其次就是標(biāo)題下面的分類和標(biāo)簽,字很小,而且對讀者意義不大。
我們看看 Useit 對網(wǎng)頁是如何進(jìn)行重新設(shè)計的。
首先突出的一點是圖片,讀圖比讀文字更直觀,尤其是對于一個報道明星新聞的網(wǎng)站。其次是信息量加大:刪除了無用的分類和標(biāo)簽,以關(guān)鍵語句為讀者展現(xiàn)文章要點,瀏覽更高效。
Useit 對網(wǎng)頁做出的其它改進(jìn)還包括:
更大的觸控空間:原來的文章區(qū)塊可觸控部分比較多,比如標(biāo)題右上角的下拉三角,觸控范圍較小,可用性低。改進(jìn)后整個文章色塊都是觸控區(qū)域,更加適合手持設(shè)備。
文章區(qū)塊間的距離更緊湊:讀者無需下拉也能完整瀏覽最底部文章區(qū)塊。
完整標(biāo)題:這樣能夠展現(xiàn)更多信息以供讀者選擇。
突出內(nèi)容:標(biāo)題中每個明星的姓名都加重突出。
日期做為分界線:節(jié)省屏幕空間,更有條理的展示內(nèi)容。
改進(jìn)頂部導(dǎo)航欄:原來的導(dǎo)航欄中,分類和搜索都在右上角,容易誤觸,改進(jìn)后的頁面里分類與搜索拉開了距離,而且分類加上了文字描述,更易發(fā)現(xiàn)。
移動設(shè)備由于屏幕較小,對于設(shè)計的要求往往更高,所謂細(xì)微之處見技巧,這個案例足以證明。
設(shè)計上的受限越多,你越需要改進(jìn)用戶界面,以提供最優(yōu)的可用性。移動設(shè)備是一個極為受限的設(shè)計問題。
Via?Useit
來源:http://www.ifanr.com/37519
- 目前還沒評論,等你發(fā)揮!