在智能手機日益普遍的今天，網(wǎng)頁設(shè)計必須考慮到小屏幕智能手機的要求。專門開發(fā)手機應(yīng)用自然是一個不錯的方案，但是畢竟耗費精力，況且還需要針對不同設(shè)備進行開發(fā)和維護。

開發(fā)移動版網(wǎng)頁是另一個不錯的選擇。這件事情看起來簡單，卻也有許多細節(jié)和門道。Useit 網(wǎng)站最近的一篇文章對手機版網(wǎng)頁設(shè)計的探討值得參考。

這篇文章以報道韓國流行明星資訊的網(wǎng)站 allkpop.com 為例。Allkpop 的手機版網(wǎng)頁是這樣的：

AllKpop 做對了好幾件事情

◆ 一是內(nèi)容，Useit 的調(diào)查認(rèn)為手機上的殺手級應(yīng)用是消耗時間(這個可以探討)

◆ 二是專門的移動版網(wǎng)頁，即使有 Opera 這樣的瀏覽器能夠為手機優(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)頁是如何進行重新設(shè)計的。

首先突出的一點是圖片，讀圖比讀文字更直觀，尤其是對于一個報道明星新聞的網(wǎng)站。其次是信息量加大：刪除了無用的分類和標(biāo)簽，以關(guān)鍵語句為讀者展現(xiàn)文章要點，瀏覽更高效。

Useit 對網(wǎng)頁做出的其它改進還包括：

◆ 更大的觸控空間：原來的文章區(qū)塊可觸控部分比較多，比如標(biāo)題右上角的下拉三角，觸控范圍較小，可用性低。改進后整個文章色塊都是觸控區(qū)域，更加適合手持設(shè)備。

◆ 文章區(qū)塊間的距離更緊湊：讀者無需下拉也能完整瀏覽***部文章區(qū)塊。

◆ 完整標(biāo)題：這樣能夠展現(xiàn)更多信息以供讀者選擇。

◆ 突出內(nèi)容：標(biāo)題中每個明星的姓名都加重突出。

◆ 日期做為分界線：節(jié)省屏幕空間，更有條理的展示內(nèi)容。

◆ 改進頂部導(dǎo)航欄：原來的導(dǎo)航欄中，分類和搜索都在右上角，容易誤觸，改進后的頁面里分類與搜索拉開了距離，而且分類加上了文字描述，更易發(fā)現(xiàn)。

移動設(shè)備由于屏幕較小，對于設(shè)計的要求往往更高，所謂細微之處見技巧，這個案例足以證明。

設(shè)計上的受限越多，你越需要改進用戶界面，以提供***的可用性。移動設(shè)備是一個極為受限的設(shè)計問題。

原文鏈接：http://www.ifanr.com/37519

【編輯推薦】

1. 網(wǎng)頁設(shè)計師晉階必知的十個小竅門
2. 網(wǎng)頁設(shè)計的80/20規(guī)則 你可知道？
3. 中國的網(wǎng)頁設(shè)計為什么這么爛？
4. iOS、Android都是浮云 Web才是王道
5. Web開發(fā)者不能忽略的10個設(shè)計元素