April Zero诞生记
第二部分
我每次的设计过程都不一样。
做theory11的时候，我是靠在洛杉矶街头给陌生人变魔术进入状态的。Quizlet的样式指南，是我在夏威夷跳伞时想出来的，自由落体时看到蓝色的海水、浅褐的沙滩和白色的浪花。我上一个网站的配色，是从一辆红色的Ducati那儿借来的。
而这个网站的诞生过程更加曲折，涉及环游世界的冒险、新的小玩意，还有在自己身上做的实验。当然，全都是为了研究与开发。
试了几个月的各种应用和硬件之后，我定下了最终的组合，追求最自动的采集和最少的时间投入。
- Moves iPhone应用，记录位置数据
- Cardiio iPhone应用，记录我的心率
- Instagram，存我的照片
- Runkeeper iPhone应用 ‐ 记录我的跑步
- Withings无线体重秤，记录每天的体重
- Withings血压计，测心率和血压
- Bodymetrix超声，测体脂率
- 每月的血液检测，看甘油三酯和营养水平
2014年5月：泰国
我当时和Dustin Curtis一起在亚洲旅行，为网站的移动版画点子。我想做出一个能利用移动场景的东西，一个我在路上每天都会觉得有用的东西。
我不想做一个看一眼就被忘掉的东西。我希望它不停变化、实时更新，把当下最重要的东西突出出来：一个新地点、一次心率升高的提醒，或者只是健康水平的一张总览图。
我想为那个正在迅速逼近的未来做设计，那时这些数据会随时可得，所以我有意忽略了当下的一些限制。眼下这些数字并不是一直在更新的：体重大概一天更新一次，血液指标一个月才一次，心率只有我测的时候才有，一天几次。
我预计几年之内，甚至更早，就会有新硬件出现，让这些数据变得自动得多、连续得多。如果Apple或者别的大厂明年还没搞定，Kickstarter上总会有人做出来。
有一个让我很兴奋的移动体验，是把我的所有生命体征做成增强现实的叠加层。摄像头画面可以模糊掉，营造出手机是透明的错觉，信息则浮在不同的层上。后来发现这在浏览器里做不了，但也许有一天我会把这个点子做成一个应用。
能在手机上一眼看到所有信息，这件事让我很兴奋，于是我一直试着把所有东西都塞进一块直观的仪表盘里。
潜水学校
我最后到了Koh Tao，泰国东岸的一个小岛。它以潜水出名，所以我决定去考个证。
白天我去潜水学校，晚上做新的移动端设计稿。我把Macbook上的Photoshop连到iPhone上的Skala Preview，好在真实场景里看每一版设计。我会拿起手机，打开每个页面走来走去，琢磨它的手感怎么样。
这帮我搞清楚了很多设计细节，比如尺度和易读性。“文字能小到什么程度？”“要多大对比度才能在户外读清楚？”“一屏里能装下多少信息？”
顶部那几圈缓缓旋转的环，呼应了桌面版，也给它添了点性格。一开始它们太抢眼，所以我不断降低透明度和颜色，直到几乎注意不到。
我会带着手机里的截图走来走去，拿给身边的人看。
“你觉得这个页面想告诉你什么？”“你会点哪儿？”
一开始，大家很难看懂页面上挤着的这一堆东西。Dan不知道该先看哪一栏。Dustin抱怨所有东西都太小了。船上其他人大概在想我为什么要带着笔记本电脑。
我意识到把所有东西都塞进一个页面这个想法行不通，于是开始把它削减到只剩最相关的数据。
我们在曼谷的时候，去了几家医院，想做个便宜的全身MRI，但结果太贵了，要好几千美元。不过这期间，我彻底迷上了拥有一份自己完整医学视图的想法，于是决定把它加到页面上，传达出更临床、更科学的感觉。我先用了一张长相普通的人的素材图，打算以后换成我自己的。
我很喜欢人体剖面图的感觉，尤其是相比地图这种更常见的东西。扫一眼页面就能大致知道发生了什么，而数据只要凑近看条形和数字就有了。再配上好的动画，会更棒。我想让人清楚地感到，这是一条通往一个活人的实时链接，而不只是一堆无聊的医学图表。我得避开很多应用都掉进去的陷阱：几十个千篇一律的饼图和环形图。
我想讲一个故事，而不只是摆出一堆医学测量值。
到这一步，我开始对这个设计兴奋起来。心率一旦接上实时数据会特别酷。我不确定MRI的动画做不做得出来，但这是第一版终于让我觉得配得上桌面体验的移动设计。
可以开始写代码了。我们往南去马来西亚的路上，接下来几天我都在试着把动画做出来。
试了几天之后，我想出了用CSS模拟MRI扫描和发光的办法。我在600px左右加了个断点，开始在浏览器里做移动端的布局。快做好的时候，我用电脑的IP地址在手机上打开它，直接针对iPhone硬件测试和优化。
既然移动端终于搞定了，是时候回头把Explorer的桌面体验做完了。
上一版很漂亮，但信息量实在过载了。我得想办法把每天的活动展示得更紧凑、更好懂。我猜解决办法是多加几层导航，把每条时间线削减到更简单的版本，等有人想看那天的更多细节再展开。
我空着肚子很难思考，所以我决定先把寿司吃饱，再来想最终的设计。
2014年6月：日本
筑地的早饭
第二天早上我落地东京，直奔筑地鱼市，全世界最新鲜的鱼都在那儿。
在颠簸的船和慢吞吞的火车上晃了一个月之后，坐上准点又高效的日本地铁，感觉棒极了。我希望我的网站也有同样的手感：你可以到处点，进到新的地方，笃定不会出任何岔子。它会又快又干净。所有的时序都精确到毫秒。
一小时后，我有了灵感，也不饿了，可以把网站设计做完了。
我在酒店里支了张小桌子开始干活。我决定先把移动端想清楚，再往大了放，免得发明出什么在小尺寸上根本行不通的疯东西。
过去一个月我一直在纠结移动端上时间该往哪个方向流。最新的活动应该从上面进来吗？Facebook或Twitter这类信息流大多是这么做的。还是该像日历那样，从第一天开始按时间顺序排？
问题是没有唯一正确的答案。它既是我活动的实时信息流，也是我过去做了什么的日历。两者要求完全相反的设计，而我只能选一个。
用真实数据把两种方式都做了很多稿之后，我发现自己更多时候期待的是时间顺序，否则常常会看错页面。
我最后决定，每个月的页面从当月第一天的午夜开始。最新的内容在最下面，最早的在最上面。
我一直在用Google Maps认路，也从它们的移动端设计里得到了启发。它们的路线时间线永远清爽又可靠。
要做出类似的感觉，就得把我硬往边上塞的很多数据去掉。对移动体验来说，可用和简单比在一个视图里放下所有信息更重要。
我一直在琢磨怎么巧妙地显示日出日落、当天的照片等等。数据是好数据，但带来的复杂度太高。新版本简单多了，就是我去过的地点的一个列表。
我把内容换成了当天的活动，其余几乎全删了。它没有那么多信息，但开始变得干净多了。这终于是个我能在手机上顺手用、也愿意分享给别人的东西了。
那天晚些时候，Apple在WWDC上发布了HealthKit。它没有我期待的那么惊艳，也没有配套的革命性硬件，但倒计时正式开始了。
他们设计里那种临床和医学的气质，也让我意识到Explorer有多关键，比我原先想的还关键。位置和旅行数据能给出上下文和意义，否则那些数据点只是一堆互不相干、纯属谈资的东西。
我在日本只剩几天了，之后就得回家去把这东西做出来、发出去。毕竟，真正的艺术家会交货。
茶道
第二天早上我去公园长跑了一趟。我想让脑子清醒一下，等灵感自己找上门。读完HealthKit的消息，我满脑子都是把健身游戏化、或者用算法预防心梗这类天马行空的念头。
之后我决定去看看传统的日本茶道。地点在一座漂亮的庭院里，周围有锦鲤池和大片绿意。一位穿和服的女子在旁边逗鱼。
第一道是一小块点心，盛在一个六边形的木托上。它让我想起我早先画过的一个概念。我那时基本已经放弃六边形了，因为它们没法像矩形那样彼此嵌套。
我一直在找一个有标志性的头图，放在每个月页面的最上面，但一无所获。上一版里的圆形很干净，却不太让人记得住，也不够有意思。这次喝茶让我觉得，也许该回头再看看六边形这个想法。
它做出了一个视觉上有意思的元素，同时还可能承载很丰富的信息，这让我很兴奋。因为这个点子太依赖内容，所以直接拿真实数据开始做，会比试着做一张有几百个动态图标的精确设计稿更好。
这是第一个写成代码的版本。它算不上好看，但接上了实时内容，也为我接下来要摆弄的那些元素搭好了基本布局。
把每一项做成六边形，只是一个简单的CSS图像遮罩。整组地点在3D空间里被稍微扭了一下，让透视更有意思。边缘一圈淡淡的阴影，把注意力留在中间。
Foursquare的地点分类在这里出了大力，它给出了一套分类体系，还提供了很好的图标来代表它们。
我做了一套颜色编码，方便区分不同的地点，这一下就把每个月的规律显出来了。自然和公园是绿色，机场或火车站是青色，餐厅和咖啡馆大多是橙色，住处或酒店是不起眼的灰色。
潜水很多的那几个月，绿色很多。我在纽约的时候，红色很多，都是意大利餐厅。日本那趟旅行有很多粉色，因为寿司。
页面顶部设计好、代码也写完之后，我得想清楚下面的时间线怎么填。数据都在那儿，只是需要好好呈现。
迷失在六本木
从茶室回来的路上我迟到了。我光顾着跟那位穿和服的女子练日语，忘了时间。我本该在不到一小时内从Park Hyatt Tokyo退房，可我人在城市的另一头。按Google Maps的说法，坐地铁要43分钟。
我赶上了开往麻布十番站的车，上路了。“没问题的，”我对自己说，“我一般5分钟就能收拾好。”
上车之后，我一门心思想给自己的Instagram照片编一句俏皮的说明，等我抬头，我那一站正好开过去。糟糕。我在下一站下了车：六本木。
我盯着地图，琢磨该往回坐还是往前坐，一边生气：我这么喜欢的地铁系统，偏偏在我最需要的时候掉了链子。过了好一会儿我才反应过来自己看的是什么。
这里有一串地点，排在一条细线上，配着大量文字。所有标签都稍稍倾斜。巨大的鲜艳圆圈把不同区域区分开来。这就是我一直在找的东西！
这种在时间线上呈现信息的方式，正是我把Explorer 2.0设计完所需要的最后一点灵感。倾斜的标签解决了我的堆叠问题，而又大又醒目的圆圈在紧凑的排版里也很好懂。
我想留出半个页面来画这一天其他相关的细节，用上面的地点给它们提供何时何地的上下文。我试过让一张地图填满剩下的空间。
每一天我想画的东西有很多：睡眠、饮食、交通、心情、血糖等等。眼下我先用手边最容易拿到、而且每天变化最大的那些：交通、GitHub提交和心率。
给地点名字上色，让我能把它们排得更开，同时和彩色图标保持很强的视觉关联。
我试过在背景放一张地图。从视觉上说，我很喜欢它带来的那种丰富的背景效果。但一旦把不相关的数据摆在上面，就显得太乱了。
我没用地图，改成了一张虚化的Instagram照片。这让每一天的数据都有了独特又有意思的背景。而在我什么别的事都没做的那些日子里，Github的提交和部署记录会把空白填上。
经过好些天缓慢的推进和试验，我几乎是绕着地球在找答案，忽然之间，一切都对上了。加上最后一层的那一刻我就知道，就是它了。
设计阶段终于结束了。该开始动手做了。
2014年7月：旧金山
在此之前，我一直拖着没去想这东西到底怎么造 & 技术栈怎么选。我想把全部时间花在设计和前端上，不被基础设施或代码分心。原型阶段一直用超级简单的Jekyll，对快速推进、能试很多点子来说是关键。所有东西都是静态的，我可以很方便地把有意思的版本存下来，以后当参考。
我邻居一直在推荐Node。一堆人建议我用Rails。我以前用过Django，也挺喜欢。我知道语言其实没那么重要，我只需要挑一个，然后开始写。
我花了一天玩Ruby on Rails。很多人推荐过它。要是以后想让别的开发者加进来，它看着是个稳妥的选择。花了一个小时才把Hello World跑起来 & 上线之后，我意识到进度太慢了。我需要把全部时间用来造东西，而不是学一个新框架的门道。
我决定用Python和Django，很久以前我就用它做过一家分析创业公司。Heroku让部署和管理服务器比我习惯的AWS轻松得多。几分钟内，网站就上线了。几小时内，所有页面URL都接上了空模板。几天之内，大部分模型都跑起来了，也在从各种API导入数据。这下算是烧起来了。
我想接的大部分服务都有不错的OAuth 2.0 API，文档也好，所以把账号连上、把需要的数据拉过来，出乎意料地容易。我在Heroku scheduler里设了个任务，每10分钟检查一次有没有新数据，有就导入。
前端
- SASS
- Compass
- CoffeeScript
- LiveReload
- jQuery
- PJAX
- jQuery Throttle
- D3
网站加载一个全局CSS文件和一个全局JavaScript文件。它们是由一堆更小的SASS和Coffee文件拼起来的，好让开发时一切都有条理、模块化。
开发时我用Mac应用LiveReload，改了CSS或JavaScript就立刻刷新网站。每次改动它都能省下几秒钟，在要迭代几千次的时候，这特别有用。
后端
- Python
- Django
- Postgres
- Memcached
- Heroku
Heroku有一些很有帮助的教程，教你怎么搭起他们那套东西。部署非常简单：一句“git push heroku master”，改动就上线了。我经常往GitHub推，想部署的时候就往Heroku推。
有一阵子我很担心那些查询很重的页面的性能，但Memcached救了命。因为这个网站太静态了 & 只有导入新数据时才会变，所以我几乎能把每个模板都缓存下来 & 瞬间返回。
最后冲刺
设计过程能从频繁的视角切换和打断中获益。有时候我会在聊天聊到一半时想通，或者在街上看到什么之后想通。
但写代码时，我有时喜欢有几天完全不被打断的时间，好专心把上千行代码存在脑子里。我两个室友都出城一周，所以我落得清静。
设计定了，数据也流进来了，发布前我只剩一长串bug和性能问题要修。我决定把自己锁在房间里，直到这东西上线为止。
我在前端和后端之间来回跳，往页面上接更多实时数据，然后再把它收拾干净。
每次用CSS做东西时，我都先用极其简单的样式把布局做出来。目标是把所有东西摆到对的位置，而不是让它好看。第一步是确认后端把我需要的全都输出来了。我想先把这件事了结，然后就能一直待在同一个CSS文件里。每个元素都先给个background: red或者background: blue，只为验证选择器有没有生效。然后我做布局和定位，考虑响应式和各种边界情况。这些全都理清之后，我一般会新建一个样式表，把设计细节都填进去，让它变好看。
用上和上面六边形一样的颜色和图标，一眼就能感觉出一天里都是些什么类型的地点。家一直在重复出现，但没什么意思，所以我把它弱化了，好让其他地方更突出，用白色圆圈代替蓝色。
所有标签现在都藏起来了，每条时间线都更简单、更轻。点开某一天就会展开，露出更多信息。
我加的第一样东西是出行数据，用步行、跑步、开车等等把各个地点连起来。所有元素都是绝对定位的，所以我能按开始和结束时间把每一项画上去。
虚化的Instagram照片让每一天有了更有意思、更多样的背景来承载数据。之后我又给每一天加上了真实的心率数据。
稍微加点样式，页面就开始成形了。地点之间画出弧线，表示出行的方式和时长。步行这种无聊的事画得很小，而一次长跑或一趟飞行会用鲜亮的颜色，一眼就能看到。
右侧留了一点空间，显示城市，以及去前一天和后一天的导航。
有些日子空白很多，看上去我像是整天待在家里或者在睡觉。Github的提交把故事里剩下的空档填上了，显出我什么时候在干活、在干什么。
月份页面
每一天 & 每个月都有了自己的页面之后，我开始做月份列表，以及在所有页面之间切换的动画。
最初这些月份是竖着排成一列的，带着城市和去过的地点类型的细节。当月最好的几张照片也能帮你大致了解发生了什么。
这本来是为响应式的移动版设计的，后来我意识到把每个月做成一个小舱体，会比列表视图更有意思。每个月都更想让人点，看起来像一个可以互动的物件。
Mapbox
我想要一个带地形和街道的低调背景，好给我的跑步一点上下文。Google Maps很棒，但我想要更能自定义一些的东西，所以决定试试Mapbox。这个服务看着有点贵，但设置过程真的很简单，我觉得为了一个配着好地图的漂亮首页，这钱花得值。
Runkeeper在跑步过程中每5秒提供一组GPS坐标。我用Mapbox的javascript库把这些点连成一条SVG线。一开始我担心得写很复杂的代码，才能让线从起点长到终点，结果发现只是一个用stroke-dash相关CSS属性做的简单过渡。在这个例子里，把offset降到0，线就会一点点显现出来。
path.line {
/* Assuming a stroke length of 100px */
stroke-dasharray: 100px;
stroke-dashoffset: 100px;
transition: all 500ms ease;
}
path.line.loaded {
stroke-dashoffset: 0;
}评图时间
每天晚上Stammy下班回家，我们就一起过一遍新功能和新改动。卡住或者需要第二意见的时候，我也会把链接或截图发给Yuri、Dustin和其他朋友。有别人的视角、让新鲜的眼睛定期看看这个项目，真的很有帮助。很多想法最初都来自讨论，或者来自“有什么地方不太对劲”这类反馈的回应。
听取反馈不等于照单全收，也不等于把别人不喜欢的东西都删掉。反馈能告诉你做出来的东西讲不讲得通、好不好用，但不会告诉你该做什么，或者愿景该是什么。愿景是没法众包的。一个为每条抱怨都打上补丁和权宜之计的项目，最后往往很难迭代和维护。
强烈的反馈通常是好兆头，就算是负面的，也说明对方投入到有了情绪。这其实很少见。如果所有人的反馈都含含糊糊，或者根本没什么可说的，那通常说明这个设计不够激动人心。如果所有人都讨厌它，那它可能糟透了，也可能妙极了，有时候很难分辨。
不断收集反馈很重要，但也不要一有负面意见就丢下一切、或者把整个想法推翻。我一般会把这些攒到下一个版本，除非出现了必须回到起点重来的灾难性问题。
比如说，在现在这一版里，我收到很多反馈说出行的那些弧线讲不通。为了修它们而推迟发布不合算，但我们下一个版本会换一种做法。
找不同类型的人要反馈也很值得，尤其是那些不太懂技术、或者不习惯这类界面的人。看到有些人的思路和操作方式如此不同，会让人沮丧，但也让人开眼。这就是我很喜欢在咖啡馆或者找完全陌生的人做测试的原因，你能得到一些很妙的洞察，也会发现有些自以为显而易见的东西，别人根本看不懂。
再打磨、再周全的设计也会有粗糙的边角，都能从彻底的测试里获益。
聊天头像
联系表单太2006年了。我想要一种和访客互动的有趣方式。我的想法是，很多人其实有话想说，但大多数人被一个一本正经的联系表单吓住了。反正我一般是这样。
我希望它有趣、友好、有人味，尽管网站其他部分的视觉风格相当未来、相当机械。我想让这个网站酷，但别酷到让人不敢靠近。
我以前每天都用Facebook的聊天头像跟人说话。那是一种非常自然的设计 & 交流方式。我想在这里做出类似的互动，一种大多数人已经习惯了的互动。将来我甚至可以让人通过Messenger实时和我聊天，把这个网站当成聊天客户端。
关于页面
这个项目依赖了很多别的软件和硬件。我想有个好办法把功劳都记上，也把我在用的所有工具分享出来。我决定做一串简单的“powered by”logo，把所有伙伴排在一起，鼠标悬停时显示它们的名字和贡献。
我还加了一些关于卷饼的统计，让它更好玩、更有人味，不至于像一块医疗仪表盘。再说了，谁不喜欢卷饼呢？
由糖驱动
快到最后的时候，我为了保持专注、整夜干活，吃下了大量的糖。这对身体糟透了，但确实能让我脑子清醒几个小时，几乎什么问题都能解开。问题越难，我需要的糖就越多。
2014年7月11日
发布日
那天是星期五。网站基本就绪了，所以我决定去Alex那儿做最后的收尾。这种事有第二双眼睛总是好的，何况身边有一位世界级的Javascript专家也不吃亏。
我的待办清单上只剩一堆小事：把聊天头像真正接上发消息的功能、加上twitter按钮、修好meta描述、写第一篇文章、更新CDN资源、想好发布的推文，等等。
就在我们坐着干活的那几个小时里，他做了一个Chrome扩展，把我们的年龄计数器变成了启动页。
我们简短讨论了一下：周五晚上发是不是太晚了，还是等到周一大家都回到电脑前更合适。再等几天大概更明智，但那时我已经连着一周不停歇地靠肾上腺素写代码，累坏了，觉得要么现在，要么永远。
我改了几个DNS设置，发了条推文，我们就上线了！
因为是周五晚上，最初的访问几乎都来自手机。我大部分时间用的是桌面版，但绝大多数人体验到的是那个基础的移动实现。
幸好我在最后花了很多时间做响应式。大家似乎都挺喜欢，也都只用手机分享。如果重来一次，我会在移动体验上花更多时间，因为我明白了那是很多人第一次、也常常是唯一一次接触它的方式。
一切看起来都很顺利，直到我收到Stammy的私信，说我有1517磅。这就很奇怪了，我感觉自己轻多了。
Sport页面的代码我很久没动过，不该突然坏掉。看了页面源码才发现，原始数值里的小数点变成了逗号：151,7而不是151.7。Javascript忽略了逗号，把它解析错了。我清了缓存，页面就恢复正常了。奇怪……
那天晚些时候，我在酒吧里用手机给朋友看这个网站，注意到其中一个页面标题变成了俄语。诡异。我立刻把它和之前那个bug联系了起来，两者都应该是某种失控的国际化代码造成的。
当然，我只能回家查个究竟。
结果发现是Django里一个简单的设置造成的：数字和日期这类东西的国际化（常缩写成i18n）被打开了。再加上缓存系统，某些区块在被国外请求过之后就被污染了。把这个功能关掉是一行代码的修复，也保证了全世界所有人看到的是一致的体验。
这只是众多例子中的一个：一个很小、很不起眼的线索，指向某处一个需要查清的bug。
那天晚上，忙了一长周之后，我筋疲力尽却很开心地睡着了。网站终于上线了，几千人通过我的推文看到了它。我打算周末好好休息，下周再想办法把它推给全世界。结果证明，这一步不需要了……
第二天早上
我睡着的那几个小时里，人们已经把它发到了Reddit、Hacker News，还有互联网的各个角落。我和一个朋友约了第二天早上7点跑步，所以反常地起得很早。幸好我起了。
我的手机被通知淹没了。几百条推文，一堆邮件。我试着打开网站，慢得不行。我看了看分析数据，过去几个小时流量冲上了天，服务器被压得几乎没响应。好在用Heroku扩容相当容易，我把dyno从2个加到了8个。有了足够的服务器扛住这波极端流量，一切又能瞬间加载了。
几个小时内，网站访问量就超过了十万。到了下午，二十万。看来大家挺喜欢。推文和消息还在不停涌进来！
看到形形色色的人在评论、在转发，真的让我很谦卑，尤其是我原本都不确定会不会有人看懂或者喜欢它。有几条推文特别让我高兴，来自我非常敬佩的人。
我注意到有几百人在问同样的几个问题：
- 那些动画是怎么做的？
- 你用的是什么技术？
- 你怎么知道自己的血液指标？
- 我自己怎么才能有一个？
回了头十几二十个之后，我意识到应该把整个过程从头到尾写出来。这个过程太有意思了，不分享出来说不过去。我手上有几百张老草图、设计稿和原型，从没有人见过。
这篇文章就是这么开始的……
尾声
我做这个网站，基本上是给自己玩的。我知道这就是未来，但不确定还有没有别人觉得每天花力气收集这些数据值得。但看起来至少有一些人非常感兴趣。发布之后，我收到了几百条消息，都在问自己怎么才能有一个。
几个月后，我决定开一家公司，叫Gyroscope。它现在已经跑起来了，任何人都可以注册，开始记录自己的生活。