Dashboard：一款iOS app的设计开发过程

【编者按】本文翻译自Stripe公司的产品经理Michaël Villar的文章，原文发表在 Startups, Wanderlust, and Life Hacking。

由于我们提供的是企业服务，所以像现在流行的其它创业公司一样，我们起初并没有做移动端的 App。我们的核心业务是提供支付的 API 接口，允许其它的公司接入支付功能。web 版的dashboard 让每一个团队成员可以很方便的跟踪，完成订购，付款，消费及调货。然而，以往它的整套系统是为桌面级屏幕设计的，在手机上很难用。在完成“收银台”功能之后，我们决定在 开发移动版本，首先在 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 年的合作经验也有很大的帮助。