MOSUT: https://www.facebook.com/groups/mosut/ Tainan.py: http://www.meetup.com/Tainan-py-Python-Tainan-User-Group/

1. 離開新⼿手村後也可以順便聽⼀一下
的程式「設計」指南
by 魯蛇喬
講個秘訣之：
天啊，這毫無設計感的版⾯面 與 MOPCON
史上最⻑⾧長的講題是怎麼⼀一回事？

2. @before_this_talk
先重新「設計」⼀一下講題！

3. 程式 x 設計
你可能沒聽過的程式 ”設計”
Joe @

4. About me
• Joe 本名 喬
• 連續創業失敗家 + 半端⼯工程師
• 現居台南放假中
• 看書 / 寫爽扣
• 辦 Tainan.py x MOSUT 聚會
• 部落格 x FB x Plurk

5. 為何有本場分享
因為 MOPCON 在徵稿 …

6. # 本魯吃飽太閒就看書

7. # 雀躍地向設計界的朋友分享
安安，妳聽過「設計⼼心理學」嗎？
那是⼤大⼀一的教材 …
！！！
（露出詭異的笑容）
Orz

8. # 被推坑很多書

9. # 有⼼心得就投稿啦 … 但 …

10. # 我⽐比較想聽 Keynes 的演講

11. # Mr. Monday == Keynes

12. 「想不到第⼀一次投稿設計講題，就遇到專家在隔
壁場，這樣⼦子的緣份真是讓我感到⾮非常開⼼心，也
⾮非常驚喜。」
–魯蛇喬

13. 「為了趕場，只好講快⼀一點 XD」
–魯蛇喬

14. About this talk
• 例⼦子盡量少碼 => 無碼
• 若有程式碼以 Python 碼為主
• 會推薦很多書
• 某些書 可能會有很多程式碼 XD
• 要換到隔壁場還來得及

15. Outline
• 問問數則「問題」
• 摘要多項「原則 x 觀念」
• 講個「秘訣」
• 不妄下「結論」

16. 問題
無標準答案！⼀一起狂思亂想！
@part_1

17. 碼農⼀一詞何來？
哀優哀優拔蘿蔔、種菜菜、抓臭蟲
第 1 問
沒要你去種真的
QR Code …

18. ⾼高度（抽象）勞動
以思想為介質創作程式碼
常常親⾃自進⾏行「實作」
by 魯蛇喬

19. 碼農是設計師嗎？
第 2 問

20. 「廣義來講，當然是，但是 … 。」
– 某⼈人的內⼼心 OS

21. 何處⾒見設計？
第 3 問

22. # 程式碼⽚片段需要設計
亂七⼋八糟 @#$
# apple

23. # 程式碼 class 層級需要設計
亂七⼋八糟 @#$

24. # module 層級需要設計
# Django

25. # Flat UI Kit
# UI 需要設計

26. # 系統架構需要設計
# wiki

27. # 軟體本⾝身的設計
photo

28. 「還有產品（或服務）也需要設計。吃⼈人頭路的話，當然⽐比
較不會碰到 … 但如果你被指派負責
⼀一個⼩小專案 or 是接案族 or 正在創業呢？」
–魯蛇喬

29. 「處處皆設計 ，不是你設計我就是我設計你」
–魯蛇喬
MG149

30. 你平常會點 ”設計”
的技能點數嗎？
加薪導向？熱⾨門？興趣？
第 4 問

31. # 你⼀一定會點「程式設計」的進階技能

32. # 可能還會點⼤大數據、資料科學 … 的點數

33. # 或是研究商業理財 …

34. 為何你不點
”設計” 的技能點數？
⾮非常有趣的問題
第 5 問

35. 因為 …
• 設計不就是畫畫圖嗎？（誤）
• 我沒有美感啦！（誤）
• UI / UX 那東⻄西很⽞玄啦，給專業的去做就好？（誤）
• 我已經點了其他點數了，所以沒時間（誤）

36. 事實上 …
• 設計不只是「視覺」設計
• 就算只是⼀一張圖，背後往往運⽤用許多設計法則
• 沒有美感不代表不能擁有設計思維
• 專業分⼯工仍需與合作夥伴溝通，有共識⽅方能深⼊入互動
• 你擠得出時間的！

