惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Vercel News
Vercel News
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Apple Machine Learning Research
Apple Machine Learning Research
T
Tailwind CSS Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
人人都是产品经理
人人都是产品经理
V
V2EX
量子位
Last Week in AI
Last Week in AI
Jina AI
Jina AI
博客园 - 【当耐特】
爱范儿
爱范儿
宝玉的分享
宝玉的分享
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Hugging Face - Blog
Hugging Face - Blog
博客园 - 三生石上(FineUI控件)
有赞技术团队
有赞技术团队
小众软件
小众软件
IT之家
IT之家
博客园_首页
博客园 - 聂微东
S
SegmentFault 最新的问题
阮一峰的网络日志
阮一峰的网络日志
博客园 - 叶小钗

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
三天时间,我写出了自己的 Todo 应用 - 少数派
2018-07-14 · via 少数派

编注:Listify 是一个简约的待办清单应用,在 Product Hunt 上得到了 500 多个赞,并获得了 7 月 15 日的 Product of the Day。这篇文章中,开发者记录了应用的开发历程,带你看看他是怎样用 3 天时间开发出 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)可以用,但是加上去又会破坏整体性

FAB

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

UIRefreshControl

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

开发

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

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

Dev

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

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

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

不断增加的功能

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

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

Add new todo

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

New list

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

Fold

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

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

图标

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

Logo

用户引导

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

引导

汉化 & 测试

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

汉化

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

 

捐助

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

donate

尾巴

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

> 拿不定主意选什么 App,下载少数派 iOS 客户端、关注 少数派公众号,我们帮你做选择 🔍