About face中的移動(dòng)應(yīng)用交互

關(guān)于平臺(tái)&姿態(tài)

? ??在開始設(shè)計(jì)一個(gè)數(shù)字產(chǎn)品的交互框架時(shí)捻激,要回答的 第一個(gè)問(wèn)題是“什么樣的平臺(tái)(platform)和姿態(tài)(posture)是合適的?”

????產(chǎn)品的姿態(tài)(posture )是指產(chǎn)品的行為立場(chǎng)异旧,也就是產(chǎn)品對(duì)用戶的展現(xiàn)方 式柏蘑。 姿態(tài)討論的是用戶在與產(chǎn)品交互上投入多少精力;以及產(chǎn)品又如何回應(yīng)這 些精 力投入包个。這一決定必須建立在了解產(chǎn)品可能的用戶場(chǎng)景和環(huán)境基礎(chǔ)上灌具。

我們討論過(guò)軟件的“姿態(tài)"(posture)滥搭。桌面應(yīng)用軟件的界面豁生,有兩種主 要的姿 態(tài)兔毒,分別是“獨(dú)占式的”和“暫時(shí)式的”(sovereign?和?transient)。

eg甸箱。微軟?Outlook?就是獨(dú)占姿態(tài)應(yīng)用程序的一個(gè)典型例子育叁。它長(zhǎng)時(shí)間、不間斷地與用戶進(jìn)行交互芍殖,并與附近多種導(dǎo) 航和支持信

息窗格相鄰豪嗽,自始至終都是全屏使用。

關(guān)于暫態(tài)的移動(dòng)應(yīng)用

桌面應(yīng)用多數(shù)都是獨(dú)占式的豌骏,而移動(dòng)應(yīng)用相反龟梦,它們多數(shù)是暫態(tài)的(transient)。移動(dòng)應(yīng)用是在移動(dòng)中使用的軟件窃躲,是高度情境驅(qū)動(dòng)的计贰。暫態(tài),在這里說(shuō)的是用戶與應(yīng)用交互的特點(diǎn):短暫蒂窒、臨時(shí)躁倒、關(guān)注于特殊的任務(wù)荞怒。

移動(dòng)應(yīng)用是暫態(tài)的另外一個(gè)主要原因,和設(shè)備的物理外形大小因素有關(guān)秧秉。這兩個(gè)因素導(dǎo)致了移動(dòng)屏幕上的信息和控制密度褐桌,與桌面屏幕上對(duì)話框的信息和控制密度 是差不 多的,因此最好也把移動(dòng)屏幕當(dāng)做是暫態(tài)的來(lái)對(duì)待象迎。

關(guān)于手持設(shè)備上的應(yīng)用

今天的手持式設(shè)備繼續(xù)沿用著多年前的基本設(shè)計(jì)模式撩嚼,很多概念也和以前一樣,比 如?UI?元 素呈垂直堆疊放置挖帘,原來(lái)的列表完丽、網(wǎng)格、欄拇舀、抽屜等概念依然在使用逻族。當(dāng)然,高性能骄崩、 高分辨率的處理 能力和多點(diǎn)觸摸的能力聘鳞,也帶來(lái)了新的結(jié)構(gòu)模式,例如輪顯(carousel)要拂、泳道?(swimlane)抠璃、卡片等,它 們逐步成為流行的移動(dòng)習(xí)慣用法脱惰。


我的理解:信息架構(gòu)的層面上的交互劃分(導(dǎo)航搏嗡、內(nèi)容、控制)

關(guān)于移動(dòng)導(dǎo)航拉一、內(nèi)容采盒、控制的習(xí)慣用法

瀏覽控件


絕大多數(shù)的移動(dòng)應(yīng)用都是針對(duì)瀏覽需求的。無(wú)論是聽音樂蔚润、看視頻磅氨,還是刷新社交軟件、查看 餐 廳點(diǎn)評(píng)嫡纠,抑或是閱讀電子郵件烦租、網(wǎng)絡(luò)購(gòu)物、搜索內(nèi)容等除盏,我們?cè)谝苿?dòng)設(shè)備上進(jìn)行著大量的閱讀叉橱、 瀏覽、 觀看痴颊、查看等動(dòng)作赏迟。受制于外形大小和輸入手段,在移動(dòng)設(shè)備上瀏覽和選擇內(nèi)容蠢棱,比直接輸 入內(nèi)容要方 便得多锌杀∷φ唬基于此,在移動(dòng)應(yīng)用中糕再,用于瀏覽內(nèi)容的豐富模式就被開發(fā)出來(lái)了量没。

