手機(jī)客戶(hù)端交互設(shè)計(jì)硬件OS與設(shè)計(jì)規(guī)范

1、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ī)軟件的感覺(jué)、布局經(jīng)常改變、設(shè)計(jì)和優(yōu)化時(shí)找不到明確的立足點(diǎn)等等一系列令人困惑的問(wèn)題。本人有過(guò)一段手機(jī)交互設(shè)計(jì)的時(shí)光，將在這里羅列一些總結(jié)或感想，帶一些建議，供看官們斟酌和評(píng)判。      拋開(kāi)定位、使用環(huán)境這樣的用戶(hù)研究體系的大頭，專(zhuān)注于說(shuō)明手機(jī)交互設(shè)計(jì)的特點(diǎn)，其難點(diǎn)在于如何有效的結(jié)合硬件、軟

2、件平臺(tái)和設(shè)計(jì)規(guī)范。以硬件區(qū)分手機(jī)類(lèi)型：僅以物理硬鍵控制操作的機(jī)型（后文簡(jiǎn)稱(chēng)按鍵機(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ī)范：  

3、60;  一個(gè)有經(jīng)驗(yàn)的設(shè)計(jì)開(kāi)發(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ì)和開(kāi)發(fā)的重復(fù)思考，并確保整個(gè)設(shè)計(jì)體系的一致性。不同的是，手機(jī)交互設(shè)計(jì)規(guī)范不僅有著限定作用，它同時(shí)還是一個(gè)信息架構(gòu)的體現(xiàn)、一個(gè)創(chuàng)新的過(guò)程、并且它還對(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é)上靈

4、光閃現(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í)變

5、為“刪除”。這樣犧牲了某些機(jī)型的某些操作的效率，保證了這個(gè)整體的機(jī)型都可使用。             Iphone OSIphone的出現(xiàn)一舉打破了之前若干平臺(tái)固有的設(shè)計(jì)定勢(shì)，硬鍵和操作模式都精簡(jiǎn)了許多。 不過(guò)其缺少固定的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和bac

6、k兩個(gè)硬鍵，雖然不夠獨(dú)樹(shù)一幟，但是在功能和設(shè)計(jì)之間做的了一個(gè)不錯(cuò)的平衡，對(duì)于第三方應(yīng)用來(lái)說(shuō)，這是一個(gè)可以有寬廣發(fā)揮空間的平臺(tái)。    根據(jù)上文所述，接下來(lái)我就主要以S60第3版、Android、Iphone OS為代表，通過(guò)抽取手機(jī)交互設(shè)計(jì)規(guī)范中的部分，來(lái)說(shuō)明他們的特性和區(qū)別，順帶展開(kāi)一些個(gè)人經(jīng)驗(yàn)的敘述。大家請(qǐng)看以下截圖： 上面幾幅圖并沒(méi)有刻意選擇同一類(lèi)型的界面來(lái)對(duì)比，我們不妨先僅關(guān)注硬鍵/全局功能鍵，會(huì)發(fā)現(xiàn)他們之間的顯著不同，實(shí)際上反映到設(shè)計(jì)過(guò)程中，這樣的區(qū)別對(duì)界面設(shè)計(jì)造成的影響要來(lái)的更大。   下面以

7、摘取手機(jī)交互設(shè)計(jì)規(guī)范的形式來(lái)陳述：1.硬鍵和手勢(shì)控制S60第3版AndroidIphone:以上硬鍵和手勢(shì)對(duì)于操作的控制，需要我們?cè)谠O(shè)計(jì)前有個(gè)十分清晰的認(rèn)識(shí)，并且整個(gè)團(tuán)隊(duì)達(dá)成一致，如有精力則需要專(zhuān)門(mén)寫(xiě)到設(shè)計(jì)規(guī)范文檔中。硬鍵控制是沒(méi)有什么改動(dòng)余地的，兩款觸摸機(jī)型可以對(duì)手勢(shì)適當(dāng)進(jìn)行取舍，畢竟有些應(yīng)用用不到所有的手勢(shì)，能精簡(jiǎn)操作最好。 （從下面開(kāi)始，會(huì)有一些功能界面，請(qǐng)?jiān)试S我偷懶一下，用線(xiàn)框代替實(shí)際界面截圖）2.菜單     S60第3版的菜單是由左軟鍵或OK鍵調(diào)出，需要定義以下幾點(diǎn)： （注：聚焦到某一條目上時(shí)，通常按OK鍵是打開(kāi)

