美观实用的 LiveUseful 如何创造
前一阵子我个人的第三个独立作品 LiveUseful 上架了。在上架前三天，我印象里在中区工具类最高排名 36，ProductHunt 日榜最高时第二，结束时第四，就这个结果来看还是非常好的。虽说只靠这 App 的收入还做不到让我在东京正常过日子，不过这和本文就没什么关系了。
先给不知道这个 App 是干什么的朋友简要做一个介绍。这是一个在你的锁屏壁纸里隐藏东西的工具，你可以用这个工具做到例如：在锁屏中隐藏一个支付宝二维码，在需要给别人看的时候用 3D Touch 呼出。软件本身提供添加文本、图片、二维码，而使用其他 App 的截图，你相当于可以往里加任何东西。详情可以看这篇文章：把二维码藏在锁屏里，解锁春节讨红包新姿势：LiveUseful。
LiveUseful 从开始制作到上架历时两个月，基本上全部工作都是我一个人完成（感谢 Lincoln Guang 在图标设计上给出的建议），从最终产品来说还算是圆满。今天我主要是想讲一下我在设计这个 App 的过程以及一些我的想法。希望可以让不是开发者的朋友简单的了解一下，以及给想要做独立开发的朋友一些参考。
产品定位
做个人开发精力非常有限，如果不能把重点放在几个功能上的话，一年半载估计也没办法上架。所以做这样一个 App 的首要任务就是划定功能范围，并给出一个是否添加某项功能的标准。
在 Live Photo 中添加内容由来已久，最早是 Elk 做了一个在锁屏上放汇率表的功能，非常的方便。虽然不能自动更新，但是对于短期旅游来说，直接看大概数值方便对外币形成个概念还是非常不错的。之后有专门在锁屏上放 Todo-list 的软件，StackOverflowError 做的小历我记得也加入了这种功能。但是不管怎么搞，从来没有人做一个通用工具来方便用户在锁屏上放各种东西。
后来少数派编辑 Minja 的这篇文章发出来了，看到这文章阅读量这么高我就觉得这个需求确实存在，于是就决定开始做。
那么作为一个通用工具，这个 App 什么该做，什么不该做呢？首先我一开始就想到了截图这件事情，利用其他 App 的截图，LiveUseful 实际上可以在没有任何自带功能的情况干各种各样的事情。所以，LiveUseful 只需要添加用户最常用的使用场景减少跳出，而不需要什么都堆进去。当用户需要特殊功能的时候可以自己使用其他 App 的截图，而对没有这些特殊需求的用户，App 依然可以显得直观干净。
这里我选择了文本和二维码，对于所有使用文字的应用场景，有一个加文本的功能基本都能解决问题，二维码则是在大天朝每天都要用的玩意。两个功能的覆盖面都非常广。
所以 LiveUseful 最终确定会包含的主要功能就只有文本、图片、二维码。并以此为基础添加一些自定义选项。其他的功能能交给别的 App 做的就交给别的 App 做，我这边只好好做最终生成阶段就可以了。
总之就是好好做一个工具，保持干净。
而在功能分配上，我将添加文字和二维码（包括转写）这两个比较常用的功能放在了普通版本中，而添加图片放在了 Pro 版。使得对于那些轻度用户来说，普通版本其实就已经足够实用，只有重度用户才需要买内购。对于那些只需要把自己微信摆在屏幕上的人来说，普通版本完全够用了。
实现原理
Live Photo 的格式非常简单，一张 JPEG 格式的照片，和一段 QuickTime 格式的视频。不过你只是做一张图一个视频是不够的，你还需要给二者添加关联性的元数据，其中包括：
- 图片中编号 17 的信息 kFigAppleMakerNote_AssetIdentifier。
- 视频中 com.apple.quicktime.content.identifier，内容与加在图片中的 AssetIdentifier 一致。
- 视频中 com.apple.quicktime.still-image-time。
之后才可以把这二者关联为一个 Live Photo。
这一部分的代码在苹果的 Live Photo 范例中都有涉及，就是生成视频的过程需要动动脑子。操作 AVFoundation 还是有一定难度的。最开始为了提高开发速度，我将生成视频和添加元数据放在两个不同的步骤中，这么做其实降低了软件的性能，在软件上架后我就尽快找时间把这两个部分合并了。不得不说 AVFoundation 调试起来挺蛋疼的，因为 API 都比较老，报错的时候甚至连出错的原因都看不着，对于不熟悉这玩意的人来说，简直只能靠猜。。。
因为这篇文章不讲技术细节，点到为止，接下来我来介绍一下软件设计过程中值得注意的点。
使用的工具
设计上使用的是我惯用的 Sketch，Sketch 大法好。
这里没用原型工具。因为从头到尾都是我一个人在做，大概运行起来什么效果都在脑子里，所以也就不需要原型了。Xcode 自不必说，写代码阶段我还使用 SourceTree 来管理 Git 版本，非常好用。
除了这些之外，我还使用 Garageband 制作了 AppStore 介绍视频的背景音乐。
第一个画面
生成 Live Photo 这件事情的过程是基本上固定的，于是整个交互也以线性流程为主。这不仅易于使用，在开发上也同样简便，我基本上采用了模态窗口一层一层叠上去的策略。
整个 App 首先需要的是一个让用户选择照片的画面，由于系统的选择图片框可以取消而且你无法屏蔽这个取消按钮，你必须设计一个画面能够让用户重新开启照片选择框。最开始的设计中，App 首个画面画面是左边这个样子的，整体颜色为黑色，与现在的版本差别很大。
之所以有这样的修改主要的原因是这样的，随着后期的开发进程，我发现我需要找到一个 App 的标志色来放在各种按钮上保持统一，包括在裁剪图片等背景为用户内容的画面。而这种在暗色背景上视觉效果较好的颜色很难与大多数的亮色背景图片搭配，实际效果并不好，所以我把第一屏幕的颜色改为了白色。但是我比较巧合的发现继续保持加载画面为黑色，在加载完全之后变成白色非常有趣，就把启动画面的颜色保留了下来。
需要说的是在第一屏选择完图片之后，会有一个渐变进入下一屏幕，这个渐变其实是我用截图做出来的。模态窗口会直接把图片选择框的动画覆盖掉，导致一个非常生硬的过渡。为了解决这一问题，我在播放动画前对窗口做了截图显示在前面，过渡动画的过程中实际上窗口已经不在了。
图片裁剪
由于用户要拿我这里生成好的图片去设壁纸，裁剪这一步骤必须在添加内容之前完成。裁剪的目标大小与屏幕相同，于是我直接使用屏幕作为裁剪框，实际上是对设定壁纸过程中隐藏的裁剪流程的复刻，效果非常直观。
在设计裁剪功能的时候，有一个需要注意的点。由于这里的裁剪要严格按照屏幕尺寸进行，我必须避免误操作。比如在滑动图片超出了屏幕范围的时候，我会使裁剪按钮无效，这样可以避免用户在回弹动画过程中点击裁剪而裁剪出尺寸不正确的图片。实现上是靠对比裁剪完图片的宽高比和屏幕的宽高比。
功能菜单
之后就会进入功能选择菜单。最早版本的设计是几个按钮横着摆在下面，后来在 Telegram iOS DEV 群中有人说在 iPhone X 上看起来很挤，于是改成了纵向的菜单。而且这种纵向的菜单对点击也非常友好，下面一排就有可能够不到。
这里遇到的问题主要是在配色上。因为我个人是个配色渣，这里需要选择一种适合于大部分用户内容的配色对我来讲还是非常难的，从一开始扎眼睛到现在的这个看起来还算舒服的配色改过无数次。
这里颜色仅应用在主要的功能按钮上，返回和帮助这种功能按钮则是黑白的。这样区分可以让用户看一眼就知道该点哪，减少思维成本。
编辑器
选择功能之后会进入编辑界面。在设计这一界面的时候其实比较水到渠成。由于 LiveUseful 的主要目的是生成锁屏壁纸，所以加入的所有内容都不会显示在屏幕的上部（会被时间日期挡住）。所以界面的上半部分理所应当的成为了编辑器的区域。实际上这个区域的大小是我估计出来的，我本来想找到在各个设备上苹果显示时间日期的位置计算方法，但是怎么算都对不上，后来就大概估计了一个所有设备都不会出问题的位置。
我将编辑器分为三部分。导航条、内容区域、工具栏。三个屏幕都以类似的结构进行设计。其中插入图片的界面是比较特殊的，这里的多个按钮的功能差别非常大，想要在堆在一起的情况下把区分开非常难，于是最后选择放到了屏幕下部。
二维码功能的实现其实花了我一些心思，因为我希望能够做到实时刷新二维码。看起来非常酷炫，但渲染的负担也特别大，字一多就会卡死。刚开始我只是一般限制字数，后来发现如果有人输入了一堆汉字，我 App 会直接崩溃。现在一个汉字我按照三个字符计算，同时加入了字数指示之后，算是控制到了一个比较合理的程度。
另外这里的转写二维码也是一个非常重要的功能。因为我决定要让插入图片作为一个内购功能存在，那么如果让用户买内购才能插入支付宝和微信二维码无疑是不要脸。所以我做了这样一个非常方便的功能，你可以直接扫描其他的二维码添加进来。生成的效果不但非常美观，而且体积也更小。
保存图片
编辑完成之后就进入了保存界面，在保存界面中虽然可以预览效果，但这个画面却并不是为了预览效果而存在的。Live Photo 需要一个生成过程，而如果直接把这个过程放在编辑器画面中，又不做一个明显的保存操作的话，会给人一种任务没有完成的感觉。所以这个画面的主要目的其实是对任务已经完成的强调，而非实际上的预览画面。由于这个原因，点击返回的时候会直接退回首页，方便制作新的文件。
一些细节
动画
每个画面出入的部分，UI 元素都添加了一个展开动画。其中菜单画面的动画是较为复杂的，右侧的四个按钮其实是在一个位置展开，而非五个按钮直接平移过去的。有的人可能会觉得做得快一点就无所谓了，但是实际测试中发现，虽然动画非常快，但是假如不做展开而直接用平移，视觉上将会非常奇怪。所以我最后只好乖乖的把动画做了一遍。
二维码位置
有些人可能会奇怪我为什么要把二维码放在那么靠下的位置上，这主要是为了防止被系统的音乐播放窗口挡住。如果你一边听播客，又要给别人看二维码的话，就能发现这个位置的意义了。
自动保存
假如你已经添加了一些内容，但退回到了菜单画面，那么你的修改将会被保存，这可以防止误操作和一些反悔的情况。
使用上次照片
这个功能是给那些经常换二维码内容或者每天拿来做备忘录的用户设计的。如果每次都让这些用户重新裁剪照片，就完全称不上是高效了，所以我允许用户使用上次使用过的照片，从而能够把这部分时间节约出来。我现在也在为那些成天换壁纸内容不变的用户考虑，也许未来的版本会添加保存内容的功能。
Hack 系统的原罪
就难度来讲，除了 AVFoundation 比较坑之外其他的地方都没有什么特别大的问题。整个制作过程中遇到的最大的坑其实是系统，Live Photo 拿来隐藏内容并不是苹果设计的初衷，所以在实现上苹果并没有对此有任何优化。这导致了相当多的问题。
首先，系统为了能够节约内存，把锁屏上的 Live Photo 压的比较狠，其实你放在锁屏上的东西会显得虚。虽然经过我测试，完全不影响二维码等的扫描，但确实看着不顺眼。简介里我已经写的非常清楚了系统会压缩不是我的问题，最后用户还是会归结为我的问题来给我打差评。
除了发虚，还有就是位置不对的问题。iOS 壁纸有一个视差效果的功能，为了实现这一效果，需要把壁纸放大一圈提供移动的空间。这就导致一些用户在设置壁纸的时候由于没有自己缩放，二维码被下面的解锁提示挡住。发生这件事的时候，用户也会来给我打差评。
第三个是 Live Photo 本身的功能稳定性。在进行预览的时候，Live Photo 经常会出现播放不正常，例如闪烁、延迟等，有时候甚至完全不能播放。我在调试的时候也遇到了好几次，一开始以为是我自己的 Bug，但是怎么修都不对，结果重启就好了。令人非常绝望。用户也因为这个给我打过差评。
总结一下就是，我这个 App 要解决的问题都不是我造成的问题。而且不管你在简介里怎么强调，一些用户还是一眼不看并直接当成是你的问题。所以最后为了不再需要每天在 iTunes 上回复这些会误导人的评论，我做了一个全屏的提示，确认之后才会生成图片。虽然很丑，但这是我让他们好好看一眼的唯一方法了。
总结
以上就是我在设计这款 App 的过程中想到的一些点。最终做出来的产品不管是从美观还是易用的角度都达到了我对整个产品的预期。经过过年期间一天一个版本的迭代，现在使用已经非常顺畅了。之后我还准备加入添加列表的功能以及其他更有用的自定义，以及进行无障碍优化等。不过是否花时间在上面还是要取决于收入和我自己有没有时间。
希望你喜欢 LiveUseful，下次见。App Store