[iOS]探秘一款 APP 的制作全流程

下载链接在这里，点击前往，或者你也可以去 App Store 搜索 NewPan。

01.原型图

俗话说，万事开头难，然后中间难，最后结尾难。

我第一次尝试自己像产品经理一样去考虑问题，去规划原型图，去思考用户体验。其实功能很简单，主线就是让用户从相册里面选择一张照片，放到没有刘海的界面里去预览，做一些放大缩小移动的调整，然后生成一张没有刘海的照片，最后将这张照片保存到相册中。还有就是衍生出为刘海换颜色的功能。

主线要保证连贯，不能打断用户的操作，所以我没有采取每完成一步就用导航栏 push 到下一个界面的方案，这样体验很差。而且我希望能获得一种使用上的沉浸感。所以我只能在一个界面里把调整和预览以及保存功能全部包含进去。

02.设计图

移动端开发或多或少都懂一点设计，但是那是看设计师的图，如果真的让程序员去设计一个界面，那还真不容易。

下面是这个简单 APP 的 Sketch 设计图的截图。

你如果下载了我的 APP，你会发现就那么 3 个界面，但是背后我做了不少的尝试和思考，尝试让这个小创意变得更加的酷，更加的漂亮，细节更加的到位，让你使用时能体会到我对产品的敬畏之心。这也是这个软件收费的原因。

02.1、首页

首页是下面这样的，背景是用户当前选择的照片，再覆盖一层毛玻璃的效果，然后才是菜单栏。这里有两个问题，第一，为什么要把用户选择的照片当做背景？第二，为什么在用户的照片上面盖一层毛玻璃，而不是直接显示？

我觉得第一个问题，如果我自己搞一个颜色做背景会显得很单调，而选择用户的照片可以让界面变得更加多姿多彩，变得更酷。另外一个，也可以提示用户当前选择了哪张照片。

第二个问题，我觉得是我对我用户的尊重。可以想象一下，如果用户是选择了他孩子的照片，那菜单栏很大可能是直接盖在孩子脸上，这是我不愿意看到的，甚至我认为这是一种不尊重。而如果盖了一层毛玻璃就会很大程度上改善这个问题。

02.2、预览页面

预览页面顶部和底部都有控制层，它们都会自动向上向下隐藏，隐藏以后，用户看到的就是当前选择的壁纸界面。可以进行缩放和移动，调整到喜欢的角度，点击预览就能进入第二个和第三个页面进行预览。

同时，也能进入相册进行照片选择，选择完成以后还是会来到预览界面。

02.3、刘海颜色选择页面

这个算是我的独创 idea，因为到我写这篇文章为止，没看到 App Store 上面类似的功能。下面的颜色都是从锤子手机的内置主题色里选的，名字都很好听，颜色也很优雅，算是向我那坏掉的 Smartisan T1 致敬，喜欢锤子科技的朋友可以当做一个彩蛋。同时，还有 iOS 5 状态栏颜色的回归，怀念乔帮主时代拟物风格的同学也可以当做一个彩蛋，希望你们喜欢。

背景仍然是用户当前选择的照片加毛玻璃效果，你当前选择了什么颜色，刘海那里立马能预览到效果。

03.编码

按照当前这个功能来看，一个有经验的工程师，三个小时就能完成编码，但是如果你有一些细节的追求，三个小时就有点不够了。如果你把细节扣到极致，一天肯定不够。最后，我花了两天的时间抠细节，细节已经扣无可扣了，我才罢手。

这里顺便吐槽一下 Xcode 9.1，每天有四五次毫无征兆的卡死，不是 Xcode 卡死，而是整个电脑卡死，导致我写的代码丢掉。强制关机以后要重新写一遍写过的代码。苹果真的越来越坑爹了。

04.产品命名

给产品命名真的是头痛的很，叫做“剪刘海”吧，未免有点太俗了。所以不加班的晚上我都去江边跑步，一边跑一边思考到底叫什么名字好。我一度想过模仿微信和微博的叫法，叫做“微刘海”，听起来好玩一点了而且和科技靠边，好像也没有那么俗了。

起名字真的是纠结了好长一段时间，直到《寻梦环游记》（英文名 Coco）上映。这个电影真是妙，其他的我就不剧透了。当时就决定，名字就叫做 Coco。

但是随之而来的就是 APP 销售的优势没有了，如果你是一个中国人，你第一时间想到的搜索关键字可能就是“剪刘海”。因为 App Store 搜索排名机制，APP 名称的权重是最高的，假如我把 APP 的名字叫做“剪刘海”，那么如果你在 App Store 搜索“剪刘海”这个关键字，我的产品就有机会排在前面。这对于没有钱打广告引流的 APP 来说意义非凡。我也纠结过，如果叫做“剪刘海”可能会更有优势，但是我最后还是决定使用 Coco。

05.APP Logo 设计

到现在为止，所有的想法和实现都是我独立完成的。但是接下来最大的难点来了，怎么样给这个心血来潮的 APP 设计一个不是太丑的 Logo？

这里有两个问题，第一，我自己毫无头绪没有思路，不知道要怎么样用设计语言来表达这个产品；第二，就算有想法也画不出来。对于这个极富挑战的事情，最后我决定专业人做专业事情，找我的设计师朋友帮忙。

多次改版几个通宵之后，我得到了上面这个 Logo。Coco 的 Logo 由三个元素构成，那个 iPhone X 的屏幕一角算是紧扣主旨。刚才我和我的设计师朋友说我要写这个篇文章，请她说一下她的 idea 是从哪来的。她和我说她想起了 iPod 的圆形控制器，就是下面这个改变世界的产品。

她假设上面 logo 的灰色圆就是 iPod 的那个 Circle，而那个红色的点就是我们的手指，动手去改变 iPhone X 的刘海正是这个 APP 的精髓，形象生动。

06.最后

有朋友说，他觉得这事没什么意义。但这事看你怎么想，如果什么事情都要说出来一个意义，那就一点都不好玩了。

这个软件改变了我的手机桌面，或许也会改变你的。动手去改变 iPhone X 的刘海吧！点击跳去 App Store 下载。

有什么使用上的问题，就在下面给我留言吧，Enjoy :)

07.补充

这篇文章是二十多天前写的，然后就进入了漫长的 APP 审核。审核 1.0 版本总共被拒绝 4 次，最后说我误导用户，然后我发邮件给苹果请他们指出究竟哪里误导了用户，然后当天就直接把我的 APP 通过了。

总的来说，这个 APP 可以总结为：设计一周，代码两小时，审核 20 天。至于为什么那么难过审，原因可能是苹果把审核这种事情外包给印度的朋友们了，如果我想快速的过审，就应该在 APP 一开始就加一段印度的歌舞。

08.使用帮助

鉴于有些同学购买以后说使用没有达到我所描述的效果，所以我做了一个视频帮助教程，你可以 点击 前往查看，如果你下载了 APP，请将你的 APP 升级到 1.1 版本，1.1 版本内置了当前这个视频。

我的文章集合

下面这个链接是我所有文章的一个集合目录。这些文章凡是涉及实现的，每篇文章中都有 Github 地址，Github 上都有源码。

我的文章集合索引

你还可以关注我自己维护的专题 iOS开发心得。这个专题的文章都是实打实的干货。如果你有问题，除了在文章最后留言，还可以在微博 @盼盼_HKbuy上给我留言，以及访问我的 Github。

赞助

你这一赞助，我写的就更来劲了！

微信赞助扫码

支付宝赞助扫码