【編者按】本文翻譯自Stripe公司的產品經理Michaël Villar的文章，原文發表在Startups, Wanderlust, and Life Hacking。
然而，以往它的整套系統是為桌面級螢幕設計的，在手機上很難用。在完成“收銀台”功能之後，我們決定在 開發移動版本，首先在 iPhone 上推出。
這篇文章寫的就是我們一起開發App 的具體過程，或者從更廣的意義上說，這是關於我和 Benjamin 創造產品的經驗分享。看完這篇文章不能使你當上產品經理，但至少對一個 App 是怎麼做出來的有一個大概的瞭解。
設計任何的產品，體驗都是一樣的：孤獨，抑鬱，沮喪，自由，高潮，狂喜，一大堆亂七八糟的感受如潮水般向你湧來。但當產品完成並最終服務于使用者時，你會感到之前的所有努力都是值得的。
圖像
我們花了不少時間在早期的概念階段。它不僅僅是設計的第一步，也是永遠沒有完成的一天的最後一步，你必須隨時準備為了更好的用戶體驗推倒重來。
在我們第一次產品討論會時，我們在旁邊放了一張白板，我們在那次會議中定下了應用的核心功能，正如我們當初開發的目的。在 Dashboard 的 iPhone app ，我們將它想像為一個輔助軟體，擁有兩大核心功能，與全功能版本的網頁軟體有所區別：
1.在你早上第一次打開這個應用的時候，你可以檢查昨天的消費情況
2.擁有快速檢視支付情況，消費資訊等功能
線匡模型的草圖繪製
在確定好功能之後，我們開始了 UI 的繪製，我們利用正常的 9 小時工作之外的時間來做這件事情。為了順利進行，我們把它畫在了紙上，畫出線框圖，在旁邊寫了文字說明，為什麼要這麼設計。我們先各自畫一份，交流之後再去粗取精，結合兩個版本的優勢製作出最終版本。
我們的線框圖畫的很粗糙，沒有精緻優雅的視覺化介面，只有關於大致的畫面及大體的使用者介面。但他們確確實實地幫助了我們確定用戶的核心體驗並且時刻提醒我們在每一個場景中我們的第一要務是什麼。
視覺設計
線上框圖完成之後，我們開始了視覺化介面的設計。在這個階段開始之前，我們幾乎每天都呆在一起，探討正確的設計方向。例如，在主頁的設計上，就經過了無數次的反覆運算。我們很清楚，最重要的一點是，什麼按鈕是應該在主頁上出現的，什麼是不應該出現的。從常識來想，當然是能夠在主頁上展示越多的資料越好，但我們決定只把最重要的，最值得關注的資訊留下，其它的隱藏起來。
但把介面設計到我們兩個都滿意了，Benjamin 開始做最後的設計稿。當然，隨著時間的推移，我們收到了大量的回饋資訊，但我們已經決定了，就沒有再做改動。
交互
交互的構思從視覺介面的設計時就開始了，但我們僅僅在有明確的想法時才做出交互原型。在做交互原型階段，我們可以證實我們最初的想法正確與否。
在 Dashboard 應用上，卡片式的資訊呈現方式是最主要的功能。我們決定使用一套 web 工具，雖然它的 bug 出奇的多，但它對我們而言很方便，值得一試。
要做出符合直覺，輕盈優雅的 UI 是一項極為複雜的工作：
新的卡片要如何以一種符合直覺的方式被打開？我們的做法是，讓卡片從稍微帶有彈性的側面進入，劃出，這樣能隱喻卡片可以被劃掉及移動。
• 當你拖動卡片式，你必須要有一個匹配活躍卡片的陰影加以強調
• 如果你想移動在後面的其它卡片，你要將處於前面的卡片劃掉
• 動畫的移動速度要與手指的移動相匹配
• 像現實生活中一樣，當卡片往後移動的時候會逐漸變暗
對於動作功能表來說，我們希望在打開一個龐大的功能表之前能有足夠的暗示。我們把這個有趣的功能實現了出來，它運行的很棒，使我們的每張卡片中不會出現兩個以上的動作按鈕。如果你不感興趣的話，你也不需要關掉功能表。
切換動作按鍵 （通過 html／css 實現）
你可以選擇展示“收入／消費者數”圖表的時間長度。這個動畫可以幫助用戶理解兩個時間點的長度區別。如果你仔細觀察，你會發現當時間長度從“天”變為“周”時，我們將多個時間點合併了。
在圖表視圖中改變時間長度
當你的應用需要聯網使用，你可以通過登錄畫面及大量的過渡動畫減少使用者在網路延遲時的焦慮感。我們最後決定在資料載入時使用前者並結合一個過渡動畫。下面是我們想出來的啟動動畫原型：
作為一個創業公司，考慮到代碼重用性，我們使用大量的 HTML／CSS 代碼及 AE 動畫效果。
在 App 啟動時，數據會被載入並展示到首頁上。如果網速足夠的快，我們不會展示過渡動畫，直接進入主頁，如果網路太慢了，我們會在接下來的數秒內展示 UI 的過渡動畫，以減少用戶等待過程中的焦慮感。
我們同樣的也增加了一個懸浮動作按鈕（靈感來源於谷歌的“材質設計”），你可以在應用的任意頁面點按這個按鈕，會出現一排標籤頁。我們增加了一個 100 納秒的遲滯在卡片上，原因有二：資料需要載入，一張空白的頁面是沒有説明的。2 用戶可以有足夠的時間看清楚他們按了哪個按鈕。
UI 執行
我們開發應用的策略是非常簡單的：我經常從使用者介面工具開始。UI 在應用中是最重要的且應該成為 iOS 應用開發者的最主要關注點。從使用者介面開始，沒有任何資料及 API 的包袱將幫助你做出更友好的使用者介面。這也能很容易地解釋為什麼不斷添加新功能會使整個應用的體驗及性能下降，只有從 UI 出發才能指導我們有序克制的添加必須的功能。
推送通知
這是我最喜歡的一個功能。我們的推送通知針對不同情況進行了細緻的處理：
•每天總結：一個快速檢視你昨天的銷售情況及新使用者增加情況的通知，在每天早上你醒了之後推送。
•新交易及新使用者：對於中小型商業使用者而言，當看到你的交易數量增長是一件很令人興奮的事情。
•調動失敗：我們希望用戶在操作失敗之後能立刻收到回饋，並瞭解失敗的具體原因。
帳戶變化：在使用者在帳戶餘額或密碼發生改變時我們會第一時間通過推送消息的方式予以通知，使使用者減少被盜號的風險。
對於非緊急的通知，我們只會在工作時間推送，具體時間點可由用戶自行設置。在午夜被推送吵醒絕對不是好的用戶體驗！
今日，我們日漸成熟的 iOS 團隊在開發一串新功能並實現我與 benjiamin 設計出來的新版本。
為什麼我與 Benjamin 能夠如此高效地合作？這是一個值得深思的問題。
起初，我們一同做出了產品原型，爾後他專注於視覺設計上的細節打磨，我則把精力放在了代碼實現上。這是一對極佳的組合——我們兩個的長處互補之後，正好將產品完整地創造了出來。
之後每一步的反覆運算都像閃電般迅速，因為我們在同一地方工作，免去了見面討論產品環節。當然，我們之間長達 5 年的合作經驗也有很大的幫助。
0 comments:
張貼留言