iPad: 大尺寸觸屏的交互意義

1 評(píng)論 15823 瀏覽 6 收藏 17 分鐘

iPad: 大尺寸觸屏的交互意義——大尺寸多點(diǎn)觸控會(huì)給人機(jī)交互帶來(lái)哪些變化?

Ornithopter是我們進(jìn)行iPad成都漂流活動(dòng)時(shí)遇到的一個(gè)很善于思考的Geek,他將為我們帶來(lái)一系列的關(guān)于手持設(shè)備人機(jī)交互的思考和心得。也是ifanr【iShout】系列的組成部分。我們希望有更多善于思考的讀者和手持設(shè)備的愛(ài)好者把自己的體會(huì)通過(guò)ifanr“Shout”出來(lái)。投稿請(qǐng)聯(lián)系fashaola@gmail.com或者@ifanr。——Streetsmart

photo by Daniel.[V]

被遺忘的交互界面:

關(guān)于 iPad 的人機(jī)交互原則,蘋(píng)果說(shuō):

內(nèi)容和交互性是王道。 (Content and interactivity are paramount in the iPad user experience. )

他們認(rèn)為,好的 UI (User Interface) 應(yīng)當(dāng)降低 UI 本身的存在感,從而突出用戶真正關(guān)心的內(nèi)容。交互界面是為內(nèi)容服務(wù)的,為了讓用戶關(guān)注他們想看的內(nèi)容,UI的存在感被最大程度地降低,以致于 iPad 的 UI 反倒是被用戶所忽略的。這是一套返璞歸真的思路。的確,開(kāi)發(fā)者的工作重心是功能與交互界面,然而交互界面承載的內(nèi)容才是用戶真正關(guān)心的。下文會(huì)討論iPad的大尺寸是如何推動(dòng)這一原則。

瀏覽內(nèi)容:

內(nèi)容可以分成兩類:一類是嚴(yán)格依賴排版的,比如科技文獻(xiàn)、商業(yè)圖表和網(wǎng)站;另一類是不依賴排版的,比如一般的小說(shuō)。我們不妨稱前者為版式依賴型,后者為版式無(wú)關(guān)型。在手機(jī)上,為了適應(yīng)手機(jī)的小尺寸屏幕,版式無(wú)關(guān)型的內(nèi)容可以被轉(zhuǎn)換為純文本來(lái)閱讀(影印版的內(nèi)容除外)。比如說(shuō),iPhone 的 Stanza 和? Goodreader 允許用戶以純文本的形式閱讀文章,并且能自定義字號(hào)、字體、文字與背景顏色。因?yàn)閮?nèi)容的組織結(jié)構(gòu)并未被破壞,字體也能夠適應(yīng)小的屏幕,此時(shí)的閱讀體驗(yàn)尚可接受。然而版式依賴型的數(shù)學(xué)公式、圖表和影印文本卻無(wú)法得體地轉(zhuǎn)換成純文本來(lái)閱讀,一旦你以原有的版式閱讀,你卻不得不在手機(jī)上不斷縮放和拖曳?,F(xiàn)在 iPad 以近乎 1:1 的比例完整地再現(xiàn)了原來(lái)的版式,所以你可以直接整頁(yè)瀏覽。據(jù) TUAW 報(bào)道,已經(jīng)有 app 利用 iPhone/touch 作為操控器,以 iPad 作為顯示器來(lái)進(jìn)行多人游戲,這也是大尺寸帶來(lái)的新模式。

文件操作的淡化

Downplay File-Handling Operations and encourage people to view their content as objects in the application.

——?Apple iPad User Interface Guidelines

以上在談?wù)搩?nèi)容時(shí),我一直避免用”文件”來(lái)描述內(nèi)容,這是因?yàn)閕Pad本身淡化了文件的存在與操作。iPad 沒(méi)有 Mac OS finder,也沒(méi)有”文件存放在文件夾中”的概念。這是因?yàn)閕Pad的設(shè)計(jì)重心是“師法自然”,而 Mac/PC 的文件屬性很多違背了真實(shí)物體的使用經(jīng)驗(yàn)。反觀 iPad,內(nèi)容自動(dòng)保存,沒(méi)有只讀,沒(méi)有地址,你只會(huì)在相應(yīng)的 app 中看到高度實(shí)物感的物體(object): 相冊(cè)就是一堆堆照片,書(shū)就是書(shū)架上有封面有形狀的書(shū)籍,素描本就是畫(huà)板上真真切切的本本……一切物體具有真實(shí)的材質(zhì)紋理,一眼看去,虛擬與實(shí)物毫無(wú)二致,操作也就再自然不過(guò)了。

