打造Gyroscope应用

用React Native打造Gyroscope应用

做iPhone应用的这段时间，我怎么减掉了20磅

我们最近发布了新的iPhone应用，Health Tracking by Gyroscope。它会把你的HealthKit数据同步到Gyroscope，并提供一个仪表盘，帮你盯住生活里的一切。

在测试和打磨这个新应用的过程中，我自己减掉了20多磅。我记录并同步自己的数据已经两年多了，但只有在能实时看到数据之后，我才真正开始改变行为，一天天变得更健康，这就是量化自我的那个梦。

我们的目标，是做一个能让人用自己的数据去达成实际目标的应用：减重、更高效、分享重要的时刻。

虽然还没有人做出真正实现这些野心的应用，但别的产品里已经有一些很好的设计元素，给了我们不错的起点。

灵感

Feltron年度报告

过去10年里，Nicholas Felton每年都会做一份关于自己生活的漂亮年度报告。数据在一整年里被细致地记录下来，再围绕不同主题分析和设计。你可以在feltron.com上看到往年的版本，旧金山现代艺术博物馆里也有。

这些报告是一扇迷人的窗，让你看见另一个人的生活。我们每天自动收进来的数据跟他的很像，我特别想知道自己能拿到什么样的报告，一方面是好玩，一方面也是想找出有用的规律、改善自己的健康。

网站分析

工作上，我每天都要依赖一堆仪表盘和服务。任何关键的、能赚钱的东西，背后大概都有几十家公司在做仪表盘，帮你理解和优化它。

我们所有服务器都有完善的监控，确保它们按预期运行，一旦出问题会立刻通知我们。将来某一天（并不遥远），你的身体也会有类似的仪表盘。

Google Analytics和Fabric这类分析工具，帮我们理解流量和其他复杂指标。大号数字、迷你折线、被高亮出来的异常值，还有其他设计元素，让人能很快读懂大量数据。

电子游戏

电子游戏把分析用得更好玩，里面常常有一个虚拟角色，带着等级、生命值和经验值这些属性。

呈现方式对了，它就是一种非常有趣、非常直观的方式，让你明白自己现在如何，该把注意力放在哪儿：活下去、升级、喝一瓶血药，等等。

人们花上几百个小时去提升这些虚拟数字，可现实生活里却没有类似的东西。暂时还没有……

代号Magneto

我们所有项目都用X战警的角色做代号，这个应用被定为“Magneto”。

2015年初，Facebook发布了一项很酷的新技术，叫React Native。Eric是React的忠实拥趸，他开始拿一个最简单的React Native项目做实验，从我们的API拉实时数据，显示在屏幕上。

虽然应用是通过XCode跑起来的，但程序代码基本是JavaScript，我可以用Sublime Text或者任何文本编辑器来改。几个小时之内，我就能编辑页面上的元素，并用类似Flexbox/CSS的语法给它们做样式。太神奇了。

可穿戴设备

差不多同一时间，Apple Watch发布了，围绕它有很多兴奋，也有很多困惑。大家谈得最多的是Watch上的应用和通知，但我们最兴奋的是它的健康功能。

我戴上它之后，它在后台监测我的心率和步数。我想把这些和其他同样重要的健康数据放在一起：Fitbit体重秤上的体重和体脂、我在Spotify上听的音乐、我每天工作了多久。

健康应用装在每个人的手机里，也在记录步数这类基础数据。有几件很简单的事我想做，但用现有的健康应用做不到，或者非常麻烦。

看最近一次锻炼的心率曲线
不用滚动、不用点击，就看到今天的总览
方便地看昨天做了什么，而不只是今天

Mahdi是我们早期的用户之一，那时刚刚全职加入团队做工程师，他开始用Objective-C写这套HealthKit同步的功能。

跑步应用

Mahdi在做HealthKit同步的时候，我开始做另一个简单的应用，让你用各种滤镜和版式来定制并分享自己的跑步。

那个跑步应用发布之后，成千上万人开始用它发有创意的锻炼图片。但也有很多人抱怨说自己不是跑者，享受不到锻炼的地图，也看不到自己烧掉的卡路里等于几个甜甜圈。

我们得想办法，把那种创作感和动力带给所有Gyroscope用户，而不只是运动员。我们的解法，是为每个人都会做的事情做出类似的体验：音乐、心跳、睡眠、电脑活动、步数、旅行等等。

一些早期的应用草图

我们开始设计一些移动端仪表盘，把所有信息浓缩进应用里。为了展示细节，我们决定把每样东西都做成一张方形卡片，下面配上一堆可定制的选项。

分享也被放大到页面底部更显眼的位置，因为这套体验里很重要的一部分，就是把你最大的成就发到Instagram上，或者分享给朋友。

这些视图太依赖数据了，最初的草图只能给出一个粗略的起点。大部分最终设计，是在真实应用里、在服务器送来的实时数据和图表之上敲定的。

每周报告

每日卡片只聚焦一个数据点，而每周报告能装下多得多的信息，可以给出总览，也能把规律凸显出来。

与此同时，在网站这边……

有了Fitbit集成和HealthKit同步这些新功能，大量新的健康数据涌了进来：心率、步数、血压、体脂率，可原来的网站更偏重位置和照片。我们得改进网页体验，让人能轻松消化这些新数据，于是和我最喜欢的设计师之一Shane Mielke一起，开始做一个新的网页主题。