37. # 設計的⾏行為發⽣生在各個領域

38. # 要專精⼀一個或理解多個很難

39. # 幸運的是「⼈人」⼤大都是核⼼心
⼈人
⼈人
⼈人
⼈人
⼈人
⼈人
例外

40. # 從認知⼼心理學探討「程式 x 設計」吧

41. 原則 x 觀念
向唐納．諾曼⼤大師學習
@part_2

42. photo

43. 「當我們與產品互動，需要弄清楚如何使⽤用他。
這包括發現它能做什麼事以及該如何操作：我們
稱之為 “可發現性” 。」
–唐納．諾曼

44. discoverability
來⾃自於以下幾個⼼心理觀念
可發現性
預設⽤用途指意使⽤用局限
對應性回饋概念模型

45. affordances
物體和操作者之間的使⽤用關係
預設⽤用途

46. photo
# 這是⼀一個毫無反應的折凳

47. # 眾所皆知可以拿來打⼈人

48. # 也可以跨⼀一隻腳在上⾯面

49. # 或是坐下來思考怎麼征服 xx
photo

50. # BJ4
photo

51. photo
# 很多網站都有「留⾔言板」的功能

52. photo
# 具有反應正⾯面意⾒見的預設⽤用途

53. # 具有反應不同意⾒見的預設⽤用途

54. # 具有可利⽤用 xss 漏洞的預設⽤用途
阿⽂文的光網

55. 「請好好考慮所設計物可能擁有的 預設⽤用途
（當然包含程式碼） 。」
–魯蛇喬

56. signifiers
對預設⽤用途的提⽰示
指意

57. # 如何開⾨門

58. # ⾨門把的設計往往擁有刻意的「指意」

59. # 預設⽤用途 x 指意

60. # 對撰碼⽽而⾔言 …

61. # 破除迷思：只是寫給我⾃自⼰己看/⽤用
過去的你現在的你未來的你

62. 「沒⽤用的註解與爛扣，就跟 放上飲料罐 ⼀一樣
請想清楚⾃自⼰己的設計要留下哪些 指意。」
–魯蛇喬

63. constraints
使⽤用局限
四種常⾒見的侷限：物理、⽂文化、意義、邏輯

64. # 物理局限
photo

65. # ⽂文化局限
photo

66. # 意義侷限
photo

67. # 邏輯局限
photo

68. # 語法局限

69. # ⽂文化局限

70. # 再來回憶⼀一下局限設計不好導致的問題
阿⽂文的光網

71. 「設計時利⽤用 局限 可引導使⽤用者正確使⽤用產品，
並且避免預期外的效果。」
–魯蛇喬

72. mapping
對應性

73. # 怎麼控制電玩⼈人物？

74. # 哪個對應性好？

75. # 參數往往有其對應性（⽂文化上的）

76. 「設計時維持⾃自然好理解的 對應性
能讓使⽤用者容易上⼿手。」
–魯蛇喬

77. feedback
回饋

78. # iphone 的 home 鍵

79. # 烤⼟土司機的「叮」聲
photo

80. # 各種回饋

81. # 錯誤訊息的回饋需要設計

82. # 讓⼈人不⾼高興的回饋

83. # 讓駭客⾼高興的回饋
阿⽂文的光網

84. # 改善
阿⽂文的光網

85. 「設計時可透過 回饋 讓使⽤用者知道⺫⽬目前的狀況，
但請避免會讓⼈人誤解 / 困惑的回饋。」
–魯蛇喬

86. conceptual model
對事物怎麼運作的解釋（⾼高度簡化的）
概念模型

87. # 把頭放進去，就會有東⻄西吃

88. # 每個⼈人的概念模型不⼀一樣
就按下去就會⽣生效了
遙控器是由電⼒力供給，按鍵
按下後會觸發電路，使紅外
線發射器發出訊號，最後冷
氣機接收到訊號後 …

89. 「概念模型的價值，在於提供⼀一個 預測 事情會如
何進⾏行的理解⽅方式，以及事情不按計畫進⾏行時，能
提供 排除障礙 的⽅方法。」
–唐納．諾曼