實(shí)際操作時(shí),我們也看到負(fù)面的結(jié)果:不同的 app 共享內(nèi)容不太方便,比如繪畫(huà)本應(yīng)用?penultimate 無(wú)法直接使用 Goodreader 中的照片;同時(shí),各種 app 中關(guān)于共享內(nèi)容的標(biāo)示與操作只是各自草創(chuàng),并沒(méi)有很好地統(tǒng)一,因此導(dǎo)致用戶使用時(shí)會(huì)有一定困擾。

操作工具:

與內(nèi)容相對(duì)應(yīng)的是工具,盡管 iPhone 的控制鍵做到了極簡(jiǎn),還是有人抱怨玩游戲時(shí)虛擬搖桿占據(jù)了小半個(gè)屏幕。iWork 等辦公軟件無(wú)法在 iPhone 上施展,也是因?yàn)椴僮鞴ぞ邫跁?huì)大大擠壓內(nèi)容的版面。在 iPad 的大屏幕上,工具按鍵能伴隨內(nèi)容呈現(xiàn)在同一個(gè)界面上,所以絕大多數(shù)的全屏切換都可以被避免。iPad app 的工具與選項(xiàng)常常以四種形式出現(xiàn):

1.tab bar

2.segmented control

segmented_flatten.png

3.浮動(dòng)窗口 popover

ipad-kindle-notes-and-marks.jpg.jpeg

4.劃分屏幕的導(dǎo)航欄navigation bar in split view

這些 tab bar/segmented control/popover/navigation bar 在大屏幕的環(huán)境下已然不再擠壓內(nèi)容,所以現(xiàn)在能夠完整地保留在內(nèi)容周邊,整裝待發(fā)。

當(dāng)然,空間與功能的增減不是簡(jiǎn)單的線性關(guān)系,更多空間并不意味著功能的鋪陳,單純堆砌能實(shí)現(xiàn)的功能是不明智的。蘋(píng)果對(duì) app 開(kāi)發(fā)者說(shuō)了: 那些iPhone屏幕上塞不下的功能,甭以為就可以填給 iPad;砍掉不重要的,注意精簡(jiǎn)!

所以我們見(jiàn)到的 iPad app 界面仍然只是保留了最直接、最常用的功能。關(guān)于此處,iPad app 開(kāi)發(fā)準(zhǔn)則中還有一條“80%原則”,意思是說(shuō) app 界面只允許保留最常用的UI元素,剩余20%不常用的元素一律推到下一個(gè)層級(jí)中。另外,比如瀏覽照片時(shí),單擊屏幕的操作會(huì)抹去頂部與底部的工具欄,這屬于“突出內(nèi)容”的范疇,不再贅述??傊m然保留了蘋(píng)果一貫精簡(jiǎn)的風(fēng)格,iPad 無(wú)疑提供了更詳盡的工具欄。

操作空間:

能想象 iPhone 版本的 iWork 嗎? 事實(shí)上類似 app 早已出現(xiàn),但它們有著嚴(yán)重低效率的操作。關(guān)于 iPad 版 iWork,ifanr 主站已經(jīng)有評(píng)測(cè),此處略去。iPad 的觸屏是蘋(píng)果迄今為止創(chuàng)造的最大的多點(diǎn)觸控(multitouch)屏幕,可以預(yù)見(jiàn)各種標(biāo)準(zhǔn)下的多點(diǎn)觸控手勢(shì)將得以真正施展并豐富內(nèi)容的交互性,app store 美國(guó)店中的游戲、藝術(shù)創(chuàng)作與幼兒教育這三個(gè)特色專題就是生動(dòng)的例證。除此之外,iPad 的確有多人共用一個(gè)大屏幕的能力,比如說(shuō)用 iPhone 操控、把 iPad 作為顯示器的雙人游戲,以及兩個(gè)人分別從 iPad 兩側(cè)玩的對(duì)戰(zhàn)游戲,或者多人在 iPad 上進(jìn)行一個(gè)小規(guī)模的樂(lè)團(tuán)演奏。拋開(kāi)朗朗在音樂(lè)會(huì)上用 iPad 彈奏鋼琴曲,關(guān)于知名畫(huà)家在 iPad 上作畫(huà)的消息也層出不窮,以下是兩幅畫(huà)作:

