相比于前幾年，如今的觸屏設(shè)備已經(jīng)成為市場(chǎng)當(dāng)中的絕對(duì)主流了。不過(guò)即便如此，人們對(duì)于這類(lèi)設(shè)備的人機(jī)物理交互方式仍然缺乏足夠清晰的認(rèn)知與理解。市面上的很多應(yīng)用雖然在功能方面都相當(dāng)?shù)目?，但是從人機(jī)工學(xué)的角度來(lái)看，它們的設(shè)計(jì)卻非常不合理。這些應(yīng)用能夠很有效地激發(fā)用戶的好奇心，吸引他們?nèi)ハ螺d，但通常會(huì)由于用起來(lái)相當(dāng)不舒服而被用戶很快地卸載掉。
我們要盡量避免這種情況發(fā)生在自己的產(chǎn)品上?；c(diǎn)時(shí)間來(lái)了解一些這方面的基本常識(shí)是很有必要的，本章所要展示的一些基本概念將為你的實(shí)際設(shè)計(jì)工作奠定良好的基礎(chǔ)。
對(duì)肢體動(dòng)作的理解
也許這是你初次涉足移動(dòng)領(lǐng)域的交互設(shè)計(jì)工作，不過(guò)在這之前，你對(duì)于其他平臺(tái)當(dāng)中的相關(guān)設(shè)計(jì)工作應(yīng)該已經(jīng)擁有豐富的經(jīng)驗(yàn)了。除了要在移動(dòng)設(shè)備的輸入及輸出方式上做到全面的認(rèn)知以外，你還必須對(duì)人機(jī)交互過(guò)程當(dāng)中的肢體動(dòng)作規(guī)律加以理解?；叵胍幌逻^(guò)去的工作經(jīng)歷，你會(huì)發(fā)現(xiàn)，網(wǎng)站或是桌面設(shè)備客戶端的相關(guān)設(shè)計(jì)方案當(dāng)中基本不會(huì)涉及到人機(jī)物理交互方式等方面的因素。因?yàn)樽烂嬖O(shè)備當(dāng)中的人機(jī)交互方式早已成為一種固化的模式，鍵盤(pán)、鼠標(biāo)、顯示器一直是最基本的輸入及輸出設(shè)備，而且?guī)资陙?lái)并沒(méi)有發(fā)生過(guò)本質(zhì)的變化。
而在觸屏移動(dòng)設(shè)備領(lǐng)域，你的設(shè)計(jì)思路必須突破傳統(tǒng)的束縛。相比于通過(guò)硬件輸入設(shè)備對(duì)軟件進(jìn)行控制操作的模式，我們現(xiàn)在所面對(duì)的是更加虛擬化的、具有更高靈活性的交互環(huán)境。在這個(gè)環(huán)境當(dāng)中，觸摸是最基礎(chǔ)也是最重要的輸入方式，我們幾乎可以將這種方式以任何形式運(yùn)用到任何交互對(duì)象上。這就意味著，當(dāng)你在為移動(dòng)應(yīng)用進(jìn)行設(shè)計(jì)的時(shí)候，你同時(shí)也在打造著專(zhuān)門(mén)屬于這個(gè)產(chǎn)品的“鍵盤(pán)”和“鼠標(biāo)”。這顯然給設(shè)計(jì)師們帶來(lái)了極高的自由度，但同時(shí)也帶來(lái)了一些挑戰(zhàn)。
iPhone
iPhone是當(dāng)今移動(dòng)計(jì)算領(lǐng)域中的精華產(chǎn)品，它的尺寸規(guī)格可以讓用戶在單手持機(jī)的情況下完成多數(shù)操作任務(wù)。iPhone的機(jī)身上只有四個(gè)實(shí)體硬按鍵，外加一個(gè)靜音切換開(kāi)關(guān)?？梢哉f(shuō)，這些硬按鍵的布局方案本身就為用戶定義了一種最基本的持機(jī)方式，不過(guò)實(shí)際當(dāng)中的情況遠(yuǎn)不止這一種。
經(jīng)過(guò)之前幾章的學(xué)習(xí)，你也許已經(jīng)逐漸了解了應(yīng)該怎樣去打造具有差異化的交互機(jī)制，但是我們一直以來(lái)關(guān)注的話題當(dāng)中幾乎沒(méi)有涉及到人機(jī)物理交互方面的問(wèn)題。好的設(shè)計(jì)方案必須能夠確保最終的實(shí)際產(chǎn)品在用戶手中是真正好用的。
對(duì)于iPhone，我們可以歸納出六種持機(jī)操作方式;在應(yīng)用的設(shè)計(jì)工作中，這些方面的因素是必須被考慮進(jìn)去的。當(dāng)然，我們并不需要讓界面的布局能夠完美地適應(yīng)于每一種方式，但至少應(yīng)該保證設(shè)計(jì)方案對(duì)其中的一兩種是友好的。
圖 7-1 縱向單手持機(jī)操作
圖 7-2 縱向一手持機(jī)一手操作
圖 7-3 縱向雙手持機(jī)操作
圖 7-4 橫向單手持機(jī)操作
圖 7-5 橫向一手持機(jī)一手操作
圖 7-6 橫向雙手持機(jī)操作
除了這些以外，我們還可以在實(shí)際當(dāng)中發(fā)現(xiàn)更多的持機(jī)操作方式，不過(guò)這六種確實(shí)是最具代表性和參考價(jià)值的，而且其中的任何一種方式都會(huì)對(duì)界面布局及手勢(shì)機(jī)制等方面的設(shè)計(jì)決策造成影響。在操作過(guò)程中，手的位置以及屏幕的定向方式也會(huì)決定著交互行為的整體效率。在產(chǎn)品前期，我們就應(yīng)該考慮到這些方面的因素，并通過(guò)原型對(duì)各種持機(jī)操作方式進(jìn)行充分的測(cè)試，以評(píng)估設(shè)計(jì)方案在不同情況下的友好程度。
iPad
iPad的尺寸顯然比iPhone大很多，這也使其在人機(jī)物理交互方面的表現(xiàn)與iPhone略有不同。而且正像我們?cè)诘谒恼庐?dāng)中提到的，iPad帶來(lái)的是更加閑適化的計(jì)算體驗(yàn)，用戶與其進(jìn)行交互會(huì)話的時(shí)間通常較長(zhǎng)。所以，這款設(shè)備所體現(xiàn)出的兩點(diǎn)交互特性是我們必須注意的：
●尺寸規(guī)格更大。
●交互會(huì)話時(shí)間更長(zhǎng)。
出于這兩點(diǎn)原因，用戶在一般情況下不會(huì)通過(guò)單手來(lái)使用iPad。當(dāng)然這并不意味著iPad無(wú)法通過(guò)單手操作，只是雙手配合使用的情況更為普遍。接下來(lái)的幾張圖片向我們展示了用戶在使用iPad時(shí)所慣用的持機(jī)操作方式。
圖 7-7 縱向一手持機(jī)一手操作
圖 7-8 縱向雙手持機(jī)操作
圖 7-9 橫向一手持機(jī)一手操作
圖 7-10 橫向雙手持機(jī)操作
對(duì)于iPad應(yīng)用，我們同樣要充分地考慮到用戶最可能采用的持機(jī)操作方式，并以此來(lái)驗(yàn)證設(shè)計(jì)方案的友好性。
界面元素的布局
在第二章里，我們?cè)?jīng)在直接操縱的概念當(dāng)中提到了界面元素的尺寸及間距方面的設(shè)計(jì)問(wèn)題。為觸屏設(shè)備打造用戶界面設(shè)計(jì)方案的時(shí)候，有兩點(diǎn)基本的設(shè)計(jì)要素是必須考慮到的：
●尺寸：觸控元素的目標(biāo)區(qū)域范圍。
●間距：觸控元素彼此之間的距離。
在iPhone時(shí)代之前，我也許會(huì)對(duì)觸控元素的目標(biāo)區(qū)域尺寸做出非常明確的建議。其實(shí)直到幾年前，我們?nèi)粤?xí)慣于為觸控目標(biāo)設(shè)定一個(gè)比較大的“最小尺寸”，以避免因?yàn)橛|控元素過(guò)小所造成的可用性方面的問(wèn)題。曾經(jīng)，這個(gè)最小尺寸大致在1cm2到1.5cm2之間。想想看，這可是一個(gè)不小的按鈕了，甚至比iPhone中的應(yīng)用圖標(biāo)還要大。另外，在多個(gè)觸控元素的間距方面，曾經(jīng)的大致原則是，無(wú)論橫向還是縱向，彼此之間至少要保持1cm的距離。過(guò)去的這些習(xí)慣性做法也是有一定道理的，因?yàn)楫?dāng)時(shí)的觸屏技術(shù)在感應(yīng)定位方面還無(wú)法做到非常精確，很多時(shí)候，一個(gè)交互對(duì)象的有效觸控區(qū)域距離其本身會(huì)有一定程度的偏差。所以當(dāng)時(shí)的用戶界面設(shè)計(jì)方案必須將這些方面的因素都考慮進(jìn)去。另外，大尺寸的觸控目標(biāo)區(qū)域也可以為用戶帶來(lái)某種心理上的保障，使操作感更加舒適穩(wěn)妥。
如今，這種情況已經(jīng)得到了一定程度的改善，但界面元素的觸控區(qū)域尺寸及間距方面的問(wèn)題依然是我們?cè)诖蛟旖换ンw驗(yàn)的過(guò)程中所必須考慮到的。iOS設(shè)備所采用的電容觸屏技術(shù)在感應(yīng)定位方面具有高度的精確性。也許你已經(jīng)注意了，當(dāng)使用iPhone瀏覽網(wǎng)頁(yè)的時(shí)候，即使頁(yè)面一直保持在默認(rèn)的縮小狀態(tài)，你依然可以通過(guò)小指來(lái)準(zhǔn)確地點(diǎn)擊到那些已經(jīng)被縮得很小的鏈接或按鈕。在這種情況下，我們其實(shí)并不需要在觸控元素目標(biāo)區(qū)域的最小尺寸上做過(guò)多的糾結(jié);相比而言，觸控元素之間的間距才是界面布局方案當(dāng)中的關(guān)鍵因素。
觸控元素彼此之間的距離越近，用戶誤操作的可能性就越大。關(guān)于間距的把握，我們有一個(gè)大致的原則，也就是兩個(gè)觸控元素之間的距離應(yīng)該與它們自身的尺寸成反比。
圖 7-11 兩個(gè)觸控元素之間的距離應(yīng)該與它們自身的尺寸成反比
觸控元素的尺寸越大，它們之間的距離就可以越近。反之，小尺寸觸控元素之間應(yīng)該盡量保持較大的間距，因?yàn)檩^小的元素對(duì)觸摸的準(zhǔn)確性要求更高，它們之間的距離必須足夠遠(yuǎn)，才能有效地降低誤操作的可能性。而大尺寸交互元素通常是很容易被觸摸到的，減小它們之間的距離并不會(huì)對(duì)操作的準(zhǔn)確性造成影響。
略有夸張的講，如果界面當(dāng)中只有一個(gè)交互對(duì)象，那么即使將它設(shè)計(jì)為1像素見(jiàn)方，單從觸控操作的角度來(lái)說(shuō)也是完全可行的。
反饋機(jī)制
時(shí)間與狀態(tài)的概念往往會(huì)在交互方案當(dāng)中起到至關(guān)重要的作用。我們已經(jīng)在本書(shū)之前的相關(guān)章節(jié)當(dāng)中對(duì)那些以時(shí)間及狀態(tài)變化為主導(dǎo)的解決方案的進(jìn)行了分析。現(xiàn)在，我們將圍繞著這兩個(gè)概念深入思考系統(tǒng)對(duì)于交互操作的響應(yīng)方式。
系統(tǒng)應(yīng)該以怎樣的方式對(duì)用戶的輸入行為產(chǎn)生有效的反饋，這是我們?cè)谠O(shè)計(jì)方案當(dāng)中必須明確定義出來(lái)的。反饋的本質(zhì)作用是確認(rèn)某個(gè)交互事件已經(jīng)發(fā)生，并且已經(jīng)被系統(tǒng)所捕獲。通常，交互對(duì)象會(huì)發(fā)生一些簡(jiǎn)單的狀態(tài)變化，以此從視覺(jué)上體現(xiàn)出反饋的效果。
另外，從情感化的角度來(lái)看，當(dāng)用戶以正確的方式執(zhí)行了某種交互操作時(shí)，系統(tǒng)所做出的恰當(dāng)?shù)姆答佭€可以給用戶帶來(lái)積極可靠的體驗(yàn)與感受。所以，在我們從整體上為產(chǎn)品打造具有差異化的交互模型的同時(shí)，還必須對(duì)這些細(xì)節(jié)當(dāng)中的交互機(jī)制保持必要的敏感度。某些特定的交互模式當(dāng)中的細(xì)節(jié)行為特征會(huì)對(duì)整體設(shè)計(jì)方案產(chǎn)生一定程度的影響，對(duì)于這些，我們要做到心知肚明。
舉個(gè)簡(jiǎn)單的例子，那些剛剛涉足移動(dòng)領(lǐng)域的設(shè)計(jì)師們通常會(huì)因?yàn)橛|屏設(shè)備當(dāng)中的交互對(duì)象缺少“懸停”狀態(tài)屬性而感到不滿，因?yàn)樵趥鹘y(tǒng)設(shè)備當(dāng)中，這類(lèi)狀態(tài)屬性往往可以被賦予很多出彩的效果。實(shí)際上，懸停也只是系統(tǒng)反饋機(jī)制當(dāng)中的一種，在觸屏設(shè)備中，我們完全可以在其他細(xì)節(jié)當(dāng)中通過(guò)更具創(chuàng)造性的方式來(lái)實(shí)現(xiàn)類(lèi)似的反饋效果。讓我們想一想觸屏設(shè)備當(dāng)中最基本的交互事件——觸摸。在多數(shù)情況下，系統(tǒng)對(duì)于觸摸事件的反饋就是使交互對(duì)象所呈現(xiàn)出的狀態(tài)發(fā)生某種簡(jiǎn)單的變化。如果說(shuō)這種機(jī)制當(dāng)中缺乏某種創(chuàng)新性，那么根本原因就在于這個(gè)反饋機(jī)制的思路并沒(méi)有擺脫傳統(tǒng)設(shè)備的束縛，它所體現(xiàn)出來(lái)的仍然是“鼠標(biāo)按下”或“鼠標(biāo)點(diǎn)擊”這樣的行為模式。為了降低應(yīng)用開(kāi)發(fā)的難度，iOS預(yù)先定義了一系列最基本的反饋行為模式，并使它們成為交互元素自身所固有的一種屬性;這種做法在某種程度上也局限了反饋機(jī)制的創(chuàng)意空間。
我們生活在一個(gè)由各種嚴(yán)整的物理定律所支配著的世界當(dāng)中。在設(shè)計(jì)用戶界面的時(shí)候，我們也應(yīng)該從自己在現(xiàn)實(shí)世界所獲得的經(jīng)驗(yàn)當(dāng)中汲取靈感，為各種交互事件增添更多逼真而且有趣的視覺(jué)效果。我們不僅可以改變交互對(duì)象的外觀，同時(shí)還可以改變它們?cè)跔顟B(tài)變化過(guò)程當(dāng)中的視覺(jué)效果。有沒(méi)有什么動(dòng)畫(huà)模式可以使元素表現(xiàn)出力反饋的效果?當(dāng)然有。我們能否同樣為手勢(shì)操作增添某種即時(shí)的視覺(jué)回饋效果?當(dāng)然可以。
如果你準(zhǔn)備在設(shè)計(jì)方案中打造更加真實(shí)而健壯的交互反饋機(jī)制，那么一定要注意對(duì)時(shí)間概念的把握。這里所說(shuō)的時(shí)間概念，包括反饋行為對(duì)于觸發(fā)事件的響應(yīng)速度，反饋行為的呈現(xiàn)速度，及其能夠持續(xù)的時(shí)長(zhǎng)。這些方面的因素都是非常重要的，因?yàn)槟惚仨毩私夥答仚C(jī)制會(huì)對(duì)整個(gè)交互流程產(chǎn)生怎樣的影響。如果用戶需要花費(fèi)很多時(shí)間等待反饋動(dòng)畫(huà)效果結(jié)束才能進(jìn)入工作流的下一個(gè)環(huán)節(jié)，那么他們很有可能因此而感到受挫。對(duì)于設(shè)計(jì)方案當(dāng)中這類(lèi)細(xì)節(jié)之處所帶來(lái)的體驗(yàn)效應(yīng)，我們要時(shí)刻保持關(guān)注。
對(duì)隱藏元素的提示
很多時(shí)候，我們需要在設(shè)計(jì)方案當(dāng)中對(duì)界面元素的呈現(xiàn)方式進(jìn)行管理。這里，我們主要指那些在狀態(tài)方面具有高度可變性的交互對(duì)象。以隱藏控制元素為例，用戶必須首先完成某些的操作，才能使這些控制元素呈現(xiàn)出來(lái)并真正進(jìn)入工作狀態(tài)。這類(lèi)設(shè)計(jì)方案當(dāng)中通常存在一些弊端，因?yàn)樵谀J(rèn)狀態(tài)下，界面會(huì)將一些重要的控制元素隱藏起來(lái)，從可用性的角度來(lái)講，這似乎是一種違反直覺(jué)的設(shè)計(jì)方式。但在很多情況下，這種方案又是非常有用的。
要使這類(lèi)設(shè)計(jì)方案獲得成功，我們必須向用戶提供足夠的引導(dǎo)與提示，使他們明白應(yīng)該以怎樣的方式調(diào)出這些隱藏控制元素。比較簡(jiǎn)單的做法，就是在應(yīng)用第一次啟動(dòng)的時(shí)候，保持這些元素的可見(jiàn)性，讓用戶了解到這些控制元素的存在;然后再通過(guò)某種動(dòng)畫(huà)效果將這些元素隱藏起來(lái)。當(dāng)然，你還可以在應(yīng)用第一次啟動(dòng)時(shí)，以某種可視化的方式明確地向用戶介紹用來(lái)調(diào)出隱藏控制元素的具體操作方法。對(duì)于那些必須通過(guò)特殊的手勢(shì)才能使隱藏元素顯示出來(lái)的界面來(lái)說(shuō)，這種明確的引導(dǎo)會(huì)特別有用。
除了在首次啟動(dòng)的過(guò)程中進(jìn)行必要的引導(dǎo)之外，我們還可以在界面當(dāng)中使用半透明小圖標(biāo)或其他形式的視覺(jué)提示，讓用戶了解在這個(gè)位置附近有處于隱藏狀態(tài)的控制元素。此外，時(shí)間和狀態(tài)的概念也可以在這里發(fā)揮作用。例如，我們可以讓這種視覺(jué)提示在工作流進(jìn)行到某些特定的環(huán)節(jié)時(shí)呈現(xiàn)給用戶，或是讓它們按照預(yù)設(shè)的頻率反復(fù)出現(xiàn)。
當(dāng)用戶已經(jīng)熟悉了應(yīng)用的使用方法之后，這些提示和引導(dǎo)就失去存在的必要了。最好在應(yīng)用內(nèi)部或是iOS全局的設(shè)置當(dāng)中為用戶提供一種可以管理這些提示的機(jī)制。不過(guò)不要忘記，你同樣需要以某種方式告訴用戶這些操作提示是可以在設(shè)置當(dāng)中被關(guān)閉或再次打開(kāi)的。
總結(jié)
讓我們來(lái)回顧一下在本章當(dāng)中所學(xué)到的東西：
為移動(dòng)應(yīng)用進(jìn)行設(shè)計(jì)的時(shí)候，要考慮到設(shè)備自身的物理屬性，并理解這些屬性會(huì)對(duì)應(yīng)用的實(shí)際使用方式造成怎樣的影響。
界面元素觸控區(qū)域的尺寸和間距是我們?cè)诖蛟旖换ンw驗(yàn)時(shí)所必須考慮到的重要因素。觸控元素的尺寸越大，它們之間的距離就可以越近。反之，小尺寸觸控元素之間應(yīng)該盡量保持較大的間距，才能有效地降低誤操作的可能性。
我們可以通過(guò)很多方式將動(dòng)態(tài)的視覺(jué)反饋效果整合到應(yīng)用的界面元素當(dāng)中。在我們從整體上為產(chǎn)品打造具有差異化的交互模型的同時(shí)，還必須對(duì)細(xì)節(jié)當(dāng)中的交互機(jī)制保持必要的敏感度。
如果你的界面設(shè)計(jì)方案當(dāng)中包含隱藏控制元素，那么一定要向用戶提供足夠的引導(dǎo)與提示，使他們明白應(yīng)該以怎樣的方式調(diào)出這些隱藏控制元素。
全文由C7210自發(fā)翻譯(編譯)，并首發(fā)于Beforweb.com，如需轉(zhuǎn)載，請(qǐng)注明譯者及出處信息。英文原書(shū)版權(quán)由Apress所有，中文引進(jìn)版的版權(quán)由相關(guān)出版社所有。
