WAP站點(diǎn)，這似乎是一個(gè)有點(diǎn)落伍的東西。在誕生之初，它很簡(jiǎn)陋，只能通過一個(gè)叫WML的標(biāo)記語言來搭建沒有任何美感的文字+鏈接頁面。而今，絕大部分WAP站點(diǎn)都開始使用xhtml標(biāo)記語言，不過在iOS、Android風(fēng)潮席卷全球的今天，這個(gè)演進(jìn)似乎顯得有點(diǎn)蒼白無力。但在中國(guó)，WAP的用戶群體依然是移動(dòng)設(shè)備上網(wǎng)的絕對(duì)主力軍。那么，到底該如何設(shè)計(jì)一個(gè)WAP站點(diǎn)呢？個(gè)人以為，需要從設(shè)備、瀏覽器、任務(wù)、場(chǎng)景四個(gè)方面入手。一個(gè)WAP站點(diǎn)好與壞，不取決于頁面的絢麗程度，不取決于功能是否強(qiáng)大，而是取決于站點(diǎn)的兼容性。

一、用戶使用的設(shè)備

“用戶是通過什么設(shè)備訪問我們的站點(diǎn)？”這是在搭建一個(gè)WAP站點(diǎn)之初，設(shè)計(jì)師需要考慮的第一個(gè)問題。一般來說，我們可以把用戶使用的設(shè)備粗略的劃分為【鍵盤機(jī)】和【觸屏機(jī)】。

Ⅰ、鍵盤機(jī)：

• 屏幕物理尺寸小，可視區(qū)域小
• 用戶對(duì)手機(jī)的操作受限于導(dǎo)航鍵

WAP站點(diǎn)，這似乎是一個(gè)有點(diǎn)落伍的東西。在誕生之初，它很簡(jiǎn)陋，只能通過一個(gè)叫WML的標(biāo)記語言來搭建沒有任何美感的文字+鏈接頁面。而今，絕大 部分WAP站點(diǎn)都開始使用xhtml標(biāo)記語言，不過在iOS、Android風(fēng)潮席卷全球的今天，這個(gè)演進(jìn)似乎顯得有點(diǎn)蒼白無力。但在中國(guó)，WAP的用戶 群體依然是移動(dòng)設(shè)備上網(wǎng)的絕對(duì)主力軍。那么，到底該如何設(shè)計(jì)一個(gè)WAP站點(diǎn)呢？個(gè)人以為，需要從設(shè)備、瀏覽器、任務(wù)、場(chǎng)景四個(gè)方面入手。一個(gè)WAP站點(diǎn)好與壞，不取決于頁面的絢麗程度，不取決于功能是否強(qiáng)大，而是取決于站點(diǎn)的兼容性。

一、用戶使用的設(shè)備

“用戶是通過什么設(shè)備訪問我們的站點(diǎn)？”這是在搭建一個(gè)WAP站點(diǎn)之初，設(shè)計(jì)師需要考慮的第一個(gè)問題。一般來說，我們可以把用戶使用的設(shè)備粗略的劃分為【鍵盤機(jī)】和【觸屏機(jī)】。

Ⅰ、鍵盤機(jī)：

• 屏幕物理尺寸小，可視區(qū)域小
• 用戶對(duì)手機(jī)的操作受限于導(dǎo)航鍵

1. 可視區(qū)域小，就決定了用戶在當(dāng)前屏幕內(nèi)看到的內(nèi)容非常有限，用戶往往是通過掃視第一屏的內(nèi)容來決定是否繼續(xù)向下瀏覽。我們?cè)谠O(shè)計(jì)過程中，則需要按信息的重要度以降序的方式來組織，將最重要的信息在首屏呈現(xiàn)給用戶。大部分情況下，logo和導(dǎo)航區(qū)塊是必不可少的元素。如果你的站點(diǎn)是互動(dòng)型的，還需要在header里體現(xiàn)出用戶登陸狀態(tài)和用戶名。根據(jù)應(yīng)用場(chǎng)景和任務(wù)的不同，少數(shù)頁面可以省略header。

