從Web端直接移植為WAP2.0形式，突出的矛盾是信息架構(gòu)不適應(yīng)小屏幕設(shè)備，垂直頁面的冗長和WAP2.0表現(xiàn)形式的限制。
提升小屏幕瀏覽的體驗(yàn)，在設(shè)計(jì)中應(yīng)包含以下幾個核心任務(wù)：
- 控制信息的維度
- 信息布局，更好利用首屏的有限資源
- 采用合理的導(dǎo)航、有明確的方位感知
- 盡可能減少瀏覽時的按鍵做功
- 界面可視化
控制信息維度
WAP網(wǎng)頁可支持的頁面信息維度較小�！兑苿釉O(shè)備交互設(shè)計(jì)》中介紹1維、1.5維、2維的信息呈現(xiàn)方式[1]。將其歸納為1維垂直平鋪和1.5維的頁面折疊，2維的縮略索引等相結(jié)合來處理頁面降維。
例如：手機(jī)騰訊網(wǎng)新聞?wù)捻�，除去�?dǎo)航部分，主要垂直平鋪了新聞?wù)膬?nèi)容、分享轉(zhuǎn)載、相關(guān)新聞推薦、相關(guān)搜索、網(wǎng)友熱評、熱點(diǎn)新聞、精彩推薦等內(nèi)容模塊。減少頁面長度，就需要折疊模塊信息。除新聞?wù)膬?nèi)容以外的外延閱讀模塊只摘選展現(xiàn)3或5條，用戶需要通過“查看更多”或點(diǎn)擊模塊標(biāo)題進(jìn)行詳細(xì)的擴(kuò)展閱讀。
再如：手機(jī)QQ空間的好友動態(tài)的日志設(shè)計(jì)，僅展示各條日志展示3行正文內(nèi)容，其余內(nèi)容折疊起來。引導(dǎo)用戶進(jìn)入深一維度瀏覽。
信息布局
首屏的首頁對于全站的戰(zhàn)略意義重大。它是用戶總覽全站的內(nèi)容最重要途徑，同時可以建立直觀印象，樹立品牌形象�！禗on’t make me think》非常強(qiáng)調(diào)網(wǎng)站的首頁尤其是頁面頭部要清晰地呈現(xiàn)出這個網(wǎng)站是干什么的，用戶可以做什么。同時首屏的資源在小屏幕設(shè)備上尤為稀缺，所以往往是全站交互設(shè)計(jì)的重中之重。
小屏幕設(shè)備的首頁有它特殊規(guī)則。QVGA的豎屏模式下，以13號字體顯示，一屏僅有13行左右。橫屏模式下就展示更少了。所以在可選擇的前提下（例如Nokia E71橫屏機(jī)型，無法豎屏閱讀）用戶很少會喜歡用橫屏模式閱讀長頁面。首屏默認(rèn)最上方會是全站的logo和全站的導(dǎo)航。
- 手機(jī)新浪網(wǎng)首頁截屏
手機(jī)新浪網(wǎng)首頁頭部導(dǎo)航的設(shè)計(jì)是采用背景圖實(shí)現(xiàn)的。UCWeb瀏覽器不支持背景圖片展示，直接導(dǎo)致左右結(jié)構(gòu)的導(dǎo)航變形，視覺效果損失。
- 手機(jī)搜狐網(wǎng)首頁截屏
手機(jī)搜狐網(wǎng)的logo實(shí)現(xiàn)方式是前景圖，所以在瀏覽器（不禁止圖片瀏覽的情況下）中能夠展示logo，但是首頁頭部的機(jī)型適配問題依然較為嚴(yán)峻。
手機(jī)騰訊網(wǎng)WAP2.0改版，首頁首屏的設(shè)計(jì)
分析：手機(jī)騰訊網(wǎng)WAP2.0首頁的首屏在不同瀏覽器上的適配效果得到了較好的控制。導(dǎo)航做了減法，由WAP 1.0階段的3行精簡到2行，只留出重要的產(chǎn)品入口，其他頻道入口分散到首屏以下以及新聞中心。對手機(jī)騰訊網(wǎng)首頁的信息布局做了一次改良。
采用合理的導(dǎo)航
桌面上常見的導(dǎo)航方式主要有頁面頭部的多行全局導(dǎo)航鏈接、面包屑、菜單、工具欄等。凡具備告訴用戶在哪里，方便用戶去往其他地方的標(biāo)識都算導(dǎo)航。它一般都易于識別，處于頁面顯赫位置；形式和位置也相對固定，持久；相近作用的導(dǎo)航在頁面中具有排他性，即功能相近的導(dǎo)航應(yīng)根據(jù)頁面需要做判斷和取舍，詳見下文“書城”案例。
在WAP頁面中，視域相當(dāng)狹窄，信息維度很小。承載同樣多的信息，WAP的頁面長度會比Web頁面顯著增加。很多WAP產(chǎn)品頁面頭部和頁面底部采用導(dǎo)航復(fù)現(xiàn)的設(shè)計(jì)。比如手機(jī)新浪網(wǎng)的設(shè)計(jì)將多行導(dǎo)航鏈接布置在頁頭和頁尾。開心001以及人人WAP2.0的設(shè)計(jì)是在頁頭和頁尾復(fù)現(xiàn)頁卡式導(dǎo)航。
手機(jī)騰訊網(wǎng)WAP2.0的導(dǎo)航設(shè)計(jì)，首要解決的問題是如何讓用戶快速了解網(wǎng)頁的全局內(nèi)容及功能。在手機(jī)騰訊網(wǎng)內(nèi)每個頻道首頁的頭部位置有用于總覽的多行導(dǎo)航鏈接，讓用戶對頻道內(nèi)容有基本認(rèn)知。頻道首頁的尾部則采用“返回頂部”引導(dǎo)用戶回到頭部利用多行導(dǎo)航鏈接進(jìn)入其他模塊。而各頻道二級頁面在頁頭和頁尾則復(fù)用面包屑導(dǎo)航。
手機(jī)騰訊網(wǎng)書城WAP2.0改版前的導(dǎo)航問題
書城-分類-子類別頁面的導(dǎo)航頁卡和面包屑并用，功能有重合之嫌。面包屑中的前面兩項(xiàng)，在頂部的頁卡式導(dǎo)航里都可以鏈入。
修改后，分類tab置灰，表示為當(dāng)前選中項(xiàng)，提示方位。原面包屑位置改為欄目標(biāo)題，就簡單清晰很多。
減少瀏覽時的按鍵做功
瀏覽頁面要盡可能地減少用戶滾屏操作。垂直的長頁面越往下，信息曝光率越小，操作難度越大。因此，要將信息的重要性分級，并以流的思維審視每個頁面首要的操作任務(wù)；將重要操作或信息放置在靠近頂部的位置。另外，要充分考慮頁面中圖形元素對于焦點(diǎn)跳轉(zhuǎn)頻度的影響（在后面的交互細(xì)節(jié)章節(jié)中詳細(xì)介紹）。
以手機(jī)騰訊網(wǎng)WAP2.0 下載頻道為例。如下面交互設(shè)計(jì)稿所示：軟件介紹頁頭部改版后，新增了下載包鏈接。這滿足了一些需求：用戶在進(jìn)入軟件介紹頁之前，就已經(jīng)確定需要下載該軟件，并且機(jī)型適配也已明確。此時，用戶就不需要跨越兩屏的距離才能點(diǎn)到下載包了。
界面可視化
可視化是WAP2.0較WAP1.0的一個重要改進(jìn)。WAP1.0頁面不能控制文字的樣式及顏色，僅可見鏈接和非鏈接的區(qū)別；支持少量的圖片；以及簡單的排版樣式。瀏覽WAP1.0頁面，用戶需要花更多的注意力通過純文字內(nèi)容來分辨其功能，判斷自己該怎么操作。而加入了視覺化的控件、功能分區(qū)，能幫助用戶更好地理解功能，引導(dǎo)用戶的注意力。以下重點(diǎn)分析下手機(jī)QQ空間 WAP2.0新改版設(shè)計(jì)：
另外，設(shè)計(jì)中還要注意利用WAP2.0的圖形化界面表現(xiàn)；同時考量所使用的圖形元素對用戶是不是有意義。
頻道的色彩管理也是全站整合的重要設(shè)計(jì)要素。很多子頻道都希望自己的頻道色有特殊化處理，比如游戲、音樂頻道能使用更加年輕活潑的色調(diào),而財(cái)經(jīng)、軍事頻道則希望能使用突出其內(nèi)涵的色彩。但這會對手機(jī)騰訊網(wǎng)全站瀏覽的體驗(yàn)帶來品牌形象混亂，視覺沖擊過大等問題。因此進(jìn)過多方權(quán)衡后，實(shí)現(xiàn)了全站基本統(tǒng)一的藍(lán)色基調(diào)。
參考資料：
[1] 《移動設(shè)備交互設(shè)計(jì)》，作者M(jìn)att Jones，Gary Marsden（2008.2）
(本文出自Tencent WSD Blog，轉(zhuǎn)載時請注明出處)