第8章 -移動(dòng)界面設(shè)計(jì)

第8章

移動(dòng)界面設(shè)計(jì)內(nèi)容摘要移動(dòng)設(shè)備及交互方式移動(dòng)界面設(shè)計(jì)原則移動(dòng)界面要素設(shè)計(jì)移動(dòng)界面設(shè)計(jì)技術(shù)與工具移動(dòng)界面設(shè)計(jì)實(shí)例8.1移動(dòng)設(shè)備及交互方式

8.1.1移動(dòng)設(shè)備目前主要的移動(dòng)終端設(shè)備種類(lèi)包括手機(jī)、PDA（PersonalDigitalAssistant）以及各種特殊用途的移動(dòng)設(shè)備如車(chē)載電腦等。其中，基于可移動(dòng)性（Mobility）的考慮，手機(jī)與PDA是目前最常見(jiàn)的主流移動(dòng)設(shè)備8.1移動(dòng)設(shè)備及交互方式

8.1.1移動(dòng)設(shè)備不過(guò)隨著技術(shù)的進(jìn)步，各種設(shè)備之間的界限正在逐漸淡化，也出現(xiàn)了一些新的移動(dòng)設(shè)備形態(tài)，特別是介于PDA和筆記本電腦之間的移動(dòng)互聯(lián)網(wǎng)設(shè)備MID（MobileInternetDevice）以及超移動(dòng)個(gè)人電腦UMPC（Ultra-MobilePC）(a)OQO(b)FlipStart

MiniPC

(c)N810

(d)iPhone8.1.1移動(dòng)設(shè)備8.1.2連接方式移動(dòng)互聯(lián)網(wǎng)的數(shù)據(jù)接入方式是影響移動(dòng)界面設(shè)計(jì)的另一重要因素，目前也是多種標(biāo)準(zhǔn)并存，主要形式包括無(wú)線局域網(wǎng)（WirelessLocalAreaNetwork，WLAN）、無(wú)線城域網(wǎng)（WirelessMetropolitanAreaNetwork，WMAN）、無(wú)線個(gè)域網(wǎng)（WirelessPersonalAreaNetworks，WPAN）、高速無(wú)線廣域網(wǎng)（WirelessWideAreaNetworks，WWAN）以及衛(wèi)星通訊等。8.1.3交互方式移動(dòng)設(shè)備種類(lèi)繁多，其相應(yīng)的輸入方式也相當(dāng)復(fù)雜。特別是對(duì)于目前主要的移動(dòng)設(shè)備形式—智能手機(jī)與掌上電腦而言，由于尺寸較小、接口較為簡(jiǎn)單，全尺寸鍵盤(pán)、鼠標(biāo)等諸多的傳統(tǒng)的輸入輸出設(shè)備較難在移動(dòng)界面中使用，因此需要設(shè)計(jì)專(zhuān)門(mén)的輸入輸出方式，以適應(yīng)移動(dòng)界面的特點(diǎn)。1.輸入方式2.輸出方式輸入方式：

1）鍵盤(pán)輸入

2）筆輸入

3）語(yǔ)音識(shí)別輸出方式：

移動(dòng)設(shè)備的輸出方式較為簡(jiǎn)單1）顯示屏幕2）聲音輸出

8.1.3交互方式通過(guò)前面的介紹，可以注意到，移動(dòng)設(shè)備特別是掌上設(shè)備的自身特點(diǎn)使其在作為移動(dòng)應(yīng)用的開(kāi)發(fā)目標(biāo)平臺(tái)，存在諸多限制：資源相對(duì)匱乏：存儲(chǔ)、顯示、計(jì)算能力差移動(dòng)設(shè)備種類(lèi)繁多：需界面具有自適應(yīng)性連接方式復(fù)雜：形式繁雜，多種標(biāo)準(zhǔn)并存

8.2移動(dòng)界面設(shè)計(jì)原則1.簡(jiǎn)單直觀2.個(gè)性化設(shè)計(jì)3.易于檢索4.界面風(fēng)格一致8.2移動(dòng)界面設(shè)計(jì)原則5.避免不必要的文本輸入：選擇列表6.根據(jù)用戶要求使服務(wù)個(gè)性化：保留用戶7.最大限度的避免用戶出錯(cuò):日期提示8.文本信息應(yīng)當(dāng)本地化：用詞得當(dāng)8.2移動(dòng)界面設(shè)計(jì)原則移動(dòng)界面與一般的圖形用戶界面一樣，包含很多種類(lèi)的設(shè)計(jì)要素，在設(shè)計(jì)時(shí)需要遵循一定的原則才能更好地適應(yīng)移動(dòng)用戶的需要。下面主要圍繞手機(jī)應(yīng)用，特別是WML應(yīng)用和J2ME應(yīng)用（有關(guān)WML和J2ME的介紹請(qǐng)參見(jiàn)第8.4節(jié)）的要素設(shè)計(jì)進(jìn)行介紹。8.3移動(dòng)界面要素設(shè)計(jì)1.

