規劃期 | 製作前期 | 製作期 | 上架期 |
---|---|---|---|
規格書 | Wireframe | 後端 | 測試 |
UI flow | 前端 | 上架 | |
Mockup | 設計 | 維運 | |
Prototype |
開發流程
規格書產出
從客戶的「user story」開始
User Story範例:淡水通app
場景描述
客戶王小明委託開發淡水通 app。王小明是居住在淡水的土豪,對淡水有割捨不下的感情,希望可以開發一個 app 來介紹淡水,讓更多人可以認識淡水愛上淡水。
User Story範例:淡水通app
客戶需求
- 要有淡水的交通資訊
捷運、客運、自行車、開車、搭船 - 淡水景點介紹
根據GPS位置顯示景點、呼叫google導航... - 美食介紹與評論
呼叫google導航、評論店家...
- 淡水天氣資訊
串接氣象資料 - 好康折價券
根據GPS位置顯示景點...
萬一...
客戶連「user story」都開不出來
開User story的原則
情境與行為
- 打開app可以看見影片列表,點選後進入影片資訊
- 進入影片後自動播放

User story --> 規格書
-
打開app可以看見影片列表,點選後進入影片資訊
- 影片列表
- 排序
- 發佈時間,排序方式-DESC
- 影片名稱,ASC
- 顯示筆數
- 20筆
- 滑到最下方自動load
- 顯示資訊
- 影片封面
- 影片名稱
- 播放次數
- 加入我的最愛
- 排序

製作規格書工具
- Google Doc
- 協同工作
有了規格書之後
- 計算工時(報價)
- 定義資料模型(資料庫)
- 進入下一階段
進入製作前期
-
Wireframe
-
UI flow
-
MockUP
-
Prototype
製作前期:Wireframe


製作前期:UI flow

製作前期:Mockup


製作前期:Prototype

製作前期工具
-
LucidChart
- prototype, mockup, ui-flow, wireframe
- 已申請教育版,20個帳號
- Joint Aletheia University on LucidChart
-
Justinmind
- prototype, mockup, wireframe
Workshop
參考資料
-
app客戶需求
- 淡水通app
- 我愛吃早餐app
- 學院社群交友app
- Uber invision模擬器
行動科技應用
By Leuo-Hong Wang
行動科技應用
App開發流程revisit
- 1,386