::GAME2.TW::臺灣遊戲攻略

華語手機遊戲攻略,遊戲資訊專業網站

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

iPad: 大尺寸觸屏的交互意義——大尺寸多點觸控會給人機交互帶來哪些變化?

Ornithopter是我們進行iPad成都漂流活動時遇到的一個很善於思考的Geek,他將為我們帶來一系列的關於手持設備人機交互的思考和心得。也是ifanr【iShout】系列的組成部分。我們希望有更多善於思考的讀者和手持設備的愛好者把自己的體會通過ifanr“Shout”出來。投稿請聯繫fashaola@gmail.com或者@ifanr。 ——Streetsmart

clip_image001 photo by Daniel.[V]

被遺忘的交互界面:

關於iPad 的人機交互原則,蘋果說:

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

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

瀏覽內容:

內容可以分成兩類:一類是嚴格依賴排版的,比如科技文獻、商業圖表和網站;另一類是不依賴排版的,比如一般的小說。我們不妨稱前者為版式依賴型,後者為版式無關型。在手機上,為了適應手機的小尺寸屏幕,版式無關型的內容可以被轉換為純文本來閱讀(影印版的內容除外)。比如說,iPhone 的Stanza 和  Goodreader 允許用戶以純文本的形式閱讀文章,並且能自定義字號、字體、文字與背景顏色。因為內容的組織結構並未被破壞,字體也能夠適應小的屏幕,此時的閱讀體驗尚可接受。然而版式依賴型的數學公式、圖表和影印文本卻無法得體地轉換成純文本來閱讀,一旦你以原有的版式閱讀,你卻不得不在手機上不斷縮放和拖曳。現在iPad 以近乎1:1 的比例完整地再現了原來的版式,所以你可以直接整頁瀏覽。據TUAW 報導,已經有app 利用iPhone/touch 作為操控器,以iPad 作為顯示器來進行多人遊戲,這也是大尺寸帶來的新模式。

文件操作的淡化

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

—— Apple iPad User Interface Guidelines

以上在談論內容時,我一直避免用”文件”來描述內容,這是因為iPad本身淡化了文件的存在與操作。 iPad 沒有Mac OS finder,也沒有”文件存放在文件夾中”的概念。這是因為iPad的設計重心是“師法自然”,而Mac/PC 的文件屬性很多違背了真實物體的使用經驗。反觀iPad,內容自動保存,沒有隻讀,沒有地址,你只會在相應的app 中看到高度實物感的物體(object): 相冊就是一堆堆照片,書就是書架上有封面有形狀的書籍,素描本就是畫板上真真切切的本本……一切物體具有真實的材質紋理,一眼看去,虛擬與實物毫無二致,操作也就再自然不過了。

實際操作時,我們也看到負面的結果:不同的app 共享內容不太方便,比如繪畫本應用 penultimate 無法直接使用Goodreader 中的照片;同時,各種app 中關於共享內容的標示與操作只是各自草創,並沒有很好地統一,因此導致用戶使用時會有一定困擾。

操作工具:

與內容相對應的是工具,儘管iPhone 的控制鍵做到了極簡,還是有人抱怨玩遊戲時虛擬搖桿佔據了小半個屏幕。 iWork 等辦公軟件無法在iPhone 上施展,也是因為操作工具欄會大大擠壓內容的版面。在iPad 的大屏幕上,工具按鍵能伴隨內容呈現在同一個界面上,所以絕大多數的全屏切換都可以被避免。 iPad app 的工具與選項常常以四種形式出現:

1.tab bar

tab_bar_flatten. png

2.segmented control

segmented_flatten. png

3.浮動窗口 popover

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

4.劃分屏幕的導航欄navigation bar in split view

這些tab bar/segmented control/popover/navigation bar 在大屏幕的環境下已然不再擠壓內容,所以現在能夠完整地保留在內容周邊,整裝待發。

當然,空間與功能的增減不是簡單的線性關係,更多空間並不意味著功能的鋪陳,單純堆砌能實現的功能是不明智的。蘋果對app 開發者說了: 那些iPhone屏幕上塞不下的功能,甭以為就可以填給iPad;砍掉不重要的,注意精簡!

所以我們見到的iPad app 界面仍然只是保留了最直接、最常用的功能。關於此處,iPad app 開發準則中還有一條“80%原則”,意思是說app 界面只允許保留最常用的UI元素,剩餘20%不常用的元素一律推到下一個層級中。另外,比如瀏覽照片時,單擊屏幕的操作會抹去頂部與底部的工具欄,這屬於“突出內容”的範疇,不再贅述。總之,雖然保留了蘋果一貫精簡的風格,iPad 無疑提供了更詳盡的工具欄。

