Iphone和Android系統(tǒng)手機(jī)風(fēng)靡全球的同時(shí)，移動(dòng)互聯(lián)網(wǎng)的發(fā)展也掀起了一股熱潮。最近發(fā)現(xiàn)身邊一些朋友紛紛在做手機(jī)上的第3方應(yīng)用，或多或少碰到了些困惑，也許對(duì)于做慣了基于瀏覽器的產(chǎn)品的設(shè)計(jì)師來(lái)說(shuō)，有一些比較典型的要點(diǎn)容易被忽略，這就容易引發(fā)出：找不到手機(jī)軟件的感覺、布局經(jīng)常改變、設(shè)計(jì)和優(yōu)化時(shí)找不到明確的立足點(diǎn)等等一系列令人困惑的問題。本人有過一段手機(jī)交互設(shè)計(jì)的時(shí)光，將在這里羅列一些總結(jié)或感想，帶一些建議，供看官們斟酌和評(píng)判。????? 拋開定位、使用環(huán)境這樣的用戶研究體系的大頭，專注于說(shuō)明手機(jī)交互設(shè)計(jì)的特點(diǎn)，其難點(diǎn)在于如何有效的結(jié)合硬件、軟件平臺(tái)和設(shè)計(jì)規(guī)范。

以硬件區(qū)分手機(jī)類型：

• 僅以物理硬鍵控制操作的機(jī)型（后文簡(jiǎn)稱按鍵機(jī)）
• 主要以觸摸方式操作的機(jī)型（通常包含主頁(yè)、掛機(jī)等物理鍵）
• 物理硬鍵齊全，但支持觸摸操作的機(jī)型（外形和按鍵機(jī)型一樣）

主流的可安裝第3方應(yīng)用的軟件平臺(tái)：

• 塞班s60（第3和第5版）
• Windows?Mobile?for?PPC
• Android
• Iphone?OS
• Java（目前有非常巨大的智能和非智能機(jī)型群是包含java平臺(tái)的）
• 其他還有很多，諸如plam?os、UIQ等

交互設(shè)計(jì)規(guī)范：

一個(gè)有經(jīng)驗(yàn)的設(shè)計(jì)開發(fā)團(tuán)隊(duì)，在項(xiàng)目初期會(huì)率先著手建立或檢查相應(yīng)平臺(tái)的設(shè)計(jì)規(guī)范。和web控件規(guī)范一樣，手機(jī)交互設(shè)計(jì)規(guī)范定義了一些常用控件、組件等的布局和響應(yīng)方式，提煉設(shè)計(jì)中的公共部分，減少設(shè)計(jì)和開發(fā)的重復(fù)思考，并確保整個(gè)設(shè)計(jì)體系的一致性。不同的是，手機(jī)交互設(shè)計(jì)規(guī)范不僅有著限定作用，它同時(shí)還是一個(gè)信息架構(gòu)的體現(xiàn)、一個(gè)創(chuàng)新的過程、并且它還對(duì)后續(xù)的交互設(shè)計(jì)起到一定指導(dǎo)作用。我們了解到的iphone的無(wú)菜單的風(fēng)格、各種操作手勢(shì)、彈出框、標(biāo)題欄和返回按鈕，都是在這個(gè)階段就需要定義好的，而不是具體到某個(gè)功能中才任由設(shè)計(jì)師發(fā)揮（所以說(shuō)創(chuàng)新應(yīng)該作為一個(gè)系統(tǒng)工程，而不是在某幾個(gè)細(xì)節(jié)上靈光閃現(xiàn)）。

從設(shè)計(jì)第三方應(yīng)用的角度看，大致可以濃縮成以下幾個(gè)版本的設(shè)計(jì)規(guī)范：

