RainFont 開發流程


雖然我和老公合作過多個上架 App,這款字級表倒是我們第一次在沒有客戶的干涉下完成的作品。來談談設計理念和製作過程吧。
官方網址:rainstep.co

設計理念

在工作流程 製作 Mockup 階段時我需要字體字級表確認設計。目前 App Store 上的都很醜,而且醜到我用不下去。就算有漂亮的也早就領便當或是很難操作。2010 年的時候老公有做一個字級表給我用,乾脆再做一個、改得更漂亮些。

就我自己的使用習慣來說,繁體中文只有一種字體可用沒什麼好挑的,主要用在選擇英文字體和確定最大/最小字級上。我很在意單手操作和在晃動的環境下是否能清楚辨識這兩件事,字體和字級選擇就顯得非常重要。

Functional Map

一開始我們就說好先出簡略版的上架,之後再來慢慢加料。所以初版的功能就只有:

  1. 字體列表。
  2. 自行輸入文字。
  3. 切換字級。
  4. 切換字體。
  5. 調整背景與字體的顏色。

…因為功能太簡單了所以我懶得做 Functional Map。

UI Flow

同上,因為太簡單了我也不想畫 UI flow,這 App 只有3頁。再簡單的 App 都需要說明文件,但我非常不希望在 RainFont 裡多塞一個 icon。所以說明文件直接做在 Store 的 Screenshot 上。

  1. 主頁面。
  2. 字體列表。
  3. 編輯文字頁。

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個月,實在不想改了乾脆先送審看看大家反應再說。已確定有許多部份會做修正。(我早就喊要改了…)

  1. 字級選擇,現在滑動一次只能 +-1pt,不順手。
  2. 編輯模式只能點 Done 回到主頁面。
  3. 主頁面字體字級捲動的體驗。

暫不新增字體搜尋、背景和文字的色彩選擇。


台灣 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 不只長草、都快變叢林了。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close