操作空間:

能想像iPhone 版本的iWork 嗎? 事實上類似app 早已出現,但它們有著嚴重低效率的操作。關於iPad 版iWork,ifanr 主站已經有評測,此處略去。 iPad 的觸屏是蘋果迄今為止創造的最大的多點觸控(multitouch)屏幕,可以預見各種標準下的多點觸控手勢將得以真正施展並豐富內容的交互性,app store 美國店中的遊戲、藝術創作與幼兒教育這三個特色專題就是生動的例證。除此之外,iPad 的確有多人共用一個大屏幕的能力,比如說用iPhone 操控、把iPad 作為顯示器的雙人遊戲,以及兩個人分別從iPad 兩側玩的對戰遊戲,或者多人在iPad 上進行一個小規模的樂團演奏。拋開朗朗在音樂會上用iPad 彈奏鋼琴曲,關於知名畫家在iPad 上作畫的消息也層出不窮,以下是兩幅畫作:

Untitled-2.pngUntitled-1.png

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

視覺穩定性:

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

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

ipad-ibook- screen.png

使用iBook底部虛線上的節點來精確到達指定頁

《尼爾森諾曼集團關於iPad 易用性的測試報告》(Apple4us Lawrence Li譯)中,雅各·尼爾森本人談到了「卡片」與「捲軸」的概念:

用戶介面先驅傑夫·拉斯金(Jef Raskin)曾經用「卡片」與「捲軸」來區分兩種截然不同的超文本模型:卡片的畫布尺寸是固定的。你可以在這個二維空間裡隨意安排信息(可以實現漂亮的佈局),但你不能擴大該區域的尺寸。用戶要看更多的信息,就必須跳去另一張卡片。 HyperCard 就是卡片模型的最著名實例。捲軸有足夠的空間容納任何數量的信息,因為畫布可以隨意延展。用戶不需要經常跳轉,但捲軸的佈局通常不那麼精緻,因為設計師無法控制用戶在任意時間點能夠看到哪些內容。萬維網絕對是捲軸派的,尤其是在今天。滾動網頁是家常便飯,用戶有時會查看長網頁底部很深處的信息。即便是手機軟件也經常利用捲軸式介面來呈現小屏幕無法容納的信息。對比之下,卡片派設計在早期的iPad 軟件設計中占主導地位。滾動條也會不時出現在屏幕上,但大多數軟件都試圖在這塊漂亮的屏幕上呈現出一個固定的頁面佈局。這兩種模式如果並存下去並不奇怪:iPad 上是卡片派主導,桌面電腦上是捲軸派主導(手機則居於兩者之間)。但兩種模式的融合也有可能出現,捲軸式交互風格的優勢或許會令用戶期待iPad 軟件更多地採納它。

我認為卡片式的界面源於iPad 對實物感的追求,因為iPad 是一個捧在手裡能夠接觸的物體,所以卡片式的內容更接近一塊標本、一本手冊、一頁能翻動的紙張;同時,部分iPad app 上幾近固定的頁面格局能提供更良好的視覺穩定性,易於用戶定位,這是其不可忽視的優點。我們以在線遊戲 We Rule 為例:

iPhone/touch 版的全屏視圖有五種:領土全景、建造工具、mojo 商店和plus+ 遊戲社區,五者之間的跳轉需要全屏切換。

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

實物感:

當一切越接近真實世界時,用戶的學習成本越低,產品的易用性就越好。 iPad 的 UI 元素具有以下特點:

  • 同時模擬實物的靜態外觀與動態運動
  • 被操作物體的行為與人們的期待一致
  • 不違背物理原理
  • 保留實際用料的質感
  • 極端寫實的繪畫功底

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

realistic_contacts

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

rich_texture

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

總結

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

從iPhone、iPod touch 到iPad ,規格的增大,已經產生質的變化。我們完全有理由期待在這個大尺寸的平台上出現更高效、更強大的app,這也是 Fraser Speirs  回到app 開發陣營的原因。同時,在iTunes U 上湧現出不少美國頂尖大學關於iPad app 開發與交互設計的研討會與課程。 iPad 為人機交互提供了史無前例的平台,並為後來者提供了試驗案例與市場反饋,它絕不僅僅是“一台放大的iPod touch”,這是毫無爭議的。

來源:http://www.ifanr.com/11003

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy