想當(dāng)APP產(chǎn)品經(jīng)理？你得看看這個(gè)

本文來(lái)自Stripe公司的產(chǎn)品經(jīng)理Michaël Villar的文章，文章講訴了Dashboard這樣一款iOS app的設(shè)計(jì)開(kāi)發(fā)過(guò)程，對(duì)于有志于從事IOS APP開(kāi)發(fā)的人來(lái)說(shuō)，看完這篇文章相信會(huì)獲益匪淺?？赐曛螅嘈拍銜?huì)對(duì)IOS APP的開(kāi)發(fā)有一個(gè)比較直觀的認(rèn)識(shí)。對(duì)于想要當(dāng)APP產(chǎn)品經(jīng)理的你來(lái)說(shuō)，值得一看。全文如下：

由于我們提供的是企業(yè)服務(wù)，所以像現(xiàn)在流行的其它創(chuàng)業(yè)公司一樣，我們起初并沒(méi)有做移動(dòng)端的 App。我們的核心業(yè)務(wù)是提供支付的 API 接口，允許其它的公司接入支付功能。web 版的dashboard 讓每一個(gè)團(tuán)隊(duì)成員可以很方便的跟蹤，完成訂購(gòu)，付款，消費(fèi)及調(diào)貨。然而，以往它的整套系統(tǒng)是為桌面級(jí)屏幕設(shè)計(jì)的，在手機(jī)上很難用。在完成“收銀臺(tái)”功能之后，我們決定在 開(kāi)發(fā)移動(dòng)版本，首先在 iPhone 上推出。

這篇文章寫(xiě)的就是我們一起開(kāi)發(fā)App 的具體過(guò)程，或者從更廣的意義上說(shuō)，這是關(guān)于我和 Benjamin 創(chuàng)造產(chǎn)品的經(jīng)驗(yàn)分享?？赐赀@篇文章不能使你當(dāng)上產(chǎn)品經(jīng)理，但至少對(duì)一個(gè) App 是怎么做出來(lái)的有一個(gè)大概的了解。

設(shè)計(jì)任何的產(chǎn)品，體驗(yàn)都是一樣的：孤獨(dú)，抑郁，沮喪，自由，高潮，狂喜，一大堆亂七八糟的感受如潮水般向你涌來(lái)。但當(dāng)產(chǎn)品完成并最終服務(wù)于用戶時(shí)，你會(huì)感到之前的所有努力都是值得的。

圖像

我們花了不少時(shí)間在早期的概念階段。它不僅僅是設(shè)計(jì)的第一步，也是永遠(yuǎn)沒(méi)有完成的一天的最后一步，你必須隨時(shí)準(zhǔn)備為了更好的用戶體驗(yàn)推倒重來(lái)。

在我們第一次產(chǎn)品討論會(huì)時(shí)，我們?cè)谂赃叿帕艘粡埌装?，我們?cè)谀谴螘?huì)議中定下了應(yīng)用的核心功能，正如我們當(dāng)初開(kāi)發(fā)的目的。在 Dashboard 的 iPhone app ，我們將它想象為一個(gè)輔助軟件，擁有兩大核心功能，與全功能版本的網(wǎng)頁(yè)軟件有所區(qū)別：

1.在你早上第一次打開(kāi)這個(gè)應(yīng)用的時(shí)候，你可以檢查昨天的消費(fèi)情況

2.擁有快速檢視支付情況，消費(fèi)信息等功能

線匡模型的草圖繪制

在確定好功能之后，我們開(kāi)始了 UI 的繪制，我們利用正常的 9 小時(shí)工作之外的時(shí)間來(lái)做這件事情。為了順利進(jìn)行，我們把它畫(huà)在了紙上，畫(huà)出線框圖，在旁邊寫(xiě)了文字說(shuō)明，為什么要這么設(shè)計(jì)。我們先各自畫(huà)一份，交流之后再去粗取精，結(jié)合兩個(gè)版本的優(yōu)勢(shì)制作出最終版本。

我們的線框圖畫(huà)的很粗糙，沒(méi)有精致優(yōu)雅的可視化界面，只有關(guān)于大致的畫(huà)面及大體的用戶界面。但他們確確實(shí)實(shí)地幫助了我們確定用戶的核心體驗(yàn)并且時(shí)刻提醒我們?cè)诿恳粋€(gè)場(chǎng)景中我們的第一要?jiǎng)?wù)是什么。

視覺(jué)設(shè)計(jì)

在線框圖完成之后，我們開(kāi)始了可視化界面的設(shè)計(jì)。在這個(gè)階段開(kāi)始之前，我們幾乎每天都呆在一起，探討正確的設(shè)計(jì)方向。例如，在主頁(yè)的設(shè)計(jì)上，就經(jīng)過(guò)了無(wú)數(shù)次的迭代。我們很清楚，最重要的一點(diǎn)是，什么按鈕是應(yīng)該在主頁(yè)上出現(xiàn)的，什么是不應(yīng)該出現(xiàn)的。從常識(shí)來(lái)想，當(dāng)然是能夠在主頁(yè)上展示越多的數(shù)據(jù)越好，但我們決定只把最重要的，最值得關(guān)注的信息留下，其它的隱藏起來(lái)。

但把界面設(shè)計(jì)到我們兩個(gè)都滿意了，Benjamin 開(kāi)始做最后的設(shè)計(jì)稿。當(dāng)然，隨著時(shí)間的推移，我們收到了大量的反饋信息，但我們已經(jīng)決定了，就沒(méi)有再做改動(dòng)。

交互

交互的構(gòu)思從視覺(jué)界面的設(shè)計(jì)時(shí)就開(kāi)始了，但我們僅僅在有明確的想法時(shí)才做出交互原型。在做交互原型階段，我們可以證實(shí)我們最初的想法正確與否。

在 Dashboard 應(yīng)用上，卡片式的信息呈現(xiàn)方式是最主要的功能。我們決定使用一套 web 工具，雖然它的 bug 出奇的多，但它對(duì)我們而言很方便，值得一試。

要做出符合直覺(jué)，輕盈優(yōu)雅的 UI 是一項(xiàng)極為復(fù)雜的工作：

新的卡片要如何以一種符合直覺(jué)的方式被打開(kāi)?我們的做法是，讓卡片從稍微帶有彈性的側(cè)面進(jìn)入，劃出，這樣能隱喻卡片可以被劃掉及移動(dòng)。

• 當(dāng)你拖動(dòng)卡片式，你必須要有一個(gè)匹配活躍卡片的陰影加以強(qiáng)調(diào)

• 如果你想移動(dòng)在后面的其它卡片，你要將處于前面的卡片劃掉

• 動(dòng)畫(huà)的移動(dòng)速度要與手指的移動(dòng)相匹配

• 像現(xiàn)實(shí)生活中一樣，當(dāng)卡片往后移動(dòng)的時(shí)候會(huì)逐漸變暗

對(duì)于動(dòng)作菜單來(lái)說(shuō)，我們希望在打開(kāi)一個(gè)龐大的菜單之前能有足夠的暗示。我們把這個(gè)有趣的功能實(shí)現(xiàn)了出來(lái)，它運(yùn)行的很棒，使我們的每張卡片中不會(huì)出現(xiàn)兩個(gè)以上的動(dòng)作按鈕。如果你不感興趣的話，你也不需要關(guān)掉菜單。

切換動(dòng)作按鍵 (通過(guò) html/css 實(shí)現(xiàn))

你可以選擇展示“收入/消費(fèi)者數(shù)”圖表的時(shí)間長(zhǎng)度。這個(gè)動(dòng)畫(huà)可以幫助用戶理解兩個(gè)時(shí)間點(diǎn)的長(zhǎng)度區(qū)別。如果你仔細(xì)觀察，你會(huì)發(fā)現(xiàn)當(dāng)時(shí)間長(zhǎng)度從“天”變?yōu)?ldquo;周”時(shí)，我們將多個(gè)時(shí)間點(diǎn)合并了。

在圖表視圖中改變時(shí)間長(zhǎng)度

當(dāng)你的應(yīng)用需要聯(lián)網(wǎng)使用，你可以通過(guò)登錄畫(huà)面及大量的過(guò)渡動(dòng)畫(huà)減少用戶在網(wǎng)絡(luò)延遲時(shí)的焦慮感。我們最后決定在數(shù)據(jù)加載時(shí)使用前者并結(jié)合一個(gè)過(guò)渡動(dòng)畫(huà)。下面是我們想出來(lái)的啟動(dòng)動(dòng)畫(huà)原型：

作為一個(gè)創(chuàng)業(yè)公司，考慮到代碼重用性，我們使用大量的 HTML/CSS 代碼及 AE 動(dòng)畫(huà)效果。

在 App 啟動(dòng)時(shí)，數(shù)據(jù)會(huì)被加載并展示到首頁(yè)上。如果網(wǎng)速足夠的快，我們不會(huì)展示過(guò)渡動(dòng)畫(huà)，直接進(jìn)入主頁(yè)，如果網(wǎng)絡(luò)太慢了，我們會(huì)在接下來(lái)的數(shù)秒內(nèi)展示 UI 的過(guò)渡動(dòng)畫(huà)，以減少用戶等待過(guò)程中的焦慮感。

我們同樣的也增加了一個(gè)懸浮動(dòng)作按鈕(靈感來(lái)源于谷歌的“材質(zhì)設(shè)計(jì)”)，你可以在應(yīng)用的任意頁(yè)面點(diǎn)按這個(gè)按鈕，會(huì)出現(xiàn)一排標(biāo)簽頁(yè)。我們?cè)黾恿艘粋€(gè) 100 納秒的遲滯在卡片上，原因有二：數(shù)據(jù)需要加載，一張空白的頁(yè)面是沒(méi)有幫助的。2 用戶可以有足夠的時(shí)間看清楚他們按了哪個(gè)按鈕。

UI 執(zhí)行

我們開(kāi)發(fā)應(yīng)用的策略是非常簡(jiǎn)單的：我經(jīng)常從用戶界面工具開(kāi)始。UI 在應(yīng)用中是最重要的且應(yīng)該成為 iOS 應(yīng)用開(kāi)發(fā)者的最主要關(guān)注點(diǎn)。從用戶界面開(kāi)始，沒(méi)有任何數(shù)據(jù)及 API 的包袱將幫助你做出更友好的用戶界面。這也能很容易地解釋為什么不斷添加新功能會(huì)使整個(gè)應(yīng)用的體驗(yàn)及性能下降，只有從 UI 出發(fā)才能指導(dǎo)我們有序克制的添加必須的功能。

推送通知

這是我最喜歡的一個(gè)功能。我們的推送通知針對(duì)不同情況進(jìn)行了細(xì)致的處理：

• 每天總結(jié)：一個(gè)快速檢視你昨天的銷售情況及新用戶增加情況的通知，在每天早上你醒了之后推送。

• 新交易及新用戶：對(duì)于中小型商業(yè)用戶而言，當(dāng)看到你的交易數(shù)量增長(zhǎng)是一件很令人興奮的事情。

• 調(diào)動(dòng)失?。何覀兿Ｍ脩粼诓僮魇≈竽芰⒖淌盏椒答仯⒘私馐〉木唧w原因。

賬戶變化：在用戶在帳戶余額或密碼發(fā)生改變時(shí)我們會(huì)第一時(shí)間通過(guò)推送消息的方式予以通知，使用戶減少被盜號(hào)的風(fēng)險(xiǎn)。

對(duì)于非緊急的通知，我們只會(huì)在工作時(shí)間推送，具體時(shí)間點(diǎn)可由用戶自行設(shè)置。在午夜被推送吵醒絕對(duì)不是好的用戶體驗(yàn)!

今日，我們?nèi)諠u成熟的 iOS 團(tuán)隊(duì)在開(kāi)發(fā)一串新功能并實(shí)現(xiàn)我與 benjiamin 設(shè)計(jì)出來(lái)的新版本。

為什么我與 Benjamin 能夠如此高效地合作?這是一個(gè)值得深思的問(wèn)題。

起初，我們一同做出了產(chǎn)品原型，爾后他專注于視覺(jué)設(shè)計(jì)上的細(xì)節(jié)打磨，我則把精力放在了代碼實(shí)現(xiàn)上。這是一對(duì)極佳的組合——我們兩個(gè)的長(zhǎng)處互補(bǔ)之后，正好將產(chǎn)品完整地創(chuàng)造了出來(lái)。之后每一步的迭代都像閃電般迅速，因?yàn)槲覀冊(cè)谕坏胤焦ぷ?，免去了?jiàn)面討論產(chǎn)品環(huán)節(jié)。當(dāng)然，我們之間長(zhǎng)達(dá) 5 年的合作經(jīng)驗(yàn)也有很大的幫助。