這是一篇讓人興奮的文章,作者Greg Nudelman是一位安卓系統(tǒng)專(zhuān)家，他在文中提出了“C手勢(shì)”導(dǎo)航代替現(xiàn)有安卓導(dǎo)航的構(gòu)想，而且毫不吝嗇的提供了兩種設(shè)計(jì)方案并對(duì)關(guān)鍵代碼做了詳盡的解釋。 “C手勢(shì)”是作者提出的解決安卓導(dǎo)航碎片化的方案。強(qiáng)調(diào)的是“在需要的時(shí)候隨時(shí)從屏幕任何區(qū)域調(diào)用上下文導(dǎo)航是適用于任何觸屏設(shè)備的功能模型?！币簿褪恰半[藏式瑞士軍刀風(fēng)格”（Hidden Swiss Army knife-style）的一種。作者認(rèn)為“C手勢(shì)”是最自然，最符合人機(jī)工程學(xué)的手勢(shì)，可以很好地彌補(bǔ)大屏幕觸屏設(shè)備導(dǎo)航不便的缺陷。 正如作者所說(shuō)，文中提到的方案并不是完美的，他只是提供了一種解決問(wèn)題的思路，而這種思路也是本文的精華所在。

尺寸和復(fù)雜性不斷升級(jí)
觸屏設(shè)備的數(shù)量與日俱增，新設(shè)備、新功能日新月異。如果平時(shí)關(guān)注Windows OS的發(fā)展，我們不難發(fā)現(xiàn)這樣一個(gè)趨勢(shì)：觸屏設(shè)備越來(lái)越大。目前，安卓設(shè)備大軍中已經(jīng)出現(xiàn)了12英寸、15英寸和21英寸觸摸屏；觸屏設(shè)備中的應(yīng)用越來(lái)越復(fù)雜，功能日益齊全，甚至標(biāo)準(zhǔn)版的 Microsoft Office 應(yīng)用都針對(duì)觸摸操作做了優(yōu)化。如果說(shuō)最新的Chromebook（擁有一塊12.85英寸，2560×1700像素的觸摸顯示屏）能顯示出某些跡象的話(huà)，那一定是谷歌同樣樂(lè)于將觸摸操作集成到更大的硬件上。
這只是一個(gè)時(shí)間問(wèn)題，只待Andriod系統(tǒng)迎頭趕上。但是，通過(guò)縮放當(dāng)前安卓4.x（4.0、4.1、4.2…）系統(tǒng)的操作欄（Action Bar）來(lái)適配所有設(shè)備和應(yīng)用是不現(xiàn)實(shí)的也是不符合人機(jī)工程學(xué)的。
我建議用“C手勢(shì)”作為替代操作欄的導(dǎo)航方式，這是基于手部自然人機(jī)工學(xué)提出的一種方法。使用“C手勢(shì)”可以在屏幕任何位置調(diào)用上下文菜單（contextual menu），而你要做的只是用拇指在屏幕上很自然的畫(huà)一個(gè)半圓弧。當(dāng)你用右手操作的時(shí)候，這種手勢(shì)看起來(lái)像個(gè)字母“C”——因此，我把它命名為“C手勢(shì)”（C-Swipe。當(dāng)你用左手操作時(shí)，可以稱(chēng)為“反C手勢(shì)”，Reverse C）。
內(nèi)容為王(Content Is King)
想象一下，把移動(dòng)設(shè)備或平板電腦的屏幕全部填上內(nèi)容，用拇指在屏幕的任何位置很自然的畫(huà)一個(gè)半圓就能調(diào)用應(yīng)用的功能和導(dǎo)航。用戶(hù)可以在任何姿勢(shì)、任何角度下完成這個(gè)動(dòng)作，例如用兩只手拿著設(shè)備時(shí)，把設(shè)備平方放在桌子上時(shí)，以及在床上閱讀時(shí)等等。
拇指在屏幕上滑動(dòng)會(huì)觸發(fā)一個(gè)半圓形的上下文菜單。當(dāng)菜單出現(xiàn)后，最常用的功能在頂部，也就是拇指自然狀態(tài)下能觸及的地方。Icon和文字放在拇指不會(huì)擋住的地方。用戶(hù)可以點(diǎn)選他們的目標(biāo)選項(xiàng)，點(diǎn)選或點(diǎn)擊屏幕其他位置后，半圓形菜單就會(huì)消失。
看到容易，點(diǎn)擊難
Flipboard是一款非常優(yōu)秀的應(yīng)用，以其優(yōu)質(zhì)的UI設(shè)計(jì)和內(nèi)容導(dǎo)航功能贏得了大量忠實(shí)粉絲的青睞。然而，F(xiàn)lipboard詳情頁(yè)有一些選項(xiàng)——“返回”（Back），“最?lèi)?ài)”（Favorite）和“喜歡”（Like）——被放在了頂部操作欄中。
（圖1）
在Andriod 4中頂部操作欄是導(dǎo)航和功能選項(xiàng)的必爭(zhēng)之地，而且Andriod 4設(shè)計(jì)規(guī)范也建議把導(dǎo)航和功能選項(xiàng)放在此處。頂欄位置有利于發(fā)現(xiàn)應(yīng)用的功能：在頂欄，按鈕可以很容易被看到，而且永遠(yuǎn)不會(huì)被用戶(hù)的手遮住。
可是，把按鈕放在屏幕的頂部實(shí)際上是一把雙刃劍：對(duì)有些設(shè)備來(lái)說(shuō)，頂欄是手指很難觸及到的。即使在小型設(shè)備上也需要費(fèi)一番功夫。如果設(shè)備再大一點(diǎn)（如很受歡迎的Galaxy Note），要想點(diǎn)擊頂欄的按鈕，你不得不用上另外一只手。這樣一來(lái)，不管是多任務(wù)操作還是放松隨意的使用都會(huì)變得艱難。
而且，操作欄占據(jù)了屏幕頂部一塊非常重要的位置。當(dāng)用戶(hù)在學(xué)習(xí)使用這款應(yīng)用的時(shí)候，可見(jiàn)的功能選項(xiàng)可以給他們提供有效的幫助。不幸的是，用戶(hù)一旦學(xué)會(huì)了如何使用，頂欄就會(huì)變成“視覺(jué)噪聲”，而且浪費(fèi)了屏幕最引人注目、最寶貴的位置。
導(dǎo)航無(wú)處不在
如果有一種方法可以讓整個(gè)屏幕100%只顯示內(nèi)容，同時(shí)又允許用戶(hù)毫不費(fèi)力的調(diào)用功能菜單（不管手指在什么位置，在屏幕什么區(qū)域），而且可以輕而易舉的點(diǎn)擊任何選項(xiàng)，這樣的方法是不是很好？是的，這就是“C手勢(shì)”要做的。
（圖2）
用拇指在屏幕任何地方畫(huà)一個(gè)半圓即可調(diào)用一個(gè)隱藏的菜單，菜單中的選項(xiàng)和頂部操作欄中的相同。菜單出現(xiàn)后，用同一個(gè)手指點(diǎn)擊所需的選項(xiàng)也是一件很容易的事。
兩種菜單設(shè)計(jì)
我介紹的“C手勢(shì)”有兩個(gè)形式不同但一樣重要的方案：“滑動(dòng)—松開(kāi)”（ swipe and release）和“僅滑動(dòng)”（swipe only）。兩個(gè)方案調(diào)用的菜單在形式上不太一樣，你需要選一種適合自己的?！盎瑒?dòng)—松開(kāi)”方案把icon放在菜單選項(xiàng)內(nèi)部，如上方圖2所示。
使用這個(gè)方案的的用戶(hù)可以先在屏幕表面畫(huà)一個(gè)半圓，然后手指移開(kāi)屏幕。在這里移開(kāi)手指是很必要的，由于icon在菜單選項(xiàng)內(nèi)部，不移開(kāi)手指大部分選項(xiàng)會(huì)被遮住，那會(huì)造成使用上的不便。
第二種方案只需要滑動(dòng)一下，不需要移開(kāi)手指。如下方圖3所示。系統(tǒng)識(shí)別手勢(shì)的方法和上面的方案一樣。但此時(shí)的菜單會(huì)隨著手指的滑動(dòng)即時(shí)出現(xiàn)在屏幕上（不是彈出）。由于拇指擋住了部分選項(xiàng)，icon需要展示在選項(xiàng)外部才能保證其可見(jiàn)性。
（圖3）
你應(yīng)該選擇哪種交互方式？
“僅滑動(dòng)”方案，拇指和設(shè)備時(shí)刻處于接觸狀態(tài)，能夠即時(shí)觸發(fā)菜單。這一點(diǎn)保證了導(dǎo)航效率：理論上沒(méi)有“無(wú)用功”（no wasted motion）。但是很多被測(cè)用戶(hù)更喜歡icon在菜單內(nèi)部的設(shè)計(jì)方案。試用一下附件中的小應(yīng)用，自己抉擇吧。附件中的小應(yīng)用是這兩種方案的合體：它使用“滑動(dòng)—松開(kāi)”手勢(shì)，但把icon放在了菜單選項(xiàng)外面。因此，你可以同時(shí)感受兩種方案。
提示：謹(jǐn)記，我們提供的小應(yīng)用調(diào)用菜單的滑動(dòng)手勢(shì)非常簡(jiǎn)單，你只要在屏幕上畫(huà)一個(gè)很小的半圓就行，可能比你想象的小得多。我希望這個(gè)最簡(jiǎn)單不過(guò)的demo可以在任何設(shè)備上運(yùn)行，不管屏幕大還是小，這種方案都能適用。（我們希望可以完美適用3997種屏幕）。畫(huà)小半圓的原因是出于對(duì)人體解剖學(xué)的考慮：大手掌的人畫(huà)小半圓遠(yuǎn)比小手掌的人畫(huà)大半圓容易。
替換操作欄
基本上可以用“C手勢(shì)”替換目前所有的Android導(dǎo)航欄菜單。也就是說(shuō)使用導(dǎo)航欄的地方都可以換成“C手勢(shì)”。正如我在及即將出版的一本書(shū)（ Android Design Patterns: Interaction Solutions for Developers）中提到的一樣，這種很不錯(cuò)的“C手勢(shì)”，是熄燈模式（lights-out mode，屏幕顯示內(nèi)容為主，不顯示導(dǎo)航控件。即隱藏式瑞士軍刀風(fēng)格的導(dǎo)航）即將引領(lǐng)潮流的先聲。
另外一個(gè)重點(diǎn)是“C手勢(shì)”幾乎可以無(wú)限擴(kuò)展：它容納的選項(xiàng)比屏幕上能顯示的選項(xiàng)多很多，可能比一級(jí)菜單、二級(jí)菜單、三級(jí)菜單的總和還要多。半圓形菜單的內(nèi)環(huán)部分可以作為切換按鈕，點(diǎn)擊即可看到更多選項(xiàng)，如下面圖4所示，點(diǎn)擊中心按鈕，在半圓菜單外圈顯示更多選項(xiàng)，再次點(diǎn)擊返回初始菜單界面。這樣，用戶(hù)就能很輕松地訪(fǎng)問(wèn)8-12個(gè)優(yōu)先級(jí)最高的功能。

