有温度的 Coder： 0 到 1 设计&开发一款高质量精品 App

关于有温度的 Coder 这个名字的由来可以移步： http://zhuanlan.zhihu.com/p/30692301

持续开发了 6 款作品，这个过程沉淀的关于开发、产品、设计相关的一些内容，我总结了一套从 0 到 1 设计&开发一款 App 的课程，从课程开始至今已经持续了一个半月的时间。

目前完成了 C/Object-C 全部基础知识的输出，同时完成了一个便签类项目的实战，现正在进行第二个情侣类项目的实战，涉及设计、后台、前端、产品运营的一些内容，实战难度由易到难。

首先介绍一下第一个便签类项目实战的过程：

效果展示图如下

为什么要做这样一款 App ？

1. 提到便签，我更多想到的是那种彩印的便签纸，我们会通过便签纸规划 /记录一些将要做的事情，贴到自己醒目的地方时刻提醒自己，现在我偶尔还是会用便签纸，但更多的会使用一些工具来完成，比如 Mac 电脑自带的有便签工具，我的 Mac 右滑上一屏就是这样的。

2. 自己的生活场景中，如果不在电脑旁，会经常用到手机端的锤子便签记录一些短而精简的文字，记录的内容有自己突发的 idea，也有生活中的一些琐事，对于我这种健忘症患者着实有效。

3. 考虑到学员的一些基本情况，第一个项目不易太复杂，所以不涉及后台，本地数据库存储数据，尽量简约、美观的去呈现。

带着以上 3 点的想法开始了这款便签类 App 的开发。

期间我没有做相关的竞品分析、市场容量分析等。

原型和设计稿的确定

确定原型的过程中，考虑到只有便签入口，功能过于单一，所以新增了两个功能模块，分别是胶囊、目标。

• 胶囊：每天写给现在或未来的自己一段话，每天只有 1 个胶囊，少或许就是多。

• 目标：每天给自己一个小目标，倒计时显示距离目标的时间。

所有的功能模块确定后，原型输出线框交互图开始了 App 的设计，设计过程的一些步骤。

1. 视觉设计，涉及 Logo、图标、配色、切图，输出一张完整的视觉规范。
2. 确定主导航、标签栏、主菜单。
3. 开始设计四个标签栏主界面的内容、布局。
4. 确定多层级界面的内容、布局。
5. 优化所有界面布局的细节。
6. 输出整个 App 设计的界面效果图。
7. ....

视觉规范如下图

步入正式开发阶段

码代码搭建框架完成具体功能开发，同时配合 PPT 输出每天要完成的内容。

最后

如果你想了解关于课程的基本介绍，如下图，如不需要请忽略~

双十二刚过，接下来的圣诞节又要来了，所以优惠活动从今天开始起至圣诞节那天止报名课程 8 折优惠。

可以添加我的微信号报名：lishichao706，拉你入独立开发者讨论群。