• S60第3版—有一套比較經(jīng)典和嚴(yán)謹(jǐn)?shù)囊?guī)范?。另外S60第5版雖然是觸摸屏機(jī)型，但是對(duì)于交互設(shè)計(jì)師的工作來(lái)說(shuō)兩者區(qū)別并不巨大，只是把OK鍵替換換成了點(diǎn)擊，以及零碎的一些變化。
• Java版—事實(shí)上由于左右物理控制鍵和方向鍵、OK鍵是按鍵機(jī)型的普遍配置，S60第3版規(guī)范的適用?范圍是非常廣泛的，稍微修改一點(diǎn)就可以適用于Java平臺(tái)。區(qū)別在于手機(jī)的“刪除”和“返回”兩個(gè)物理硬鍵的配置不太一致，所以需要統(tǒng)一將右下角的命令默認(rèn)為“返回”，在編輯文本時(shí)，臨時(shí)變?yōu)椤皠h除”。這樣犧牲了某些機(jī)型的某些操作的效率，保證了這個(gè)整體的機(jī)型都可使用。
• Iphone?OS—Iphone的出現(xiàn)一舉打破了之前若干平臺(tái)固有的設(shè)計(jì)定勢(shì)，硬鍵和操作模式都精簡(jiǎn)了許多。?不過其缺少固定的menu模式，這對(duì)第三方軟件的設(shè)計(jì)來(lái)說(shuō)是個(gè)巨大的挑戰(zhàn)，要么需要很大程度上脫離iphone自身的設(shè)計(jì)規(guī)范體系，要么就極端精簡(jiǎn)功能。
• Android—跟從了一些iphone中的經(jīng)典手勢(shì)，操作和頁(yè)面布局風(fēng)格上相對(duì)保守一點(diǎn)，保留了menu和back兩個(gè)硬鍵，雖然不夠獨(dú)樹一幟，但是在功能和設(shè)計(jì)之間做的了一個(gè)不錯(cuò)的平衡，對(duì)于第三方應(yīng)用來(lái)說(shuō)，這是一個(gè)可以有寬廣發(fā)揮空間的平臺(tái)。

根據(jù)上文所述，接下來(lái)我就主要以S60第3版、Android、Iphone?OS為代表，通過抽取手機(jī)交互設(shè)計(jì)規(guī)范中的部分，來(lái)說(shuō)明他們的特性和區(qū)別，順帶展開一些個(gè)人經(jīng)驗(yàn)的敘述。

大家請(qǐng)看以下截圖：

上面幾幅圖并沒有刻意選擇同一類型的界面來(lái)對(duì)比，我們不妨先僅關(guān)注硬鍵/全局功能鍵，會(huì)發(fā)現(xiàn)他們之間的顯著不同，實(shí)際上反映到設(shè)計(jì)過程中，這樣的區(qū)別對(duì)界面設(shè)計(jì)造成的影響要來(lái)的更大。

下面以摘取手機(jī)交互設(shè)計(jì)規(guī)范的形式來(lái)陳述：

1.硬鍵和手勢(shì)控制

S60第3版

Android

Iphone:

以上硬鍵和手勢(shì)對(duì)于操作的控制，需要我們?cè)谠O(shè)計(jì)前有個(gè)十分清晰的認(rèn)識(shí)，并且整個(gè)團(tuán)隊(duì)達(dá)成一致，如有精力則需要專門寫到設(shè)計(jì)規(guī)范文檔中。硬鍵控制是沒有什么改動(dòng)余地的，兩款觸摸機(jī)型可以對(duì)手勢(shì)適當(dāng)進(jìn)行取舍，畢竟有些應(yīng)用用不到所有的手勢(shì)，能精簡(jiǎn)操作最好。

（從下面開始，會(huì)有一些功能界面，請(qǐng)?jiān)试S我偷懶一下，用線框代替實(shí)際界面截圖）

2.菜單

S60第3版的菜單是由左軟鍵或OK鍵調(diào)出，需要定義以下幾點(diǎn)：

（注：聚焦到某一條目上時(shí)，通常按OK鍵是打開，但有一些內(nèi)容包含幾種看起來(lái)級(jí)別相當(dāng)?shù)牟僮?，此時(shí)會(huì)彈出菜單選擇）

• 如何收回
• 背景是否霧化
• 每屏最多顯示多少條
• 有無(wú)二級(jí)菜單，如果有，怎樣調(diào)出和收回，和一級(jí)菜單的位置關(guān)系，焦點(diǎn)條的區(qū)別
• 菜單項(xiàng)文字靠左
• 數(shù)字標(biāo)號(hào)，如果整個(gè)軟件能保證菜單項(xiàng)目均在10位以內(nèi)，建議加上，這樣可以與數(shù)字鍵盤對(duì)應(yīng)
• 對(duì)聚焦項(xiàng)或當(dāng)前頁(yè)面不適用的菜單項(xiàng)，是不顯示還是文字變灰處理。
• OK鍵菜單只包含針對(duì)聚焦內(nèi)容的操作項(xiàng)，需控制在一屏之內(nèi)，避免二級(jí)項(xiàng)
• 菜單項(xiàng)的排序規(guī)則：針對(duì)聚焦項(xiàng)的在上，其他的在下，這兩部分中分別按照使用頻率從上至下排列

Android

Android傳統(tǒng)的菜單是由menu硬鍵調(diào)出，比較多的是2-3行，每行2-3項(xiàng)，看起來(lái)像是一些按鈕，所以里面的圖標(biāo)和文字都居中。作為第3方應(yīng)用，如果菜單項(xiàng)稍多，做成一縱列的文字項(xiàng)從操作上來(lái)看也未嘗不可，畢竟用戶刻意記住其默認(rèn)的菜單形式也沒有什么好處。只是仍然需要注意控制一下數(shù)量，如果需要二級(jí)，可以考慮做成彈出的，比如在一級(jí)項(xiàng)中選擇“排序”，之后彈出選擇框來(lái)選擇

Android還有一種長(zhǎng)按菜單，按住某個(gè)項(xiàng)目達(dá)到一定時(shí)間后，會(huì)彈出在觸點(diǎn)附近的位置

Iphone

Iphone并沒有一個(gè)明確和固定的菜單模式，較保守一點(diǎn)可以說(shuō)是沒有。一些類似菜單的操作通常是通過彈出選擇，或者是拆分成幾層，一次次點(diǎn)擊進(jìn)入更深層的頁(yè)面去尋找按鈕的形式來(lái)達(dá)成。所以要做Iphone平臺(tái)的第3方應(yīng)用的同學(xué)應(yīng)當(dāng)提前做好準(zhǔn)備，從產(chǎn)品策劃開始就著手考慮這個(gè)問題。最有效的辦法是首先盡可能的縮減功能，其次盡可能的縮減操作方式。否則會(huì)發(fā)現(xiàn)為了一些細(xì)枝末節(jié)的操作，還需要設(shè)定好幾層頁(yè)面。當(dāng)然，也可以加入一條操作欄來(lái)作為輔助，只是整體風(fēng)格和操作就不Iphone了。

說(shuō)到這里，不得不結(jié)合前兩點(diǎn)延伸一下，對(duì)導(dǎo)航系統(tǒng)進(jìn)行說(shuō)明：

眾所周知，導(dǎo)航系統(tǒng)主要擔(dān)負(fù)著幾個(gè)任務(wù)：展示內(nèi)容架構(gòu)、表明當(dāng)前位置/狀態(tài)、表明可以去哪里。在網(wǎng)頁(yè)上的典型形式為全局導(dǎo)航條。在手機(jī)上，導(dǎo)航系統(tǒng)同樣重要，但是受限于屏幕尺寸，一般沒有足夠的空間放置這樣的組件，但手機(jī)有著自己的體系：

我們可以看到各平臺(tái)對(duì)導(dǎo)航系統(tǒng)的規(guī)劃：