目前市面上低端機(jī)器的屏幕分辨率寬度基本都在176px以上，所以，針對(duì)最低端鍵盤機(jī)設(shè)計(jì)WAP站點(diǎn)時(shí)可采用176px的基準(zhǔn)寬度來設(shè)計(jì)，頁面高度不限，但最好不要超過7個(gè)屏高。同時(shí)還需考慮頁面文件大小，頁面文件大小最好控制在13k以內(nèi)。

2. 鍵盤機(jī)的第二個(gè)特征決定了用戶必須遵循既定的規(guī)則來移動(dòng)焦點(diǎn)，例如：方向鍵、搖桿、滾輪、撥盤（BlackBerry）。正因?yàn)槿绱?，我們?cè)谠O(shè)計(jì)的時(shí)候，必須思考頁面鏈接元素之間的內(nèi)聯(lián)關(guān)系，仔細(xì)計(jì)算用戶的焦點(diǎn)移動(dòng)軌跡。重要的信息最好是放在每一行起始位置。

Ⅱ、觸屏機(jī)：

• 可視區(qū)域較大
• 操作所需面積大
• 用戶操作行為跳躍

1. 可視區(qū)域大，決定了頁面承載的信息量也比鍵盤機(jī)要多?，F(xiàn)在市場(chǎng)上主流的觸屏手機(jī)分辨率為320*480，屏幕寬度最低也是240。這時(shí)，如果將適配鍵盤機(jī)的WAP頁面放到觸屏機(jī)上來看，會(huì)出現(xiàn)大面積“被留白”的情況，視覺上將帶給用戶松散的感受。這時(shí)我們可以將240px作為基礎(chǔ)寬度進(jìn)行設(shè)計(jì)。

2. 觸屏手機(jī)的屏幕大了，是不是我可以放更多的鏈接了？答案其實(shí)是否定的！用戶通過手指、觸控筆對(duì)手機(jī)進(jìn)行操作。觸控筆筆尖一般面積都在2*2mm左右，能進(jìn)行比較精準(zhǔn)的點(diǎn)擊。而人的手指頭則要大很多，為了確保用戶不會(huì)出現(xiàn)誤操作，我們?cè)谠O(shè)計(jì)的時(shí)候，需要將鏈接的字號(hào)、行高、間距增大。國(guó)外研究某資料給出過參考值：食指所需最小操作面積為7*7mm、間距1mm；拇指所需最小操作面積為9*9mm、間距2mm。（資料待查閱后將補(bǔ)上原文鏈接）

有同學(xué)會(huì)問了，這個(gè)面積單位是毫米，如何在設(shè)計(jì)過程中我們?nèi)绾螕Q算成像素呢？這個(gè)根據(jù)每款屏幕的分辨率、dpi、物理尺寸的不同，換算結(jié)果都不一樣，有關(guān)像素、dpi、厘米、英寸之間的換算關(guān)系，請(qǐng)學(xué)習(xí)這篇文章。

3. 眾所周知，用戶在操作鍵盤機(jī)的時(shí)候，在達(dá)到目標(biāo)鏈接之前，基本都需要進(jìn)行多次焦點(diǎn)移動(dòng)的操作。而觸屏機(jī)則沒有這種限制，用戶的操作大多不再受物理按鍵的局限，更多是受到視覺感官的支配，換句話說就是看哪點(diǎn)到哪。這時(shí)需要注意的是，因?yàn)槭チ恕敖裹c(diǎn)”的提示，我們必須對(duì)可點(diǎn)擊的鏈接和不可點(diǎn)擊的文字進(jìn)行明確的視覺區(qū)分。

二、瀏覽器左右設(shè)計(jì)

大部分手機(jī)自帶瀏覽器和第三方瀏覽器在操作方式和頁面解析上都有著自己的特性。我們?cè)谠O(shè)計(jì)之初，需要深入的了解它們各自的特性，這樣我們才能對(duì)不同的方案進(jìn)行權(quán)衡。本文針對(duì)焦點(diǎn)、操作鍵、HTML&CSS這三大基礎(chǔ)因素就瀏覽器對(duì)設(shè)計(jì)的影響進(jìn)行一番淺析。

Ⅰ、焦點(diǎn)如何移動(dòng)

1. UCWeb瀏覽器

左右鍵：翻屏

上下鍵：焦點(diǎn)逐個(gè)移動(dòng)

