作者：曉生  |   發(fā)布： (網(wǎng)友)曉生   |   時(shí)間：2010-04-06 14:06:18

在設(shè)計(jì)e指通 客戶端和wap2.0 頁(yè)面時(shí)，積累些手機(jī)交互設(shè)計(jì)經(jīng)驗(yàn)，不斷總結(jié)，理清設(shè)計(jì)思路。以下設(shè)計(jì)總結(jié)出手機(jī)交互設(shè)計(jì)原則，僅供參照。

屏幕

手機(jī)屏幕尺寸分為物理尺寸和顯示分辨率。

• 物理尺寸是按英寸對(duì)角線計(jì)算。
• 顯示分辨率指的是屏幕圖像的精密度，是指屏幕所能顯示的像素的多少。
• 顯示精度是每英寸上可以顯示像素（DPI）。

NOKIA N78的物理尺寸為2.4英寸，顯示分辨率為240*320像素；HTC T7278的物理尺寸為2.8英寸，顯示分辨率為480*640像素。兩款手機(jī)顯示精度不同，同樣100*100像素大小的圖片在這兩款手機(jī)上看到的效果也不同，同樣大小的圖片在HTC T7278看起來(lái)要比NOKIA N78小的多。

分辨率種類（不完全統(tǒng)計(jì)）：

1. 128*128  128*160 130*130  176*144  176*220 208*208 208*320  240*160 240*240 240*260
2. 240*320 240*400 240*432 240*480 320*240 320*320 320*400 320*480 345*800 352*416
3. 360*480 360*640 400*800 480*320 480*360
4. 480*640 480*800 480*854 480*864 640*480  800*480

一款軟件適配所有分辨率的手機(jī)難度較大，勢(shì)必需要先挑選主流分辨率進(jìn)行設(shè)計(jì)，在此基礎(chǔ)上適配其他分辨率的手機(jī)。鑒于2010年QVGA(240*320)屏幕的市場(chǎng)占有率將達(dá)到70% ，可將QVGA的手機(jī)當(dāng)成主要的設(shè)計(jì)對(duì)象。

視覺(jué)重點(diǎn)自上而下

大多數(shù)情況下瀏覽者看電腦屏幕時(shí)都不由自主的以“Ｆ”形狀 的模式閱讀網(wǎng)頁(yè)，而手機(jī)屏幕很小，顯示能力有限，屏幕上內(nèi)容盡收眼底，閱讀文字時(shí)自上而下，因而信息的重要性也是從上到下依次排列。

“F”形狀的模式閱讀

簡(jiǎn)潔

手機(jī)屏幕的顯示能力有限，使用物理按鍵時(shí)，無(wú)法向電腦或者觸摸屏那些跳躍式操作，必須依次切換控件的焦點(diǎn)，例如手機(jī)界面中的翻頁(yè)程序，用戶使用最多的就是“下一頁(yè)”，將“下一頁(yè)”放置為第一個(gè)控件便于用戶操作，方案1優(yōu)于方案2。

界面簡(jiǎn)潔的途徑：

• 減少控件的數(shù)目，使程序的主功能顯然易見(jiàn)，引導(dǎo)用戶操作。
• 當(dāng)內(nèi)容過(guò)多時(shí)，要突出重要信息，便于用戶快速瀏覽。
• 顯示出錯(cuò)信息時(shí)，不要只告知用戶程序出現(xiàn)錯(cuò)誤，要提供有用的信息引導(dǎo)用戶完成操作。
• 手機(jī)上網(wǎng)的速度慢，一般在6k/s ，這就要求頁(yè)面的內(nèi)容盡量精簡(jiǎn)，避免過(guò)多的圖片。
• 頁(yè)面的內(nèi)容控制在兩屏以內(nèi)，也不能空白。比如當(dāng)用戶支付電影票之后，不能只顯示“支付成功”，可以引導(dǎo)用戶使用其他功能。

簡(jiǎn)潔要求文字描述簡(jiǎn)練，但也要充分利用手機(jī)屏幕上僅有的顯示空間。例如iPhone的搜索欄，搜索框用于內(nèi)容搜索，點(diǎn)擊之后會(huì)顯示虛擬鍵盤(pán)，除了左邊默認(rèn)的搜索圖標(biāo)之外，搜索欄還包含其他元素。