列表(list)

是手持觸屏設(shè)備上最常用的一種組織內(nèi)容的方式。列表內(nèi)容的常見形式有:一行一行的項(xiàng)目突想、一段一段文本殴蹄、一排一排的控件(如復(fù)選框、按鈕)及其標(biāo)簽猾担、圖片或視頻 的縮略圖等袭灯。


網(wǎng)格

網(wǎng)格(grid)將諸如應(yīng)用的圖標(biāo)、縮略圖绑嘹、功能圖標(biāo)等內(nèi)容組織成規(guī)則的行列形式稽荧。最明 顯的一個(gè) 例子就是?iPhone?的主畫面(home screen),它是展不應(yīng)用圖標(biāo)的編輯?N?格工腋。安卓有類 似的界面姨丈。微軟 也借用了這個(gè)概念,同時(shí)將其融合到更具創(chuàng)新的“開始”(Start)屏幕網(wǎng)格擅腰,它 將應(yīng)用和通知混合在一起蟋恬, 卻又不失美感和實(shí)用性


內(nèi)容輪顯

屏幕輪顯使用水平滑動(dòng)手勢(shì)(swipe gesture)以全屏布局的方式在不同內(nèi)容間導(dǎo)航。相對(duì)于與 屏幕 輪顯趁冈,內(nèi)容輪顯是存于單一屏幕布局之內(nèi)的歼争。但同樣使用了水平滑動(dòng)手勢(shì),這樣可以在固 定的全屏布局 內(nèi)箱歧,展現(xiàn)并導(dǎo)航不同的內(nèi)容對(duì)象矾飞。內(nèi)容輪顯適用的常見內(nèi)容有媒體縮略圖(或較 大的圖片),有時(shí)也用 于瀏覽包含了媒體和格式化文本的卡片或文本呀邢。


泳道

泳道是一種很聰明的格子輪顯方法,很好地平衡了輪顯的自然瀏覽頻率與信息密度豹绪。泳道(swimlane)是一組垂直排列的輪顯价淌,每個(gè)輪顯都可以獨(dú)立水平滾動(dòng),對(duì)其他輪顯沒有影響瞒津。導(dǎo) 航到其他 泳道也很簡(jiǎn)單蝉衣,只要垂直滾動(dòng)就可以了。作為一種瀏覽多種類型內(nèi)容的方法巷蚪,泳道是 很巧妙的病毡,其導(dǎo)航 也很簡(jiǎn)便。在某個(gè)內(nèi)容類型的泳道中使用滑動(dòng)手勢(shì)屁柏,就可以瀏覽里面的內(nèi)容啦膜, 而其他的泳道原地不動(dòng)有送。 它比網(wǎng)格式的瀏覽要簡(jiǎn)便,后者要實(shí)現(xiàn)這樣的功能僧家,所有的列和行都 要問(wèn)時(shí)移動(dòng)雀摘。


卡片

卡片(cards)是一種移動(dòng)設(shè)備上的新型習(xí)慣用法。不過(guò)八拱,它的早期雛形可能是?Mac?上面的HyperCarcT阵赠。早期?Mac?的屏幕分辨率較低(比現(xiàn)在智能手機(jī)要低得多),為迎合低分辨率的顯 示器肌稻, 設(shè)計(jì)者將圖片和文本信息整齊地結(jié)合在一起清蚀,用于信息和內(nèi)容的展示和瀏覽等。HyperCard?最初的目標(biāo) 用戶群是有創(chuàng)作需求的大眾爹谭,但最后變成了一個(gè)程序員們創(chuàng)建和編輯富媒體和內(nèi)容



導(dǎo)航和工具欄


標(biāo)簽欄

標(biāo)簽欄(tab bar),包含一系列的文本或圖標(biāo)按鈕轧铁。(在?iOS?的標(biāo)簽欄中,經(jīng)常使用圖標(biāo)旦棉, 并在圖 標(biāo)下方加上對(duì)應(yīng)的文本)齿风。輕點(diǎn)標(biāo)簽欄上的標(biāo)簽按鈕,會(huì)將主內(nèi)容區(qū)域切換成一個(gè)新的列 表或網(wǎng)格視圖绑洛, 這樣的使用效果和桌面系統(tǒng)界面上的標(biāo)簽是差不多的救斑。標(biāo)簽欄中的每個(gè)標(biāo)簽都 保持著各自的內(nèi)容層級(jí)關(guān) 系,并用列表和網(wǎng)格展現(xiàn)出來(lái)真屯,同時(shí)它還會(huì)保持當(dāng)前運(yùn)行應(yīng)用的層級(jí) 狀態(tài)脸候。標(biāo)簽欄一般出現(xiàn)在?i〇S?屏 幕的下方,在安卓和?Windows?系統(tǒng)上則出現(xiàn)在屏幕的上方绑蔫,如 圖 19-18?所示运沦。