不得不提到 iPad 的虛擬鍵盤(pán),landscape 模式下的鍵盤(pán)雖然與通常的實(shí)體鍵盤(pán)尺寸相同,卻仍然不適合雙手高速盲打。我的理解是虛擬鍵盤(pán)失敗在物理觸感上。在普通的實(shí)體鍵盤(pán)上,手指的狀態(tài)有三種:(i)靜態(tài)擱置在按鍵上、(ii)短暫敲擊按鍵、(iii)長(zhǎng)按以激活mode(比如按ctrl鍵)。而在 iPad 上,你的左右食指無(wú)法像實(shí)體鍵盤(pán)上通過(guò) F、J 鍵上凸塊來(lái)定位,更令人困擾的是,手指在虛擬按鍵上無(wú)法靜態(tài)擱置,只能懸浮在鍵盤(pán)上方。所以 iPad 僅能良好支持輕量化的輸入,對(duì)于大量文本的創(chuàng)作者來(lái)說(shuō),只好通過(guò)其他的藍(lán)牙鍵盤(pán)來(lái)碼字。筆者很好奇帶有USB接口的鍵盤(pán)能否通過(guò) iPad camera connection kit? 連接到 iPad 上使用,希望有設(shè)備的讀者親自檢驗(yàn)。

視覺(jué)穩(wěn)定性:

When you perform fewer full-screen transitions, your application has greater visual stability, which helps people keep track of where they are in their task. You can use UI elements such as split view and popover to lessen the need for full-screen transitions.

——Apple iPad Human Interface Guidelines

以上兩點(diǎn)——內(nèi)容與操作——無(wú)不體現(xiàn)了大尺寸的視覺(jué)穩(wěn)定性(visual stability)。iPad 的頁(yè)面分割(split view)或浮動(dòng)窗口(popover)等 UI 元素能極大地減少全屏切換,保證用戶不會(huì)因操作本身而分心,他們?cè)谝獾膬?nèi)容隨時(shí)原地待命。反觀小屏幕上的全屏切換,不僅會(huì)降低用戶對(duì)內(nèi)容的關(guān)注度,還會(huì)令用戶思考自己所在的定位和層級(jí)(hierarchy),導(dǎo)致用戶分心,降低工作效率。今天筆者在 Digital Campus podcast 中聽(tīng)到kindle 的使用者抱怨頁(yè)面定位的問(wèn)題,原因是他們沒(méi)有直觀快捷的辦法定位自己所在的章節(jié),iPhone、iPod touch 的 Goodreader、Stanza 的用戶同樣需要激活工具欄或切換至目錄頁(yè)面才能看到當(dāng)前頁(yè)面所在的位置,而 iBook 可以直接在頁(yè)面下方顯示當(dāng)前頁(yè)數(shù),同時(shí),用戶能通過(guò)拖動(dòng)底部虛線上的節(jié)點(diǎn)來(lái)精確到達(dá)指定頁(yè)面(如下圖)。這樣的設(shè)計(jì)保證了跳轉(zhuǎn)閱讀時(shí)無(wú)需切換至目錄頁(yè)面,響應(yīng)快捷的同時(shí),再一次體現(xiàn)了良好的視覺(jué)穩(wěn)定性。

ipad-ibook-screen.png

使用iBook底部虛線上的節(jié)點(diǎn)來(lái)精確到達(dá)指定頁(yè)

在《尼爾森諾曼集團(tuán)關(guān)于 iPad 易用性的測(cè)試報(bào)告》(Apple4us Lawrence Li譯)中,雅各·尼爾森本人談到了「卡片」與「卷軸」的概念:

用戶介面先驅(qū)杰夫·拉斯金(Jef Raskin)曾經(jīng)用「卡片」與「卷軸」來(lái)區(qū)分兩種截然不同的超文本模型:卡片的畫(huà)布尺寸是固定的。你可以在這個(gè)二維空間里隨意安排信息(可以實(shí)現(xiàn)漂亮的布局),但你不能擴(kuò)大該區(qū)域的尺寸。用戶要看更多的信息,就必須跳去另一張卡片。HyperCard 就是卡片模型的最著名實(shí)例。卷軸有足夠的空間容納任何數(shù)量的信息,因?yàn)楫?huà)布可以隨意延展。用戶不需要經(jīng)常跳轉(zhuǎn),但卷軸的布局通常不那么精致,因?yàn)樵O(shè)計(jì)師無(wú)法控制用戶在任意時(shí)間點(diǎn)能夠看到哪些內(nèi)容。萬(wàn)維網(wǎng)絕對(duì)是卷軸派的,尤其是在今天。滾動(dòng)網(wǎng)頁(yè)是家常便飯,用戶有時(shí)會(huì)查看長(zhǎng)網(wǎng)頁(yè)底部很深處的信息。即便是手機(jī)軟件也經(jīng)常利用卷軸式介面來(lái)呈現(xiàn)小屏幕無(wú)法容納的信息。對(duì)比之下,卡片派設(shè)計(jì)在早期的 iPad 軟件設(shè)計(jì)中占主導(dǎo)地位。滾動(dòng)條也會(huì)不時(shí)出現(xiàn)在屏幕上,但大多數(shù)軟件都試圖在這塊漂亮的屏幕上呈現(xiàn)出一個(gè)固定的頁(yè)面布局。這兩種模式如果并存下去并不奇怪:iPad 上是卡片派主導(dǎo),桌面電腦上是卷軸派主導(dǎo)(手機(jī)則居于兩者之間)。但兩種模式的融合也有可能出現(xiàn),卷軸式交互風(fēng)格的優(yōu)勢(shì)或許會(huì)令用戶期待 iPad 軟件更多地采納它。