長(zhǎng)按左右鍵：加速翻屏

長(zhǎng)按上下鍵：加速焦點(diǎn)縱向移動(dòng)

2. 手機(jī)QQ瀏覽器

左右鍵：橫向移動(dòng)焦點(diǎn)

上下鍵：縱向移動(dòng)焦點(diǎn)

長(zhǎng)按左右鍵：翻屏

長(zhǎng)按上下鍵：加速焦點(diǎn)縱向移動(dòng)

3. Opera mini瀏覽器

這哥們是最PC化的手機(jī)瀏覽器。內(nèi)置偽鼠標(biāo)一枚，左右鍵、上下鍵均為鼠標(biāo)橫向、縱向移動(dòng)，單次按鍵大概位移10像素，長(zhǎng)按加速。

了解瀏覽器的焦點(diǎn)移動(dòng)規(guī)則后，一方面有利于我們對(duì)某個(gè)控件信息進(jìn)行優(yōu)化組織，另一方面對(duì)于多個(gè)設(shè)計(jì)方案進(jìn)行取舍的時(shí)候也有莫大的幫助。當(dāng)我們充分考慮焦點(diǎn)移動(dòng)路徑、用戶操作頻次、某信息塊權(quán)重等因素后，往往能迅速的找到最適合的設(shè)計(jì)方案。

小提示：QQ瀏覽器和UC瀏覽器默認(rèn)會(huì)給所有的圖片賦予焦點(diǎn)，也就是說哪怕頁面上某張圖片沒有鏈接，但用戶操作過程中焦點(diǎn)也會(huì)路過這張圖片。

Ⅱ、操作鍵

鍵盤機(jī)的瀏覽器（自帶、第三方）都有左右功能鍵。左功能鍵一般為菜單鍵，右功能鍵一般為返回、退出鍵。用戶在進(jìn)行“返回”操作時(shí)，基本都會(huì)通過右功能鍵完成。觸屏機(jī)雖然沒有物理功能鍵，但絕大部分的瀏覽器都在屏幕內(nèi)虛擬了一排功能鍵。并且UCweb、QQ、Opera等第三方主流瀏覽器均提供緩存功能，頁面在返回的時(shí)候均為秒讀。因此，我們不需要頻繁的為用戶提供“返回上一頁”的鏈接。后續(xù)的系列文章中，將有專門的章節(jié)對(duì)手機(jī)導(dǎo)航系統(tǒng)進(jìn)行探討。同時(shí)，某些瀏覽器也提供重定位至頁頂、至頁尾以及快速翻屏的操作，當(dāng)我們?cè)谔幚沓L(zhǎng)頁面時(shí)，對(duì)于“Top”這樣的回頂部錨點(diǎn)的處理也需要慎重。

Ⅲ、HTML & CSS支持度

各大廠商大多都有一套自制內(nèi)核的瀏覽器，甚至同一個(gè)平臺(tái)下的不同系列手機(jī)瀏覽器的解析效果也五彩繽紛，再算上市面上的多款不同內(nèi)核的第三方瀏覽器，這真的讓人無比頭大！因?yàn)楣镜募嫒菪匝芯抠Y料尚未開源，所以這里只能列出一些高危的風(fēng)險(xiǎn)點(diǎn)。有興趣的朋友可以自己著手研究下，有條件的公司也建議系統(tǒng)的做一次深入測(cè)試。這些資料對(duì)于WAP站點(diǎn)的設(shè)計(jì)有著決定性的影響！

• font屬性：176px的屏寬下，12號(hào)字一行可以放14.5個(gè)漢字，但實(shí)際上部分瀏覽器會(huì)將字體放大至14號(hào)，所以安全字?jǐn)?shù)是12個(gè)漢字/行，并且大多不支持自定義字體；
• background屬性：背景色支持很好，但背景圖片支持度則要差很多，如果你需要用到背景圖片，最好設(shè)置一個(gè)類似的背景色做優(yōu)雅降級(jí)處理；
• float、position屬性：千萬別照搬Web的層疊布局理念，這是兩個(gè)高危屬性，老老實(shí)實(shí)搭積木吧；
• margin、padding屬性：這兩個(gè)也支持不好，所以不等高、寬的設(shè)計(jì)方案在實(shí)現(xiàn)過程中兼容性問題很大；
• ……