你可以嘗試分別為“滑動(dòng)—松開(kāi)”和“僅滑動(dòng)”兩種方案添加子菜單。

（圖5）
上圖第一排展示的是“滑動(dòng)—松開(kāi)”顯示子菜單的方式。點(diǎn)擊“Favorite”選項(xiàng)，在半圓菜單外圈出現(xiàn)一串星形按鈕。用戶(hù)把拇指移開(kāi)即可看到子菜單上的功能選項(xiàng)，之后就可以按需點(diǎn)選了。
第二排展示了“滑動(dòng)—按住”顯示子菜單的方式，工作原理和上一中有些相似。拇指在屏幕上畫(huà)“C”，保持手指接觸屏幕，菜單出現(xiàn)后將手指滑動(dòng)到目標(biāo)選項(xiàng)上（例如“Favorite”），松開(kāi)手指后子菜單就會(huì)代替原先的主菜單。
要點(diǎn)在于“C手勢(shì)”有很多種版本，而且子菜單不需要也是半圓形，它可以是一串文本或icon也可以是一個(gè)特定的收藏夾。只要保證子菜單出現(xiàn)在“C手勢(shì)”菜單附近即可。
為什么要用“C手勢(shì)”？
“C手勢(shì)”有很多優(yōu)點(diǎn)：
1、提供沉浸式體驗(yàn)（Immersive Experiences）
這種模式具有高度沉浸式特性，所有的功能按鈕都被隱藏起來(lái)，直到你需要的時(shí)候才會(huì)出現(xiàn)。它可以100%利用安卓設(shè)備的屏幕（包含全部3997種），為購(gòu)物、閱讀、看視頻、虛擬現(xiàn)實(shí)等提供沉浸式體驗(yàn)。
2、最大限度減小手臂應(yīng)變（Arm Strain）
“C手勢(shì)”尤其適合大尺寸觸屏設(shè)備，如即將上市的15-、17-、21-英寸平板電腦。在目前Andriod 4系統(tǒng)導(dǎo)航模式中，點(diǎn)擊頂部或底部操作欄需要較大幅度手臂動(dòng)作，很快就會(huì)造成手臂疲勞。相反，“C手勢(shì)”可以讓菜單出現(xiàn)在手指能觸及的區(qū)域附近，不需要手臂大幅度運(yùn)動(dòng)就能完成操作。
3、符合費(fèi)茨定律（Fitts’Law）
費(fèi)茨定律指出點(diǎn)擊按鈕的速度和難易程度與目標(biāo)的大小和到目標(biāo)的距離有關(guān)。也就是說(shuō)，在大屏平板電腦上點(diǎn)擊一個(gè)小按鈕必定是一件非常痛苦的事。相比之下“C手勢(shì)”具有獨(dú)到之處：它可以在屏幕任何位置調(diào)用導(dǎo)航，而且菜單出現(xiàn)的位置永遠(yuǎn)在手指放置的位置附近。如此一來(lái)定位選項(xiàng)的時(shí)間就減少了，點(diǎn)擊的動(dòng)作會(huì)更加精確和自然。
4、觸發(fā)動(dòng)作唯一性
目前看來(lái)“C手勢(shì)”還沒(méi)用在其他功能上（作者發(fā)表文章時(shí)，2013.3.25）。因此，使用“C手勢(shì)”并不會(huì)導(dǎo)致使用上的沖突，而且點(diǎn)擊菜單以外的任何位置（取消菜單的動(dòng)作）同樣很簡(jiǎn)單。
強(qiáng)調(diào)一下，當(dāng)用左手操作時(shí)，觸發(fā)動(dòng)作為“反C手勢(shì)”。下面提供的源代碼和小應(yīng)用都支持左右手完成操作。
其他建議
“C手勢(shì)”不一定在屏幕邊緣才能被觸發(fā)。當(dāng)用戶(hù)站著使用大屏幕設(shè)備時(shí)，他可能需要將屏幕傾斜找到一個(gè)舒服的姿勢(shì)。這時(shí)，用戶(hù)可以用手指在屏幕任何位置畫(huà)個(gè)半圓調(diào)用“C手勢(shì)”導(dǎo)航。通常情況下，用戶(hù)可以用任何一只手指，如食指，來(lái)完成這個(gè)動(dòng)作。
“C手勢(shì)”是很獨(dú)特的，因?yàn)椴藛纬霈F(xiàn)的時(shí)候伴隨著“天然的”動(dòng)畫(huà)過(guò)渡效果。隨著拇指劃過(guò)屏幕，半圓形菜單也緊接著出現(xiàn)在拇指劃過(guò)的區(qū)域，非常自然。
警告
“C手勢(shì)”隱藏的很深，并不容易被發(fā)現(xiàn)。不過(guò)這個(gè)缺點(diǎn)可以通過(guò)添加水印動(dòng)畫(huà)彌補(bǔ)，或者用其他優(yōu)雅的方式作為引導(dǎo)。給用戶(hù)一些提示如：“用手指在屏幕任意位置畫(huà)個(gè)”C”?！被蛘哂盟?dòng)畫(huà)在屏幕的不同位置提示幾次，就能幫助用戶(hù)發(fā)現(xiàn)這一手勢(shì)的奧秘。