• 占位符文本?？梢蕴嵝延脩羲阉鳈诘墓δ埽ɡ?ldquo;Search”）或者搜索的內(nèi)容（如Google或YouTube）。
• 書(shū)簽按鈕。 記住用戶的搜索內(nèi)容，如在地圖搜索中，書(shū)簽按鈕可以快速地查到已標(biāo)記位置、搜索的內(nèi)容和聯(lián)系人。默認(rèn)在搜索欄上用戶沒(méi)有輸入文本或者占位符文本時(shí)，書(shū)簽按鈕才可能顯示。
• 清除按鈕?？梢钥焖俚貏h除搜索欄中內(nèi)容，默認(rèn)在用戶在搜索欄中輸入文本時(shí)，才會(huì)顯示清除按鈕。

任務(wù)

當(dāng)完成一個(gè)任務(wù)需要多步操作時(shí)，可將任務(wù)進(jìn)行拆分成多個(gè)子任務(wù)，每個(gè)界面完成一個(gè)子任務(wù)。如邏輯清晰并保證用戶操作的流暢性，可適當(dāng)?shù)卦黾禹?yè)面跳轉(zhuǎn)次數(shù)和點(diǎn)擊的次數(shù)。如使用e指通 客戶端購(gòu)買(mǎi)電影票的任務(wù)有：查詢電影→選擇放映場(chǎng)次→選座→確定訂單→支付。

 

e指通

關(guān)注首要任務(wù)也是用戶對(duì)于程序滿意度的重要因素。所以在設(shè)計(jì)時(shí)，要保證界面上的每一個(gè)元素的設(shè)計(jì)都取決于當(dāng)前首要任務(wù)，用戶完成任務(wù)是否需要這些元素。舉個(gè)具體的例子：這些信息或者功能對(duì)于用戶購(gòu)物是否有幫助呢？如果不是，這些信息或者功能是否在另外的使用情境中至關(guān)重要嗎？

避免輸入

使用標(biāo)準(zhǔn)iso手機(jī)按鍵時(shí)，用戶平均每分鐘輸入英文21個(gè)單詞，在手機(jī)上輸入將減慢用戶操作的速度，過(guò)多的文本輸入是在浪費(fèi)用戶的時(shí)間和精力，如非要輸入，需保證“物有所值”，用戶會(huì)感覺(jué)到并沒(méi)有因?yàn)檩斎攵⒄`了任務(wù)完成。

以下途徑可以避免輸入：

• 使用列表選項(xiàng)的形式。
• 增加控件的可記憶性。

一致性

手機(jī)界面上出現(xiàn)的顏色、字體、文字和圖片等元素要保持一致，一致性可以使用戶知道在哪些地方找到特定的功能或信息，同時(shí)還能使得他們知道這些功能的正確使用方法。例如，返回上一級(jí)可以表述成：返回，上一級(jí)，后退，撤退……對(duì)于用戶而言，這些文字沒(méi)有明顯的區(qū)別，但在手機(jī)界面顯示時(shí)要只使用一種和同一個(gè)位置，如iPhone界面中的“返回”只顯示在導(dǎo)航欄的左邊。

熊貓看書(shū)

使用情境

手機(jī)QQ

手機(jī)屬于移動(dòng)設(shè)備，可以在各種場(chǎng)合使用，如地鐵、路邊、超市、飛機(jī)上等，手機(jī)可以切換到飛機(jī)模式。手機(jī)可以在各個(gè)時(shí)間段使用，手機(jī)QQ也可以切換使用模式：標(biāo)準(zhǔn)模式、室外模式和夜間模式。

操作方式

手機(jī)操作有物理按鍵和觸摸等多種操作方式，當(dāng)同樣的程序要在多種操作方式下使用，需顧及手指點(diǎn)擊時(shí)可點(diǎn)區(qū)域的大小。使用物理按鍵時(shí)，按鈕可以只是兩個(gè)字，選中控件即可操作，而iPhone的可點(diǎn)擊區(qū)域最好不低于44×44像素。

反饋

程序需給予合理的反饋，讓知道用戶程序當(dāng)前的狀態(tài)。

 

比如iPhone的運(yùn)行指示，運(yùn)行指示表示后臺(tái)有程序正在運(yùn)行，但任務(wù)完成時(shí)不會(huì)提醒用戶。當(dāng)程序無(wú)法立即完成聯(lián)網(wǎng)時(shí)，狀態(tài)欄上會(huì)顯示運(yùn)行指示。當(dāng)程序執(zhí)行的任務(wù)無(wú)法立即完成時(shí)，工具欄上會(huì)顯示稍大點(diǎn)的運(yùn)行指示。運(yùn)行指示提供了很好的反饋機(jī)制，明確地告知用戶程序正在運(yùn)行比告訴用戶任務(wù)已經(jīng)完成更為重要。