菜單為了設(shè)計(jì)適用于移動(dòng)界面的可用性好的菜單，建議遵守以下規(guī)則：(1)供選擇的項(xiàng)目應(yīng)該根據(jù)需要進(jìn)行邏輯分類(lèi)，如按日期、字母順序等。如果沒(méi)有邏輯順序，可以按優(yōu)先級(jí)分類(lèi)，即將被選擇頻率最高的項(xiàng)目放在列表的最頂端。8.3移動(dòng)界面要素設(shè)計(jì)1.

菜單(2)供選擇的項(xiàng)目應(yīng)該根據(jù)需要進(jìn)行邏輯分類(lèi)，如按日期、字母順序等。如果沒(méi)有邏輯順序，可以按優(yōu)先級(jí)分類(lèi)，即將被選擇頻率最高的項(xiàng)目放在列表的最頂端。8.3移動(dòng)界面要素設(shè)計(jì)1.

菜單(3)菜單上的每一選項(xiàng)一般應(yīng)當(dāng)簡(jiǎn)明扼要，不宜超過(guò)一行。占據(jù)多行甚至多個(gè)顯示窗口的大量文本則應(yīng)當(dāng)換行，并可以通過(guò)設(shè)計(jì)“跳過(guò)”連接直接能夠進(jìn)入下一個(gè)選項(xiàng)。8.3移動(dòng)界面要素設(shè)計(jì)1.

菜單8.3移動(dòng)界面要素設(shè)計(jì)2.

按鈕移動(dòng)設(shè)備中常見(jiàn)的通用按鈕包括：

1）OK（確定）：可用于菜單項(xiàng)的選擇或表示對(duì)某一操作的認(rèn)可，如確認(rèn)刪除。2）Done（完成）：可用于結(jié)束當(dāng)前操作，并返回到上一層任務(wù)。3）Back（返回）：使用戶回到前一個(gè)操作屏幕。一般手機(jī)等設(shè)備上有專(zhuān)用的Back鍵，因此僅用于除了返回功能外還有其他任務(wù)的情況。8.3移動(dòng)界面要素設(shè)計(jì)2.按鈕8.3移動(dòng)界面要素設(shè)計(jì)3.

多選列表：在移動(dòng)應(yīng)用中使用多選列表，可以最大限度地減少文本輸入。例如使用一個(gè)電子郵件地址簿，可以使用戶不必過(guò)多使用移動(dòng)設(shè)備的輸入功能輸入電子郵件地址，而可以簡(jiǎn)單地通過(guò)多選列表將需要的電子郵件地址插入到一封電子郵件的收件人或抄送入地址中。8.3移動(dòng)界面要素設(shè)計(jì)3.

多選列表:8.3移動(dòng)界面要素設(shè)計(jì)4.