我們?cè)谔幚砑哟?、高亮、current狀態(tài)、鏈接顏色等設(shè)計(jì)元素時(shí)，需要充分考慮方案的兼容性。因此建議所有剛接觸WAP設(shè)計(jì)的同學(xué)，在動(dòng)手之前，先認(rèn)真的了解下手機(jī)瀏覽器對(duì)于HTML & CSS的限制，這能幫你在工作中快速的給出最合適的設(shè)計(jì)方案。

三、人們用手機(jī)完成什么樣的任務(wù)

幾年前有人曾說過“手機(jī)上最適合的任務(wù)就是閱讀”。而隨著移動(dòng)互聯(lián)網(wǎng)概念、網(wǎng)絡(luò)條件以及移動(dòng)設(shè)備的不斷升級(jí)，手機(jī)上各種類型的站點(diǎn)和應(yīng)用層出不窮，越來越多PC端的產(chǎn)品被移植到手機(jī)端。本文只是粗淺的介紹三種常見的任務(wù)類型，在設(shè)計(jì)過程中我們可以反復(fù)問自己一個(gè)問題“用戶是希望通過這個(gè)產(chǎn)品完成什么樣的任務(wù)”，牢牢記住這個(gè)問題便能無往不利。

• 閱讀型
• 互動(dòng)型
• 工具型
• ……

Ⅰ、閱讀型

用戶在這類應(yīng)用場(chǎng)景下核心的訴求就是閱讀。把“閱讀”展開后又能進(jìn)一步發(fā)現(xiàn)用戶的子訴求：快速呈現(xiàn)內(nèi)容、完整的目錄導(dǎo)航、優(yōu)秀的排版、隨時(shí)記錄閱讀進(jìn)度……將這些子因素一個(gè)個(gè)的拆解開來分析，然后再組裝起來便能產(chǎn)出一份不錯(cuò)的閱讀類產(chǎn)品。

Ⅱ、互動(dòng)型

該類產(chǎn)品的核心應(yīng)用場(chǎng)景就是互動(dòng)，無論是人與人的互動(dòng)亦或是人與機(jī)器的互動(dòng)。那么如何響應(yīng)用戶的操作則是這類產(chǎn)品的設(shè)計(jì)重點(diǎn)。響應(yīng)也分很多種，有的在用戶知曉響應(yīng)之后還需要引導(dǎo)其進(jìn)一步操作、有的需要用戶持續(xù)性的關(guān)注、有的僅僅是通知用戶即可。這類產(chǎn)品也是目前最為火爆的：新浪微博、人人網(wǎng)、騰訊WAP QQ等等都是其中的典范。

Ⅲ、工具型

顧名思義，用戶需要通過這類產(chǎn)品解決某一個(gè)問題。因此，“以任務(wù)為導(dǎo)向，并對(duì)其進(jìn)行拆解設(shè)計(jì)”則是該類產(chǎn)品的設(shè)計(jì)核心。最具代表性的產(chǎn)品是搜索引擎，它的核心任務(wù)就是幫助用戶搜索信息。

Mai同學(xué)有一篇文章比較詳細(xì)的對(duì)iPhone應(yīng)用的類型進(jìn)行了分析，雖然跟WAP站點(diǎn)存在某些差異性的東西，但本質(zhì)性的東西卻有著異曲同工之妙。

四、用戶的使用場(chǎng)景

手機(jī)這樣的移動(dòng)設(shè)備與PC機(jī)最大的區(qū)別就在于用戶總是隨身攜帶，用戶在任何場(chǎng)景下都有可能掏出手機(jī)來把玩一番：公車、地鐵、商場(chǎng)、大馬路、床上、廁所……但這些場(chǎng)景均有一個(gè)共同點(diǎn)：用戶非常容易被周遭環(huán)境所干擾而中斷任務(wù)，因此手機(jī)上只適合做單線程的任務(wù)！

mdchina上有一篇關(guān)于用戶如何使用應(yīng)用程序的文章，介紹用戶的使用場(chǎng)景，感興趣的朋友請(qǐng)移步！

來源：http://ued.taobao.com/blog/2010/12/24/wap-foundation-design-of-mobile-interaction-design/