What's the definition of prototype? How we get benefit from it

1. z Copyright © 2018 The Reporter.
PROTOTYPING
taylorfang@twreporter.org

2. z Copyright © 2018 The Reporter.
製作原型

3. z Copyright © 2018 The Reporter.
原型之旅
• 前置作業
• 原型光譜
• 原型思維
• 原型製作

4. z Copyright © 2018 The Reporter.
原型之旅
• 前置作業
• 原型光譜
• 原型思維
• 原型製作

5. z Copyright © 2018 The Reporter.
什什麼是原型？

6. z Copyright © 2018 The Reporter.
什什麼是原型？
wireframe
mockup
prototype
%#!?&

7. z Copyright © 2018 The Reporter.
在做出真的產品之前，
每個⽣生產步驟的成品。

8. z Copyright © 2018 The Reporter.
在做出真的產品之前，
每個⽣生產步驟的成品。
wireframe
mockup
prototype
%#!?&

9. z Copyright © 2018 The Reporter.
為什什麼製作原型？
• 協助團隊探索、溝通、實作、驗證構想
• 能促進決策者參參與，根據其看到的和實際操作做出決策
• 及早傾聽顧客的聲⾳音，將顧客納入專案製作流程，結合願景做出真
正對顧客有⽤用的產品

10. z Copyright © 2018 The Reporter.

11. z Copyright © 2018 The Reporter.
原型之旅
• 前置作業
• 原型光譜
• 原型製作
• 訪問顧客
• 原型思維

12. z Copyright © 2018 The Reporter.
fidelity

13. z Copyright © 2018 The Reporter.
原型光譜
• 視覺：看起來來有多真實？
• 互動：感覺起來來有多真實？（和實作⽅方法無關）
• 廣度：佔整體比例例多⼤大部分？
• 深度：使⽤用者操作時受限制的程度
• 內容：內容的真實度

14. z Copyright © 2018 The Reporter.
原型之旅
• 前置作業
• 原型光譜
• 原型思維
• 原型製作

15. z Copyright © 2018 The Reporter.
原型思維
• 無論是什什麼⽅方案，都可以做原型 ➡ 執⾏行行暫時的模擬

16. z Copyright © 2018 The Reporter.

17. z Copyright © 2018 The Reporter.
原型思維
• 無論是什什麼⽅方案，都可以做原型 ➡ 執⾏行行暫時的模擬
• 不要做出不願意捨棄的原型

18. z Copyright © 2018 The Reporter.

19. z Copyright © 2018 The Reporter.
原型思維
• 無論是什什麼⽅方案，都可以做原型 ➡ 執⾏行行暫時的模擬
• 不要做出不願意捨棄的原型
• 做到剛好能滿⾜足測試需要即可

20. z Copyright © 2018 The Reporter.

21. z Copyright © 2018 The Reporter.
原型思維
• 無論是什什麼⽅方案，都可以做原型 ➡ 執⾏行行暫時的模擬
• 不要做出不願意捨棄的原型
• 做到剛好能滿⾜足測試需要即可
• 原型看起來來必須夠真實

22. z Copyright © 2018 The Reporter.

23. z Copyright © 2018 The Reporter.
原型之旅
• 前置作業
• 原型光譜
• 原型思維
• 原型製作

24. z Copyright © 2018 The Reporter.
原型製作
• 先有分鏡腳本（storyboard）

25. z Copyright © 2018 The Reporter.
原型製作-分鏡腳本
💻 ➡ 🤔 ➡ 😕 ➡ 😥 … ➡ 完成
分鏡腳本 ➡ 💻 💻 💻 💻 ➡ 完成
v.s.

26. z Copyright © 2018 The Reporter.
原型製作-分鏡腳本
「⽬目的：在接下來來做原型時，沒有⼈人需要問：『接下來來
是怎樣？』或『這裡應該是怎樣？』」

27. z Copyright © 2018 The Reporter.

28. z Copyright © 2018 The Reporter.

29. z Copyright © 2018 The Reporter.

30. z Copyright © 2018 The Reporter.
原型製作
• 先有分鏡腳本（storyboard）
• 選對⼯工具

31. z Copyright © 2018 The Reporter.
原型製作-選對⼯工具
Keynote
AdobeXD
Principle

32. z Copyright © 2018 The Reporter.
原型製作
• 先有分鏡腳本（storyboard）
• 選對⼯工具
• 分⼯工解決

33. z Copyright © 2018 The Reporter.
原型製作-分⼯工解決
製作者（Maker），⾄至少 2 名
整合者（Stitcher），1名
寫作者（Writer），1名

34. z Copyright © 2018 The Reporter.
原型製作
• 先有分鏡腳本（storyboard）
• 選對⼯工具
• 分⼯工解決
• 整合⽅方案

35. z Copyright © 2018 The Reporter.
原型之旅
• 前置作業
• 原型光譜
• 原型思維
• 原型製作

36. z Copyright © 2018 The Reporter.

37. z Copyright © 2018 The Reporter.
sketch
wireframe
mockup
HTML

38. z Copyright © 2018 The Reporter.
How might we…

39. z Copyright © 2018 The Reporter.
sketch
wireframe
mockup
HTML
storyboard
prototype

40. z Copyright © 2018 The Reporter.
參參考資料
• Wireframes are becoming less relevant — and that’s a good thing
• Prototype Fidelity: It’s More than High and Low

41. z Copyright © 2018 The Reporter.
參參考資料

42. z Copyright © 2018 The Reporter.
參參考資料

43. z Copyright © 2018 The Reporter.
Thank you :)