更多控件


標(biāo)簽輪顯

標(biāo)簽輪顯(tab carousel)同樣可以解決“更多...”控件要解決的問(wèn)題,它是水平滑動(dòng)輪顯 和標(biāo)簽 欄的完美聯(lián)姻配深。標(biāo)簽輪顯中的標(biāo)簽看起來(lái)和標(biāo)簽欄中的標(biāo)簽沒有什么兩樣携添,但它們可以 被滑動(dòng)到 屏幕的外面。選中的標(biāo)簽會(huì)被置于中心的位置篓叶,或者被高亮標(biāo)注出來(lái)烈掠。輕點(diǎn)哪個(gè)標(biāo)簽,?哪個(gè)標(biāo)簽就 被選中。用手指輕滑一下標(biāo)簽欄缸托,就選中了和它相鄰的左側(cè)或右側(cè)的下一個(gè)標(biāo)簽左敌, 并將被選中的 標(biāo)簽所控制的內(nèi)容展現(xiàn)在主區(qū)域里,


導(dǎo)航欄和動(dòng)作欄

導(dǎo)航欄(nav bar),位于屏幕頂端俐镐,為列表或網(wǎng)格視圖提供導(dǎo)航矫限,如圖?19-22?所示。通常來(lái) 說(shuō),導(dǎo) 航欄的左邊都一個(gè)回退按鈕叼风,中間是當(dāng)前列表取董、網(wǎng)格或其他形式視圖的標(biāo)題。安卓則將 這些控件稱之為“動(dòng)作欄”(actionbar)咬扇。多數(shù)情況下甲葬,功能菜單或按鈕會(huì)放在右邊。


工具欄和工具板

工具欄(toolbar)包含了針對(duì)當(dāng)前應(yīng)用或應(yīng)用內(nèi)所選內(nèi)容的操控功能懈贺。iOS?應(yīng)用經(jīng)常會(huì)把一個(gè)或者兩個(gè)動(dòng)作按鈕放在導(dǎo)航欄的右側(cè)经窖,對(duì)于瀏覽和查看類的應(yīng)用來(lái)說(shuō),這樣很好梭灿。不過(guò)画侣,創(chuàng)作類的應(yīng)用在創(chuàng)作和編輯的界面上,通常會(huì)在底端放置一個(gè)工具欄堡妒, 將底端原來(lái)的標(biāo)準(zhǔn)標(biāo)簽欄替換掉配乱。

谷歌的安卓則趨向于在頂端放置一個(gè)動(dòng)作欄,它將回退導(dǎo)航和動(dòng)作按鈕結(jié)合在一起皮迟。我們 推薦在其 下方設(shè)置一個(gè)標(biāo)簽欄搬泥,這在用戶需要訪問(wèn)多個(gè)視圖時(shí)會(huì)非常有用。谷歌的動(dòng)作欄還支 持下拉伏尼,這樣如果 需要加上更多的動(dòng)作但標(biāo)簽欄上的位置又不夠時(shí)就可以把額外的動(dòng)作放到下 拉的視圖里忿檩。

多數(shù)音頻播放器應(yīng)用則會(huì)在“正在播放”屏幕的底部放置一個(gè)傳輸欄(transportbar)或控 制窗格, 用于放置一些和“回放”有關(guān)的控件爆阶。

工具板(tool palette)是工具欄的變體燥透,移動(dòng)設(shè)備上的這個(gè)東西和它的桌面“表親”(參見 第?18?章) 的用法是類似的,它上面包含了一些圖標(biāo)按鈕辨图,用于訪問(wèn)和操作被查看和編輯的對(duì)象班套。?(繪圖和圖像處理 軟件等,是使用工具板的最典型的應(yīng)用軟件故河。)平板應(yīng)用中的工具板吱韭,大量地 使用了彈出控制面板,提 供了一系列的工具和配置忧勿。

垂直的工具欄和工具板

更為復(fù)雜的工具欄杉女,同時(shí)出現(xiàn)在平板的頂端和底端。同時(shí)鸳吸,在左邊或者右邊(有時(shí)兩邊都有)還會(huì)有額外的垂直工具欄。

工具輪顯

