考慮到它提供的服務類型，Stripe沒有像很多現在的新公司那樣從移動端開始做起。Stripe的核心業務是它的支付API，這些API可以讓使用它們的公司在幾分鐘內就完成支付設置。網頁端的頁面可以讓一個團隊里的每一個人都輕松地跟蹤和管理訂閱信息、支付信息、交易信息以及他們的顧客。但是這個頁面是給大屏幕設計的，也正因此，它在移動端上幾乎可以說是不可用的。不過，在將Checkout的最新版本發布之后，我們決定從iPhone下手，集中精力開發一個移動端的app。

這篇文章是關于創造這個移動端app的過程的，或者從更大的方面來講，是關于本杰明和我是如何設計產品的。這不一定是一種做產品的新方法，但我想和感興趣的人一起分享。

設計任何一款產品都可能會讓你感到無從下手，但是當你把它削減到只照顧到最關鍵的用戶體驗時，它就變得可實現了。

我們在把產品概念化的階段花了大量時間。盡管這是第一步，但產品設計從來都不會真的完成，你要始終仔細地回過頭來思考你對產品的設計。

我們的第一次會議是用白板的形式展開的，在那次會議上我們挑出了我們認為的所有屬于核心體驗的特性，并以此作為會議的開端。對于iPhone上的這個Dashboard，我們把它視作一個和網頁端搭配使用的app，并且只專注于兩種最主要的使用情景，而不是使它成為一個具有網頁端全部特性的版本：

1. 一個你在早晨會最先打開并且快速回顧昨天的各種數字的app
2. 一個快速查找客戶、支付信息以及交易信息的工具

在確定了我們需要的特性之后，我們就開始著手設計整個app的框架了。但是由于我們兩個人之間有9小時的時差，我們的工作又有了額外的困難。為了解決這個問題，我們就在紙上畫下我們想要展示的東西并拍成照片，然后錄一段對于框架的說明，發給對方然后等待回復。這里有一個例子（用法語寫的）： http://bit.ly/1GSByqd

我們的框架非常粗糙。它沒有任何視覺上的優化設計，它僅僅是對流程以及一個總的用戶體驗的說明。但它們能夠幫助我們確定對這個app的預期，并且提醒我們想在每一屏上展示什么。

在我們的框架確定好之后，我們就開始進行UI的設計了。這個階段剛開始時，我們一起緊張地工作，來確定最符合我們預想的UI。舉個例子來說，主頁的UI就經過了許多次迭代。我們很清楚我們想要讓近期活動顯示在最前面和最中央，但是決定什么 不 需要顯示在那里很困難。展示盡可能多的數據可能是個簡便易行的方法，但是我們要決定哪些信息是最重要而應該被重點顯示的，以便和其他雖然有趣但是不那么重要的信息區別開來。

在我們兩個都對我們的UI設計感到滿意之后，本杰明便開始敲定所有的設計元素。當然，整個過程我也給出了不少反饋，但主要是本杰明做出了整個UI。

在整個UI設計過程中我們都在考慮交互，但直到我們對整個UI設計有一個清晰的認識時我們才開始作出交互設計的原型。在設計原型的階段，我們可以確認自己最初的交互設計是否是正確的。

對于這個Dashboard app來說，最主要的部分是那些卡牌的樣式。我們想在web端做一個這樣的原型，但是做出來的東西有很多bug，不過這最起碼告訴我們這主意值得一試。

讓這個UI顯得直觀又簡潔是一個十分復雜的過程。

• 我們想讓一張卡片的打開方式能告訴用戶他們能夠對這張卡片進行些什么樣的操作：我們讓它在從側面滑出時有一個小小的跳躍效果，因為這就是移動和挪走它們的方式
• 我們想在拖拽一張卡片時在它對應的那一行上有一個陰影效果來表明你操作的是哪一張卡片
• 我們想在移走一張卡片的同時將其他在它后面的卡片挪到前面來，來表明這是一個完整的過程
• 我們想讓卡片被移走的速度和余下的卡片堆往前移動的速度保持一致，這樣就可以很清晰地表明這兩個操作是互相關聯的
• 我們想讓越靠后的卡片看起來越暗，就像它們在現實中的那樣