• 標(biāo)題–顯示當(dāng)前位置，可以是文字、圖標(biāo)+文字、也可以是一系列tab
• 菜單–顯示可以做些什么，通常包含兩種類型的選項(xiàng)：a只針對(duì)選中項(xiàng)/只針對(duì)當(dāng)前頁(yè)，b全局功能如設(shè)置和幫助，也就是說(shuō)菜單大多數(shù)作用是發(fā)起針對(duì)當(dāng)前頁(yè)的操作，或者轉(zhuǎn)到和當(dāng)前頁(yè)面沒直接關(guān)系的頁(yè)面
• 返回–這個(gè)比較復(fù)雜一些，也是最需要設(shè)計(jì)師注意的。鑒于第2條對(duì)于菜單形式的描述，如果再加入關(guān)聯(lián)頁(yè)面的選項(xiàng)，項(xiàng)目數(shù)量和類型會(huì)使菜單不堪重負(fù)。并且頁(yè)面標(biāo)題通常無(wú)法準(zhǔn)確表達(dá)出相應(yīng)頁(yè)面的內(nèi)容，即使放入菜單，也需要用戶花時(shí)間去理解和回憶。所以“返回”很重要：一個(gè)固定的位置，簡(jiǎn)單機(jī)械的一個(gè)動(dòng)作，一按—一看—一按—一看，不需要刻意尋找和思考。在一個(gè)沒有全局導(dǎo)航的環(huán)境里，一步步后退到自己瀏覽過的頁(yè)面，從而了解當(dāng)前的頁(yè)面體系，或者重新發(fā)起一系列操作，是個(gè)能保證用戶找到位置的簡(jiǎn)單高效的模式。

在做第3方應(yīng)用時(shí)，需要盡可能嚴(yán)格保持以上幾點(diǎn)的規(guī)范化

3.焦點(diǎn)

焦點(diǎn)更大的意義是在按鍵機(jī)型上，用一個(gè)帶底色的條框襯托出當(dāng)前選中的項(xiàng)。

對(duì)焦點(diǎn)的設(shè)定和控制應(yīng)當(dāng)盡可能的簡(jiǎn)單，需要定義默認(rèn)聚焦的位置、是否允許上下左右循環(huán)

在按鍵機(jī)型上，4個(gè)方向鍵控制焦點(diǎn)向4個(gè)方向移動(dòng)。 通常一個(gè)方向只限一種移動(dòng)方式，如上左圖：上下鍵控制列表區(qū)的焦點(diǎn)在列表項(xiàng)間移動(dòng)，左右鍵控制標(biāo)題欄的tab左右切換。 如果列表區(qū)也分左右的話，處理起來(lái)就復(fù)雜了，應(yīng)極力避免。如上右圖：需要先向上移動(dòng)焦點(diǎn)到標(biāo)題欄，然后才能按左右鍵切換tab？但如果當(dāng)前焦點(diǎn)所在的項(xiàng)處于第2屏，第3屏，或者更靠下呢？是否需要一直按住“上”，直到上邊的內(nèi)容滾好幾屏后才聚焦到tab上？

在一些情況下，焦點(diǎn)容易被遺忘，其中某些對(duì)觸摸屏機(jī)型同樣適用：

如上圖，頁(yè)面中包含了一些可操作的元素：人名、圖片、網(wǎng)址，這里也會(huì)隱藏著一些典型操作，例如對(duì)網(wǎng)址可能有“打開”“復(fù)制”“保存為書簽”等操作，此時(shí)聚焦并按OK鍵或者點(diǎn)擊則需要出現(xiàn)彈出菜單。

另外還需要注意上文提到的橫向和縱向切換焦點(diǎn)的問題，正文中同一行如果有兩個(gè)名字可以聚焦，但是左右方向鍵已經(jīng)被標(biāo)題欄占用，那么切換人名的優(yōu)先級(jí)應(yīng)降低，改用別的形式，即使是按上下方向鍵來(lái)左右切換人名也是可以的。

4.彈出框

