前一陣子我個人的第三個獨立作品 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