和各種輪顯類的習(xí)慣用法一樣速勇,工具欄和輪顯雜交的后代叫作工具輪顯(tool camursel)晌砾。 它令有 限的屏幕可以容納下更多的功能,用戶通過(guò)滑動(dòng)手勢(shì)便可以跨越屏幕輕松訪問(wèn)大量的功 能烦磁。工具輪顯在 圖像處理應(yīng)用中運(yùn)用得最多养匈,例如谷歌的?Snapseed哼勇,如圖?19-24?所示。該工具輪 顯中的每個(gè)功能都是 一個(gè)帶有文本標(biāo)簽的縮略圖呕乎,該縮略圖描述了當(dāng)前的濾鏡或特效积担,以及施加 在樣圖上的效果。(更為理 想的是猬仁,縮略圖是正在編輯的圖像帝璧,但現(xiàn)實(shí)問(wèn)題是手機(jī)屏幕不夠大。)


抽屜


抽屜(drawer)是一種巧妙的習(xí)慣用法湿刽,用戶可以通過(guò)抽屜來(lái)訪問(wèn)一個(gè)包含了導(dǎo)航元素的 垂直列表的烁, 這些導(dǎo)航元素實(shí)際上有點(diǎn)類似于標(biāo)簽(tab)。抽屜把一個(gè)面板層隱藏在主內(nèi)容區(qū)域 之下诈闺,因此只需要占 用極少的屏幕面積渴庆。抽屜圖標(biāo),有時(shí)也被稱為“漢堡包菜單圖標(biāo)”雅镊。之所以 被稱為漢堡包襟雷,是因?yàn)槠鋱D標(biāo) 是三個(gè)堆疊的橫杠,形狀類似漢堡包仁烹。輕點(diǎn)抽屜圖標(biāo)耸弄,或者在有 些應(yīng)用中水平滑動(dòng)主內(nèi)容區(qū),主內(nèi)容區(qū) 下面的抽屜便被抽了出來(lái)晃危。和標(biāo)簽欄一樣叙赚,被選中的項(xiàng) 目會(huì)被高亮突出。再點(diǎn)一下抽屜中的項(xiàng)目僚饭,項(xiàng)目 的具體內(nèi)容就會(huì)顯示在主內(nèi)容區(qū)震叮,同時(shí)抽屜也 會(huì)“啪”的一下收回關(guān)上。抽屜內(nèi)的項(xiàng)目通常都是文本的鳍鸵, 有時(shí)也有圖標(biāo)和其他裝飾物苇瓣。一些 額外的控件,可能也會(huì)出現(xiàn)在抽屜里偿乖。iPhone?中的谷歌?Gmail?應(yīng)用击罪, 如圖?19-25?所示,就使用 了抽屜這種習(xí)慣用法贪薪。

次要?jiǎng)幼鞒閷?/i>

抽屜可取代導(dǎo)航標(biāo)簽欄媳禁,也可與應(yīng)用中的次要對(duì)象交互。抽屜通常從屏幕左側(cè)滑動(dòng)打幵画切, 但有時(shí) 不是這樣竣稽。有些次要對(duì)象或次要?jiǎng)幼鞅环胖迷诹擞覀?cè)的抽屜里。例如,iPhone?上的?Facebook?應(yīng)用毫别,常 用的主要?jiǎng)幼魇前凑找话愕臉?biāo)準(zhǔn)被放置在底端的標(biāo)簽欄娃弓,用于主要的導(dǎo)航工 作,同時(shí)在右側(cè)可以滑出一 個(gè)抽屜岛宦,在此用戶可以訪問(wèn)所有在線的朋友台丛,并同他們聊天,


雙抽屜

Path?是?iOS?上的一款基于時(shí)間線的社交軟件砾肺。它很受大家歡迎挽霉,原因之一是?Path?成功地將 標(biāo)簽 欄和工具欄最小化,從而釋放出寶貴的屏幕不動(dòng)產(chǎn)债沮。Path?的界面炼吴,如圖?19-27?所示,釆用 了兩個(gè)抽屜: 一個(gè)是標(biāo)準(zhǔn)的從左側(cè)滑出的抽屜疫衩,用于不同視圖間的主要導(dǎo)航;另一個(gè)是類似?f Facebook?的右側(cè)抽屜硅蹦, 用于在朋友間收發(fā)信息。它還使用了一個(gè)非標(biāo)準(zhǔn)但很有意思的工具菜單 控件闷煤,用戶可以從屏幕左下角將 其調(diào)出童芹。對(duì)于用戶來(lái)說(shuō),雖然要先點(diǎn)一次才能調(diào)出該工具菜單,?但這個(gè)“點(diǎn)一下”的交互過(guò)程非常清晰鲤拿, 而且很好玩——執(zhí)行時(shí)假褪,內(nèi)容區(qū)域會(huì)閃爍


