與眾多優(yōu)秀的產(chǎn)品相同，iPad 應(yīng)用的成功也取決于產(chǎn)品核心價值以及用戶體驗?zāi)Ｊ降戎T多方面的因素。除了游戲之外，多數(shù)類型的應(yīng)用都必需能夠在一定的上下文環(huán)境中幫助用戶解決某些特定的問題。它應(yīng)該足夠的簡單易用，使用戶不需要進(jìn)行復(fù)雜的設(shè)置和學(xué)習(xí)就可以順利上手。
而產(chǎn)品在視覺外觀、交互方式、情感聯(lián)接等方面的表現(xiàn)更會直接影響到用戶對于應(yīng)用的體驗滿意度。
在本文中，我們將共同了解一些你在設(shè)計工作中需要認(rèn)真考慮與貫徹的指導(dǎo)準(zhǔn)則。我們不會對創(chuàng)建 iPad 應(yīng)用的完整設(shè)計流程進(jìn)行講解，也不會將時間花費在幾乎任何一篇移動應(yīng)用設(shè)計文章都會提到的那些細(xì)節(jié)當(dāng)中的小方法小竅門上。本文的主要目的是幫助你在實際的 iPad 應(yīng)用項目中制定更加合理與正確的產(chǎn)品設(shè)計決策。
1. 瞄準(zhǔn)核心需求，簡化產(chǎn)品功能
優(yōu)秀的 iPad 應(yīng)用通?？梢宰層脩粢宰詈唵蔚牟僮鞣绞酵瓿梢粋€或多個非常明確的任務(wù)目標(biāo)。你需要在產(chǎn)品的概念階段對功能模式進(jìn)行有針對性的選擇與摒棄。不妨試著以一種面 向目標(biāo)的思路來判斷功能在產(chǎn)品中的存在價值：針對自己產(chǎn)品的方向及概念模式，設(shè)想用戶會在哪些典型的需求用例中進(jìn)行使用，將任何能夠想到的需求與任務(wù)目標(biāo) 都記錄下來。接下來，與你的團(tuán)隊進(jìn)行頭腦風(fēng)暴，盡量全面的羅列出用戶在完成這些任務(wù)目標(biāo)的過程中有可能會用到的功能。然后，在這份功能清單當(dāng)中提煉出一套 能夠確保實現(xiàn)需求目標(biāo)的最精簡的功能集合。最后，還可以向這個最小化的功能藍(lán)圖當(dāng)中增加一些有助于提升產(chǎn)品用戶體驗的特色功能。
來看些實例。Epicurious 這款食譜應(yīng)用在核心功能的集約方面做的相當(dāng)?shù)轿弧獩]有復(fù)雜的界面與操作方式，用戶完全可以邊學(xué)習(xí)邊實際操作，享受烹飪的樂趣。特別是在橫屏狀態(tài)下，左側(cè) 是很清晰的原料配置清單，而右側(cè)的主要內(nèi)容區(qū)是詳細(xì)的烹飪操作流程。用戶還可以很輕松的通過一個可拖動定位的標(biāo)記來記錄下當(dāng)前的烹飪流程進(jìn)行到了哪一步。 另外，關(guān)于當(dāng)前這道食譜的評論及技術(shù)提示等相關(guān)內(nèi)容都被集成到了下方的 tab 視圖中，這樣即保證了界面的簡約清晰，又可以讓用戶在需要的時候能夠很輕松的查看到這些內(nèi)容。
Whole Foods 也是一款烹飪輔助類型的應(yīng)用，如果用戶希望對某些菜譜進(jìn)行嘗試，它可以幫助用戶將那些所需的食材配料生成為購物清單。不過很遺憾的是，這款應(yīng)用忽略了不同 菜譜之間包含著相同配料的問題，使得最終生成的購物清單往往會在某些項目上產(chǎn)生重復(fù)的現(xiàn)象。我們可以在下面的截圖中看到，香蕉桑出現(xiàn)了三次：
另外，不要到處使用按鈕一類的視覺交互元素;在很多情況下，操作控制行為完全可以通過手勢來完成。例如，iOS 自帶的備忘錄并沒有常規(guī)的編輯模式入口，用戶只要輕按界面就可以進(jìn)入編輯狀態(tài);內(nèi)容也會被自動保存，不需要用戶執(zhí)行相關(guān)操作。而 iOS 原生的選擇、剪切、復(fù)制、粘帖等編輯功能都只需要簡單的基本手勢即可完成。撤銷操作相對特殊一些，需要搖晃機身;記得 hold 住先。
[Page: ]
2. 打造更加智能化與個性化的產(chǎn)品體驗
沒人喜歡花錢買回一款應(yīng)用還必須首先進(jìn)行復(fù)雜的設(shè)置才能正常使用。要盡量充分地利用 iPad 及相關(guān) Web 端服務(wù)的技術(shù)能力，對用戶在上下文環(huán)境中的各方面特征進(jìn)行更加細(xì)微準(zhǔn)確的了解與分析?？紤]一下有沒可能對用戶的地理位置信息、行事歷、微博 feed、Gmail 賬戶中的訂閱或是通訊錄等進(jìn)行合理合法的利用，使你的應(yīng)用能夠為用戶提供更加智能、更加個性化的內(nèi)容及功能。
Zite 是一款令人叫絕的內(nèi)容閱讀類應(yīng)用，它會讀取用戶在 Google Reader、Twitter 和 Delicious 賬戶中的內(nèi)容信息， 分析用戶的個人喜好，并在此基礎(chǔ)上向用戶推薦其他內(nèi)容源當(dāng)中的相關(guān)文章 。我(英文原文作者)試著在這款應(yīng)用中授權(quán)我的 Delicious 賬戶，五秒鐘之內(nèi)，它就完成了對我曾經(jīng)收藏過的文章的分析，并基于我的興趣方向生成了一本完全個性化的雜志，讓我可以閱讀到更多自己感興趣的新文章。這類 應(yīng)用與 Pandora 等服務(wù)類似，你用的越多，它們就越了解你，相應(yīng)的內(nèi)容輸出也就越發(fā)的個性化。雖然很多人認(rèn)為，相比于 Zite 來說，F(xiàn)lipboard 的 UI 設(shè)計及相關(guān)的交互體驗更加誘人，但 Zite 依然可以在智能化與個性化等方面占有優(yōu)勢。
下圖是 Zite 自動生成的雜志界面：
[Page: ]
3. 注意應(yīng)用產(chǎn)品的上下文環(huán)境
根據(jù)你的產(chǎn)品所面向的核心需求，考慮用戶會在哪些典型的情景環(huán)境中進(jìn)行使用。iPad 的常見使用環(huán)境包括餐廳、機場、行車途，或是家中的廚房、臥室、書房等。在你對產(chǎn)品的功能及體驗?zāi)Ｊ竭M(jìn)行規(guī)劃的過程當(dāng)中，是否有必要考慮使用場景方面的因 素對現(xiàn)有設(shè)計模式的影響作用?舉個例子，對于食譜類的應(yīng)用來說，用戶在廚房中使用時的需求目標(biāo)與在臥室中使用時的狀況也許會存在很大差異。
OpenTable 主要提供訂餐方面的服務(wù)。在它的 Web 端，餐廳搜索結(jié)果的展示形式就是很傳統(tǒng)的信息列表。而它的 iPad 客戶端應(yīng)用的產(chǎn)品概念則體現(xiàn)出了移動應(yīng)用上下文環(huán)境與功能需求之間的高度關(guān)聯(lián)性。其默認(rèn)視圖下的用戶界面主要由地圖與餐廳列表組成，用戶可以直接搜索自己 當(dāng)前位置附近的餐廳。相比于 Web 端的產(chǎn)品模式，iPad 應(yīng)用中的這些功能特色都更加符合用戶在使用移動設(shè)備完成相關(guān)任務(wù)時的實際需求。
Awesome Note 也是個不錯的例子。它所提供的默認(rèn)分類方式很準(zhǔn)確的反映出了人們使用 iPad 的常見環(huán)境及需求用例。
GroceryIQ 是一款購物清單類型的應(yīng)用，它的一個重要特色是允許用戶按照不同商店來歸納與篩選自己需要購買的商品，非常符合人們在實際購物需求中的心智模型。
[Page: ]
4. 考慮多用戶與多設(shè)備的情況
家庭成員之間通常會使用同一部 iPad 來完成各自的需求目標(biāo);另外，全家人圍坐在一起共同使用的場景也是很常見的。與手機或個人電腦不同，iPad 的個人色彩相對較弱，它更像是咖啡桌上的雜志，具有很強的共享性。在很多類型的 iPad 應(yīng)用當(dāng)中，賬戶管理方面的功能是不可或缺的，包括最基本的賬戶切換，以及對于當(dāng)前處于登錄狀態(tài)的賬戶提示等。對于某些擁有多設(shè)備版本的內(nèi)容類應(yīng)用來說，賬 戶管理的一個重要作用就是在 iPad 和 iPhone 等設(shè)備之間保持內(nèi)容的同步更新。
舉個例子，F(xiàn)lipboard 允許多個用戶通過不同的賬戶登錄，并會在首頁當(dāng)中顯示當(dāng)前登錄賬戶的名稱。
再來看 FedEx 的 iPad 應(yīng)用，雖然其界面整體風(fēng)格非?；野担卿涃~戶的信息仍然可以很明顯的被辨識出來。
而 eBay 的客戶端在這方面就略顯不足，用戶必須點擊左上方的“我的 eBay”才能瀏覽當(dāng)前的賬戶信息。
[Page: ]
5. 打造合理的交互模式
你可以在游戲或是其他娛樂類型的產(chǎn)品中嘗試各種復(fù)雜炫目的交互效果，不過對于那些時常會被用到的其他類型的應(yīng)用來說，在導(dǎo)航結(jié)構(gòu)、瀏覽方式及相 應(yīng)的視覺交互形式等方面還是盡量保持常規(guī)與簡潔的好。交互模式的創(chuàng)新固然是推動一款應(yīng)用取得成功的重要因素，但絕不能為了追求具有差異化的體驗方式而對產(chǎn) 品本身的可用性造成負(fù)面影響。
Martha Stewart Living 雜志的瀏覽方式很好的將創(chuàng)意與可用性結(jié)合在了一起。其中，x軸方向的滾屏操作用于查看不同的文章頁面，而y軸上的滾屏則用來在某篇文章當(dāng)中進(jìn)行瀏覽閱讀。 針對當(dāng)前文章頁面的內(nèi)容簡介會出現(xiàn)在頁面隊列的上方，用戶不需要進(jìn)入單篇文章就可以對大致內(nèi)容做以了解。而隊列底部的滾動條則可以很明顯的反映出當(dāng)前焦點 所指向的頁面在全書當(dāng)中的位置。這些看似簡潔平實的操作方式卻可以給用戶帶來簡單易用、符合感知的良好交互體驗。
建議你對各種 iPad 應(yīng)用進(jìn)行體驗和嘗試，觀察它們在交互方面的優(yōu)缺點。實際上，你可以在不少具有普遍適用性的細(xì)節(jié)功能當(dāng)中發(fā)現(xiàn)很多能夠體現(xiàn)出交互設(shè)計思路的地方。舉個最典型 的例子，我們可以在下面幾張截圖中看到一些內(nèi)容閱讀類應(yīng)用(依次為 Huffington Post、New York Times、Zite)在文章關(guān)閉方式上的區(qū)別：
很多人會在平端 iPad 時將左手拇指?？吭谄聊坏淖笊辖歉浇?，Zite 的設(shè)計方案使他們在關(guān)閉當(dāng)前文章時可以很輕松的進(jìn)行操作。另外，用戶還可以在屏幕上點擊文章容器之外的任何地方來關(guān)閉文章界面。這種方案具有很強的彈性， 習(xí)慣于以其他姿勢使用 iPad 的用戶也可以毫不費力的進(jìn)行操作。而紐約時報的 iPad 應(yīng)用則允許用戶通過雙指捏合的方式來關(guān)閉文章;另外，文章底部的工具欄中也包含可以回到首頁的按鈕，而且當(dāng)文章界面保持打開狀態(tài)幾秒鐘之后，這個工具欄還 會自動隱藏。相對于關(guān)閉按鈕來說，捏合的方式更加自由一些，不需要用戶針對某個交互元素進(jìn)行操作;但其弊端也是很明顯的：用戶有可能需要臨時改變雙手的位 置和姿勢，來保證其中一只手可以自如的執(zhí)行手勢操作。
在對各種應(yīng)用進(jìn)行嘗試和體驗的過程中，要注意觀察自己在細(xì)節(jié)中的感受，特別要記錄下那些會讓你覺得很贊的地方，或是那些讓你感到操作起來很不順 手、甚至?xí)Σ僮髁鞒坍a(chǎn)生干擾作用的交互方式。找到那些與你的產(chǎn)品屬于相同領(lǐng)域的應(yīng)用，分析他們的功能及體驗?zāi)Ｊ剑⒖紤]怎樣在自己的產(chǎn)品中實現(xiàn)差異化。 在很多方面，iPad 應(yīng)用仍然具有一定的前沿性，應(yīng)用市場中會不斷涌現(xiàn)出各種新奇炫目的功能及交互方式;在這種情況下，更需要以務(wù)實的心態(tài)來規(guī)劃自己產(chǎn)品的用戶體驗設(shè)計方案， 避免盲目的標(biāo)新立異。
[Page: ]
6. 提供首頁視圖
人們習(xí)慣于首頁的概念。首頁視圖通?？梢詭椭脩魧Ξa(chǎn)品的功能進(jìn)行縱覽，并為他們提供常用操作的快捷入口。首頁可以為用戶帶來安全感，讓他們在探索功能和瀏覽內(nèi)容的時候不必?fù)?dān)心在應(yīng)用軟件中迷失方向。
我們一起看看來自 NASA 的 Visualization Explorer， 這款應(yīng)用沒有首頁視圖模式，用戶打開它之后會被直接帶進(jìn)最新的一篇內(nèi)容當(dāng)中。要瀏覽其他文章，用戶可以點擊文章左右兩端的箭頭來按照順序逐一查看，或是通 過點擊左下角的圖標(biāo)來調(diào)出文章列表，在其中進(jìn)行選擇。通過文章列表進(jìn)行查看的自由度要比第一種方式高一些，但仍會受到容器尺寸規(guī)格的限制，列表中的每一個 文章條目只能包含一個很小的縮略圖以及簡短的文章標(biāo)題，用戶無法在這里直接獲取關(guān)于文章本身的簡介內(nèi)容。
相比之下，Pulse 的體驗就好了很多。它的首頁視圖是一個內(nèi)容導(dǎo)航，用戶可以在其中以列表的形式直接查看不同內(nèi)容源中的最新文章;每個內(nèi)容條目中都包括大尺寸的縮略圖、文章 標(biāo)題及簡介內(nèi)容(具體情況取決于文章本身)，用戶可以很清楚的判斷出哪些內(nèi)容是他們感興趣的。在橫屏狀態(tài)下，當(dāng)用戶選擇了某篇文章之后，整個首頁導(dǎo)航界面 會向左移開，完整的文章內(nèi)容會隨之從右側(cè)展開。這是一種非常連貫的交互體驗，用戶并不會覺得索引與內(nèi)容處于兩個互不相干的界面當(dāng)中。而豎屏?xí)r，導(dǎo)航結(jié)構(gòu)會 在單篇文章當(dāng)中收攏到界面底部;雖然這種方式與 NASA 的做法類似，但 Pulse 始終可以讓用戶通過更大更清晰的文章條目列表來查看隊列中的文章概況。
[Page: ]
7. 謹(jǐn)慎使用彈出效果
iPad 當(dāng)中，用來幫助用戶訪問相關(guān)內(nèi)容和導(dǎo)航結(jié)構(gòu)的彈出層效果還是蠻贊的。但是，如果使用不善，這種交互模式也會在操作流程中造成不小的麻煩。在設(shè)計方案中，一 定要為彈出層做好高度與寬度上的限制，盡量避免將太多的信息放在其中。我們再次以 Awesome Note 為例，不過這次的角度相對負(fù)面一些。雖然我們在前面提到過，它默認(rèn)的文件夾分類方式很符合用戶的需求，不過要對這些文件夾進(jìn)行相關(guān)的編輯操作，卻需要在一 個彈出層當(dāng)中進(jìn)行。其中文件夾的呈現(xiàn)方式與主界面中的幾乎完全一致，只是尺寸略有區(qū)別;對于這種重要的交互對象集合，如果在同一個界面中以相同的視覺表現(xiàn) 形式重復(fù)地出現(xiàn)，那么在很大程度上會對使用戶產(chǎn)生迷惑。而且對于文件夾的視覺樣式以及相關(guān)的編輯操作來說，這樣一個彈出層顯得有些狹小了。
其實，從容器尺寸與空間利用率的角度講，我們之前看到的 NASA 的文章列表彈出層也具有相同的問題。
在某些情況下，單獨打開一個新界面比彈出層更加合理。除非彈出層中的相關(guān)操作與當(dāng)前界面中的內(nèi)容具有難以阻斷的上下文相關(guān)性，否則完全可以它們放到一個新的界面當(dāng)中——可用空間更大，布局結(jié)構(gòu)更合理，閱讀和操作都更加容易，為什么不呢。
當(dāng)然，對屏幕進(jìn)行縱向分割，將導(dǎo)航結(jié)構(gòu)或是相關(guān)功能放在左側(cè)邊欄中的做法也是很常見的一種解決方案。
Houzz：
Martha Stewart Living：
Flipboard ：
[Page: ]
8. 避免使用不必要的啟動畫面
在傳統(tǒng) Web 領(lǐng)域，不少網(wǎng)站都會使用基于 Flash 或其他技術(shù)打造的“啟動畫面”，它們多數(shù)是沒有任何意義的，而且要花費大量的時間進(jìn)行加載，用戶很容易失去耐心并轉(zhuǎn)身離開。對于運行在 iPad 這類移動設(shè)備上的應(yīng)用來說，毫無意義的啟動畫面會更加令人崩潰。如果你的應(yīng)用在啟動的時候需要加載很多內(nèi)容，而你決定在此期間展示一個啟動畫面，從而讓用 戶對等待行為的感知程度有所降低，那么至少不要讓它保持太久。最好可以在啟動畫面當(dāng)中展示一些已經(jīng)加載好的簡要內(nèi)容，使用戶即使在等待過程中也能保持一種 相對連貫的交互感知。
Zite 在這方面的表現(xiàn)依然很贊，它會在啟動畫面當(dāng)中顯示一些已經(jīng)加載好的文章縮略圖，以吸引用戶的注意力，而同時，更多的其他內(nèi)容仍在進(jìn)行加載。
[Page: ]
9. 正確合理的使用手勢操作
炫酷而實用的手勢操作是 iPad 當(dāng)中的重要交互方式，不過一定要確保在產(chǎn)品當(dāng)中以合理的密度在正確的地方使用這種方式。舉個例子，如果當(dāng)前界面中的主要交互對象是需要通過橫掃手勢來觸發(fā) 滾動的旋轉(zhuǎn)木馬形式的列表視圖，那么就不應(yīng)該再為該界面綁定其他具有全局性的橫掃手勢了。
如果需要通過手勢來觸發(fā)的交互行為難以被用戶輕易的洞察，那么最好在顯眼的地方給予提示。Zite 在這方面做的同樣很棒，在內(nèi)容分類列表視圖中，右下角的提示可以讓用戶很容易了解到接下來可以通過輕掃來實現(xiàn)翻頁。
Discovr 是一款音樂探索類型的應(yīng)用，它將手勢操作的提示信息直接整合到了交互對象當(dāng)中，也就是那個標(biāo)注著“Tap me”的紅圈。
當(dāng)獲取了足夠的信息之后，紅圈中的文字會變?yōu)椤癟ap and hold me”，提示用戶通過長按來完成接下來的操作。這種引導(dǎo)方式可以讓用戶不必離開當(dāng)前的交互流程就能快速直接的對關(guān)鍵操作方式進(jìn)行掌握。
[Page: ]
10. 讓可觸控的界面元素易于識別、方便觸摸
Jakob Nielsen 老師在 iPad 可用性報告當(dāng)中指出的“閱讀-觸控不對等”的問題在 iPad 應(yīng)用當(dāng)中其實是蠻普遍的。(話說這已經(jīng)是 Nielsen 老師第三次在我們的文章當(dāng)中露面了。前面兩次分別涉及到產(chǎn)品早期的原型設(shè)計與用戶測試以及移動化用戶體驗設(shè)計相關(guān)方面的話題)
所謂“閱讀-觸控不對等”，即是指界面中的文字字號可以保證清晰易讀，但對于觸控操作來說依然顯得過小，用戶在很多時候很難準(zhǔn)確的觸摸到，或是 壓根不知道哪里可以進(jìn)行觸摸操作。下面的截圖來自 Martha Stewart Living 的廣告界面，中間一列帶有箭頭圖標(biāo)的標(biāo)題列表其實是可點擊的，但用戶確實很難察覺到這一點，因為箭頭并不是一種常見的用來表示可點擊操作的圖標(biāo)，況且它還 被放在了左邊。在你的設(shè)計方案中，一定要將可點擊觸控的交互元素很明顯的標(biāo)示出來，最好可以做到醒目而美觀，讓用戶不必尋找與思考就能了解到它們的作用。
Cool Hunting 界面上方的圖片區(qū)域?qū)嶋H上是一組可以進(jìn)行橫掃操作的圖片集，但你真的很難發(fā)現(xiàn)這一點。其實，不妨在右側(cè)露出下一張圖片的一小部分，讓用戶明白這是一組可以連續(xù)瀏覽的圖片集合。
另外，iOS 本身在這方面也有做的不好的地方，我們必須果斷吐槽。大家知道，雙擊 Home 按鍵即可從當(dāng)前界面下方調(diào)出多任務(wù)欄，但其實在它的左側(cè)還有一組用于音樂播放的控制面板;另外在默認(rèn)情況下，鎖定屏幕旋轉(zhuǎn)的開關(guān)也在這里。這實在是太隱蔽 了有木有，為什么不能提供一些可視化的提示呢?
