從Web端直接移植為WAP2.0形式，突出的矛盾是信息架構不適應小屏幕設備，垂直頁面的冗長和WAP2.0表現形式的限制。

提升小屏幕瀏覽的體驗，在設計中應包含以下幾個核心任務：

• 控制信息的維度
• 信息佈局，更好利用首屏的有限資源
• 採用合理的導航、有明確的方位感知
• 盡可能減少瀏覽時的按鍵做功
• 界面可視化

控制信息維度

WAP網頁可支持的頁面信息維度較小。 《移動設備交互設計》中介紹1維、1.5維、2維的信息呈現方式^[1]。將其歸納為1維垂直平鋪和1.5維的頁面折疊，2維的縮略索引等相結合來處理頁面降維。

例如：手機騰訊網新聞正文頁，除去導航部分，主要垂直平鋪了新聞正文內容、分享轉載、相關新聞推薦、相關搜索、網友熱評、熱點新聞、精彩推薦等內容模塊。減少頁面長度，就需要折疊模塊信息。除新聞正文內容以外的外延閱讀模塊只摘選展現3或5條，用戶需要通過“查看更多”或點擊模塊標題進行詳細的擴展閱讀。

再如：手機QQ空間的好友動態的日誌設計，僅展示各條日誌展示3行正文內容，其餘內容折疊起來。引導用戶進入深一維度瀏覽。

信息佈局

首屏的首頁對於全站的戰略意義重大。它是用戶總覽全站的內容最重要途徑，同時可以建立直觀印象，樹立品牌形象。 《Don't make me think》非常強調網站的首頁尤其是頁面頭部要清晰地呈現出這個網站是乾什麼的，用戶可以做什麼。同時首屏的資源在小屏幕設備上尤為稀缺，所以往往是全站交互設計的重中之重。

小屏幕設備的首頁有它特殊規則。 QVGA的豎屏模式下，以13號字體顯示，一屏僅有13行左右。橫屏模式下就展示更少了。所以在可選擇的前提下（例如Nokia E71橫屏機型，無法豎屏閱讀）用戶很少會喜歡用橫屏模式閱讀長頁面。首屏默認最上方會是全站的logo和全站的導航。

• 手機新浪網首頁截屏

手機新浪網首頁頭部導航的設計是採用背景圖實現的。 UCWeb瀏覽器不支持背景圖片展示，直接導致左右結構的導航變形，視覺效果損失。

• 手機搜狐網首頁截屏

手機搜狐網的logo實現方式是前景圖，所以在瀏覽器（不禁止圖片瀏覽的情況下）中能夠展示logo，但是首頁頭部的機型適配問題依然較為嚴峻。

手機騰訊網WAP2.0改版，首頁首屏的設計

分析：手機騰訊網WAP2.0首頁的首屏在不同瀏覽器上的適配效果得到了較好的控制。導航做了減法，由WAP 1.0階段的3行精簡到2行，只留出重要的產品入口，其他頻道入口分散到首屏以下以及新聞中心。對手機騰訊網首頁的信息佈局做了一次改良。

採用合理的導航

桌面上常見的導航方式主要有頁面頭部的多行全局導航鏈接、麵包屑、菜單、工具欄等。凡具備告訴用戶在哪裡，方便用戶去往其他地方的標識都算導航。它一般都易於識別，處於頁面顯赫位置；形式和位置也相對固定，持久；相近作用的導航在頁面中具有排他性，即功能相近的導航應根據頁面需要做判斷和取捨，詳見下文“書城”案例。

在WAP頁面中，視域相當狹窄，信息維度很小。承載同樣多的信息，WAP的頁面長度會比Web頁面顯著增加。很多WAP產品頁面頭部和頁面底部採用導航復現的設計。比如手機新浪網的設計將多行導航鏈接佈置在頁頭和頁尾。開心001以及人人WAP2.0的設計是在頁頭和頁尾復現頁卡式導航。

手機騰訊網WAP2.0的導航設計，首要解決的問題是如何讓用戶快速了解網頁的全局內容及功能。在手機騰訊網內每個頻道首頁的頭部位置有用於總覽的多行導航鏈接，讓用戶對頻道內容有基本認知。頻道首頁的尾部則採用“返回頂部”引導用戶回到頭部利用多行導航鏈接進入其他模塊。而各頻道二級頁面在頁頭和頁尾則復用麵包屑導航。

手機騰訊網書城WAP2.0改版前的導航問題

書城-分類-子類別頁面的導航頁卡和麵包屑並用，功能有重合之嫌。麵包屑中的前面兩項，在頂部的頁卡式導航裡都可以鏈入。

修改後，分類tab置灰，表示為當前選中項，提示方位。原麵包屑位置改為欄目標題，就簡單清晰很多。

減少瀏覽時的按鍵做功

瀏覽頁面要盡可能地減少用戶滾屏操作。垂直的長頁面越往下，信息曝光率越小，操作難度越大。因此，要將信息的重要性分級，並以流的思維審視每個頁面首要的操作任務；將重要操作或信息放置在靠近頂部的位置。另外，要充分考慮頁面中圖形元素對於焦點跳轉頻度的影響（在後面的交互細節章節中詳細介紹）。

以手機騰訊網WAP2.0 下載頻道為例。如下面交互設計稿所示：軟件介​​紹頁頭部改版後，新增了下載包鏈接。這滿足了一些需求：用戶在進入軟件介紹頁之前，就已經確定需要下載該軟件，並且機型適配也已明確。此時，用戶就不需要跨越兩屏的距離才能點到下載包了。

界面可視化

可視化是WAP2.0較WAP1.0的一個重要改進。 WAP1.0頁面不能控製文字的樣式及顏色，僅可見鏈接和非鏈接的區別；支持少量的圖片；以及簡單的排版樣式。瀏覽WAP1.0頁面，用戶需要花更多的注意力通過純文字內容來分辨其功能，判斷自己該怎麼操作。而加入了視覺化的控件、功能分區，能幫助用戶更好地理解功能，引導用戶的注意力。以下重點分析下手機QQ空間WAP2.0新改版設計：

另外，設計中還要注意利用WAP2.0的圖形化界面表現；同時考量所使用的圖形元素對用戶是不是有意義。

頻道的色彩管理也是全站整合的重要設計要素。很多子頻道都希望自己的頻道色有特殊化處理，比如游戲、音樂頻道能使用更加年輕活潑的色調,而財經、軍事頻道則希望能使用突出其內涵的色彩。但這會對手機騰訊網全站瀏覽的體驗帶來品牌形象混亂，視覺衝擊過大等問題。因此進過多方權衡後，實現了全站基本統一的藍色基調。

參考資料：

[1] 《移動設備交互設計》，作者Matt Jones，Gary Marsden（2008.2）

(本文出自Tencent WSD Blog，轉載時請註明出處)

特別注意：本站所有轉載文章言論不代表本站觀點，本站所提供的攝影照片，插畫，設計作品，如需使用，請與原作者聯繫，文章轉自alibuybuy