除了菜單功能的以外，彈出框一般出現(xiàn)在屏幕底端，同時(shí)其他屏幕其他部分背景霧化，這有利于用戶的視線從密密麻麻的小屏幕中快速找到關(guān)鍵：

彈出框有很多種類型，除了“確定”“取消”等元件的基本布局以外，幾個(gè)平臺(tái)區(qū)別不是很大，大致可以分成幾個(gè)類型和對(duì)應(yīng)的處理方式，以下是我歸納和建議的一些處理方式，只列最適用于S60第3版的：

5.列表

列表項(xiàng)的呈現(xiàn)可以集中定義幾種模式：常態(tài)、編輯/被調(diào)用：

常態(tài)：

編輯/被調(diào)用：

6.還有一些方面可以事先定義：

• 搜索邏輯
• 事件處理：無(wú)信號(hào)、低電量提示的形式和時(shí)機(jī)、來(lái)電、來(lái)短信、鬧鐘時(shí)間到、緩存已滿、發(fā)現(xiàn)新版本等
• 文本輸入：光標(biāo)的移動(dòng)、刪除和復(fù)制粘貼、選中地址/人名等
• 復(fù)雜邏輯的返回路徑：有時(shí)候會(huì)出現(xiàn)操作路徑中斷并跳轉(zhuǎn)的情況。比如正在寫短信時(shí)，彈出提示收到新短信，用戶此時(shí)通過彈出框直接轉(zhuǎn)到了查看短信的界面，此時(shí)“返回”是返回到查看短信的上一層，還是回到編輯短信的界面，這些情況想要集中處理，是比較令人頭疼的問題。不久前我大概歸納過一套返回邏輯，大意是：a路徑默認(rèn)是從操作步驟向前一步一步返回，或者逐層向上返回；b如果遇到路徑跨頁(yè)面體系轉(zhuǎn)移，先按照a的方式返回，到達(dá)跨頁(yè)面跳轉(zhuǎn)的界面時(shí)，允許跨一次跳轉(zhuǎn)，之后按a的方式返回。

以上羅列了一些我的歸納和心得，開始新項(xiàng)目的時(shí)候基本可以按此思路先把這些方面統(tǒng)一規(guī)范，提及都是習(xí)慣用法，追求穩(wěn)妥的項(xiàng)目可以直接套用，追求創(chuàng)新的項(xiàng)目也可作為一個(gè)評(píng)判依據(jù)。

最后，用一個(gè)簡(jiǎn)單的例子提及一下：設(shè)計(jì)與系統(tǒng)規(guī)范盡量保持一致的重要性。

假如我們把mac系統(tǒng)的軟件風(fēng)格直接搬到windows中，那么在切換不同軟件的時(shí)候，最小化、關(guān)閉等按鈕的忽左忽右，會(huì)使我們經(jīng)常默認(rèn)就把鼠標(biāo)移動(dòng)到了相反的方向。

每1個(gè)第3方應(yīng)用在手機(jī)中都不可能一個(gè)程序在戰(zhàn)斗，手機(jī)中會(huì)自帶很多系統(tǒng)應(yīng)用，例如電話本、短消息、設(shè)置、瀏覽器等，他們都遵循著一樣的規(guī)范，用戶每天也會(huì)在這些程序中切換若干次。如果一個(gè)第3方應(yīng)用和他們的基本操作方式不同，每次都會(huì)使用戶經(jīng)歷仔細(xì)觀察、出錯(cuò)等過程，想象一下每切換一次軟件就要轉(zhuǎn)換一套思維的痛苦吧。當(dāng)然，規(guī)范是可以打破的，如果我們找到了簡(jiǎn)單高效并且操作方式和習(xí)慣用法沒有沖突的方式，可以嘗試一下。例如以前觸摸屏的列表項(xiàng)點(diǎn)擊一次是聚焦，再次點(diǎn)擊為打開，后來(lái)普遍改為點(diǎn)擊一次就打開

————————————————————————————————————————————

下期可能的內(nèi)容：手機(jī)交互設(shè)計(jì)的表達(dá)