文字顯示可能使用以下幾種形式的鏈接：1）View（查看）：如果一個(gè)數(shù)據(jù)列表中每個(gè)項(xiàng)目包含額外的詳細(xì)信息，可以使用該鏈接來(lái)顯示這些數(shù)據(jù)。2）More（更多）：一般作為數(shù)據(jù)頁(yè)末尾的一個(gè)鏈接，使用戶進(jìn)入下一頁(yè)的數(shù)據(jù)。3）Skip（跳過(guò)）：跳過(guò)當(dāng)前選項(xiàng)，鏈接到下一個(gè)類(lèi)似的數(shù)據(jù)，如下一封郵件信息。8.3移動(dòng)界面要素設(shè)計(jì)關(guān)于文字顯示的一般可用性建議包括：1）每一屏幕顯示內(nèi)容不宜過(guò)多，如果信息較多，應(yīng)定義一個(gè)More鏈接。2）一般情況下文字信息應(yīng)當(dāng)使用換行方式進(jìn)行顯示。下圖中是一個(gè)設(shè)置了兩個(gè)鏈接的文字顯示的例子，左右分別是“More”鏈接和“Skip”鏈接處于活動(dòng)狀態(tài)下的模擬畫(huà)面8.3移動(dòng)界面要素設(shè)計(jì)8.3移動(dòng)界面要素設(shè)計(jì)5.數(shù)據(jù)輸入，可用性原則包括：1）對(duì)于數(shù)據(jù)輸入一般應(yīng)該進(jìn)行長(zhǎng)度、數(shù)據(jù)類(lèi)型以及取值范圍等形式的格式化，以指導(dǎo)用戶輸入合法的可用信息。例如，如果用戶的必須輸入中有身份證號(hào)時(shí)，這個(gè)輸入字段可被格式化為接受15個(gè)或18個(gè)字符，還可以進(jìn)一步被限制為只接受數(shù)字或個(gè)別字母。8.3移動(dòng)界面要素設(shè)計(jì)5.數(shù)據(jù)輸入，可用性原則包括：2）建立數(shù)據(jù)輸入標(biāo)題，并根據(jù)需要在標(biāo)題中加入所要求的輸入格式。3）如果已經(jīng)可以確定數(shù)據(jù)的某些輸入部分，可以預(yù)先填好，且不允許用戶修改。8.3移動(dòng)界面要素設(shè)計(jì)5.數(shù)據(jù)輸入，可用性原則包括：4）應(yīng)當(dāng)具有檢錯(cuò)機(jī)制，如某些信息必須填寫(xiě)，應(yīng)當(dāng)可以設(shè)置成禁止提交空數(shù)據(jù)5）在格式設(shè)置中適當(dāng)?shù)靥砑臃指舴蕴崾居脩糨斎牒戏ǖ男畔?。在圖8-8中，日期的輸入格式僅允許輸入數(shù)字，因此當(dāng)輸入字幕時(shí)，系統(tǒng)顯示“Pleaseenteranumber.”提示用戶出錯(cuò)8.3移動(dòng)界面要素設(shè)計(jì)8.3移動(dòng)界面要素設(shè)計(jì)6.圖標(biāo)與圖像在手機(jī)等設(shè)備上使用圖像往往有很多限制，需要注意的問(wèn)題包括：1）了解目標(biāo)設(shè)備所支持的圖象格式，如果希望應(yīng)用跨平臺(tái)使用，應(yīng)當(dāng)盡量使用受到較多支持的圖像格式，如手機(jī)上的wbmp格式和png格式。8.3移動(dòng)界面要素設(shè)計(jì)6.圖標(biāo)與圖像2）由于受到設(shè)備的限制，即使支持彩色的移動(dòng)設(shè)備也往往無(wú)法支持真彩色，需要使用調(diào)色板，注意調(diào)色板的設(shè)置使其達(dá)到最佳顯示效果。3）對(duì)于不支持圖像的設(shè)備，應(yīng)當(dāng)提供替換的信息展示方式。8.3移動(dòng)界面要素設(shè)計(jì)6.圖標(biāo)與圖像4）進(jìn)行圖像瀏覽時(shí)，圖像缺省地應(yīng)當(dāng)充滿整個(gè)可用區(qū)域，并在允許的條件下通過(guò)縮放使用戶看到完整的圖像。如必須滾屏?xí)r，盡量使用垂直滾屏。5）盡量使用戶在上下文中直接瀏覽嵌入的圖像，而不必使用獨(dú)立的顯示工具。8.3移動(dòng)界面要素設(shè)計(jì)6.圖標(biāo)與圖像圖8-9就是在手機(jī)上顯示一幅二值位圖圖像的畫(huà)面，其中圖像的格式為wbmp（WirelessBMP）8.3移動(dòng)界面要素設(shè)計(jì)7.報(bào)警提示

常用的提示類(lèi)型有：1）確認(rèn)提示

2）信息提示3）警告提示

4）出錯(cuò)提示5）持久性提示

6）等待提示8.3移動(dòng)界面要素設(shè)計(jì)8.多媒體展示為了制作能夠在移動(dòng)設(shè)備進(jìn)行播放的多媒體音頻或視頻文件，應(yīng)當(dāng)意以下一些問(wèn)題：1）盡量使用標(biāo)準(zhǔn)的文件格式2）根據(jù)平臺(tái)的計(jì)算能力特點(diǎn)，選擇合適的格式

8.3移動(dòng)界面要素設(shè)計(jì)8.多媒體展示為了制作能夠在移動(dòng)設(shè)備進(jìn)行播放的多媒體音頻或視頻文件，應(yīng)當(dāng)注意以下一些問(wèn)題：3）有的應(yīng)用場(chǎng)合下靜態(tài)圖像也可以達(dá)到很好的展示效果4）要根據(jù)平臺(tái)的多媒體能力制作相應(yīng)質(zhì)量的多媒體數(shù)據(jù)

8.3移動(dòng)界面要素設(shè)計(jì)8.多媒體展示

為了制作能在移動(dòng)設(shè)備進(jìn)行播放的多媒體文件，應(yīng)當(dāng)注意以下一些問(wèn)題：

5）視頻內(nèi)容應(yīng)該精練6）音頻的使用與否應(yīng)當(dāng)不改變程序的運(yùn)行結(jié)果7）錄制音頻時(shí)應(yīng)當(dāng)盡可能的提高音量，以保證回放時(shí)的效果8.3移動(dòng)界面要素設(shè)計(jì)9.導(dǎo)航設(shè)計(jì)