條目級(jí)抽屜

有些手持設(shè)備上的應(yīng)用,將滑出抽屜的概念運(yùn)用到了列表中的單個(gè)條目近顷。在列表中生音,滑動(dòng)單個(gè) 條 目(向左或向右)后,會(huì)將條目底下的工具欄展現(xiàn)出來(lái)窒升,里面包含著針對(duì)該條目的一些操作 動(dòng)作缀遍。這 樣,屏幕頂端或底端的工具欄就沒有必要存在了饱须。


我的理解:內(nèi)容功能層面的交互劃分

搜索域醇、排序、篩選


歡迎和幫助界面


我的理解:手勢(shì)/觸摸屏層面的交互劃分

關(guān)于手勢(shì)交互

手勢(shì)是移動(dòng)體驗(yàn)的核心蓉媳。雖然這類手勢(shì)體驗(yàn)的種類是十分豐富的譬挚,而且是十分?jǐn)M真的,但 主要的手 勢(shì)只有幾個(gè)酪呻,也是最好的幾個(gè)减宣。用戶的手勢(shì)詞匯量無(wú)須太多,滿足日常使用即可玩荠,這 是我們?cè)O(shè)計(jì)的原則蚪腋。 我們要做到讓手勢(shì)盡可能簡(jiǎn)單和直接丰歌,這樣用戶才能快速理解和掌握姨蟋。

Tap to select, activate, or toggle -?輕拍選擇屉凯、激活或開關(guān)

The tap is used to select objects and toggle the activation state of controls. Tapped items should get an appropriate selection highlight or activation/deactivation state or animation.

輕拍可以選擇、激活控件的狀態(tài)眼溶。被輕拍的物體悠砚,應(yīng)該適當(dāng)展示出被選擇的高亮狀態(tài),或 被激活的 狀態(tài)或動(dòng)畫狀態(tài)等

Tap-and-hold -?輕拍保持

Tap-and-hold is a gestural idiom that is falling out of favor, and probably rightfully so. It is typically used to open a contextual pop-up menu on an object, similar to the desktop堂飞。right-click idiom. However, this gesture isn’t very discoverable, and few users are famil- iar with it.?Therefore, this gesture isn’t recommended. Instead, a visible menu control should be placed on the object. Or a tap-to-select model, combined with an action menu, should be used.

輕拍保持(tap-and-hold),這種手勢(shì)已經(jīng)開始不太流行了灌旧,其實(shí)不流行也好。它通常被用 來(lái)打開對(duì) 象上的情境菜單绰筛,類似于桌面上的點(diǎn)擊鼠標(biāo)右鍵枢泰。其缺點(diǎn)是,這個(gè)手勢(shì)不太容易被用 戶摸索出來(lái)铝噩,很少 有人習(xí)慣于使用它衡蚂。因此,我們不推薦使用這種手勢(shì)骏庸。

Drag to scroll -?拖滾

Drag to scroll can work horizontally or vertically, and is a fundamental direct manipu- lation gesture.

Vertical dragging can be used to scroll lists or, in conjunction with drag handles, reorder objects in a list. Dragging downward on a list can initiate a refresh when the list has already been scrolled to the top. A drag upward can initiate an incremental addition of items after the last displayed item in a list.

The top and bottom drawers supported by some mobile OS’s also can be accessed via vertical dragging.

Horizontal dragging can scroll a carousel or swimlane, or open a left-hand or right-hand drawer.

拖滾(drag to scroll)毛甲,水平或垂直均可,是一個(gè)基本的直接操作手勢(shì)具被。 垂直拖動(dòng)可以用來(lái)滾動(dòng)列表玻募,或者配合拖動(dòng)控制柄實(shí)現(xiàn)列表重新排序。如果列表已經(jīng)被滾 到最上端一姿,則向下拖動(dòng)并釋放可以刷新該列表七咧。向上拖動(dòng)列表,則列表繼續(xù)向上滾動(dòng)叮叹,顯示更 多的列表項(xiàng)目艾栋。 有些移動(dòng)系統(tǒng)上朽褪,在頂端或底端垂直拖動(dòng)一下宜咒,會(huì)調(diào)出頂端抽屜或底端抽屜。 水平拖動(dòng)則可以滾動(dòng)輪顯或泳道恬吕,或者打開左側(cè)或右側(cè)的抽屜蜂林。