當(dāng)用戶(hù)發(fā)現(xiàn)這種手勢(shì)之后，水印動(dòng)畫(huà)就可以永久消失了?！癈手勢(shì)”非常易學(xué)，因?yàn)槲覀儗?duì)這種手勢(shì)非常熟悉，而且使用時(shí)手臂和手指都很放松。
有些人認(rèn)為“C手勢(shì)”的缺陷在于它只是人機(jī)工程學(xué)上符合用戶(hù)要求，沒(méi)有映射現(xiàn)實(shí)世界中真實(shí)的事物（如卷軸或鐵鍋）。很多設(shè)計(jì)師喜歡Windows現(xiàn)代 風(fēng)格的UI設(shè)計(jì)，其中用到的都是“大手勢(shì)”（larger gestures）。他們很喜歡那種整條手臂從左滑到右從上滑到下的感覺(jué)。還有一些設(shè)計(jì)師喜歡用替代“大手勢(shì)”的方法：一種特殊的多點(diǎn)觸控手勢(shì)——如五指輕點(diǎn)，或五指一起捏。
我是不同意這種觀點(diǎn)的
盡管人們提出了很多導(dǎo)航方法，而且每個(gè)都承諾很好用。但我仍然覺(jué)得“C手勢(shì)”是最自然、最真實(shí)、最經(jīng)濟(jì)的觸摸動(dòng)作。它是很自然的動(dòng)作，就像用戶(hù)在輕撓或抓取屏幕上的內(nèi)容一樣。
不管設(shè)備處于什么樣的姿態(tài)，在什么樣的任務(wù)場(chǎng)景中，這個(gè)滑動(dòng)動(dòng)作可以輕易的用一只手完成。為了驗(yàn)證這一觀點(diǎn)的正確性，我們還需要擴(kuò)大被測(cè)用戶(hù)的范圍做更多測(cè)試。
但是有一點(diǎn)可以明確：不管手勢(shì)如何變化，在需要的時(shí)候從屏幕局部隨時(shí)調(diào)用上下文導(dǎo)航是適用于任何觸摸屏設(shè)備的功能模型——所以我最大的建議莫過(guò)于一定不要忘了這個(gè)重要的趨勢(shì)。
源代碼解釋
可以想象到這一功能著實(shí)復(fù)雜，下面的代碼只是一個(gè)粗略的預(yù)覽，看的時(shí)候關(guān)注重點(diǎn)就好。
要做一個(gè)完整的應(yīng)用，你需要先用Android SDK中的GestureBuilder記錄自定義“C手勢(shì)”。詳細(xì)步驟可以查看Micha Kops的文章： 《Creating a Simple Gesture App With Android》
然后，在 CSwipeActivity 類(lèi)（class）里，從庫(kù)（library）中載入自定義“C手勢(shì)”：
// Load gestures library
mGestureLib = GestureLibraries.fromRawResource(this, R.raw.gestures_cswipe);
if (!mGestureLib.load()) {
// Show toast if gestures library could not be loaded
Toast.makeText(this, R.string.KMsgErrLoadingGestures, Toast.LENGTH_SHORT).show();
}
接下來(lái)，建立一個(gè)監(jiān)聽(tīng)器（listener）來(lái)監(jiān)視目標(biāo)手勢(shì)（識(shí)別“C手勢(shì)”）：

