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

2017-12-13 16:38:31 +08:00
LarryDev  LarryDev

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

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

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

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

效果展示图如下

为什么要做这样一款 App ?

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

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

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

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

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

原型和设计稿的确定

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

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

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

视觉规范如下图

步入正式开发阶段

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

最后

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

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

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

2512 次点击
所在节点    推广
2 条回复
lwghappy
2017-12-13 17:30:16 +08:00
看了楼主的几个 APP,界面设计真的很赞,从 idea、设计、UI、开发.....这全栈真的很全:-)
LarryDev
2017-12-13 18:00:37 +08:00
@lwghappy 感谢大佬支持~

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/414436

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX