行動科技應用

App開發流程 revisit

(參考：Ian Wu's Talk in AU 2015.11.7)

 

 

Leuo-Hong Wang   王柳鋐

規劃期 製作前期 製作期 上架期
規格書 Wireframe 後端 測試
UI flow 前端 上架
Mockup 設計 維運
Prototype

開發流程

規格書產出

從客戶的「user story」開始

User Story範例：淡水通app

場景描述

 

客戶王小明委託開發淡水通 app。王小明是居住在淡水的土豪，對淡水有割捨不下的感情，希望可以開發一個 app 來介紹淡水，讓更多人可以認識淡水愛上淡水。

User Story範例：淡水通app

客戶需求

  • 要有淡水的交通資訊
    捷運、客運、自行車、開車、搭船
  • 淡水景點介紹
    根據GPS位置顯示景點、呼叫google導航...
  • 美食介紹與評論
    呼叫google導航、評論店家...

 

  • 淡水天氣資訊
    串接氣象資料
  • 好康折價券
    根據GPS位置顯示景點...

萬一...

客戶連「user story」都開不出來

開User story的原則

情境與行為

  • 打開app可以看見影片列表，點選後進入影片資訊
  • 進入影片後自動播放

http://3.bp.blogspot.com/-HGqL6kZ_w14/UjyfNN-VfrI/AAAAAAABwF8/CUp5kmRgqmo/s1600/better-user-story.png

User story --> 規格書

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

製作規格書工具

 

  • Google Doc
  • 協同工作

有了規格書之後

 

  • 計算工時（報價）
  • 定義資料模型（資料庫）
  • 進入下一階段

進入製作前期

 

  • Wireframe

  • UI flow

  • MockUP

  • Prototype

製作前期：Wireframe

http://cdn.teamddm.com/includes/files/assets/images/large/1328754582_01-1.jpg

http://inspirationfeed.com/wp-content/uploads/2011/02/34-sketched-ui-wireframe1-500x362.jpg

製作前期：UI flow

http://pandion.pbworks.com/f/1258329378/signin-flow.png

製作前期：Mockup

http://ericterpstra.com/wp-content/uploads/cats.balsamiq.png

http://1.bp.blogspot.com/_Gkt_5XYdPUk/TPOU2hTNrqI/AAAAAAAABQ0/WdzH7TlAhqU/s1600/Iphone-wireframes-v1.gif

製作前期：Prototype

http://uiwireframes.com/assets/img/wireframe-examples/Mobile-App-5-Sharing-Settings.png

製作前期工具

 

Workshop

參考資料