Drag to move -?拖移

Dragging also can be used to move or copy an object from one list, pane, or container to another, or to move an object arbitrarily within a canvas or grid.

拖移(drag to move)還可以被用來(lái)移動(dòng)或復(fù)制對(duì)象遥诉,可將對(duì)象從一個(gè)列表、窗格或任何容 器中噪叙, 移動(dòng)或復(fù)制到另一個(gè)容器中矮锈,也可以在一個(gè)畫布內(nèi)或網(wǎng)格內(nèi)移動(dòng)或復(fù)制對(duì)象。

Drag to control?-?拖動(dòng)控制

Dragging also can be used to control knobs, switches, sliders, virtual x-y control pads, and contextual touch controls, and to operate palette tools (such as brushes in a paint- ing app) on a canvas.

拖動(dòng)還可以控制旋鈕睁蕾、滑塊苞笨、虛擬的?x-y?型操控板债朵,以及各式情境觸控物,也可以用來(lái)在 畫布上 操作工具板上的東西(例如繪畫應(yīng)用中的畫筆)瀑凝。

Swipe up/down -?向上/下滑動(dòng)

Swiping up usually is synonymous with dragging up, although iOS uses a swipe up ges- ture in desktop edit mode to close a running app. Swiping a list or grid upward causes it to continue scrolling for a while with simulated momentum.

Swiping down usually is synonymous with dragging down. Swiping a list or grid down- ward causes it to continue scrolling for a while with simulated momentum.

向上滑動(dòng)和向上拖動(dòng)基本上是同義詞序芦。不過(guò),iOS?在桌面編輯模式中粤咪,向上滑動(dòng)手勢(shì)意味 著關(guān)閉 一個(gè)正在運(yùn)行的應(yīng)用谚中。向上滑動(dòng)列表或網(wǎng)格,會(huì)導(dǎo)致列表或網(wǎng)格向上滾動(dòng)數(shù)秒寥枝,并伴隨 著模擬的運(yùn)動(dòng)效 果顯示宪塔。

向下滑動(dòng)和向下拖動(dòng)基本上是同義詞。同樣囊拜,向下滑動(dòng)列表或網(wǎng)格某筐,會(huì)導(dǎo)致列表或網(wǎng)格向 下滾動(dòng) 數(shù)秒,并伴隨著模擬的運(yùn)動(dòng)效果顯示冠跷。

Swipe left -?向左;骨動(dòng)?

Swiping left usually is synonymous with dragging left. Swiping a carousel or swimlane to the left causes it to continue scrolling for a while with simulated momentum.

Swiping left also can open a right-hand drawer or close a left-hand drawer.

Apple’s Safari browser uses a swipe left to navigate like the forward button. Google’s Chrome browser uses a swipe left to delete browser tabs when in tab edit mode.

向左滑動(dòng)和向左拖動(dòng)基本上是同義詞南誊。向左滑動(dòng)輪顯或泳道時(shí),會(huì)導(dǎo)致輪顯或泳道向左滾 動(dòng)數(shù)秒蔽莱,并伴隨著模擬的運(yùn)動(dòng)效果顯示弟疆。

向左滑動(dòng)有時(shí)也被用來(lái)打開右側(cè)的抽屜,或關(guān)閉左側(cè)的抽屜盗冷。

蘋果的?Safari?瀏覽器用向左滑動(dòng)的手勢(shì)來(lái)執(zhí)行“前進(jìn)”導(dǎo)航怠苔。谷歌的?Chrome?瀏覽器在標(biāo) 簽編輯模 式下,向左滑動(dòng)意味著刪除該標(biāo)簽仪糖。

Swipe right -?向右滑動(dòng)

Swiping right usually is synonymous with dragging right. Swiping a carousel or swim- lane to the right causes it to continue scrolling for a while with simulated momentum.

Swiping right also can open a left-hand drawer or close a right-hand drawer.

Apple’s Safari browser uses a swipe right to navigate like the back button. Google’s Chrome browser uses a swipe right to delete browser tabs when in tab edit mode.

向右滑動(dòng)和向右拖動(dòng)基本上是同義詞柑司。向右滑動(dòng)輪顯或泳道時(shí),會(huì)導(dǎo)致輪顯或泳道向右滾 動(dòng)數(shù)秒锅劝, 并伴隨著模擬的運(yùn)動(dòng)效果顯示攒驰。

