雖然我和老公合作過多個上架 App，這款字級表倒是我們第一次在沒有客戶的干涉下完成的作品。來談談設計理念和製作過程吧。
官方網址：rainstep.co
設計理念
在工作流程 製作 Mockup 階段時我需要字體字級表確認設計。目前 App Store 上的都很醜，而且醜到我用不下去。就算有漂亮的也早就領便當或是很難操作。2010 年的時候老公有做一個字級表給我用，乾脆再做一個、改得更漂亮些。
就我自己的使用習慣來說，繁體中文只有一種字體可用沒什麼好挑的，主要用在選擇英文字體和確定最大/最小字級上。我很在意單手操作和在晃動的環境下是否能清楚辨識這兩件事，字體和字級選擇就顯得非常重要。
Functional Map
一開始我們就說好先出簡略版的上架，之後再來慢慢加料。所以初版的功能就只有：
- 字體列表。
- 自行輸入文字。
- 切換字級。
- 切換字體。
- 調整背景與字體的顏色。
…因為功能太簡單了所以我懶得做 Functional Map。
UI Flow
同上，因為太簡單了我也不想畫 UI flow，這 App 只有3頁。再簡單的 App 都需要說明文件，但我非常不希望在 RainFont 裡多塞一個 icon。所以說明文件直接做在 Store 的 Screenshot 上。
- 主頁面。
- 字體列表。
- 編輯文字頁。
Wireframe
唯一一張殘留下來的 Wireframe。照慣例一定是（有畫和沒畫差不多）的亂撇。這階段確定操作，上下划動可放大縮小字級。左右划動切換字體。點擊左下角 icon 出現字體列表。右下角 icon 切換明暗。
Mockup
這本來就是個很簡單的 App，現在流行扁平風真是太好了，我少做好多事。
有興趣的可以下載 PSD
看看，不過我保證沒什麼內容。這 App 太簡單了也沒用上什麼進階技巧，就是打打字、拉拉向量矩型罷了，圖層命名按照 Slicy 規定等等。
標示文件
不知道多久之前的標示文件，和現在上架的 App 不太一樣，加減看吧。標示文件上沒有放圖檔名稱是錯誤示範。不算 Desktop icon 的話這 App 也只有 4 張切圖（4顆小icon），就偷懶不寫了。
特別說明
整個列表頁我都沒有出到半張圖，全部交給 RD 處理。
字體預覽的灰色icon
由系統產生的 List ，RD 畫好圓角矩型後將大寫 A 用各種內建字體排序呈現。有的 A 很明顯沒有在灰底 icon 正中間，因為這字體基線和其他字體不同導致位置偏移。
上下半透明漸層
字體列表的最上方和最下方有白色過渡用的半透明漸層，由 RD 設定。
半透明黑底、圓角視窗、對話框尖角
同樣由 RD 製作，跟他說尺寸和不透明度就可以了。
吵架/教訓
我們兩個都自以為是專業人士，這 App 太簡單了懶的做專案管理，下場就是從過年前一路拖到現在，還發生他覺得我都沒做事、我覺得他都在和呆阿伯玩所以大吵一架的誤會。就算再簡單的 App 還是乖乖照開發流程走吧，並一定要有人當 PM 控管進度。之後我們就把票都開上 GitLab 省得有人賴帳。
就我自己 UI/UX 的部份，非常後悔沒有把所有的溝通記錄保存起來，很多地方時間一拖久就忘記當時為什麼要這樣做。有些體驗/功能/微調真的很想要在第一版就處理起來，可這要看 RD 大人的意願，只好成為下一次更新內容。早知道當時就把所有要改的東西都寫進票裡訂死…
未來改版
RainFont 在過年前就做好了，原本想微調很多地方後再上架，一拖就是3個月，實在不想改了乾脆先送審看看大家反應再說。已確定有許多部份會做修正。（我早就喊要改了…）
- 字級選擇，現在滑動一次只能 +-1pt，不順手。
- 編輯模式只能點 Done 回到主頁面。
- 主頁面字體字級捲動的體驗。
暫不新增字體搜尋、背景和文字的色彩選擇。
台灣 Store：https://itunes.apple.com/tw/app/rainfont/id861338293?l=zh&mt=8
美國 Store：https://itunes.apple.com/us/app/rainfont/id861338293?ls=1&mt=8
如果你對 Code 部分有興趣，歡迎去 我老公的 Twitter 留言。快讓他知道很多人想盧他寫教學！他的 BLOG 不只長草、都快變叢林了。
