鍍金池/ 教程/ iOS/ 從概念到產(chǎn)品
內(nèi)容視圖
控件
iCloud
導(dǎo)航
網(wǎng)頁(yè)剪藏圖標(biāo)
動(dòng)畫(huà)
鍵盤(pán)和輸入頁(yè)面
設(shè)計(jì)策略
臨時(shí)視圖
撤銷(xiāo)與重做
交互與反饋
與 iOS 一體化
從概念到產(chǎn)品
品牌推廣
電子錢(qián)包
社交媒體
游戲中心
創(chuàng)建尺寸可調(diào)的圖片
案例學(xué)習(xí):從桌面到 iOS
多任務(wù)處理
蘋(píng)果支付
色彩和排版
報(bào)刊雜志圖標(biāo)
iOS 應(yīng)用解析
啟動(dòng)和終止
聲音
快速查看
適應(yīng)性和布局
編輯菜單
健康組件
語(yǔ)音輔助
iAd 富媒體廣告
為 iOS 而設(shè)計(jì)
標(biāo)志與圖形
應(yīng)用圖標(biāo)
模態(tài)情景
圖標(biāo)與圖片尺寸
路線選擇
在應(yīng)用中購(gòu)買(mǎi)
應(yīng)用拓展
啟動(dòng)畫(huà)面
術(shù)語(yǔ)和措辭
通知
欄按鈕圖標(biāo)
訪問(wèn)用戶(hù)數(shù)據(jù)
云打印

從概念到產(chǎn)品

定義你的應(yīng)用(Define Your App)

應(yīng)用的定義是對(duì)應(yīng)用主要功能及目標(biāo)用戶(hù)簡(jiǎn)明而具體的描述。

盡可能在應(yīng)用開(kāi)發(fā)的早期創(chuàng)建應(yīng)用的定義,這可以幫助你將你的想法和應(yīng)用的功能清單轉(zhuǎn)換為用戶(hù)真正需要的、條理清晰的產(chǎn)品。在應(yīng)用開(kāi)發(fā)的過(guò)程中,通過(guò)定義來(lái)思考應(yīng)用的某些功能和行為是否合理。你可以根據(jù)以下幾個(gè)步驟來(lái)創(chuàng)建一個(gè)可靠的應(yīng)用定義。

列出所有你認(rèn)為用戶(hù)可能喜歡的功能

進(jìn)行頭腦風(fēng)暴,與此同時(shí)你需要列出所有與產(chǎn)品中心有關(guān)的任務(wù)。不用擔(dān)心清單太長(zhǎng),在之后的步驟中會(huì)對(duì)此清單進(jìn)行刪減。

假設(shè)你一開(kāi)始的想法是開(kāi)發(fā)一個(gè)幫助人們購(gòu)買(mǎi)食品雜貨的應(yīng)用,那么你也許會(huì)思考,用戶(hù)在執(zhí)行這項(xiàng)活動(dòng)的過(guò)程有可能涉及到哪些相關(guān)的任務(wù),這些任務(wù)或許就能夠轉(zhuǎn)換為用戶(hù)可能感興趣的潛在功能。例如:

  • 創(chuàng)建購(gòu)物清單
  • 查找食譜
  • 比較價(jià)格
  • 定位商店
  • 注釋食譜
  • 查找可使用的優(yōu)惠劵
  • 查看烹飪教程
  • 探索不同的烹調(diào)方法
  • 尋找某些食材的替代物

定位目標(biāo)用戶(hù)

現(xiàn)在你需要清楚地將使用你應(yīng)用的用戶(hù)與其他iOS應(yīng)用的用戶(hù)區(qū)分開(kāi)來(lái),確定在應(yīng)用使用情境下,什么是對(duì)你的用戶(hù)最重要的。比如,在食品雜貨應(yīng)用例子中,你可能需要詢(xún)問(wèn)你的用戶(hù)以下問(wèn)題:

  • 傾向于在家里做飯,還是更喜歡購(gòu)買(mǎi)現(xiàn)成的食物
  • 傾向于在購(gòu)物時(shí)使用優(yōu)惠券,還是認(rèn)為優(yōu)惠券沒(méi)多大價(jià)值
  • 傾向于尋找特別的食材,還是使用基本食材
  • 傾向于嚴(yán)格按照食譜做菜,還是只把食譜當(dāng)做靈感來(lái)源
  • 傾向于少量多次購(gòu)買(mǎi)食材,還是一次性購(gòu)買(mǎi)大量食材
  • 傾向于在清單上記錄各種類(lèi)別的條目,還是只在清單上記錄回家路上需要購(gòu)買(mǎi)的幾樣物品
  • 傾向于堅(jiān)持使用固定的品牌,還是會(huì)使用方便的替代品
  • 傾向于按照慣例來(lái)購(gòu)買(mǎi)一些物品,還是會(huì)按照食譜來(lái)購(gòu)買(mǎi)

思考過(guò)這些問(wèn)題之后,你會(huì)得出三個(gè)用以描述目標(biāo)用戶(hù)的特征:用戶(hù)喜歡嘗試不同的食譜,用戶(hù)通常處于匆忙狀態(tài),用戶(hù)一般情況下比較節(jié)儉。

根據(jù)用戶(hù)定位過(guò)濾功能清單

如果在確定了一些用戶(hù)特征后,你最終只得到了幾個(gè)主要功能,那么你就已經(jīng)步入了正軌:好的 iOS 應(yīng)用就應(yīng)該聚焦在幫助用戶(hù)解決核心問(wèn)題上。

例如,回過(guò)頭來(lái)思考第一步所羅列出的功能清單,即使這些功能在你看來(lái)都是有用的,但它們也不可能全都被在第二步定義的目標(biāo)用戶(hù)認(rèn)可。

當(dāng)你站在目標(biāo)用戶(hù)的角度,以他們的使用情境來(lái)檢查功能清單時(shí),可以很容易地判斷你的應(yīng)用應(yīng)該聚焦在這三項(xiàng)主要功能:創(chuàng)建清單,獲得并使用優(yōu)惠劵,獲得食譜。

到這一步,你就可以給出應(yīng)用定義了,總結(jié)應(yīng)用為誰(shuí)而設(shè)計(jì)、用來(lái)做什么的。比如這一句適用于食品雜貨購(gòu)買(mǎi)應(yīng)用的定義:

“為熱愛(ài)烹飪且節(jié)儉的用戶(hù)訂制的創(chuàng)建購(gòu)物清單工具?!?/p>

其他

在整個(gè)開(kāi)發(fā)過(guò)程,你需要反復(fù)通過(guò)應(yīng)用定義來(lái)檢查應(yīng)用的功能、控件、措辭是否合理。例如:

當(dāng)你想要新增一個(gè)功能時(shí),詢(xún)問(wèn)自己,這個(gè)功能對(duì)應(yīng)用的主要任務(wù)和目標(biāo)用戶(hù)是否非常重要。如果不是,放棄這個(gè)功能,它也許會(huì)是另外一個(gè)應(yīng)用的主要功能。例如,你已經(jīng)確定了你的用戶(hù)興趣在于別出心裁的烹飪方法,那么就不需要再增加一個(gè)功能來(lái)著重展示盒裝蛋糕和現(xiàn)成的食物。

當(dāng)你考慮用戶(hù)界面的視覺(jué)和交互時(shí),詢(xún)問(wèn)自己,你的用戶(hù)更喜歡簡(jiǎn)單的、流線型的風(fēng)格,還是喜歡有明顯主題的風(fēng)格。在設(shè)計(jì)時(shí),你需要深刻理解用戶(hù)預(yù)期,他們希望通過(guò)你的應(yīng)用完成什么,如執(zhí)行一項(xiàng)復(fù)雜的任務(wù),快速找到問(wèn)題的解答,深入獲得綜合信息,或者僅僅只是娛樂(lè)。以此用戶(hù)目標(biāo)作為設(shè)計(jì)思路的引導(dǎo)。例如,盡管你的食品雜貨清單應(yīng)用應(yīng)是易于理解的,能讓用戶(hù)可以快速上手,但實(shí)際上用戶(hù)會(huì)更傾向于接受一個(gè)展示了各種美食、食材的主題界面。

當(dāng)你考慮應(yīng)該使用怎樣的措辭時(shí),你需要考慮用戶(hù)對(duì)這個(gè)應(yīng)用主題的認(rèn)知,盡量在措辭上與用戶(hù)的認(rèn)知程度匹配。例如,你的用戶(hù)群或許并不是由專(zhuān)業(yè)的廚師所組成,但可以肯定的是,他們同樣希望看到有關(guān)食材和烹飪技巧的專(zhuān)業(yè)術(shù)語(yǔ)。

根據(jù)任務(wù)來(lái)定制用戶(hù)界面(Tailor Customization to the Task)

好的 iOS 應(yīng)用會(huì)根據(jù)清晰的目標(biāo)和易用性來(lái)平衡用戶(hù)界面的設(shè)計(jì)。為了達(dá)到這種平衡,你需要確保在設(shè)計(jì)的初期階段就開(kāi)始考慮界面定制化。因?yàn)樵谠O(shè)計(jì)時(shí)通常要考慮品牌性、原創(chuàng)性和適銷(xiāo)性,在做決策時(shí)往往也會(huì)受到這些因素的影響,要想探討專(zhuān)注于定制化對(duì)于用戶(hù)體驗(yàn)的影響是非常具有挑戰(zhàn)性的。

實(shí)現(xiàn)定制話設(shè)計(jì),可以先從應(yīng)用中的任務(wù)著手考慮:用戶(hù)以什么頻率執(zhí)行這些任務(wù),在什么樣的環(huán)境下進(jìn)行?

舉個(gè)例子,想象一個(gè)精心設(shè)計(jì)的計(jì)算器應(yīng)用,整個(gè)界面充滿(mǎn)藝術(shù)感的風(fēng)格,并且使用了創(chuàng)新的布局來(lái)展示用戶(hù)熟悉的計(jì)算元素。實(shí)際上,這些如藝術(shù)品一般的細(xì)節(jié)渲染和富有創(chuàng)造力的布局并不會(huì)影響用戶(hù)去理解使用它,如怎樣點(diǎn)擊按鈕、查看計(jì)算結(jié)果。但是對(duì)于只是單純的想使用計(jì)算器的計(jì)算功能的用戶(hù)來(lái)說(shuō),這種新奇的體驗(yàn)和美麗的界面很快就會(huì)失去吸引力,反而可能成為一種妨礙。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/fancy_calculator_2x.png" alt="" />

與計(jì)算器應(yīng)用的例子相反,在一些其他情況中,定制化設(shè)計(jì)會(huì)大大提升用戶(hù)體驗(yàn),如 GarageBand 應(yīng)用,它完全可以不需要好看的、逼真的樂(lè)器元素來(lái)幫助用戶(hù)制作音樂(lè),但這樣會(huì)使用戶(hù)缺少身臨其境的愉悅感。在 GarageBand 里,界面不僅僅是向用戶(hù)展示了應(yīng)用功能、引導(dǎo)用戶(hù)使用,同時(shí)提升了用戶(hù)體驗(yàn),讓制作音樂(lè)的這項(xiàng)任務(wù)更容易被完成。

http://wiki.jikexueyuan.com/project/ios-human-interface-guidelines/images/completely_custom_garageband_2x.png" alt="" />

當(dāng)你在思考定制化設(shè)計(jì)是否會(huì)增強(qiáng)還是減弱用戶(hù)完成任務(wù)的注意力時(shí),請(qǐng)記住以下幾點(diǎn):

總是有一個(gè)合理的理由來(lái)進(jìn)行定制化設(shè)計(jì)。在理想情況下,定制化的用戶(hù)界面能促進(jìn)用戶(hù)完成任務(wù),同時(shí)增強(qiáng)用戶(hù)體驗(yàn)。盡可能的以應(yīng)用的主要任務(wù)為驅(qū)動(dòng),來(lái)幫助你做定制化設(shè)計(jì)決策。

盡量避免增加用戶(hù)的認(rèn)知負(fù)擔(dān)。用戶(hù)對(duì)標(biāo)準(zhǔn)界面元素的視覺(jué)和交互都已經(jīng)非常熟悉了,所以他們不需要停下來(lái)去思考如何使用它們。而當(dāng)用戶(hù)面對(duì)的界面,在視覺(jué)上和交互上都與他們認(rèn)知中的標(biāo)準(zhǔn)元素不同時(shí),他們就失去了經(jīng)驗(yàn)優(yōu)勢(shì)。除非你設(shè)計(jì)的獨(dú)一無(wú)二的元素能夠有效促進(jìn)任務(wù)的完成,否則用戶(hù)很可能不喜歡強(qiáng)制性地去學(xué)習(xí)一些在其他應(yīng)用中不通用的操作。

保持內(nèi)在的一致性。應(yīng)用中自定義的元素越多,保持這些元素視覺(jué)和交互的一致性就越重要。如果用戶(hù)不得不花費(fèi)時(shí)間去學(xué)習(xí)你創(chuàng)建的那些他們不熟悉的控件,那么他們會(huì)希望新學(xué)到的這些操作至少在這個(gè)應(yīng)用中是通用的。

總是以?xún)?nèi)容為重點(diǎn)。因?yàn)橛脩?hù)對(duì)標(biāo)準(zhǔn)元素很熟悉,所以這些元素不會(huì)分散用戶(hù)在內(nèi)容上的注意力。當(dāng)你自定義用戶(hù)界面時(shí),注意確保界面元素不會(huì)分散用戶(hù)對(duì)內(nèi)容的注意力。例如,如果你的應(yīng)用是一個(gè)觀看視頻應(yīng)用,那么你可能會(huì)設(shè)計(jì)一個(gè)自定義的重播控件。不管你用的是自定義的控件還是標(biāo)準(zhǔn)的重播控件,最重要的是,在用戶(hù)開(kāi)始觀看后,它是否會(huì)自動(dòng)隱藏,用戶(hù)點(diǎn)擊屏幕后是否會(huì)重新出現(xiàn)。

在對(duì)標(biāo)準(zhǔn)控件進(jìn)行重設(shè)計(jì)時(shí)再三思考。如果你不只是想自定義標(biāo)準(zhǔn)控件,而是想對(duì)標(biāo)準(zhǔn)控件進(jìn)行重設(shè)計(jì),那么你必須確保你重設(shè)計(jì)的控件能如標(biāo)準(zhǔn)控件一樣,提供盡可能多的信息。例如,你設(shè)計(jì)了一個(gè)開(kāi)關(guān)控件,但它卻沒(méi)有可以表明存在相反狀態(tài)的信息,那么用戶(hù)很可能意識(shí)不到這是個(gè)有兩個(gè)狀態(tài)的控件。

一定要徹底測(cè)試自定義的界面元素。在測(cè)試過(guò)程中,記得要近距離地觀察用戶(hù),觀察他們是否能預(yù)測(cè)如何使用你的元素,以及是否能輕易地與它們交互。例如,如果你創(chuàng)建的控件的可點(diǎn)擊區(qū)域小于 44 x 44 點(diǎn),用戶(hù)在點(diǎn)擊時(shí)就會(huì)有困難。如果你創(chuàng)建了一個(gè)視圖,這個(gè)視圖中對(duì)點(diǎn)擊操作和滑動(dòng)操作的反饋不一樣,那你一定要確保這個(gè)視圖提供的功能值得用戶(hù)去額外關(guān)注這些交互的不同。

原型與迭代(Prototype & Iterate)

在你準(zhǔn)備投入大量的工程資源來(lái)實(shí)現(xiàn)設(shè)計(jì)之前,最好先通過(guò)創(chuàng)建原型來(lái)進(jìn)行用戶(hù)測(cè)試。即使只有幾個(gè)同事來(lái)幫你測(cè)試原型,你也會(huì)從他們的視角中收獲許多關(guān)于應(yīng)用功能和用戶(hù)體驗(yàn)的新鮮觀點(diǎn)。

在設(shè)計(jì)的早期階段,你可以使用紙面原型或者線框圖去呈現(xiàn)主要的視圖和控件,并且標(biāo)明每個(gè)頁(yè)面之間的跳轉(zhuǎn)關(guān)系。你會(huì)從線框圖測(cè)試中獲得一些有用的反饋,但是由于呈現(xiàn)的信息較為稀疏,線框圖也有可能會(huì)誤導(dǎo)用戶(hù),因?yàn)橛脩?hù)會(huì)很難想象當(dāng)線框被實(shí)際內(nèi)容填滿(mǎn)時(shí)的樣子,也無(wú)法很好地感受用戶(hù)體驗(yàn)的變化。

如果你想要得到更多有用的反饋,那么你需要制作一個(gè)可以在設(shè)備上運(yùn)行的原型。若用戶(hù)能直接在設(shè)備上與你的原型進(jìn)行交互,他們會(huì)更容易發(fā)現(xiàn)應(yīng)用中哪里功能不滿(mǎn)足預(yù)期,哪些體驗(yàn)過(guò)于復(fù)雜。

最簡(jiǎn)單的創(chuàng)建一個(gè)可靠原型的方法是使用基于故事板(storyboard)的 Xcode 模板來(lái)創(chuàng)建一個(gè)基礎(chǔ)應(yīng)用,然后使用一些占位符來(lái)填充空白處的內(nèi)容。(故事板(storyboard)文件可以涵蓋應(yīng)用中的所有界面,包括界面之間的跳轉(zhuǎn)關(guān)系也能很好地呈現(xiàn)出來(lái)。)接著,將這個(gè)原型安裝到設(shè)備中來(lái)進(jìn)行測(cè)試,這時(shí)被測(cè)者的用戶(hù)體驗(yàn)就會(huì)更接近于真實(shí)的使用狀態(tài)。

你不需要在原型中提供大量的實(shí)際內(nèi)容,也不一定要使每一個(gè)控件都可用,但是你需要模擬出一個(gè)足夠接近現(xiàn)實(shí)狀況的情境來(lái)保證用戶(hù)的真實(shí)體驗(yàn)。對(duì)于典型用戶(hù)體驗(yàn)和非典型的邊緣情況,要做恰當(dāng)?shù)钠胶狻@?,如果你的?yīng)用在實(shí)際使用中,需要處理很長(zhǎng)的列表項(xiàng),那么你的原型就不能只顯示一兩個(gè)條目,而是盡可能呈現(xiàn)出一個(gè)長(zhǎng)列表。此外,在對(duì)用戶(hù)交互測(cè)試中,只要被測(cè)者能夠順利地點(diǎn)擊屏幕上的一個(gè)區(qū)域進(jìn)入到下一個(gè)邏輯頁(yè)面,或者能夠完成應(yīng)用的主要任務(wù),那他們就可能會(huì)提供更有建設(shè)性的反饋。

當(dāng)你使用 Xcode 應(yīng)用模板來(lái)創(chuàng)建原型時(shí),你可以免費(fèi)使用很多功能,還可以通過(guò)應(yīng)用模板相對(duì)容易地進(jìn)行設(shè)計(jì)中的響應(yīng)反饋調(diào)節(jié)。在確定設(shè)計(jì)方案與開(kāi)始投入資源進(jìn)行開(kāi)發(fā)之前,你需要對(duì)原型進(jìn)行多次迭代測(cè)試。想要開(kāi)始學(xué)習(xí) Xcode,請(qǐng)參考 Xcode Overview。