? 向右滑動(dòng)有時(shí)也被用來(lái)打開左側(cè)的抽屜,或關(guān)閉右側(cè)的抽屜故爵。

蘋果的?Safari?瀏覽器用向右滑動(dòng)的手勢(shì)來(lái)執(zhí)行“回退”導(dǎo)航玻粪。谷歌的?Chrome?瀏覽器在標(biāo) 簽編輯模 式下,向右滑動(dòng)也意味著刪除該標(biāo)簽诬垂。

Pinch in/out -?雙指張合

The pinch-in gesture is used to shrink or zoom out on objects physically (such as on a map view). Or you can perform a semantic zoom—zoom out or up one level in the hier- archy in a set of physically or conceptually nested structures.

The pinch-out gesture is used to expand or zoom in on objects physically (such as on a map view). Or you can perform a semantic zoom—zooming in or down one level in the hierarchy in a set of physically or conceptually nested structures.

雙指合攏(pinch-in)手勢(shì)被用來(lái)縮小對(duì)象的物理視圖(例如地圖中的縮小操作可以看到更 大范圍的地圖)劲室。我們也可以運(yùn)用它來(lái)執(zhí)行“語(yǔ)義式”的縮小,即在物理或虛擬的層級(jí)結(jié)構(gòu)中退 到上一級(jí)中结窘。 雙指張開(pinch-out)手勢(shì)被用來(lái)放大對(duì)象的物理視圖(例如地圖中的放大操作可以看到 更小范圍的細(xì)節(jié))很洋。我們也可以運(yùn)用它來(lái)執(zhí)行“語(yǔ)義式”的放大,即在物理或虛擬的層級(jí)結(jié)構(gòu)中 進(jìn)入到下一級(jí)中隧枫。

Rotate -?旋轉(zhuǎn)

Rotate is a gesture employing the thumb and forefinger twisted clockwise or counter- clockwise together on the touchscreen surface.?This gesture can be used to actuate knob controls. But knobs probably should also support a horizontal or vertical drag action that starts on the knob as an alternative and more discoverable gesture. It can also be used to rotate objects, like a selection of pixels in an image editing app.

This gesture is somewhat awkward to carry out, given the anatomy of the human wrist. FiftyThree Inc.’s iOS app, Paper, uses this gesture to control Undo/Redo. Although this is?a novel approach, it seems inferior to the more standard Undo/Redo arrow icons from a usability standpoint.

旋轉(zhuǎn)(rotate)是用拇指和食指順時(shí)針或逆時(shí)針在觸屏上旋轉(zhuǎn)的手勢(shì)喉磁。這個(gè)手勢(shì)可以用來(lái)操 作旋鈕 控件谓苟,不過(guò)旋鈕控件也可以用水平或垂直拖動(dòng)來(lái)操作,或者其他易于被用戶摸索出來(lái)的 手勢(shì)等协怒。旋轉(zhuǎn)手 勢(shì)還可用來(lái)旋轉(zhuǎn)物體涝焙,例如圖像編輯軟件中的被選擇的像素對(duì)象等。

從人機(jī)工學(xué)上來(lái)看斤讥,這個(gè)扭動(dòng)的手勢(shì)纱皆,做起來(lái)不太方便。FiftyThree?公司的?iOS?應(yīng)用?Paper,?運(yùn)用 旋轉(zhuǎn)手勢(shì)來(lái)控制“撤銷/重做”(imdo/redo)芭商。這是個(gè)創(chuàng)新的用法,不過(guò)從可用性角度講似乎 傳統(tǒng)的“撤銷/重做”箭頭圖標(biāo)更好用一些搀缠。

Multifinger swipes -?多指滑動(dòng)

很多移動(dòng)?OS?都支持多指滑動(dòng)铛楣。例如?iOS?可以選擇用四指滑屏來(lái)切換正在運(yùn)行的應(yīng)用。 總體來(lái)說(shuō)艺普,多指滑動(dòng)不太容易被用戶摸索出來(lái)簸州,而且如果在應(yīng)用中使用,很有可能會(huì) 和操作系統(tǒng)

級(jí)的手勢(shì)相互干擾歧譬。因此最好不要用多指滑動(dòng)岸浑,或者將它們備用,以應(yīng)對(duì)特殊 需求瑰步。

輕拍顯示及其他直接操作

輕拍顯示控件

輕拍一個(gè)對(duì)象矢洲, 操控工具便顯示出來(lái)。同樣缩焦,視頻流應(yīng)用也大量運(yùn)用了輕拍顯示這一習(xí)慣用法读虏,在播放視頻時(shí),輕拍屏幕可以調(diào)出一 些隱藏的 功能袁滥。

