这篇文章讲的是我们以前那款、如今已经停止维护的跑步应用。
Gyroscope Running的诞生
代号Quicksilver：我们第一个React Native iPhone应用
我们最近发布了一个新的实验性iPhone应用，叫Running by Gyroscope。它让你为最近一次跑步做出漂亮的图片来分享。这篇文章讲的是我们怎么设计这个应用、用了哪些工具来做它，以及一路上学到了什么。
这个应用背后是我们最受欢迎的两个集成，Runkeeper和Strava。它们在记录运动这件事上做得非常好。跑完一次之后，Gyroscope会自动同步原始数据。然后就轮到你玩了，挑一个你想讲的故事。
是那条风景优美路线的卫星地图？还是你拍下的那片惊艳的日落？或者说它等于7个甜甜圈这件事？也许你的心率特别高，你想把这个亮出来。选择权在你。
第1章
2015年3月
我们刚上线了Gyroscope网站。系统运转得很好。我的跑步会立刻同步，出现在aprilzero.com上，带着我所有的数据，甚至还有我在Spotify上听了什么音乐这样的信息。
我们做出了一块很漂亮的仪表盘，但唯一的分享方式是把整个东西发给别人。
我们接下来的两个大挑战是移动端和分享。
三月的一个下午，我跑上了Twin Peaks。那天天气晴朗，很美，远处两座桥都看得见。
我俯瞰着这座城市，很想有个办法把这一刻分享出去。我把一切都记录并量化了：海拔、心率、上来走的路线、听的音乐，还有我看到的东西（拍了照），但没有任何办法把它们重新拼回我当时的体验。
我脑子里浮现出一个增强现实的画面，是我上山的那条路线。一个可分享卡片的点子冒了出来：把我的身体数据和位置叠在我拍的那张照片上。所有这些信息Gyroscope里都已经有了，缺的只是好好设计一下。
我觉得这会是一张很棒的Instagram照片，于是一路跑回家，迫不及待想试试。
第2章
先假装做出来，再真的做出来
一到家，我就打开Photoshop，把拍的几张照片拖了进去。我加上这次跑步的地图数据，再配上一些统计，做出了一张简单的信息图。也许有一天我们会有个好用的自动化工具，但当时从头手工做反而更快。
我把城市和距离这些基本数据放在角落里。文字颜色（青绿色）是从照片里取的，我还标了一个点，表示照片是在哪儿拍的。几个小时后，我发出去的这张照片收获了一大堆赞。大家都在问它是怎么做的。
我决定把这个实验继续下去，每跑完一次就手工做一张图，试试新的设计。
接下来的几周，我每次跑完都继续做新图来分享。我尝试了不同风格的地图，加上音乐、天气或者心率这些细节。这些小点缀给一次跑步添了更多洞察和层次，大家好像挺喜欢。
我开始真心期待跑完之后做卡片、分享卡片这个创作过程。再加上内啡肽，最后变得相当上瘾。里面有好几层新的创作和讲故事的空间：翻看自己拍的照片，看地图路线的不同视角，挑好看的点缀色，等等。
它把我最喜欢的几件事凑到了一起：摄影、跑步，还有被人关注。
在照片上加几个数字和一个logo，有种奇妙的作用，它一下子就不只是一张照片，而变成了平面设计，甚至是艺术。所有元素的构图和形状可以互相配合，做出远大于各部分之和的东西。
就算在旅行途中，我也很享受做这些图。这些卡片是记录我去过的不同地方的好方式，有点像明信片。
把音乐或地图这些数据点开开关关，同样的内容就能讲出不一样的故事。比如跑得比较猛的一次，我可能会加上心率。要是那天特别热或者特别冷，天气就会是个有意思的数据。要是有漂亮的日落或者风景，那通常就是很好的背景。要是地形有意思，卫星视图就能把它突出出来。
这个实验做了几个月之后，我意识到这会是个相当棒的产品。我自己很想要它，也有很多人表示想用。
我开始画一些概念草图，把我的实验收敛成几个最好的版式。
第3章
设计这个应用
开始一个新设计时，我喜欢先把目标列出来。挑对目标往往比把东西做好看更重要，也更难。对Quicksilver来说，有几条指导原则我觉得很重要。它们会决定我们写下的每一个像素、每一行代码。
- 拿到尽可能多的赞
- 立刻看到你最近一次跑步
- 让定制这件事变得好玩
为最大的参与度而设计
要拿到尽可能多的赞，我们得加上合适的视觉亮点、重点和上下文，让它能打动别人。想清楚我们的目标人群是普通大众而不只是跑友，帮我们理顺了很多东西，也是我们和别人做法最大的不同。
大多数应用都有详细的数据，用来帮你提升成绩。但对一个不跑步的朋友来说，这些信息没什么意思。他们大概更想看到这次跑步等于5个甜甜圈，然后给你点个赞。或者看一张你费尽力气爬上去的山顶上拍的美照。
我们尽量把每个版式选项都做成一个独立的品牌，有自己的名字和图标。这是应用的核心功能，必须极其直观，用起来还得好玩。
试过几种不同的思路之后，我们把版式做成了底部的一长条列表。翻着不同的版式挑一个，这个过程很有满足感。
感觉就像跑步版的Instagram滤镜
启动页
因为摄影和用户内容是这个应用很重要的一部分，我希望你一打开它就能感受到这一点。
我开始到处找好看的照片当背景。我朋友Adam是我认识的最好的摄影师之一，他很大方地让我们用了他在Mt. Tam拍的一张片子。
把它放进应用的那一刻，我就爱上了。那种宁静与自然的感觉刚刚好，为整个应用定下了对的调子。
独立的应用
最大的设计决定之一，是把它做成一个独立的、专门给跑步用的应用。我想在自己的主屏幕上看到“Running”这个词，然后立刻打开我的内容。
以后我们加上更多能力时，比如骑行或者游泳，大家可以只装自己想要的那些。我想避免界面变得杂乱，被一层层导航埋起来。
活动信息流
大多数别的跑步应用都得把记录功能放在显眼处，但我们没有这一块，所以能保证内容永远是主角。除了最近的跑步，其他所有东西都收进侧边栏里。
我们给每次跑步试了不同的样式和比喻。它们可以是叠起来的卡片，也可以是一堆方块。试过各种信息密度之后，大的那些占地方太多。用了几分钟应用之后我意识到，我放得太大了，看不到自己想要的全局。网站上的那个视图效果相当好，所以我们最后复用了同样的条形图，按配速上色。
我试着把最快 & 最长的一次跑步放在头部，这样不用往下滚就随时看得到。这会是一个友好的挑战：每次打开应用，我都有机会打破自己的记录。如果谁跑了一场马拉松，或者做了什么特别厉害的事，他随时都能翻到它。
网站上那个一直在往上跳的年龄计数器很受欢迎，所以我们在这里也加了一个类似的计时器，显示离你上次跑步过了多久。那个数字越大，希望大家的动力也越足。
第4章
甜甜圈计数器
那年夏天，我们在旧金山的True Ventures办公室办公。有一天，有人带了几盒甜甜圈到办公室。午饭后，有人把它们切成了八份，还说只吃小块不算数，我记得是Phil Black。我知道这在科学上站不住脚，但还是开始一个个口味地尝了起来。
我就坐在那儿，一边做着跑步应用，一边吃着四分之一个糖霜白脱牛奶甜甜圈，好奇当晚得跑多远才能把这口零食抵掉。搜了一会儿，我发现一个普通甜甜圈大约200卡路里，而跑步消耗的卡路里大致是（体重×0.75×距离）。
没有地图数据的跑步，比如在跑步机上跑的，或者用Fitbit记录的，给我们添了不少麻烦。应用的所有视图都依赖地图，但我们需要一个更灵活的替代方案。
我坐在那儿，给自己不同的跑步算着数，意识到了两件事：我完全不知道自己大部分跑步值多少个甜甜圈，而算出来这件事还挺好玩。
甜甜圈计数器就这么诞生了。
我们会算一算，得出一个大概的甜甜圈数，可能是只值1个甜甜圈的短跑，也可能是一次超长的跑步。那天剩下的时间，我都在找从1到6各种数量的好看甜甜圈的素材图。
第5章
测试版
应用的基础版本能跑起来之后，我给网站上跑得最多的人发了些邀请，都是记录了一百次以上跑步的人。看到有不少人账户里累积了好几千次跑步，我又惊讶又佩服。
我喜欢跑步，但离他们的水平差得远。他们的反馈和建议，正是我们把这个做成好产品所需要的。
一开始我只是手动发邮件。大家回信报问题或提建议，我就努力把每个人说的话都记下来。
后来有人建议建一个Facebook小组，说他们在别的测试里这么做过，特别有用。我建了个新的私密小组，把链接发给了几位主力测试者。它慢慢长到了一百多人，很多人每天都在跑步、也在用这个应用。
我们不仅收到了一堆问题报告和建议，有些人甚至开始动手画他们想要的东西。
我们可以一起想新功能，发给组里所有人，很快就能在真实内容上看到效果。
第6章
工具 & 技巧
Gyroscope有一支很棒的团队，为了做出这个应用付出了很多（谢谢Mahdi、Eric、Robbie！），但我们也得到了很多外部的帮助。下面是一些我们觉得非常有价值、帮我们省下大量工程时间的资源和产品。
React Native
我是做网页出身的，用Javascript和CSS/Flexbox那套布局系统，感觉非常顺手。我以前设计过iPhone应用，但从来没真正给它写过代码。要是没有React Native，我就得等别人来做开发。这样一个业余项目，多半根本就不会开始。
Brent Vatne是我们最早的测试者之一，也是React Native的贡献者，我们卡住或者遇到文档里还没写的问题时，他帮了我们特别多。谢谢你，Brent！
从我们开始到现在，React进步了很多。每一个新版本，从大约0.3一直到我们发布时的0.12，都提升了性能，也修好了我们一直头疼的问题。
它还需要打磨（我希望动画性能能更好），但进步非常快。至少对我们这个很简单的应用来说，它把活干成了，也让我们走得比原本快得多。
React Native通过网络的实时重载，让我们能在几分钟内快速尝试新想法或者做细微调整。现在我已经无法想象还要重新编译、等着才能看到改动。
Mapbox
Mapbox做的地图工具很出色，我们整个网站都在用。他们的编辑器可以自定义样式和颜色。我们用它做了好几种不同风格，包括这套暗色极简的瓦片。
一开始我们试了他们的iOS GL实现，但发现我们其实并不想让人在地图上拖动或缩放。为了简单起见，我们决定通过webview复用已有的网页版实现，这样就能保留我们已经花了好几个月测试和改进的代码。
Imgix
我们应用的一个独特之处，是卡片的样式会随照片而变。Imgix帮我们分析配色，好把文字和其他元素设成相配或互补的颜色。
我们也用Imgix做特效，比如增强和虚化图片。用云端方案处理照片意味着一开始要花点时间：用户得先上传照片，而不是全在手机本地完成，而且上传之后再下载处理好的照片有时要等上一分钟，但考虑到它省下的时间和多出来的功能，这个取舍是值得的。
Twitter的Fabric
我们开始用Fabric/Crashlytics来跟踪崩溃。应用早期的时候，它崩得很厉害。后来我们把所有崩溃都修好了，但我还是常常打开那个面板看使用数据。
我本来打算自己搭一套分析，结果发现我们需要的几乎所有东西这个面板里都有了。我最喜欢看的是此刻在线的用户，但月活（MAU）、DAU/MAU比值、留存率这些数据也很有启发。
测试期间我们改动应用时，真的能看到每次使用时长、留存率这些数字在变。用Parse加上推送通知，对重新唤起用户、让人在对的时间回来，帮助很大。
Parse
在应用的早期版本里，人得自己打开应用，看看最近一次跑步有没有加载进来。等我们开始用Parse为新跑步发推送通知，我们的留存一下子上去了。
第7章
77个甜甜圈
有一天，我在翻我们在Instagram上被提到的动态。有几张日落的照片，然后我看到有人好像跑出了77个甜甜圈。
我的卡路里计算肯定是有问题，或者有人上传了假数据。也许是一次骑行被错标成了跑步？
我点进去，搜了搜Nate提到的那个“Fat Dog”。原来那是加拿大的一场120英里超级马拉松，据说是世界上最难的比赛之一。哇！
我把他的动态分享给了我们那群测试者。看到Nate这么厉害的一次跑步，我很想有个办法把这些特别的跑步展示出来，让所有人都看到。
我们在应用的侧边栏里加了两个功能：一个精选跑步的信息流，还有一个最近跑过步的好友列表。
Nate的记录至今没人打破，77仍然是Gyroscope上有人记录到的最高甜甜圈数。不过做这个项目以来，我学会了永远不要低估人。下个版本会支持三位数，以防万一。
第11章
接下来呢？
我们把这个应用发布到了App Store & 很多人一直在用它记录和分享自己的生活。
Tatiana靠记录并分享自己的步数，减了将近40磅。
Dan Grant心脏病发之后，一直骑车跑遍英格兰，为了康复，也为了保持健康。
我们把在Running上学到的东西 & 用来做出了新的Gyroscope应用，它会呈现你生活的完整故事。它同样是React Native应用，你可以读一读我们是怎么做的，或者去App Store下载它。