采用了標(biāo)簽進(jìn)行導(dǎo)航的視圖一般應(yīng)當(dāng)遵循以下原則：

1）從一個(gè)標(biāo)簽視圖轉(zhuǎn)到另一個(gè)并不影響這些視圖中的返回鍵功能；它們中的任何一個(gè)返回功能指向同一個(gè)地方，即該應(yīng)用的上一層。

8.3移動(dòng)界面要素設(shè)計(jì)9.導(dǎo)航設(shè)計(jì)采用了標(biāo)簽進(jìn)行導(dǎo)航的視圖一般應(yīng)當(dāng)遵循以下原則：

2）當(dāng)某個(gè)狀態(tài)擁有標(biāo)簽視圖時(shí)，如果用戶從上一層進(jìn)入到該狀態(tài)，打開(kāi)的將是默認(rèn)視圖

。3）若用戶從某個(gè)標(biāo)簽視圖進(jìn)入到其下面一層，這時(shí)的返回功能將導(dǎo)致返回到原先的視圖（不一定是上面提到的默認(rèn)視圖）8.3移動(dòng)界面要素設(shè)計(jì)開(kāi)發(fā)移動(dòng)應(yīng)用是一項(xiàng)復(fù)雜的任務(wù)，不僅需要考慮各種復(fù)雜的網(wǎng)絡(luò)連接方式，還要考慮各種不同的硬件設(shè)備甚至不同型號(hào)的設(shè)備之間的差異，還要與現(xiàn)有的應(yīng)用體系盡可能的集成，因此選擇適當(dāng)?shù)拈_(kāi)發(fā)平臺(tái)也很重要。8.4移動(dòng)界面設(shè)計(jì)技術(shù)與工具8.4.1移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)下面介紹目前常用的幾種移動(dòng)應(yīng)用開(kāi)發(fā)的體系結(jié)構(gòu)

1.

.Net精簡(jiǎn)框架，微軟的

2.J2ME(java2microedition)

架構(gòu)，sun

3.BREW(binaryruntimeenvironmentforwireless)無(wú)線二進(jìn)制運(yùn)行時(shí)環(huán)境8.4移動(dòng)界面設(shè)計(jì)技術(shù)與工具8.4.1移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)采用J2ME等技術(shù)開(kāi)發(fā)的應(yīng)用軟件需要運(yùn)行程序的用戶終端上進(jìn)行安裝和配置，同時(shí)也對(duì)終端的性能具有一定的要求。移動(dòng)應(yīng)用的開(kāi)發(fā)還有一種模式，就是類(lèi)似于Web應(yīng)用的開(kāi)發(fā)，用戶端僅需支持一定的移動(dòng)瀏覽標(biāo)準(zhǔn)協(xié)議，通過(guò)移動(dòng)瀏覽器，就可以通過(guò)網(wǎng)絡(luò)訪問(wèn)移動(dòng)應(yīng)用服務(wù)器，獲取信息或完成某些操作。8.4.2移動(dòng)瀏覽標(biāo)準(zhǔn)協(xié)議移動(dòng)瀏覽標(biāo)準(zhǔn)協(xié)議

1.WAP(wirelessapplicationprotocol)2.WML與WML

Script(wirelessmarkuplanguage)3.XHTMLBasic與XHTMLMP8.4.2移動(dòng)瀏覽標(biāo)準(zhǔn)協(xié)議移動(dòng)設(shè)備操作系統(tǒng)（OS）也是移動(dòng)應(yīng)用開(kāi)發(fā)中的一個(gè)關(guān)鍵平臺(tái)，常見(jiàn)的OS：

1.PalmOS2.WindowsMobile系列移動(dòng)操作系統(tǒng)3.

嵌入式LINUX4.SymbianOS/EPOCOS5.

其他8.4.3移動(dòng)設(shè)備操作系統(tǒng)由于移動(dòng)設(shè)備的硬件形式繁多，而且需要在本機(jī)上提供良好的開(kāi)發(fā)環(huán)境，所以模擬器軟件就成為移動(dòng)應(yīng)用開(kāi)發(fā)必不可少的一種工具。

8.4.4移動(dòng)界面開(kāi)發(fā)工具所謂模擬器就是在一種平臺(tái)上采用軟件模擬另外的軟硬件環(huán)境。移動(dòng)設(shè)備的模擬器主要由相應(yīng)的開(kāi)發(fā)商推出，例如PalmOS、Openwave公司、微軟公司以及硬件廠商諾基亞、愛(ài)立信等均有相應(yīng)的PC模擬器。8.4.4移動(dòng)界面開(kāi)發(fā)工具模擬器8.4.4移動(dòng)界面開(kāi)發(fā)工具1.WAP應(yīng)用

WAP應(yīng)用開(kāi)發(fā)與傳統(tǒng)的Web應(yīng)用程序開(kāi)