90. 「推測概念模型，主要的線索來⾃自東⻄西的結構，特
別是指意、預設⽤用途、使⽤用局限以及對應性。」
–唐納．諾曼

91. # 概念模型完整與否會影響使⽤用⼯工具 / 除錯能⼒力
wiki

92. 「想想⾃自⼰己 / 使⽤用者的 概念模型。」
–魯蛇喬

93. # 善⽤用設計的基本原則以達成易⽤用性
可發現性
預設⽤用途指意使⽤用侷限
對應性回饋概念模型

95. # ⼈人類三種運作的層次

96. # 例⼦子
• 因感受到地震⽽而繃緊神經 => 本能
• ⽤用菜⼑刀切菜 => ⾏行為
• 思考⼀一部⽂文學著作 => 反思
產⽣生情緒

97. # 衝突：本能 vs 反思
photo

98. # 衝突：本能 vs 反思

99. # 三種層次對應的產品設計特性
• 本能層次的設計 => 外觀
• ⾏行為層次的設計 => 使⽤用的樂趣與效⽤用
• 反思層次的設計 => ⾃自我形象、個⼈人滿⾜足、記憶

100. # 本能 + … = XD
photo

101. # 本能 + … = XD

102. # ⾏行為 + … = XD
photo

103. # ⾏行為 + … = XD

104. # 反思 + … = XD
photo

105. # 本能 + ⾏行為 + 反思 = XD

106. 「三者之間往往會交互影響，設計產品（撰碼）時
宜審慎考慮其對使⽤用者情緒的影響。」
–魯蛇喬

107. 「今天其實沒有探討到情感設計，請⾃自⾏行看書。」
–魯蛇喬

108. 秘訣
其實是好書介紹
@part_3

109. 第 1 坑
想更加了解設計⼼心理學？

110. 諾曼⼤大師系列：⼤大推（其實今天介紹不到 2 %）

111. 想更加了解⼈人？
第 2 坑

112. 蘇珊⼤大姊：⼤大推

113. 如何做網站？
第 3 坑

114. ⼤大叔 ⽤用淺顯易懂的話，教你做網站：新⼿手必看

115. 第 4 坑
如何脫離程設新⼿手村？

116. 記得邊看書邊寫扣 …
+

117. 第 5 坑
如何從設計探討程式設計？
不要那麼多⼼心理學！

118. 先不談這個了，你聽過設計的設計嗎？（建議 5+ 以上程設經驗）

119. 結論
@part_4

120. 結論 1
• 碼農很⾟辛苦 => 設計 + 實作
• 處處皆設計
• 你也可以擁有設計思維 => 從嘗試了解⼈人開始

121. 結論 2
• 可達成易⽤用性的幾個設計原則
• ⼈人類⾏行為的三個層次
• 使⽤用⼀一個物品時，不妨想想這個東⻄西的「設計」如
何以及⾃自⼰己對他的「感覺」怎麼樣

122. 結論 3
• 對於寫程式⽽而⾔言：
• 易⽤用性⾮非常重要，撰碼的各階段請仔細考慮清楚
• 當情緒產⽣生時，不妨想想是怎麼⼀一回事

123. 結論 4
• 新⼿手⾯面臨的問題：
• 學校教育只是買點卡，開帳號
• 好⼀一點的學校，會放幾隻 NPC 跟怪物給你練功
• 請務必到象⽛牙塔外瞧瞧

124. 結論 5
• ⼯工程師⾯面臨的問題：
• 過度「抽象化」思考
• 只看到 / 注重表⾯面的「功能」
• 功能成癮症

125. 結論 6
• 團隊⾯面臨的問題：
• ⽋欠的不是設計師
• ⽋欠的是設計思維

126. ⼯工商 1
x
@
meetup FB
# 下次聚會主題： FP + Python + …

127. ⼯工商 2
PyCon APAC
Python (South) Taiwan
敬請期待

128. 有獎徵答 & QA 時間
• 請問阿⽂文的光網，犯過哪些設計原則？
• 提問就送贈品！（那講者可以⾃自⼰己問⾃自⼰己嗎？）