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