程式 x 設計 @ mopcon 2014
DESCRIPTION
MOSUT: https://www.facebook.com/groups/mosut/ Tainan.py: http://www.meetup.com/Tainan-py-Python-Tainan-User-Group/TRANSCRIPT
離開新⼿手村後也可以順便聽⼀一下
的程式「設計」指南
by 魯蛇喬
講個秘訣之：
天啊，這毫無設計感的版⾯面 與 MOPCON 史上最⻑⾧長的講題是怎麼⼀一回事？
先重新「設計」⼀一下講題！@before_this_talk
程式 x 設計你可能沒聽過的程式 ”設計”
Joe @
About me• Joe 本名 喬
• 連續創業失敗家 + 半端⼯工程師
• 現居台南放假中
• 看書 / 寫爽扣
• 辦 Tainan.py x MOSUT 聚會
• 部落格 x FB x Plurk
為何有本場分享因為 MOPCON 在徵稿 …
# 本魯吃飽太閒就看書
# 雀躍地向設計界的朋友分享
安安，妳聽過「設計⼼心理學」嗎？
那是⼤大⼀一的教材 …
！！！
（露出詭異的笑容）
Orz
# 被推坑很多書
# 有⼼心得就投稿啦 … 但 …
# 我⽐比較想聽 Keynes 的演講
# Mr. Monday == Keynes
–魯蛇喬
「想不到第⼀一次投稿設計講題，就遇到專家在隔壁場，這樣⼦子的緣份真是讓我感到⾮非常開⼼心，也
⾮非常驚喜。」
–魯蛇喬
「為了趕場，只好講快⼀一點 XD」
About this talk
• 例⼦子盡量少碼 => 無碼
• 若有程式碼以 Python 碼為主
• 會推薦很多書
• 某些書 可能會有很多程式碼 XD
• 要換到隔壁場還來得及
Outline
• 問問數則「問題」
• 摘要多項「原則 x 觀念」
• 講個「秘訣」
• 不妄下「結論」
問題無標準答案！⼀一起狂思亂想！
@part_1
碼農⼀一詞何來？哀優哀優拔蘿蔔、種菜菜、抓臭蟲
第 1 問
沒要你去種真的 QR Code …
⾼高度（抽象）勞動
以思想為介質創作程式碼
常常親⾃自進⾏行「實作」
by 魯蛇喬
碼農是設計師嗎？
第 2 問
– 某⼈人的內⼼心 OS
「廣義來講，當然是，但是 … 。」
何處⾒見設計？
第 3 問
# 程式碼⽚片段需要設計
亂七⼋八糟 @#$
# apple
# 程式碼 class 層級需要設計
亂七⼋八糟 @#$
# module 層級需要設計
# Django
# Flat UI Kit
# UI 需要設計
# 系統架構需要設計
# wiki
# 軟體本⾝身的設計
photo
–魯蛇喬
「還有產品（或服務）也需要設計。吃⼈人頭路的話，當然⽐比較不會碰到 … 但如果你被指派負責
⼀一個⼩小專案 or 是接案族 or 正在創業呢？」
–魯蛇喬
「處處皆設計 ，不是你設計我就是我設計你」
MG149
你平常會點 ”設計” 的技能點數嗎？加薪導向？熱⾨門？興趣？
第 4 問
# 你⼀一定會點「程式設計」的進階技能
# 可能還會點⼤大數據、資料科學 … 的點數
# 或是研究商業理財 …
為何你不點 ”設計” 的技能點數？
⾮非常有趣的問題
第 5 問
因為 …
• 設計不就是畫畫圖嗎？（誤）
• 我沒有美感啦！（誤）
• UI / UX 那東⻄西很⽞玄啦，給專業的去做就好？（誤）
• 我已經點了其他點數了，所以沒時間（誤）
事實上 … • 設計不只是「視覺」設計
• 就算只是⼀一張圖，背後往往運⽤用許多設計法則
• 沒有美感不代表不能擁有設計思維
• 專業分⼯工仍需與合作夥伴溝通，有共識⽅方能深⼊入互動
• 你擠得出時間的！
# 設計的⾏行為發⽣生在各個領域
# 要專精⼀一個或理解多個很難
# 幸運的是「⼈人」⼤大都是核⼼心
⼈人
⼈人
⼈人
⼈人
⼈人
⼈人
例外
# 從認知⼼心理學探討「程式 x 設計」吧
原則 x 觀念向唐納．諾曼⼤大師學習
@part_2
–唐納．諾曼
「當我們與產品互動，需要弄清楚如何使⽤用他。這包括發現它能做什麼事以及該如何操作：我們
稱之為 “可發現性” 。」
discoverability來⾃自於以下幾個⼼心理觀念
可發現性
預設⽤用途 指意 使⽤用局限
對應性 回饋 概念模型
affordances物體和操作者之間的使⽤用關係
預設⽤用途
# 眾所皆知可以拿來打⼈人
# 也可以跨⼀一隻腳在上⾯面
# 或是坐下來思考怎麼征服 xx
photo
# 具有反應不同意⾒見的預設⽤用途
# 具有可利⽤用 xss 漏洞的預設⽤用途
阿⽂文的光網
–魯蛇喬
「請好好考慮所設計物可能擁有的 預設⽤用途 （當然包含程式碼） 。」
signifiers對預設⽤用途的提⽰示
指意
# 如何開⾨門
# ⾨門把的設計往往擁有刻意的「指意」
# 預設⽤用途 x 指意
# 對撰碼⽽而⾔言 …
# 破除迷思：只是寫給我⾃自⼰己看/⽤用
過去的你 現在的你 未來的你
–魯蛇喬
「沒⽤用的註解與爛扣，就跟 放上飲料罐 ⼀一樣 請想清楚⾃自⼰己的設計要留下哪些 指意。」
constraints四種常⾒見的侷限：物理、⽂文化、意義、邏輯
使⽤用局限
# 語法局限
# ⽂文化局限
# 再來回憶⼀一下局限設計不好導致的問題
阿⽂文的光網
–魯蛇喬
「設計時利⽤用 局限 可引導使⽤用者正確使⽤用產品，並且避免預期外的效果。」
mapping
對應性
# 怎麼控制電玩⼈人物？
# 哪個對應性好？
# 參數往往有其對應性（⽂文化上的）
–魯蛇喬
「設計時維持⾃自然好理解的 對應性 能讓使⽤用者容易上⼿手。」
feedback
回饋
# iphone 的 home 鍵
# 各種回饋
# 錯誤訊息的回饋需要設計
# 讓⼈人不⾼高興的回饋
# 改善
阿⽂文的光網
–魯蛇喬
「設計時可透過 回饋 讓使⽤用者知道⺫⽬目前的狀況，但請避免會讓⼈人誤解 / 困惑的回饋。」
conceptual model對事物怎麼運作的解釋（⾼高度簡化的）
概念模型
# 把頭放進去，就會有東⻄西吃
# 每個⼈人的概念模型不⼀一樣
就按下去就會⽣生效了遙控器是由電⼒力供給，按鍵按下後會觸發電路，使紅外線發射器發出訊號，最後冷氣機接收到訊號後 …
–唐納．諾曼
「概念模型的價值，在於提供⼀一個 預測 事情會如何進⾏行的理解⽅方式，以及事情不按計畫進⾏行時，能
提供 排除障礙 的⽅方法。」
–唐納．諾曼
「推測概念模型，主要的線索來⾃自東⻄西的結構，特別是指意、預設⽤用途、使⽤用局限以及對應性。」
–魯蛇喬
「想想⾃自⼰己 / 使⽤用者的 概念模型。」
可發現性預設⽤用途 指意 使⽤用侷限
對應性 回饋 概念模型
# 善⽤用設計的基本原則以達成易⽤用性
# ⼈人類三種運作的層次
• 因感受到地震⽽而繃緊神經 => 本能
• ⽤用菜⼑刀切菜 => ⾏行為
• 思考⼀一部⽂文學著作 => 反思
# 例⼦子
產⽣生情緒
# 衝突：本能 vs 反思
# 三種層次對應的產品設計特性
• 本能層次的設計 => 外觀
• ⾏行為層次的設計 => 使⽤用的樂趣與效⽤用
• 反思層次的設計 => ⾃自我形象、個⼈人滿⾜足、記憶
# 本能 + … = XD
# ⾏行為 + … = XD
# 本能 + ⾏行為 + 反思 = XD
–魯蛇喬
「三者之間往往會交互影響，設計產品（撰碼）時宜審慎考慮其對使⽤用者情緒的影響。」
–魯蛇喬
「今天其實沒有探討到情感設計，請⾃自⾏行看書。」
秘訣其實是好書介紹
@part_3
想更加了解設計⼼心理學？
第 1 坑
諾曼⼤大師系列：⼤大推（其實今天介紹不到 2 %）
想更加了解⼈人？
第 2 坑
蘇珊⼤大姊：⼤大推
如何做網站？
第 3 坑
⼤大叔 ⽤用淺顯易懂的話，教你做網站：新⼿手必看
如何脫離程設新⼿手村？
第 4 坑
記得邊看書邊寫扣 …
+
如何從設計探討程式設計？
第 5 坑
不要那麼多⼼心理學！
先不談這個了，你聽過設計的設計嗎？（建議 5+ 以上程設經驗）
結論
@part_4
結論 1
• 碼農很⾟辛苦 => 設計 + 實作
• 處處皆設計
• 你也可以擁有設計思維 => 從嘗試了解⼈人開始
結論 2
• 可達成易⽤用性的幾個設計原則
• ⼈人類⾏行為的三個層次
• 使⽤用⼀一個物品時，不妨想想這個東⻄西的「設計」如何以及⾃自⼰己對他的「感覺」怎麼樣
結論 3
• 對於寫程式⽽而⾔言：
• 易⽤用性⾮非常重要，撰碼的各階段請仔細考慮清楚
• 當情緒產⽣生時，不妨想想是怎麼⼀一回事
結論 4
• 新⼿手⾯面臨的問題：
• 學校教育只是買點卡，開帳號
• 好⼀一點的學校，會放幾隻 NPC 跟怪物給你練功
• 請務必到象⽛牙塔外瞧瞧
結論 5
• ⼯工程師⾯面臨的問題：
• 過度「抽象化」思考
• 只看到 / 注重表⾯面的「功能」
• 功能成癮症
結論 6
• 團隊⾯面臨的問題：
• ⽋欠的不是設計師
• ⽋欠的是設計思維
⼯工商 1
x
@
FBmeetup
# 下次聚會主題： FP + Python + …
⼯工商 2
PyCon APAC Python (South) Taiwan
敬請期待
有獎徵答 & QA 時間
• 請問阿⽂文的光網，犯過哪些設計原則？
• 提問就送贈品！（那講者可以⾃自⼰己問⾃自⼰己嗎？）