直接操作控件

有些應(yīng)用讓直接操作進(jìn)一步挖掘了觸屏的潛力盖桥。比如,有些應(yīng)用將傳統(tǒng)的諸如滑塊等非直 接操作题翻, 變成了手勢(shì)直接操作揩徊。谷歌的?Snapseed?圖像編輯器,是將直接操作發(fā)揮到極致的應(yīng)用 之一嵌赠。在提供手 勢(shì)直接操作的同時(shí)塑荒,它還將直接操作的效果實(shí)時(shí)地展現(xiàn)在被編輯的圖像上。


一般性設(shè)計(jì)原則

嵌入系統(tǒng)(內(nèi)置了軟件系統(tǒng)的物理設(shè)備)和桌面系統(tǒng)相比猾普,除了它們都有軟件交互這一類 似的地 方之外袜炕,嵌入系統(tǒng)有其獨(dú)特的困難和問(wèn)題。在為嵌入系統(tǒng)設(shè)計(jì)的時(shí)候初家,無(wú)論是智能家電偎窘、 信息臺(tái)系統(tǒng)乌助, 還是手持設(shè)備,我們都必須牢記如下原則:

??不要把你正在設(shè)計(jì)的產(chǎn)品認(rèn)為是計(jì)算機(jī)陌知。??把硬件和軟件設(shè)計(jì)集成在一起他托。

??讓使用情境來(lái)驅(qū)動(dòng)設(shè)計(jì)。

??模式的運(yùn)用要明智仆葡,如果有的話赏参。

??限定范圍。

??要根據(jù)顯示器的分辨率來(lái)考慮導(dǎo)航沿盅。??盡可能簡(jiǎn)化輸入把篓。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市腰涧,隨后出現(xiàn)的幾起案子韧掩,更是在濱河造成了極大的恐慌,老刑警劉巖窖铡,帶你破解...
    沈念sama閱讀 219,539評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件疗锐,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡费彼,警方通過(guò)查閱死者的電腦和手機(jī)滑臊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)箍铲,“玉大人雇卷,你說(shuō)我怎么就攤上這事『缗ィ” “怎么了聋庵?”我有些...
    開封第一講書人閱讀 165,871評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)芙粱。 經(jīng)常有香客問(wèn)我祭玉,道長(zhǎng),這世上最難降的妖魔是什么春畔? 我笑而不...
    開封第一講書人閱讀 58,963評(píng)論 1 295
  • 正文 為了忘掉前任脱货,我火速辦了婚禮,結(jié)果婚禮上律姨,老公的妹妹穿的比我還像新娘振峻。我一直安慰自己,他們只是感情好择份,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,984評(píng)論 6 393
  • 文/花漫 我一把揭開白布扣孟。 她就那樣靜靜地躺著,像睡著了一般荣赶。 火紅的嫁衣襯著肌膚如雪凤价。 梳的紋絲不亂的頭發(fā)上鸽斟,一...
    開封第一講書人閱讀 51,763評(píng)論 1 307
  • 那天,我揣著相機(jī)與錄音利诺,去河邊找鬼富蓄。 笑死,一個(gè)胖子當(dāng)著我的面吹牛慢逾,可吹牛的內(nèi)容都是我干的立倍。 我是一名探鬼主播,決...
    沈念sama閱讀 40,468評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼侣滩,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼口注!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起胜卤,我...
    開封第一講書人閱讀 39,357評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤疆导,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后葛躏,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,850評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡悠菜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,002評(píng)論 3 338
  • 正文 我和宋清朗相戀三年舰攒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片悔醋。...
    茶點(diǎn)故事閱讀 40,144評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡摩窃,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出芬骄,到底是詐尸還是另有隱情猾愿,我是刑警寧澤,帶...
    沈念sama閱讀 35,823評(píng)論 5 346
  • 正文 年R本政府宣布账阻,位于F島的核電站蒂秘,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏淘太。R本人自食惡果不足惜姻僧,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,483評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蒲牧。 院中可真熱鬧撇贺,春花似錦、人聲如沸冰抢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)挎扰。三九已至翠订,卻和暖如春巢音,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蕴轨。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工港谊, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人橙弱。 一個(gè)月前我還...
    沈念sama閱讀 48,415評(píng)論 3 373
  • 正文 我出身青樓歧寺,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親棘脐。 傳聞我的和親對(duì)象是個(gè)殘疾皇子斜筐,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,092評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容