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