8、，但有一些內(nèi)容包含幾種看起來(lái)級(jí)別相當(dāng)?shù)牟僮鳎藭r(shí)會(huì)彈出菜單選擇）如何收回背景是否霧化每屏最多顯示多少條  有無(wú)二級(jí)菜單，如果有，怎樣調(diào)出和收回，和一級(jí)菜單的位置關(guān)系，焦點(diǎn)條的區(qū)別  菜單項(xiàng)文字靠左  數(shù)字標(biāo)號(hào)，如果整個(gè)軟件能保證菜單項(xiàng)目均在10位以?xún)?nèi)，建議加上，這樣可以與數(shù)字鍵盤(pán)對(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)的

9、菜單是由menu硬鍵調(diào)出，比較多的是2-3行，每行2-3項(xiàng)，看起來(lái)像是一些按鈕，所以里面的圖標(biāo)和文字都居中。作為第3方應(yīng)用，如果菜單項(xiàng)稍多，做成一縱列的文字項(xiàng)從操作上來(lái)看也未嘗不可，畢竟用戶(hù)刻意記住其默認(rèn)的菜單形式也沒(méi)有什么好處。只是仍然需要注意控制一下數(shù)量，如果需要二級(jí)，可以考慮做成彈出的，比如在一級(jí)項(xiàng)中選擇“排序”，之后彈出選擇框來(lái)選擇 Android還有一種長(zhǎng)按菜單，按住某個(gè)項(xiàng)目達(dá)到一定時(shí)間后，會(huì)彈出在觸點(diǎn)附近的位置Iphone     Iphone并沒(méi)有一個(gè)明確和固定的菜單模式，較保守一點(diǎn)可以說(shuō)是沒(méi)有。一些類(lèi)似菜單的操作通常是

10、通過(guò)彈出選擇，或者是拆分成幾層，一次次點(diǎn)擊進(jìn)入更深層的頁(yè)面去尋找按鈕的形式來(lái)達(dá)成。所以要做Iphone平臺(tái)的第3方應(yīng)用的同學(xué)應(yīng)當(dāng)提前做好準(zhǔn)備，從產(chǎn)品策劃開(kāi)始就著手考慮這個(gè)問(wèn)題。最有效的辦法是首先盡可能的縮減功能，其次盡可能的縮減操作方式。否則會(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ī)

11、上，導(dǎo)航系統(tǒng)同樣重要，但是受限于屏幕尺寸，一般沒(méi)有足夠的空間放置這樣的組件，但手機(jī)有著自己的體系：我們可以看到各平臺(tái)對(duì)導(dǎo)航系統(tǒng)的規(guī)劃：標(biāo)題顯示當(dāng)前位置，可以是文字、圖標(biāo)+文字、也可以是一系列tab 菜單顯示可以做些什么，通常包含兩種類(lèi)型的選項(xiàng)：a只針對(duì)選中項(xiàng)/只針對(duì)當(dāng)前頁(yè)，b全局功能如設(shè)置和幫助，也就是說(shuō)菜單大多數(shù)作用是發(fā)起針對(duì)當(dāng)前頁(yè)的操作，或者轉(zhuǎn)到和當(dāng)前頁(yè)面沒(méi)直接關(guān)系的頁(yè)面返回這個(gè)比較復(fù)雜一些，也是最需要設(shè)計(jì)師注意的。鑒于第2條對(duì)于菜單形式的描述，如果再加入關(guān)聯(lián)頁(yè)面的選項(xiàng)，項(xiàng)目數(shù)量和類(lèi)型會(huì)使菜單不堪重負(fù)。并且頁(yè)面標(biāo)題通常無(wú)法準(zhǔn)確表達(dá)出相應(yīng)頁(yè)面的內(nèi)容，即使放入菜單，也需要用戶(hù)花時(shí)間去理解和回憶

12、。所以“返回”很重要：一個(gè)固定的位置，簡(jiǎn)單機(jī)械的一個(gè)動(dòng)作，一按一看一按一看，不需要刻意尋找和思考。在一個(gè)沒(méi)有全局導(dǎo)航的環(huán)境里，一步步后退到自己瀏覽過(guò)的頁(yè)面，從而了解當(dāng)前的頁(yè)面體系，或者重新發(fā)起一系列操作，是個(gè)能保證用戶(hù)找到位置的簡(jiǎn)單高效的模式。     在做第3方應(yīng)用時(shí)，需要盡可能?chē)?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)聚焦的位置

