3 天时间，我开发了一个自己的待办清单 App

2018 年 7 月 24 日 少数派

编注：Listify 是一个简约的待办清单应用，在 Product Hunt 上得到了 500 多个赞，并获得了 7 月 15 日的 Product of the Day。这篇文章中，开发者记录了应用的开发历程，带你看看他是怎样用 3 天时间开发出 Listify 的。

长按二维码关注少数派（ID：sspaime），在后台回复「Listify」即可获得下载链接。

作为一个独立 App 开发者，独立开发自己 App 的日子已经过去了三个年头。想要开发一款 Todo 应用也是我很早就考虑过的事情，但是在 iOS 的应用环境中，最不缺少的就是这一类应用，从简单易用的 Wunderlist 到大而全的 Things 3。因为这一类应用的百花齐放，我也就暂时搁置了去做一款 Todo 应用的想法。直到几天前女朋友提出她需要一个简单好用的 Todo 应用，没有花哨的功能，只是记录下每天要做的事情。我这才将开发一款新 App 的想法提上日程。俗话说得好，女朋友提的需求，跪着也要写完，那么这篇文章将会讲述开发中的故事。

Listify

▍原型设计

想要设计一款 App 那么肯定不能直接打开开发环境动手写，至少需要知道这个 App 有什么功能，最终我决定实现一个可以创建多个分类列表的 todo list，然后标记完成了哪个任务就把那个事项清除掉，就这么简单，两句话就把功能需求讲完了。

那么接下来，为这个 App 取一个名字吧，取名字的过程我们想了很久，因为很多 Todo 应用的名字都大同小异，xxlist，xxtodo，xxdo。想了一些时间最后将这款 App 命名为 Listify，是 List + ify 英文后缀，意思是将一切待办列表化。

有了名字，那么在开发环境上就可以建立项目了，不过在此之前，得先有一个大概的设计吧，于是我打开 Sketch，画出了 App 的第一张原型设计：

整个界面背景为淡灰色，每一个 List 用一个卡片实现，不同的卡片拥有一个不同的主题颜色加以区分，底部打上了很宽但是很浅的阴影来和背景区分并且产生立体的效果。卡片里就是待办事项，完成的事情会变成淡灰色并且划掉，右边的 CheckBox 会被选中。很简洁的设计。

▍交互设计

这样的界面是很简洁，也很好看，不过交互就成了问题，我以前开发的 App 都会给用户明确的交互，按钮是我常用的控件，但是设计成这样很难再去添加一个按钮了，在 Android 的设计规范中中是有右下角的一套 Floating Action Button（FAB）可以用，但是加上去又会破坏整体性

那么只好用手势了，在移动应用中上拉一个列表执行添加或者刷新操作是很常见的，所以上来添加新的 todo 的交互就定下来了，刚好 iOS 自带组件有一个 UIRefreshControl 组件可以轻松实现（是的，懂开发的设计师就是不一样，从来不在设计上给自己挖坑）。

那么既然交互和原型设计都做好了，直接打开开发环境来实现这个 App 吧！

▍开发

「定实现一个可以创建多个分类列表的 todo list，然后标记完成了哪个任务就把那个事项清除掉」，这是我在原型设计上写到的，当时给我的感觉是，好简单啊，我只需要实现一个两张数据表的数据库然后去读数据然后就能把那个主界面绘制出来啦，估计从 9 点写到晚上一两点就能实现一个能用的东西了，毕竟我也独立开发过比较大型的应用，写个这个对我来说不是很困难，明天就能交差了。

于是我花了 2 个小时才实现了主界面的大概样子……从空的卡片，到加入主题标签，到加入待办任务，并且，这样实现的界面还不是动态的。

Dev

并且，我远远低估了这个项目的规模，这个 App 听起来很简单，列表，待办，就这两个东西。

学过数据库的同学都知道，一条数据，拥有增删改查（CRUD）四个操作。

想要有一个新的 todo 列表，就得去创建他，想要创建，那就得再写一个界面，还要搭配删除和更改的操作，待办事项也是一样的，也得再去实现一个页面。并且这些东西都有了，那总得有个设置界面吧，于是又多了一个界面吧。这么多待办事项，删掉了总得归档吧，那归档又得再多一个界面，就是这样，需要实现的界面一个一个多了起来。这真的是跪着写了。

▍不断增加的功能

好的，既然要实现这么多界面，那我还是好好写吧，写一个可以上架的应用好了，那么原本这么点功能就拿不出手了啊，别人家的 App 都有通知功能，我没有那不是很不好意思。一个列表的任务总得可以排序吧，于是数据库里又得多一个字段。

在添加功能的同时，设计也在不断地变更，下图左边是一开始的添加 Todo 设计，主色为黑色，选择不同列表的地方使用各自列表的主题颜色，但是后来发现，因为列表的主题色很多，所以很乱，就改成了右边这个选中一个列表的时候整个界面跟着主题色变得方案。

Add new todo

在 todo 列表添加界面也做了相同的设计，并且为 todo 列表管理单独做出了一个界面用来排序，编辑和删除。

New list

后来觉得要是在主界面不想看的卡片可以折叠就再好不过了：

Fold

就这样，原本的界面功能在增多，又有更多的新界面需要设计出来。还有就是交互上的方案的增加，在主界面中根本没有地方放下一个设置界面的入口，思来想去最后选择了用两个手指来捏合（Pinch）屏幕来进入设置。并且，摇晃手机可以清除掉已经完成的任务。不过这样的交互必须有人提前告诉你才行啊，要不谁会知道呢？

于是，在实现了这些功能之后，时间已经过去了两天半，远远超过了我五个小时拿出一个可以用的原型的预期。

▍图标

App 快做完了，我也准备把他拿来日常使用了，那么没有一个图标可不行啊，于是又花了一点时间想图标，最后选择了倒数第二个。

▍用户引导

前两段段最后提到了一些很难想到的交互，于是第一次启动的用户引导界面就成了重要的一环，虽然这个环节开发写的代码很少，但是要画好多图倒是真的。

▍汉化 & 测试

为了防止有的用户因为没有中文给差评，所以多语言也是必要的。

在最终发布之前还需要在不同的机器上去测试确保界面适配没有问题。

▍捐助

这是最没有必要的一个界面，我开发的 App 都会有一个捐助页面，因为都是免费提供的，但是下载量再高也没有几个人会去捐助我。

▍尾巴

列表，待办，两个简单的元素，却需要这么多界面的承载，这就是开发一款 App 的整个过程，过程虽短却是完整的，和去年的三个月，我将这款记账 App 带到了这个世界不同，这个轻量级 Todo App 在三天之内全部开发并且测试完成。Listify 经历了一个完整的产品研发周期，从原型设计到打包发布，来到了这个世界，欢迎免费去 App Store 下载。