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

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

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

Ⅰ、鍵盤機(jī)：

屏幕物理尺寸小，可視區(qū)域小

用戶對(duì)手機(jī)的操作受限于導(dǎo)航鍵

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

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

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

Ⅰ、鍵盤機(jī)：

屏幕物理尺寸小，可視區(qū)域小

用戶對(duì)手機(jī)的操作受限于導(dǎo)航鍵

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

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

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

Ⅱ、觸屏機(jī)：

可視區(qū)域較大

操作所需面積大

用戶操作行為跳躍

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

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

有同學(xué)會(huì)問(wèn)了，這個(gè)面積單位是毫米，如何在設(shè)計(jì)過(guò)程中我們?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ī)則沒(méi)有這種限制，用戶的操作大多不再受物理按鍵的局限，更多是受到視覺(jué)感官的支配，換句話說(shuō)就是看哪點(diǎn)到哪。這時(shí)需要注意的是，因?yàn)槭チ?ldquo;焦點(diǎn)”的提示，我們必須對(duì)可點(diǎn)擊的鏈接和不可點(diǎn)擊的文字進(jìn)行明確的視覺(jué)區(qū)分。

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

大部分手機(jī)自帶瀏覽器和第三方瀏覽器在操作方式和頁(yè)面解析上都有著自己的特性。我們?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)，也就是說(shuō)哪怕頁(yè)面上某張圖片沒(méi)有鏈接，但用戶操作過(guò)程中焦點(diǎn)也會(huì)路過(guò)這張圖片。

Ⅱ、操作鍵

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

Ⅲ、HTML & CSS支持度

各大廠商大多都有一套自制內(nèi)核的瀏覽器，甚至同一個(gè)平臺(tái)下的不同系列手機(jī)瀏覽器的解析效果也五彩繽紛，再算上市面上的多款不同內(nèi)核的第三方瀏覽器，這真的讓人無(wú)比頭大！因?yàn)楣镜募嫒菪匝芯抠Y料尚未開(kāi)源，所以這里只能列出一些高危的風(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屬性：千萬(wàn)別照搬Web的層疊布局理念，這是兩個(gè)高危屬性，老老實(shí)實(shí)搭積木吧；

margin、padding屬性：這兩個(gè)也支持不好，所以不等高、寬的設(shè)計(jì)方案在實(shí)現(xiàn)過(guò)程中兼容性問(wèn)題很大；

……

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

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

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

閱讀型

互動(dòng)型

工具型

……

Ⅰ、閱讀型

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

Ⅱ、互動(dòng)型

該類產(chǎn)品的核心應(yīng)用場(chǎng)景就是互動(dòng)，無(wú)論是人與人的互動(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等等都是其中的典范。

Ⅲ、工具型

顧名思義，用戶需要通過(guò)這類產(chǎn)品解決某一個(gè)問(wèn)題。因此，“以任務(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ī)來(lái)把玩一番：公車、地鐵、商場(chǎng)、大馬路、床上、廁所……但這些場(chǎng)景均有一個(gè)共同點(diǎn)：用戶非常容易被周遭環(huán)境所干擾而中斷任務(wù)，因此手機(jī)上只適合做單線程的任務(wù)?。▉?lái)源：TaobaoUED）