13、、是否允許上下左右循環(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ū)也分左右的話(huà)，處理起來(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è)面中包含了一些可操作的元素：人名、

14、圖片、網(wǎng)址，這里也會(huì)隱藏著一些典型操作，例如對(duì)網(wǎng)址可能有“打開(kāi)”“復(fù)制”“保存為書(shū)簽”等操作，此時(shí)聚焦并按OK鍵或者點(diǎn)擊則需要出現(xiàn)彈出菜單。     另外還需要注意上文提到的橫向和縱向切換焦點(diǎn)的問(wèn)題，正文中同一行如果有兩個(gè)名字可以聚焦，但是左右方向鍵已經(jīng)被標(biāo)題欄占用，那么切換人名的優(yōu)先級(jí)應(yīng)降低，改用別的形式，即使是按上下方向鍵來(lái)左右切換人名也是可以的。 4.彈出框     除了菜單功能的以外，彈出框一般出現(xiàn)在屏幕底端，同時(shí)其他屏幕其他部分背景霧化，這有利于用戶(hù)的視線(xiàn)從密密麻麻的小屏幕中快速找到關(guān)

15、鍵：彈出框有很多種類(lèi)型，除了“確定”“取消”等元件的基本布局以外，幾個(gè)平臺(tái)區(qū)別不是很大，大致可以分成幾個(gè)類(lèi)型和對(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í)間到、緩存已滿(mǎn)、發(fā)現(xiàn)新版本等文本輸入：光標(biāo)的移動(dòng)、刪除和復(fù)制粘貼、選中地址/人名等復(fù)雜邏輯的返回路徑：有時(shí)候會(huì)出現(xiàn)操作路徑中斷并跳轉(zhuǎn)的情況。比如正在寫(xiě)短信時(shí)，彈出提示收到新短信，用戶(hù)

16、此時(shí)通過(guò)彈出框直接轉(zhuǎn)到了查看短信的界面，此時(shí)“返回”是返回到查看短信的上一層，還是回到編輯短信的界面，這些情況想要集中處理，是比較令人頭疼的問(wèn)題。不久前我大概歸納過(guò)一套返回邏輯，大意是：a路徑默認(rèn)是從操作步驟向前一步一步返回，或者逐層向上返回；b如果遇到路徑跨頁(yè)面體系轉(zhuǎn)移，先按照a的方式返回，到達(dá)跨頁(yè)面跳轉(zhuǎn)的界面時(shí)，允許跨一次跳轉(zhuǎn)，之后按a的方式返回。以上羅列了一些我的歸納和心得，開(kāi)始新項(xiàng)目的時(shí)候基本可以按此思路先把這些方面統(tǒng)一規(guī)范，提及都是習(xí)慣用法，追求穩(wěn)妥的項(xiàng)目可以直接套用，追求創(chuàng)新的項(xiàng)目也可作為一個(gè)評(píng)判依據(jù)。    最后，用一個(gè)簡(jiǎn)單的例子提及一下：

17、設(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)用，例如電話(huà)本、短消息、設(shè)置、瀏覽器等，他們都遵循著一樣的規(guī)范，用戶(hù)每天也會(huì)在這些程序中切換若干次。如果一個(gè)第3方應(yīng)用和他們的基本操作方式不同，每次都會(huì)使用戶(hù)經(jīng)歷仔細(xì)觀察、出錯(cuò)等過(guò)程，想象一下每切換一次軟件就要轉(zhuǎn)換一套思維的痛苦吧。當(dāng)然，規(guī)范