我認(rèn)為卡片式的界面源于 iPad 對(duì)實(shí)物感的追求,因?yàn)?iPad 是一個(gè)捧在手里能夠接觸的物體,所以卡片式的內(nèi)容更接近一塊標(biāo)本、一本手冊(cè)、一頁(yè)能翻動(dòng)的紙張;同時(shí),部分 iPad app 上幾近固定的頁(yè)面格局能提供更良好的視覺(jué)穩(wěn)定性,易于用戶定位,這是其不可忽視的優(yōu)點(diǎn)。我們以在線游戲 We Rule 為例:

iPhone/touch 版的全屏視圖有五種:領(lǐng)土全景、建造工具、mojo 商店和 plus+ 游戲社區(qū),五者之間的跳轉(zhuǎn)需要全屏切換。

以上是 We Rule 的兩種版本,iPhone/touch 版的全屏視圖有五種:領(lǐng)土全景、建造工具、友鄰地圖、mojo 商店和 plus+ 游戲社區(qū),五者之間的跳轉(zhuǎn)需要全屏切換。iPad 的視圖只有一種,即領(lǐng)土全景,而其余三者是通過(guò)浮動(dòng)窗口在領(lǐng)土全景之上顯示,不再引起低效率的全屏切換。

實(shí)物感:

當(dāng)一切越接近真實(shí)世界時(shí),用戶的學(xué)習(xí)成本越低,產(chǎn)品的易用性就越好。iPad 的 UI 元素具有以下特點(diǎn):

  • 同時(shí)模擬實(shí)物的靜態(tài)外觀與動(dòng)態(tài)運(yùn)動(dòng)
  • 被操作物體的行為與人們的期待一致
  • 不違背物理原理
  • 保留實(shí)際用料的質(zhì)感
  • 極端寫(xiě)實(shí)的繪畫(huà)功底

如下所示,通訊錄中央的裝訂孔清晰可辨,而記事簿被賦予了皮革的外套。在 iPhone OS 上,物體的行為符合日常生活經(jīng)驗(yàn)和物理原理。而 iPad 更大的屏幕帶來(lái)更強(qiáng)的視覺(jué)沖擊,更廣的多點(diǎn)觸控區(qū)域帶來(lái)更自然的實(shí)物操作感,iPad? 把 GUI(graphic user Interface? 圖形用戶界面) 做到了極致。

realistic_contacts

通訊錄中央的裝訂孔清晰可辨

rich_texture

記事簿被賦予了皮革的外套

總結(jié)

 

小尺寸上的交互 大尺寸上的交互
原有排版被割裂 原有排版被保留
操作空間局促 操作空間大
全屏切換多 全屏切換少
難以定位所在層級(jí) 易定位

從 iPhone、iPod touch 到 iPad ,規(guī)格的增大,已經(jīng)產(chǎn)生質(zhì)的變化。我們完全有理由期待在這個(gè)大尺寸的平臺(tái)上出現(xiàn)更高效、更強(qiáng)大的 app,這也是?Fraser Speirs? 回到 app 開(kāi)發(fā)陣營(yíng)的原因 。同時(shí),在 iTunes U 上涌現(xiàn)出不少美國(guó)頂尖大學(xué)關(guān)于 iPad app 開(kāi)發(fā)與交互設(shè)計(jì)的研討會(huì)與課程。iPad 為人機(jī)交互提供了史無(wú)前例的平臺(tái),并為后來(lái)者提供了試驗(yàn)案例與市場(chǎng)反饋,它絕不僅僅是“一臺(tái)放大的 iPod touch”,這是毫無(wú)爭(zhēng)議的。

來(lái)源:http://www.ifanr.com/11003

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App