// Register gestures listener
mGestureOverlayView.addOnGesturePerformedListener(new GestureOverlayView.OnGesturePerformedListener() {
@Override
public void onGesturePerformed(GestureOverlayView gestureOverlayView, Gesture gesture) {
onGesture(gestureOverlayView, gesture);
}
});
執(zhí)行任何手勢(shì)時(shí)都可以用onGesture()判斷一下該手勢(shì)是否滿(mǎn)足“C手勢(shì)”條件。你可以通過(guò)對(duì)比預(yù)測(cè)值是否高于某些預(yù)定值來(lái)判斷用戶(hù)的手勢(shì)是否滿(mǎn)足要求。在我們提供的demo中，我們把預(yù)定值設(shè)置成一個(gè)中間值（middle-of-the-road value）—3D，這個(gè)值是試驗(yàn)得出來(lái)的，如果數(shù)值過(guò)低，簡(jiǎn)單的滑動(dòng)都有可能意外觸發(fā)這個(gè)功能，如果門(mén)檻太高，這個(gè)手勢(shì)就很難被觸發(fā)。當(dāng)檢測(cè)到正確手勢(shì)之后，應(yīng)用就會(huì)調(diào)用特殊的半圓菜單，同時(shí)填充預(yù)置的選項(xiàng):
if (prediction.score > 3D) {
// Switch content from gesture overlay view to original content view
mGestureOverlayView.removeView(mContentView);
setContentView(mContentView);
// Inflate the CSwipe control view
final View cSwipePopupContentView = getLayoutInflater().inflate(R.layout.view_cswipe, null);
mCSwipe = (CSwipe) cSwipePopupContentView.findViewById(R.id.cswipe);
我們提供的小應(yīng)用demo，支持兩種方向的“C手勢(shì)”：向左和向右。可以用下面的代碼判斷，然后設(shè)置菜單錨點(diǎn)的方向：
// Check the orientation of the CSwipe control based on the selected gesture prediction
final String predictionName = prediction.name;
CSwipe.Anchor cSwipeAnchor = CSwipe.Anchor.RIGHT;
if (predictionName.equals(GESTURE_CSWIPE_LEFT_MARGIN)) { cSwipeAnchor = CSwipe.Anchor.LEFT; }
else if (predictionName.equals(GESTURE_CSWIPE_RIGHT_MARGIN)) { cSwipeAnchor = CSwipe.Anchor.RIGHT; }

// Set the CSwipe control anchor according to the selected gesture prediction
mCSwipe.setAnchor(cSwipeAnchor);
讓菜單盡可能出現(xiàn)在手勢(shì)錨點(diǎn)附近，從而呈現(xiàn)出一種菜單伴隨手勢(shì)平滑出現(xiàn)的視覺(jué)效果：

// Show the CSwipe control popup window as close as possible to the gesture bounding rectangle
final RectF gestureBoundingRect = gesture.getBoundingBox();
mCSwipePopupWindow.showAtLocation(mContentView, Gravity.NO_GRAVITY, (int) gestureBoundingRect.left, (int) gestureBoundingRect.top);
用CSwipe類(lèi)來(lái)啟動(dòng)這個(gè)由外圓和內(nèi)圓定義的特殊半圓菜單。你可以在Widget folder中找到完整的CSwipe.java代碼：
public CSwipe(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);

final TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CSwipe);