这个新主题的定位，是一个更正经的、承载你所有数据的仪表盘。Shane做了十几版草图，我们才对其中一版真正兴奋起来。

其中一个转折点，是把内容按人体的不同部位切成直观的板块。一开始我不确定这个比喻能不能成立，但它似乎和我们手上的数据挺契合的，也给我们留出了生长的空间。

有了人体的3D渲染（Shane做了简单的男版和女版），我们就能把身体当作导航结构，打开哪一块就高亮哪一块。

睡眠、效率、电脑使用时间这类心理健康数据，放进大脑那一块。以后我们还可以加上心情或者冥想。

心率、血压这类心血管数据，组织在胸部区域；步数、跑步和其他锻炼这类健身活动，则可以放在腿部一带。

每一块都是一个重要的概念，细节可以以后再填。比如说，如果我们哪天加了饮食记录，它可以放进核心区域，不用把整个设计推倒重来。

这套数据结构出乎意料地好用，所以我们决定在应用里也接着用。Shane和我开始摆弄移动端的首页，把每个板块的一部分卡片挤进屏幕里。

到这时为止，这些大多还是用假想数据做出来的草图。它们大多有一个大大的、一眼能读的标题，再加一张展示数据细节的图形。下一步就是真的把它做出来，用我自己的真实数据，看看它在现实生活里到底有多有用。

按状态做颜色编码

我们对这个仪表盘的目标，是让人扫一眼就能读懂关键信息。大号数字和用颜色编码的卡片，能让你迅速知道某一块今天是不是“还行”。

举个例子，如果步数不到几千，健身卡片就会是红色或橙色，提醒你多动一动。如果你达成了目标，或者刚从健身房回来，它就是绿色，你可以去忙别的了。单独一块要变绿并不难，难的是在所有板块之间找到那个平衡。

启动页

最初的启动页，我想要一种既有未来感、又有人味的东西。几年前我在日本拍过这张照片，感觉情绪刚好对。

我在上面放了Gyroscope的logo和一些文字，第一版登录页就有了。

Beta测试

到9月中，我们已经有了一个能用的原型，可以给人试了。我们在自己身上测过，但真正的挑战是：它要对全世界几百万人同样有用，而不只是为我们自己量身定做。

我们决定把它发给一些朋友和Pro用户，作为beta计划的开始。同时建了一个Facebook群组，用来发公告、方便地收反馈。

我们发更新，用户就会给反馈，帮我们很快找出bug。这一切都在几小时甚至几分钟内发生，让我们能快速迭代。因为只是私有beta，我们几乎可以随时发新版本，不用等App Store审核。

在这之前，我们的设计靠的是自己的猜测和少数几个人的反馈；现在我们能用更多的数据和用户反馈来做决定了。

听到一些早期beta测试者的经历，实在让人非常兴奋。

“Gyroscope是唯一一个让记录生活变得轻松的产品。扫一眼我就知道自己哪里做得好、哪里还得下功夫。我没有一天不打开这个应用。”

– Brandon Littell

这次测试远不止是找崩溃和bug，合作性强得多。很多人提了需求和建议，帮我们把精力放在人们会经常使用的功能上。

把你的生活画成地图

我们手上最让人兴奋的数据之一，是位置数据，通过Swarm或者Moves记录下来。跑步、骑行和其他活动也会在地图上补上更多点。

我们很喜欢在网站上用Mapbox，于是决定在应用里用同一套地图技术。一开始我们试过可以缩放和拖动的地图，但很快决定把体验简化，把地图当作静态背景。我们来算，尽量找出最合适的缩放级别和构图，把该看到的都放进去。

用Moves记录移动的人，可以看到自己去过的所有地方的热力图，以及时间是怎么分配的。从健康的角度看，走路和开车各占多少时间，是很有意思的一件事。我开始提早出门，更多地走路去开会。

有些视图给的是健身方面的洞察，另一些则更多是帮你理解出行，或者去过哪几类餐厅。

推送通知

让人生活更轻松的方式之一，是每天发一条简单的推送通知，带上一些洞察。

关于发送时间和文案，我们讨论和测试了很多。一开始我想在一天结束时发，当作回顾。但数据有时需要时间同步进来，有可能报出不完整的内容。最后我们定在第二天早上9点。

我们的优先级是让用户的生活更轻松，哪怕代价是少赚钱、或者达不到自己想要的指标。我们没有搞一条故弄玄虚、逼人打开应用的通知，而是把相关信息都放进去，让人不打开应用也能拿到价值。

“我用Gyroscope有一段时间了，但直到有了女儿，它对我才变成一件大事。我很喜欢它把我保持身材的数据组织起来的方式，也喜欢我拿到的那些深入细致的拆解。更别提我总觉得体验里有什么东西又变好了。这个团队是真的在乎自己的用户。

除了看整体健康的总览，我还会盯着效率水平，留意自己的心理状态好不好。我平均每周花38–42小时在Iris（我的创业公司）上，同时还是一位全职妈妈。Gyroscope帮我管好这些工作时间，让我真正找到一种稳固的“平衡”，我特别感激它。结果呢？效率高到不行。以前那40小时的工作，都被瞎折腾吃掉了。现在？带着婴儿，你永远不知道一天会怎么过，所以我真的把时间用到了极致……”