18、是可以打破的，如果我們找到了簡(jiǎn)單高效并且操作方式和習(xí)慣用法沒(méi)有沖突的方式，可以嘗試一下。例如以前觸摸屏的列表項(xiàng)點(diǎn)擊一次是聚焦，再次點(diǎn)擊為打開(kāi)，后來(lái)普遍改為點(diǎn)擊一次就打開(kāi) 附：小屏幕移動(dòng)設(shè)備網(wǎng)頁(yè)設(shè)計(jì)注意事項(xiàng)在過(guò)去，小屏幕移動(dòng)設(shè)備網(wǎng)頁(yè)通常也被稱(chēng)之為WAP頁(yè)，或WAP站。原因是這類(lèi)網(wǎng)頁(yè)起源于一個(gè)叫WAP的無(wú)線(xiàn)協(xié)議。WAP能夠運(yùn)行于各種無(wú)線(xiàn)網(wǎng)絡(luò)之上，如GSM、GPRS、CDMA等。WML是無(wú)線(xiàn)注標(biāo)語(yǔ)言（Wireless Makeup language）的英文縮寫(xiě)。支持WAP技術(shù)的手機(jī)能瀏覽由WML描述的Internet內(nèi)容。而如今的小屏幕移動(dòng)設(shè)備，比如手機(jī)，都已經(jīng)具備訪(fǎng)問(wèn)WWW的能力。其內(nèi)置

19、的瀏覽器，或是第三方瀏覽器大多是WebKit引擎。也因此沒(méi)人再用WML組織WAP站點(diǎn)了，一般都是用HTML+CSS的方式。 在設(shè)計(jì)小屏幕移動(dòng)設(shè)備網(wǎng)頁(yè)時(shí)，你可能先得了解這么一些前提：手機(jī)屏幕分辨率亂得一塌糊涂，什么分辨率都有！我們的手機(jī)上網(wǎng)費(fèi)用賊貴賊貴！ UC瀏覽器擁有了賊大的市場(chǎng)占有率！ 關(guān)于UC瀏覽器：沒(méi)錯(cuò)，不得不提它。誰(shuí)叫它的市場(chǎng)占有率高呢。對(duì)于UC瀏覽器而言，顯然是非常適合我國(guó)國(guó)情的，它給用戶(hù)最大限度地節(jié)約手機(jī)上網(wǎng)流量。（UC瀏覽器打的口號(hào)貌似也就是省流量這一招了）?；谝苿?dòng)應(yīng)用，以及文本的可讀性，UC瀏覽器也體現(xiàn)了大字體、大行距等特性。UC瀏覽器相對(duì)于其他手機(jī)瀏覽器

20、而言，對(duì)HTML標(biāo)簽和CSS屬性存在有特殊的、自定義的處理方式。而所做的這些特殊處理，按目前來(lái)看，應(yīng)該將會(huì)繼續(xù)保留較長(zhǎng)一段時(shí)間，直到手機(jī)上網(wǎng)費(fèi)用得到較大幅度的下降，令消費(fèi)者更大膽地移動(dòng)上網(wǎng)之時(shí)。在實(shí)際開(kāi)發(fā)中，我們發(fā)現(xiàn)了UC瀏覽器對(duì)CSS存在一些“特殊照顧”：不支持font-family屬性，也就是說(shuō)，在UC瀏覽器你只能看到一種字體；不支持font-szie屬性，也就是說(shuō)，在UC瀏覽器你只能看到一樣大小的字體；不支持width、height、padding、margin、line-height屬性，也就是說(shuō)，在UC瀏覽器只能通過(guò)p、br等HTML標(biāo)簽來(lái)?yè)Q行以達(dá)到字符上下間隔；不支持固定像素的寬度，100%顯示頁(yè)面，也就是說(shuō)，在UC瀏覽器始終將看到的是“滿(mǎn)屏的”；不支持浮動(dòng)、層疊布局，float和position屬性無(wú)效，也就是說(shuō)，在UC瀏覽器你只能看到“左對(duì)齊”。支持background-color，但不支持background-image，也就是說(shuō)不支持CSS背景圖顯示，在UC瀏覽器你只能看到背景色。 不過(guò)，個(gè)人仍然認(rèn)為，如今建設(shè)小屏幕移動(dòng)設(shè)備網(wǎng)頁(yè)，完全可依據(jù)WebKit引擎的瀏覽器作為標(biāo)準(zhǔn)進(jìn)行界面開(kāi)發(fā)。換句話(huà)說(shuō)，我們?cè)O(shè)計(jì)支持UC瀏覽器的網(wǎng)頁(yè)，而不是設(shè)計(jì)以UC瀏覽器為標(biāo)準(zhǔn)的網(wǎng)頁(yè)。這樣做還有個(gè)好處，可以在大部分的手機(jī)瀏覽器上