mInnerArcRadius = attributes.getDimensionPixelSize(R.styleable.CSwipe_innerArcRadius,
(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_INNER_RADIUS_DP, getResources().getDisplayMetrics()));
mOuterArcRadius = attributes.getDimensionPixelSize(R.styleable.CSwipe_outerArcRadius,
(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_OUTER_RADIUS_DP, getResources().getDisplayMetrics()));

總結(jié)：
親愛(ài)的讀者們，剩下的任務(wù)就交給你們了。你可以繼續(xù)潤(rùn)色代碼以提供更多增強(qiáng)功能：提高反應(yīng)速度；創(chuàng)建平滑的轉(zhuǎn)場(chǎng)效果；調(diào)試判斷手勢(shì)的初始值；甚至在學(xué)習(xí)中隨著時(shí)間的推移重新編寫(xiě)手勢(shì)檢測(cè)的算法，從而最大程度上匹配各種設(shè)備型號(hào)和用戶(hù)手掌尺寸。現(xiàn)在，是時(shí)候感受一下我們提供的demo了，我想它應(yīng)該可以體現(xiàn)出“C手勢(shì)”導(dǎo)航的潛力。
附：demo下載地址：（安裝方法同普通安卓APP）

http://media.smashingmagazine.com/wp-content/uploads/2013/02/CSwipeDemo2.zip

作者：Greg Nudelman 翻譯：王林（Ryan）

（微博UDC原創(chuàng)博文，轉(zhuǎn)載請(qǐng)注明出處?）