與衆多優秀的産品相同,iPad應用的成功也取決于産品核心價值以及使用者體驗模式等諸多方面的因素。除了遊戲之外,多數類型的應用都必需能夠在一定的上下文環境中幫助使用者解決某些特定的問題。它應該足夠的簡單易用,使使用者不需要進行複雜的設定和學習就可以順利上手。
而産品在視覺外觀、互動方式、情感聯接等方面的表現更會直接影響到使用者對于應用的體驗滿意度。在本文中,我們将共同了解一些你在設計工作中需要認真考慮與貫徹的指導準則。我們不會對建立iPad應用的完整設計流程進行講解,也不會将時間花費在幾乎任何一篇移動應用設計文章都會提到的那些細節當中的小方法小竅門上。本文的主要目的是幫助你在實際的iPad應用項目中制定更加合理與正确的産品設計決策。
1.瞄準核心需求,簡化産品功能

優秀的iPad應用通常可以讓使用者以最簡單的操作方式完成一個或多個非常明确的任務目标。你需要在産品的概念階段對功能模式進行有針對性的選擇與摒棄。不妨試着以一種面向目标的思路來判斷功能在産品中的存在價值:針對自己産品的方向及概念模式,設想使用者會在哪些典型的需求用例中進行使用,将任何能夠想到的需求與任務目标都記錄下來。接下來,與你的團隊進行頭腦風暴,盡量全面的羅列出使用者在完成這些任務目标的過程中有可能會用到的功能。然後,在這份功能清單當中提煉出一套能夠確定實作需求目标的最精簡的功能集合。最後,還可以向這個最小化的功能藍圖當中增加一些有助于提升産品使用者體驗的特色功能。
來看些執行個體。Epicurious這款食譜應用在核心功能的集約方面做的相當到位——沒有複雜的界面與操作方式,使用者完全可以邊學習邊實際操作,享受烹饪的樂趣。特别是在橫屏狀态下,左側是很清晰的原料配置清單,而右側的主要内容區是詳細的烹饪操作流程。使用者還可以很輕松的通過一個可拖動定位的标記來記錄下目前的烹饪流程進行到了哪一步。另外,關于目前這道食譜的評論及技術提示等相關内容都被內建到了下方的tab視圖中,這樣即保證了界面的簡約清晰,又可以讓使用者在需要的時候能夠很輕松的檢視到這些内容。
WholeFoods也是一款烹饪輔助類型的應用,如果使用者希望對某些菜單進行嘗試,它可以幫助使用者将那些所需的食材配料生成為購物清單。不過很遺憾的是,這款應用忽略了不同菜單之間包含着相同配料的問題,使得最終生成的購物清單往往會在某些項目上産生重複的現象。我們可以在下面的截圖中看到,香蕉桑出現了三次:
另外,不要到處使用按鈕一類的視覺互動元素;在很多情況下,操作控制行為完全可以通過手勢來完成。例如,iOS自帶的備忘錄并沒有正常的編輯模式入口,使用者隻要輕按界面就可以進入編輯狀态;内容也會被自動儲存,不需要使用者執行相關操作。而iOS原生的選擇、剪切、複制、粘帖等編輯功能都隻需要簡單的基本手勢即可完成。撤銷操作相對特殊一些,需要搖晃機身;記得hold住先。
2.打造更加智能化與個性化的産品體驗
沒人喜歡花錢買回一款應用還必須首先進行複雜的設定才能正常使用。要盡量充分地利用iPad及相關Web端服務的技術能力,對使用者在上下文環境中的各方面特征進行更加細微準确的了解與分析。考慮一下有沒可能對使用者的地理位置資訊、行事曆、微網誌feed、Gmail賬戶中的訂閱或是通訊錄等進行合理合法的利用,使你的應用能夠為使用者提供更加智能、更加個性化的内容及功能。
Zite是一款令人叫絕的内容閱讀類應用,它會讀取使用者在GoogleReader、Twitter和Delicious賬戶中的内容資訊,分析使用者的個人喜好,并在此基礎上向使用者推薦其他内容源當中的相關文章。我(英文原文作者)試着在這款應用中授權我的Delicious賬戶,五秒鐘之内,它就完成了對我曾經收藏過的文章的分析,并基于我的興趣方向生成了一本完全個性化的雜志,讓我可以閱讀到更多自己感興趣的新文章。這類應用與Pandora等服務類似,你用的越多,它們就越了解你,相應的内容輸出也就越發的個性化。雖然很多人認為,相比于Zite來說,Flipboard的UI設計及相關的互動體驗更加誘人,但Zite依然可以在智能化與個性化等方面占有優勢。
3.注意應用産品的上下文環境
根據你的産品所面向的核心需求,考慮使用者會在哪些典型的情景環境中進行使用。iPad的常見使用環境包括餐廳、機場、行車途,或是家中的廚房、卧室、書房等。在你對産品的功能及體驗模式進行規劃的過程當中,是否有必要考慮使用場景方面的因素對現有設計模式的影響作用?舉個例子,對于食譜類的應用來說,使用者在廚房中使用時的需求目标與在卧室中使用時的狀況也許會存在很大差異。
OpenTable主要提供訂餐方面的服務。在它的Web端,餐廳搜尋結果的展示形式就是很傳統的資訊清單。而它的iPad用戶端應用的産品概念則展現出了移動應用上下文環境與功能需求之間的高度關聯性。其預設視圖下的使用者界面主要由地圖與餐廳清單組成,使用者可以直接搜尋自己目前位置附近的餐廳。相比于Web端的産品模式,iPad應用中的這些功能特色都更加符合使用者在使用移動裝置完成相關任務時的實際需求。
AwesomeNote也是個不錯的例子。它所提供的預設分類方式很準确的反映出了人們使用iPad的常見環境及需求用例。GroceryIQ是一款購物清單類型的應用,它的一個重要特色是允許使用者按照不同商店來歸納與篩選自己需要購買的商品,非常符合人們在實際購物需求中的心智模型。
4.考慮多使用者與多裝置的情況
家庭成員之間通常會使用同一部iPad來完成各自的需求目标;另外,全家人圍坐在一起共同使用的場景也是很常見的。與手機或個人電腦不同,iPad的個人色彩相對較弱,它更像是咖啡桌上的雜志,具有很強的共享性。在很多類型的iPad應用當中,賬戶管理方面的功能是不可或缺的,包括最基本的賬戶切換,以及對于目前處于登入狀态的賬戶提示等。對于某些擁有多裝置版本的内容類應用來說,賬戶管理的一個重要作用就是在iPad和iPhone等裝置之間保持内容的同步更新。
舉個例子,Flipboard允許多個使用者通過不同的賬戶登入,并會在首頁當中顯示目前登入賬戶的名稱。FedEx的iPad應用,雖然其界面整體風格非常灰暗,但登入賬戶的資訊仍然可以很明顯的被辨識出來。而eBay的用戶端在這方面就略顯不足,使用者必須點選左上方的“我的eBay”才能浏覽目前的賬戶資訊。
5.打造合理的互動模式
你可以在遊戲或是其他娛樂類型的産品中嘗試各種複雜炫目的互動效果,不過對于那些時常會被用到的其他類型的應用來說,在導航結構、浏覽方式及相應的視覺互動形式等方面還是盡量保持正常與簡潔的好。互動模式的創新固然是推動一款應用取得成功的重要因素,但絕不能為了追求具有差異化的體驗方式而對産品本身的可用性造成負面影響。
MarthaStewartLiving雜志的浏覽方式很好的将創意與可用性結合在了一起。其中,x軸方向的滾屏操作用于檢視不同的文章頁面,而y軸上的滾屏則用來在某篇文章當中進行浏覽閱讀。針對目前文章頁面的内容簡介會出現在頁面隊列的上方,使用者不需要進入單篇文章就可以對大緻内容做以了解。而隊列底部的滾動條則可以很明顯的反映出目前焦點所指向的頁面在全書當中的位置。這些看似簡潔平實的操作方式卻可以給使用者帶來簡單易用、符合感覺的良好互動體驗。
很多人會在平端iPad時将左手拇指停靠在螢幕的左上角附近,Zite的設計方案使他們在關閉目前文章時可以很輕松的進行操作。另外,使用者還可以在螢幕上點選文章容器之外的任何地方來關閉文章界面。這種方案具有很強的彈性,習慣于以其他姿勢使用iPad的使用者也可以毫不費力的進行操作。而紐約時報的iPad應用則允許使用者通過雙指捏合的方式來關閉文章;另外,文章底部的工具欄中也包含可以回到首頁的按鈕,而且當文章界面保持打開狀态幾秒鐘之後,這個工具欄還會自動隐藏。相對于關閉按鈕來說,捏合的方式更加自由一些,不需要使用者針對某個互動元素進行操作;但其弊端也是很明顯的:使用者有可能需要臨時改變雙手的位置和姿勢,來保證其中一隻手可以自如的執行手勢操作。
在對各種應用進行嘗試和體驗的過程中,要注意觀察自己在細節中的感受,特别要記錄下那些會讓你覺得很贊的地方,或是那些讓你感到操作起來很不順手、甚至會對操作流程産生幹擾作用的互動方式。找到那些與你的産品屬于相同領域的應用,分析他們的功能及體驗模式,并考慮怎樣在自己的産品中實作差異化。在很多方面,iPad應用仍然具有一定的前沿性,應用市場中會不斷湧現出各種新奇炫目的功能及互動方式;在這種情況下,更需要以務實的心态來規劃自己産品的使用者體驗設計方案,避免盲目的标新立異。
6.提供首頁視圖
人們習慣于首頁的概念。首頁視圖通常可以幫助使用者對産品的功能進行縱覽,并為他們提供常用操作的快捷入口。首頁可以為使用者帶來安全感,讓他們在探索功能和浏覽内容的時候不必擔心在應用軟體中迷失方向。
我們一起看看來自NASA的VisualizationExplorer,這款應用沒有首頁視圖模式,使用者打開它之後會被直接帶進最新的一篇内容當中。要浏覽其他文章,使用者可以點選文章左右兩端的箭頭來按照順序逐一檢視,或是通過點選左下角的圖示來調出文章清單,在其中進行選擇。通過文章清單進行檢視的自由度要比第一種方式高一些,但仍會受到容器尺寸規格的限制,清單中的每一個文章條目隻能包含一個很小的縮略圖以及簡短的文章标題,使用者無法在這裡直接擷取關于文章本身的簡介内容。
相比之下,Pulse的體驗就好了很多。它的首頁視圖是一個内容導航,使用者可以在其中以清單的形式直接檢視不同内容源中的最新文章;每個内容條目中都包括大尺寸的縮略圖、文章标題及簡介内容(具體情況取決于文章本身),使用者可以很清楚的判斷出哪些内容是他們感興趣的。在橫屏狀态下,當使用者選擇了某篇文章之後,整個首頁導航界面會向左移開,完整的文章内容會随之從右側展開。這是一種非常連貫的互動體驗,使用者并不會覺得索引與内容處于兩個互不相幹的界面當中。而豎屏時,導航結構會在單篇文章當中收攏到界面底部;雖然這種方式與NASA的做法類似,但Pulse始終可以讓使用者通過更大更清晰的文章條目清單來檢視隊列中的文章概況。
7.謹慎使用彈出效果
iPad當中,用來幫助使用者通路相關内容和導航結構的彈出層效果還是蠻贊的。但是,如果使用不善,這種互動模式也會在操作流程中造成不小的麻煩。在設計方案中,一定要為彈出層做好高度與寬度上的限制,盡量避免将太多的資訊放在其中。我們再次以AwesomeNote為例,不過這次的角度相對負面一些。雖然我們在前面提到過,它預設的檔案夾分類方式很符合使用者的需求,不過要對這些檔案夾進行相關的編輯操作,卻需要在一個彈出層當中進行。其中檔案夾的呈現方式與主界面中的幾乎完全一緻,隻是尺寸略有差別;對于這種重要的互動對象集合,如果在同一個界面中以相同的視覺表現形式重複地出現,那麼在很大程度上會對使使用者産生迷惑。而且對于檔案夾的視覺樣式以及相關的編輯操作來說,這樣一個彈出層顯得有些狹小了。
其實,從容器尺寸與空間使用率的角度講,我們之前看到的NASA的文章清單彈出層也具有相同的問題。在某些情況下,單獨打開一個新界面比彈出層更加合理。除非彈出層中的相關操作與目前界面中的内容具有難以阻斷的上下文相關性,否則完全可以它們放到一個新的界面當中——可用空間更大,布局結構更合理,閱讀和操作都更加容易,為什麼不呢。
8.避免使用不必要的啟動畫面
在傳統Web領域,不少網站都會使用基于Flash或其他技術打造的“啟動畫面”,它們多數是沒有任何意義的,而且要花費大量的時間進行加載,使用者很容易失去耐心并轉身離開。對于運作在iPad這類移動裝置上的應用來說,毫無意義的啟動畫面會更加令人崩潰。如果你的應用在啟動的時候需要加載很多内容,而你決定在此期間展示一個啟動畫面,進而讓使用者對等待行為的感覺程度有所降低,那麼至少不要讓它保持太久。
最好可以在啟動畫面當中展示一些已經加載好的簡要内容,使使用者即使在等待過程中也能保持一種相對連貫的互動感覺。Zite在這方面的表現依然很贊,它會在啟動畫面當中顯示一些已經加載好的文章縮略圖,以吸引使用者的注意力,而同時,更多的其他内容仍在進行加載。
9.正确合理的使用手勢操作
炫酷而實用的手勢操作是iPad當中的重要互動方式,不過一定要確定在産品當中以合理的密度在正确的地方使用這種方式。舉個例子,如果目前界面中的主要互動對象是需要通過橫掃手勢來觸發滾動的旋轉木馬形式的清單視圖,那麼就不應該再為該界面綁定其他具有全局性的橫掃手勢了。
如果需要通過手勢來觸發的互動行為難以被使用者輕易的洞察,那麼最好在顯眼的地方給予提示。Zite在這方面做的同樣很棒,在内容分類清單視圖中,右下角的提示可以讓使用者很容易了解到接下來可以通過輕掃來實作翻頁。
Discovr是一款音樂探索類型的應用,它将手勢操作的提示資訊直接整合到了互動對象當中,也就是那個标注着“Tapme”的紅圈。
當擷取了足夠的資訊之後,紅圈中的文字會變為“Tapandholdme”,提示使用者通過長按來完成接下來的操作。這種引導方式可以讓使用者不必離開目前的互動流程就能快速直接的對關鍵操作方式進行掌握。
10.讓可觸控的界面元素易于識别、友善觸摸
JakobNielsen老師在iPad可用性報告當中指出的“閱讀-觸控不對等”的問題在iPad應用當中其實是蠻普遍的。(話說這已經是Nielsen老師第三次在我們的文章當中露面了。前面兩次分别涉及到産品早期的原型設計與使用者測試以及移動化使用者體驗設計相關方面的話題)
所謂“閱讀-觸控不對等”,即是指界面中的文字字号可以保證清晰易讀,但對于觸控操作來說依然顯得過小,使用者在很多時候很難準确的觸摸到,或是壓根不知道哪裡可以進行觸摸操作。下面的截圖來自MarthaStewartLiving的廣告界面,中間一列帶有箭頭圖示的标題清單其實是可點選的,但使用者确實很難察覺到這一點,因為箭頭并不是一種常見的用來表示可點選操作的圖示,況且它還被放在了左邊。在你的設計方案中,一定要将可點選觸控的互動元素很明顯的标示出來,最好可以做到醒目而美觀,讓使用者不必尋找與思考就能了解到它們的作用。
CoolHunting界面上方的圖檔區域實際上是一組可以進行橫掃操作的圖檔集,但你真的很難發現這一點。其實,不妨在右側露出下一張圖檔的一小部分,讓使用者明白這是一組可以連續浏覽的圖檔集合。
另外,iOS本身在這方面也有做的不好的地方,我們必須果斷吐槽。大家知道,輕按兩下Home按鍵即可從目前界面下方調出多工作列,但其實在它的左側還有一組用于音樂播放的控制台;另外在預設情況下,鎖定螢幕旋轉的開關也在這裡。這實在是太隐蔽了有木有,為什麼不能提供一些可視化的提示呢?