對操作菜單來說，我們想讓這個菜單里按鈕的名字和當前卡片的內容有關，而我們又不想打開一個大的、可能會煩到用戶的那種傳統的彈出菜單。于是我們想到了這種有趣的動畫，到目前為止這種方式都沒有什么問題，因為對每張卡片來說我們只需要不超過兩個操作。如果你對這個菜單的內容不感興趣，你甚至都不用去關掉它。

打開／關閉這個操作菜單（我們做了一個HTML/CSS的原型）

你可以在展示收益／客戶的這張圖中切換展示時使用的時間周期。我們設計的這種動畫可以幫助用戶搞懂之前的時間周期是如何變到新的來的。如果你仔細點看，你會發現在每一個小格代表的時間長度從天變到星期時，我們在縮小整張圖的時候還做了一個漸隱的效果。

在圖表中改變顯示的時間周期

當一個app需要網絡連接才能工作時，你可以展示一個著陸頁，或是一個有一堆菊花圖的空白app。最后我們選擇了前者，并且加上了一點動畫效果，因為在app加載數據的時候它其實并不會有什么響應。圖中是一些我們設計的啟動動畫的原型：

對于啟動動畫，我們用HTML/CSS和After Effects(AE)做了一些原型

app啟動后，我們等待數據被加載來顯示第一屏，并且立刻展示UI，沒有多余的菊花圖，也沒有閃爍著的UI。如果網速太慢，我們還是會在幾秒鐘后顯示菊花圖。

當你在app中點擊任何一行的時候，我們還加了一個點擊動畫（受Material Design的啟發）。出于兩個考慮，我們在打開一張卡片之前加了100毫秒的延遲：1）數據需要時間來加載，而顯示一張空白的卡片沒有任何意義，而且 2）用戶這樣就有時間看清他們點擊了哪里。

我在設計一款app的策略其實很簡單：我總是從設計UI開始。UI是app最重要的部分，而且對iOS開發者來說，UI應該是他們最關注的地方。從UI開始，不綁定任何數據，不使用任何API，這可以確保你的UI盡可能流暢。這也可以讓我們明白為什么在實現新特性時體驗變差了，同時也讓我們可以更快地解決這些問題。

這是我最喜歡的這個app的特性之一。目前我們對如下的一些事情發推送通知（更多內容將在后續版本推出）：

• 每日總結：在你早晨醒來時讓你能夠快速地瀏覽你昨天的銷售額和新的客戶。
• 新的支付信息和新的客戶：對小型企業來說，看到自己的生意有了進展是一件很令人激動的事情。
• 失敗的交易：我們想確保我們的用戶能及時發現他們的交易失敗了，并且能夠根據提供的信息想出該怎么解決這些問題。
• 賬戶變更：如果用戶的密碼或者銀行賬戶有變動，我們就立刻讓用戶知道。這可以讓他們在這些變更是在未被授權的情況下發生的時候迅速做出反應，或是尋求幫助。

對于一些不是那么重要的通知，我們確保只在工作時間把它們推送給用戶，至于具體的時間段要取決于用戶所在的時區。沒人想在半夜被吵醒吧！

現在，我們的 iOS 團隊正在在開發很多新特性，并對現有的特性進行優化，這些改進將把本杰明和我初創的這個產品帶入下一階段。

我想過很多，為什么本杰明和我能夠如此完美地共同做出新的產品。我覺得，有一個成員互補的團隊是關鍵。我們開始時一同進行產品設計，然后他負責UI設計，我負責代碼實現。這是一個絕妙的組合——我們兩個人就可以創造一個完整的app。隨著時間的推移，只要一個團隊的成員都能跟得上團隊的進度，那么這個團隊就會花越來越少的時間在開會、在解釋他們的想法上。當然了，如果你和同一個人在過去的5年里一直共事，這也是很有幫助的。

本文由掘金翻譯計劃(http://github.com/xitu/gold-miner)的譯者CaesarPan翻譯，掘金翻譯計劃主要翻譯掘金應用上優質的互聯網技術文章。

原文鏈接：https://medium.com/swlh/exploring-the-product-design-of-the-stripe-dashboard-for-iphone-e54e14f3d87e

本文由 @CaesarPan 原創發布于人人都是產品經理。未經許可，禁止轉載。