April Zero诞生记
第一部分
这是我设计最初那版April Zero网站的第一章。我会分享一些草图、被砍掉的概念和早期原型，讲讲它一路是怎么演变过来的。
如果你也想自己用一用，现在可以注册Gyroscope。
2014年3月：灵感
动起来
我当时要和室友一起去巴黎。他是个很投入的摄影爱好者，通常我们去哪儿，他都会做 一个关于这趟旅行的小网站 ，塞满漂亮的全屏照片和视频。上一个是关于 我们的日本冒险。
几个月后再回头看总是很有意思 ，能看到我们做过什么的详细编年史，一路上每一步都有漂亮的照片和视频。
这一趟我们决定用Moves来记录去过的每一个地方。我是在SFO的安检队伍里装上它的，当时完全没意识到，这就是一场很快会变成执念的事情的开端。
有些人可能试过Moves或者类似的应用，也遇到过续航的问题。有很长一段时间，任何基于GPS或者运动的应用（Nike、Find My Friends、Highlight等等）都很难用，因为它们会瞬间把你的电吃光。 然后iPhone 5S出来了。 但当时传闻圈子都在议论他们即将推出的iWatch，Apple在M7处理器上的突破性发布几乎没人注意到，包括我自己。
一夜之间，很多事情都可以在几乎不耗电的情况下完成。一夜之间，大量丰富的内容变成了实时可得的。一夜之间，整整一代健身设备被淘汰了。硬件问题变成了简单的软件问题。Moves是少数几个真正吃到这波红利的应用之一。
心跳
差不多同一时间，有人跟我说起一个叫Cardiio的应用，能用iPhone的摄像头读你的心率。我下载它， 主要是因为我不相信它能行。 我当时真的一点也不在乎自己的心跳有多快。
但玩了几天之后，我着迷了。它最棒的地方在于， 只要大约15秒 就能测出来，如果算上你把手机从口袋里掏出来、解锁、打开应用的时间，也就30秒。
真正让我上钩的，是知道了 训练有素的运动员通常静息心率更低。 越低越好。这是一个非常简单的办法，能客观地测出我当下的状态。而且它很好玩。
有一周我注意到自己的心率异常地高，接近80或者90，而平时更接近60。我是在为什么事焦虑吗？ 我去跑了很长一段，第二天又测了一次。 回到60了。太有意思了……
就像我在自己身上装了个New Relic。我本来就习惯看图表、修问题。只不过这次不是服务器，是我自己的身体。
为了活着而跑
我之前的爱好是室内攀岩。我住的地方离Mission Cliffs只有几个街区，去那儿抱石成了我每晚的固定项目。但这项运动挺吃力的，很快我的肩膀就伤了好几处。
我改成了跑步。那时我刚从一段分手里缓过来，跑步是很好的排解方式。我以前偶尔用过Nike的跑步应用，这儿跑一英里那儿跑一英里，从来没跑出过什么像样的里程。那个靠GPS的应用以前会把我的电耗干，用起来很不痛快。
但现在有了M7，我的膝盖会比手机先撑不住。我本来还想买那种花哨的Garmin跑步表或者Fitbit，现在都不需要了。人很容易拿“缺一件重要工具”当借口，可 我需要的一切早就在我口袋里了。
一开始跑起来之后，把跑步的照片发到Instagram让我一直有动力、跑得也规律。他们有一套很方便的功能，能把地图、距离和Nike的logo叠到照片上。发到Instagram上带个#nikeplus的标签，就一定能收到世界各地跑者的一堆赞。
它把我的三样热爱凑到了一起： 跑步、摄影，还有被关注。 太妙了。那是个当跑者的好时候，Runkeeper、Strava、Nike等等，好工具和好社区都不缺。
看到每次跑步的所有数据，让我有了可以去优化、去变好的东西。我现在可以给自己出挑战、定目标了。
但几乎没有别的事情有类似的生态。我想把这种信息和动力放进我生活的每一个方面，而不只是跑步。这不过就是分析。分析我以前也做过。是时候开始画草图了。
血液指标
我的年度体检早就该做了。我做了所有常规检查，还要求把血检报告发一份到我邮箱，留作自己的记录。
第二周，我收到一份非常详尽的PDF。里面不只有我当前的数值，还解释了每一项的理想区间，并且分析了我的情况。我很惊讶自己的维生素D这么低，还有一些指标处在不太理想的区间里。这是非常了不起的数据，但它 被困在一个纯文本的PDF附件里 ，躺在我的收件箱中。它值得被对待得好得多。
从那以后我每个月都做血检，紧盯着变化。把它们放进一个仪表盘，会不断提醒我哪些地方需要改进。我押的是自己的一个理论：只要开始记录，就能开始改善。就算这个不成立，至少我心里有数，还可以更努力一点。
体脂
在 《四小时身体》 里，Tim Ferriss讲到他用过的各种工具和测试。其中之一是一台便携的USB超声设备，可以精确测量体脂率。我本来就在称体重，但知道体脂率能让我更清楚地看出到底是什么在变。
超声这个过程有点麻烦，要花几分钟，还得用一种专门的凝胶，但我发现它给出的数据非常准确，每天看都很有意思。你真的能用眼睛看进自己的身体里，看到自己有多少毫米的脂肪、肌肉和下面的骨头。
我能看到体脂在周末放开吃之后往上蹿，然后下一周掉得更低。我拿到的数据很棒，但那个应用的界面和呈现不怎么样。
我想看到它和我做的其他所有事情有什么关系。
我也相信这个说法： 只要你开始记录一件事，你就会开始改善它。 知道当前状态和变化速度，你就能做出更好的决定，快速迭代，搞清楚什么真的有用、什么没用。如果你在乎的东西一个都没接上仪表，那你基本上就是在盲飞。
我意识到自己得找到一个平衡：既要有心率、体重这种简单、可以高频测的数据，也要有体脂和血液指标这种更麻烦但更有洞察力的数据。它们合在一起，会构成一个非常好的仪表盘，讲出一个完整的故事。我也押在技术会快速进步这件事上，尤其是等这件事更流行、需求上来之后。如果哪天Kickstarter上出了个微芯片植入版，或者Apple开始用Apple Watch监测它，我只需要改几行代码。
2014年4月：最初的草稿
数据点组成的网格
我喜欢这种基于小方块的设计的想法和它的简洁：一个漂亮的网格，模块化的元素，以后还能升级。其中大部分可以靠API做到100%自动，而像“我最近的攀岩”这种手动的，也只要花几分钟。
就算我偷懒了或者忙疯了，这个网站也不会变得陈旧。我总还在跑步、在听音乐、在Instagram上发新照片！
画草图的重要性
一个项目的早期阶段，我大部分时间都在画草图和思考。不管是做设计还是写代码，我发现先把东西画出来能让我想得更清楚。
在纸上用草图工作之所以有力量，是因为它够快。它大概是唯一一种能让你以想法产生的速度把想法记下来的媒介。它让你把选项摆成看得见的样子，而不是全堆在脑子里，从而做出更有依据的设计决定。常常把两个方案画在纸上，哪怕画得再糙，哪个更好也就一目了然了。
Wacom数位板
画完纸稿之后，我很快在Photoshop里把这个想法画了一遍，确认它在数字环境下仍然成立。很多设计在纸上做成小缩略图时看着不错，数字化之后其实并不成立。草图这种风格有种魔力，能让一个糟糕的想法都显得体面、精致。在白板或者纸上工作的时候，很容易把比例糊弄过去，把文字塞进根本塞不下的地方，或者让元素占掉比它实际需要多得多的空间。
有时候我喜欢让早期的样稿保持草图的风格。这能让你继续像在纸上那样思考，一次只处理 一个变量。 既然布局和内容刚刚理清楚，现在我就可以加上颜色，验证对比度和比例是不是仍然说得通。质感、字体、背景图这些耗时间的细节，等这个方案被放行之后再说。
这一版看起来还不错，于是我发给了几个朋友。他们挺兴奋的，所以我继续在Photoshop里做更接近成品的样稿。 这个有戏。
我又花了几天整理细节、试了几种变体。我对内容和信息架构非常兴奋，这永远是最重要的部分，但那个风格和布局，我每次看到都没有被惊艳到。
这是一个扎实、好用的设计，但不是世界上最好的那种。
April Zero风格指南
这就是未来。能把关于自己的一切神奇地分析出来、分享出去，这件事的潜力和人类会飞、有了电差不多一样惊人。 我希望它给人的感觉，和它实际的未来感一样强。
做品牌的时候，我通常会拼一块情绪板，快速试出各种风格，找出传达这种气质所需要的元素。放什么都行：电影片段、照片、广告牌、别的应用的截图等等。我常常从动态设计和广告里找灵感，那些领域预算充足，背后是了不起的艺术家。Dribbble和Behance上也有很多好东西。
很棒的全息界面、很有未来感的东西，例子有很多，但我需要把范围收窄到一个更具体的子集。就像我人生里的大多数决定一样，我问自己： Tony Stark会怎么做？
我注意到反复出现的几个元素是： 全息叠层、同心圆、等轴视角，还有细线条。 要把这些放进一个产品里又不牺牲可用性，会很难，但这是一个很好的起点。
现在内容和风格都收窄了，是时候回到画板前了……
第二版
我想保留之前的模块化和架构，但不要那么无聊的布局。我决定把所有东西拆成一个个“小应用”，围绕特定主题来呈现数据。头两个可以叫“Sport”和“Explorer”。
把每个板块都收窄到单一的语境，才能形成连贯的叙述，而不是把一堆数据和数字直接砸给来访的人。
而且以后我可以上线新的板块，不用重做已有的那些。当时让我兴奋的其他一些例子有：
“Aviation” ：记录我考飞行执照期间的每一次飞行
“Underwater” ：记录我考潜水证期间的每一次下潜
“Digital” ：我坐在电脑前都干了什么（设计、写代码、录屏等等）
“Finance” ：消费习惯，以及成为亿万富翁的进度条
“Love” ：把我的约会生活量化，等等
也许有些东西得加个密码……
为Sport做设计
Sport这个板块会放所有和健身、医疗相关的东西，展示当前的血液指标，以及一段时间里的表现提升。
第一版是一个不同类型活动的信息流。我很喜欢血液指标的呈现，但觉得这个流太难快速看懂了。我只能看到最近的几条，给不出一个好的总览。
我想要一眼看到一整年的数据。要做到这一点，我需要更多聚合数据，也需要把所有东西都做得更紧凑。
这个布局更好了，但感觉不够高级。这个问题可以在开发过程中解决，加一些不动声色的动效和细节。
这是写成代码的静态版本。两侧更深的栏让它对比更强，也通过把内容栏往一边推，和首页连了起来。
我希望所有东西都可以探索、可以交互。把鼠标停在某个东西上，就会告诉你更多细节，底下藏着大量数据，都有可能被揭出来。
转盘
我看以前那些网站的分析数据时注意到一个规律：大多数人打开一两个页面就走了。哪怕后面藏着一整个世界的好内容，大部分访客也永远到不了那儿。点一下其实是挺大的一个承诺，把每个板块都认真逛一遍，没人会这么干。
我想做一种新的界面：一开始你不需要下决心点任何东西，只要把鼠标移来移去就能探索，配上轻巧、好玩又不费力的微交互。
于是这个转盘诞生了。我想做一个用起来和最初那代iPod一样好玩、一样有革命性的东西。
它也让我可以摆脱无聊的方形布局。情绪板里有一堆圆形的、会动的元素，这个设计能让那些细节自然地存在于界面里。
等我做出一版足够让自己兴奋的样稿，就该开始写代码了！我手上已经有一个之前做博客实验时留下的Jekyll底子。我切了一个新分支，开始写这个转盘。
早期的代码原型
这是一个很好的例子，说明能同时设计和编码一个问题有多有用。页面看起来好看很重要，但它摸起来什么感觉、怎么动，同样重要，也同样需要想清楚。为此，我用一点轻量的Javascript拼了个基础原型，跑在我原本打算用来写博客的那个Jekyll容器里。
第一版看着不怎么样。版本1（上图）非常粗糙。让所有东西转起来并且对齐有点棘手，所以我在开发和调试的时候用了颜色很鲜艳的圆。
版本3（下图）加上了环形元素，还加了更多交互用的javascript，比如鼠标停在文字上时让圆圈转起来。
版本5加了进场动画，这比我想的难，因为我是在给那些本身就在动的元素做过渡。
版本8加了一个和进场设置不同的退场动画，让点击某个东西这件事感觉更有回报。
每一次迭代都解决一个具体的问题，或者加一个新功能，让它好那么一点点。它用起来越来越好玩，这让我挺惊喜的。这印证了我的想法：这里确实有值得花时间的东西。 再加些改进和设计细节，这会是一个很棒的体验。
于是我继续做下去，每天花好几个小时刷新页面，试着把动画做得更顺、更有意思、节奏更准。
我做得挺开心，但我需要更多验证，确保没有设计上的问题。那阵子我都在各种咖啡馆里干活，于是我拉了几个陌生人来玩这个网站。
除了 “试试这个” ，我没给他们任何说明，把笔记本递过去，紧盯着他们的操作。我发现了几个问题，大多是点在了界面上其实不是链接的地方。我很快把链接区域扩大，把常被误点的地方也包进去，再加一些悬停效果强化它们的可点性。很快，我的测试志愿者们在导航和理解这个网站上就没什么障碍了。
结果它和我希望的一样直观。更重要的是，他们看上去真的很享受在上面乱晃、点各个板块，被自己触发的那些动画弄得有点惊喜、有点兴奋。
对首页的核心设计满意之后，是时候去啃这个网站里我最怕的那部分了。
Explorer
一大堆技术问题就要登场了。前面那些板块用基础数据在Photoshop里画草图、做样稿都挺容易，但这一个我需要真实的内容。我申请了API key，开始从Moves导入自己的数据。
在旧金山待了几周之后，我意识到自己需要更多样的数据来做。于是我抓起Macbook和护照，去了纽约做调研。如果我想在这个板块里把那种感觉传达出去，我得真正进入 探索和冒险的心态 才行。
现在我得想清楚怎么展示航班、时区变化、在中央公园的跑步，还有我吃掉了多少披萨。事实证明这一趟去得太对了，因为我很快就撞上了一堆Moves处理时区的问题，那些都是我必须考虑进去的。要是我一直待在旧金山，指望用巴黎那批老数据做国际测试，那下次我跨时区旅行的时候，一切都会炸掉。
回程的飞机上，我开始处理Moves的所有数据，把它们排进一条基础的时间线里。看着有点乱到读不懂，但它跑的是我这趟旅行的真实数据！
最大的设计决定之一，是让时间线横着走，把日期一天天叠起来。
几乎所有其他类似的设计都是竖着排的，正好避开了我遇到的文字重叠问题。但我认为，能把所有天放在一起互相比较，是必不可少的。我希望每一天都是一根轴，以后可以往上挂很多丰富的数据。至于标签怎么显示，只能另想办法。
我开始琢磨一个算法，把标签漂亮地错开排到4层上。它会分析各个地点之间的时间差，确保文字总有足够的空间显示出来。
版本9用的是浅色背景，但到版本10我换成了深色背景，让地点更跳出来，也和网站其他部分的风格更搭。
我决定一开始只显示重要的地点，把鼠标停上去才展开这一天的更多细节、露出小字。我还把家或者酒店这类反复出现的地点弱化了，因为它们虽然待的时间长得多，却没别的地方那么有意思。
然后有一天，我决定去公园里露天办公。这个板块毕竟叫Explorer。
结果…… 我什么都看不清。
最早那版白底的完全没问题，但新的、配色改进过的深色版，在阳光下彻底没法用。
这就是为什么 在真实场景里用自己的产品极其重要。 你离真实场景越远，哪怕差的那点看起来无关紧要，被打个措手不及或者留下设计缺陷的可能性就越高。这也是为什么我喜欢在飞机上、在咖啡馆里、倒过来，还有其他会招来奇怪眼神的方式下干活。它会打开你的视角，暴露出那些本来会被忽略的问题。
现在我得做个决定：是保留深色，因为对95%的人来说它在室内更好看；还是干脆推倒重来做成浅色。这事既然发生在我身上，就可能发生在别人身上，更重要的是，它可能还会发生在我身上。
有时候你卡住了或者遇到坎，就该硬着头皮往前推，往这个问题上砸时间，直到它被解决。另一些时候，换个挡、从另一个角度切进去更好。我留了一个深色版（11）和一个浅色版（12）存档，然后决定去处理别的问题。
呈现旅行
第一版把旅行和地点放在同一行里。我想试着让它更直观一些，改成把从一点到另一点的旅行表现成一次次跳跃。
聚合数据
我想在顶部保留那张显示我当前位置的世界地图，同时给这个页面加上整体的统计，不用翻30条时间线就能快速看到摘要。我决定再加一层结构， 把所有东西按月份拆开。 每个月都有自己的统计数据，还能互相比较。
看着自己的习惯一个月一个月地变，这件事非常有意思：有些月份我在旅行、在机场里度过，另一些时候我攀岩攀得很多，或者一天里大半时间都泡在咖啡馆。从纽约回来之后，意大利餐厅的数字很快掉了下去，被墨西哥卷饼取代。
做响应式
等我开始做响应式版本的时候，事情开始往下走了。在桌面上很好用的横向时间线，在小屏幕上装不下。它得竖过来，但我又不想为了移动端就把整个网站的功能都牺牲掉。我开始重构代码，让它能同时跑两种方向，并且在屏幕尺寸变化时平滑切换。
让移动版独立出来又不搞乱桌面版的代码跑通了。现在我可以从零开始为移动端做设计，而不是硬把大屏那一版塞进小空间里。
我对着同样的老数据玩腻了。设计在往前走，但总还缺点什么。我需要换个环境，换个视角。
我当时在一家咖啡馆里干活（5月6日，Coffee Bar），这时候朋友给我发来了消息。
来得正是时候。