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