Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From Idea to Prototype - 快速打造 App 產品雛型

3,673 views

Published on

2014.4.9 @ App 創業小組四月份聚會

Published in: Mobile, Technology, Art & Photos
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

From Idea to Prototype - 快速打造 App 產品雛型

  1. 1. 自我介紹
  2. 2. Nokimi aka 賴經文 1977.10.31 O型 天蠍座 App 製作人、3C 部落客 看電影、打籃球、聽 R&B 精誠中學、彰化高中、 甲環境工程科學系、 元智資 傳播碩士班 精誠資 、亞洲網商務行銷、鴻海科技集團
  3. 3. App 製作前評估
  4. 4. 我的 idea 是否可行? 1 搜尋市場同類產品 2 評估競爭優勢 3 商業模式與市場規模估算
  5. 5. 確定要做 那就開始吧!
  6. 6. Wireframe Mockup Prototype 圖示整體結構 與畫面基本組 成元素 用繪圖軟體將 各畫面製作成 圖片 案 可進行操作互 動的擬真產品 雛型
  7. 7. 很多工具都可以 畫 wireframe 紙筆、Word、PowerPoint...
  8. 8. 用手繪方式畫 Wireframe 關 字:App 研發便條紙、Pinkoi
  9. 9. 用 POP 做會動的 Wireframe 網址:popapp.in
  10. 10. 把手繪稿拍下來1
  11. 11. 製作畫面連結2
  12. 12. 播放操作3
  13. 13. 確定版面配置後 就來畫出 mockup Photoshop、Illustrator...
  14. 14. 下載 UI 設計元件1 網址:www.teehanlax.com/tools
  15. 15. 用 Photoshop 設計圖2
  16. 16. 將畫面 存成 PNG 圖3
  17. 17. App 啓動圖示 也很重要
  18. 18. 用 Photoshop 設計圖示1
  19. 19. 下載啓動圖示設計模版 網址:appicontemplate.com 2
  20. 20. 將圖示 案套用到 智慧型物件 3
  21. 21. 自動輸出各種尺寸圖示4
  22. 22. 用 Flinto 快速製作 動態 Prototype 網址:www.flinto.com
  23. 23. 新增 App 專案1
  24. 24. 把 Mockup 圖 丟進去2
  25. 25. 製作連結與設定過場效果3
  26. 26. 手機開啓網址加入主畫面4
  27. 27. 30 天免費,20 /月5
  28. 28. 快速產生 App 使用情境圖片 網址:placeit.net
  29. 29. 選擇裝置與情境背景1
  30. 30. 上傳 mockup 圖2
  31. 31. 自動合成情境圖片3
  32. 32. 選擇付費方案4
  33. 33. Thank You facebook.com/nokimi nokimi@wearapp.com www.wearapp.com

×