案例分享

1. 「設計」在⼯程師職涯中
扮演的⾓⾊
Chris
v1.1

2. 我是誰？
Chris
國立⾼雄第⼀科技⼤學 電⼦所 碩⼠
2008-2010
學⽣時代以為⾃⼰會去新⽵做 IC 設計
出社會都在台南寫程式
⽬前任職
好想⼯作室 Web Camp mentor
4 年 C++ 寫 Windows 桌⾯應⽤程式
3 年 C++/ Cppunit 寫後端 + DevOps
4 年 HTML/CSS/JavaScript 寫前端
Chris (@dwatow) - GitHub
《Chris 技術筆記》

3. ⼀開始，我是電⼦⼯程師。
只是...
剛好寫程式的同事離職
剛好我會寫程式，但不會他那⼀種
剛好其它同事不想學寫程式
我就接⼿了

4. OQC 光學量測程式
試看看 ReDesign this

5. ReDesign 的空間
⼯程師愈辛苦，使⽤者愈愉快
技術夠好，才⽀撐得起UX

6. 要先知道
• 待測物: 液晶電視 55 吋 FHD (以此為例)
• 儀器: CA-210 光學彩⾊分析儀
連結執⾏軟體的電腦
• 量測點位，有各式定義
中⼼⽩⾊亮度、⽩⾊亮度均勻程度、⿊⾊四⾓暗態、⾊域
• 量測提⽰，需要 3.5cm 的圈顯⽰在螢幕上
• 量測結束要 Excel 檔
• 使⽤者
試產: 研發⼯程師
量產: ⼯廠產線⼈員

7. ⼤概介紹儀器
外接螢幕
無腳架顯⽰模組
USB
Probe

8. 重新設計
畫⾯導覽列
例如: 想要量測資料

9. 你知道這個要怎麼⽤嗎？
程式打開看⾒的畫⾯
公司 Logo

10. 然後？要怎麼繼續？
公司 Logo

11. 1. 選擇量測項⽬
公司 Logo

12. 1. 選擇量測項⽬
2. 選擇儲存路徑
公司 Logo

13. 1. 選擇量測項⽬
2. 選擇儲存路徑
3. 開始量測
公司 Logo

14. 1. 選擇量測項⽬
2. 選擇儲存路徑
3. 開始量測
出現量測畫⾯
公司 Logo

15. 1. 選擇量測項⽬
2. 選擇儲存路徑
3. 開始量測
出現量測畫⾯
公司 Logo

16. 重新定義問題
.csv
想要量測 選擇量測項⽬ 開始量測
指定儲存路徑
指定待測物尺⼨

17. .csv
想要量測 選擇量測項⽬ 開始量測
指定儲存路徑
指定待測物尺⼨
只是想測，只需要顯⽰在螢幕上，沒有想存
已知尺⼨，可以⾃動選擇
先儲存在記憶體中
螢幕顯⽰量測結果
重新定義問題

18. 歷經兩年
學習 + 實作
學了 C++ 與 MFC 以及實作了兩個版本
第⼆個版本

19. 重新設計後: 程式打開看⾒的畫⾯
(量測結果顯⽰的地⽅)
https://casdkapp.blogspot.com/2013/05/blog-post_1182.html

20. https://casdkapp.blogspot.com/2013/05/blog-post_1182.html

21. https://casdkapp.blogspot.com/2013/06/blog-post.html

22. 出現量測畫⾯
https://casdkapp.blogspot.com/2013/06/blog-post.html

23. 貼近(習慣使⽤的系統) 原⽣的設計語彙
更合理的操作流程
省下教育訓練時間

24. 重新設計
量測指引圈⽣成⽅式
不同尺⼨的螢幕，都要顯⽰ 3.5 cm

25. 想要量測 選擇量測項⽬
指引圈尺⼨
開始量測
3.5 cm => ? pixel

26. 原本的做法
列舉
32 吋 HD 60Hz
32 吋 FHD 60Hz
37 吋 FHD 60Hz
37 吋 FHD 120Hz
42 吋 FHD 60Hz
42 吋 FHD 120Hz
48 吋 FHD 60Hz
48 吋 FHD 120Hz
55 吋 FHD 60Hz
55 吋 FHD 120Hz
? pixel

27. 每⼀次量測，都要選⼀次
有時還會選錯

28. 50 inch
後來的做法: ⽤算的

29. 1 inch = 2.54 cm
50 inch = 127 cm

30. 1 inch = 2.54 cm
50 inch = 127 cm sinθ
127 cm × sinθ

31. 1 inch = 2.54 cm
50 inch = 127 cm sinθ
127 cm × sinθ
螢幕長寬比 16:9 => tanθ
16
9
tanθ = 9 / 16
θ = arctan(9 / 16)

32. 1 inch = 2.54 cm
50 inch = 127 cm sinθ
127 cm × sinθ
螢幕長寬比 16:9 => tanθ
16
9
tanθ = 9 / 16
θ = arctan(9 / 16)
127 cm × sin(arctan(9 / 16)) = 62 cm

33. 1 inch = 2.54 cm
50 inch = 127 cm sinθ
127 cm × sinθ
螢幕長寬比 16:9 => tanθ
16
9
tanθ = 9 / 16
θ = arctan(9 / 16)
127 cm × sin(arctan(9 / 16)) = 62 cm
EDID => 解析度 => FHD 短邊 1080 pixel
【技術⽂章】顯⽰器的⾝份證 – EDID 是什麼？ https://graniteriverlabs.com.tw/2021/12/16/grl-an-edid

34. 1 inch = 2.54 cm
50 inch = 127 cm sinθ
127 cm × sinθ
螢幕長寬比 16:9 => tanθ
16
9
tanθ = 9 / 16
θ = arctan(9 / 16)
127 cm × sin(arctan(9 / 16)) = 62 cm
EDID => 解析度 => FHD 短邊 1080 pixel
62 cm
3.5cm
1080 pixel
? pixel
=

35. 1 inch = 2.54 cm
50 inch = 127 cm sinθ
127 cm × sinθ
螢幕長寬比 16:9 => tanθ
16
9
tanθ = 9 / 16
θ = arctan(9 / 16)
127 cm × sin(arctan(9 / 16)) = 62 cm
EDID => 解析度 => FHD 短邊 1080 pixel
62 cm
3.5cm
1080 pixel
? pixel
=
50 inch → 61 pixel / 3.5cm
透過演算法

36. 1 inch = 2.54 cm
50 inch = 127 cm sinθ
127 cm × sinθ
螢幕長寬比 16:9 => tanθ
16
9
tanθ = 9 / 16
θ = arctan(9 / 16)
127 cm × sin(arctan(9 / 16)) = 62 cm
EDID => 解析度 => FHD 短邊 1080 pixel
62 cm
3.5cm
1080 pixel
? pixel
=
50 inch → 61 pixel / 3.5cm
透過演算法
? inch → ? 的 pixel / 3.5cm
https://casdkapp.blogspot.com/2013/06/lcm-size.html

37. 未知的新機種才需要的步驟
已知的機種，可以省掉選螢幕尺⼨的步驟

38. 重新設計
每次量測的 0-cal (歸零校正)

39. 每次開機都要進⾏⼀次 0-cal

40. • 順利的情況
1. 開啟軟體→Zero Cal→使⽤CA-210
2. Zero Cal→開啟軟體→使⽤CA-210
• 不順利的情況
1. 開啟軟體→Zero Cal→再次開啟軟體→Zero Cal
2. Zero Cal→開啟軟體→使⽤CA-210→出錯！
常⾒的操作情境

41. • 順利的情況
1. 開啟軟體→Zero Cal→使⽤CA-210
2. Zero Cal→開啟軟體→使⽤CA-210
• 不順利的情況
1. 開啟軟體→Zero Cal→再次開啟軟體→Zero Cal
2. Zero Cal→開啟軟體→使⽤CA-210→出錯！
常⾒的操作情境
多餘
依賴記憶
https://casdkapp.blogspot.com/search/label/%E4%BA%92%E5%8B%95%E8%A8%AD%E8%A8%88

42. • 順利的情況
1. 開啟軟體→Zero Cal→使⽤CA-210
2. Zero Cal→開啟軟體→使⽤CA-210
• 不順利的情況
1. 開啟軟體→Zero Cal→再次開啟軟體→Zero Cal
2. Zero Cal→開啟軟體→使⽤CA-210→出錯！
常⾒的操作情境
https://casdkapp.blogspot.com/search/label/%E4%BA%92%E5%8B%95%E8%A8%AD%E8%A8%88
記憶不好，軟體不幫你 → 0-cal 必然出錯
軟體強制幫你 → 0-cal 有時成為多餘動作

43. 懂設計的都知道
如果可以不需要學
⾃然⽽然就可以 0-Cal
使⽤起來會開⼼⼜愉快!!
https://casdkapp.blogspot.com/search/label/%E4%BA%92%E5%8B%95%E8%A8%AD%E8%A8%88
但要怎麼做？

44. 進入量測畫⾯之後，再檢查 0-cal
若當下沒有先 0-cal 就補⼀次
已經 0-cal
尚未
0-cal
https://casdkapp.blogspot.com/search/label/%E4%BA%92%E5%8B%95%E8%A8%AD%E8%A8%88

45. 遺忘的 0-cal 在技術上做了什麼？
1. 利⽤「有限狀態機」，管理剛進入量測的初始流程
與硬體接觸的地⽅，應⽤軟體端都可以使⽤這種⽅式提昇可靠度
2. ⼀直進⾏量測動作
並捕捉量測的錯誤訊息: 屬於 0-cal 的抓出來
3. 強制 0-cal 再回到可量測狀態

46. 不好的界⾯設計
Lifted - Pixar Short Film HD

47. 將所有的功能都給使⽤者
不負責任的事
跟本沒有設計什麼東⻄

48. 即時回饋，才能即時校正

49. 重新設計
量測⾏為
所有的開發過程，都是為了這個部份!!

50. 說明書上的連線⽅式

51. 成品台⾞
OQC 實際上的量測操作(原本)

52. 成品台⾞
OQC 實際上的量測操作(原本)
員⼯ B
操作電腦軟體
按 Enter 抓值
員⼯ A
操作儀器
量測要穩，取值穩定才準
(顯⽰量測內容)

53. 但是 ⼯程師 要量測時
通常只有⼀個⼈進⾏

54. 如果「只要⼀個⼈」
就可以量測？

55. 量測時的設計
要找到觸發抓值事件、減少IO設備
https://casdkapp.blogspot.com/2013/06/blog-post_4775.html

56. 觀察量測情況
連續量測的值接近
連續量測的值差距很⼤

57. ⾃動量測 UI 兩個⽅案

58. 但是
⾃動量測 UI 兩個⽅案
OQC 都拒絕使⽤
想要按 Enter 的⽅式

59. 設計優劣/技術好壞
都不是 UX 的重點
使⽤習慣才是最⼤敵⼈

60. 最後實作
保留兩種做法
預設: ⾃動量測

61. 重新設計
量測順序
點位顯⽰最佳化 → 縮短量測時間

62. OQC 實際上的量測操作
亮度 亮度均勻 ⾊域 漏光

63. 順序就是照這樣進⾏(原本)
優點
• 中⼼點先量，可先卡中⼼點規格
缺點
• 左右來回多趟，⼤尺⼨量測需花來來回回的
時間。
• Probe 移動位移⼤

64. 後來的做法
將畫⾯切成九等份。
依區塊排序所有量測點。
• 區塊內的點位，量測⼈員只要動動⼿
• 切換區塊，才有可能需要動腳
從左到右量⼀趟，即可將所有的點位量完

65. 後來...
導光板設計程式
負責的同事也離職
⼜接⼿新的程式
https://dwatow.github.io/2013/11-06-blogger/334961047579948562/

66. 只是寫程式
並不⼀定可以優雅解決問題
試圖著⼀直重新定義問題
要認真的讓⾃⼰接近
問題真正的樣貌

67. 問問題
其實是想休息⼀下

68. 後來，⼯作升職
不靠寫程式⼯作
靠嘴巴和⽂件

69. 需求/系統分析
就是「實作說明書」

70. Prototype
⼩應⽤程式
公司內部系統
商⽤軟體
除了產品公司之外

71. 需求
API ⽂件
Wireframe
Table Schema
前端⼯程 後端⼯程
UI Design
Story
UX Design
User Research
資料庫規劃

72. 需求
API ⽂件
Wireframe
Table Schema
前端⼯程 後端⼯程
UI Design
Story
UX Design
User Research
資料庫規劃
如果，綠⾊區塊，都是同⼀個⼈處理

73. 需求
API ⽂件
Wireframe
Table Schema
前端⼯程 後端⼯程
UI Design
Story
UX Design
User Research
資料庫規劃
使⽤者: 產線或公司內部⼈員
需求是為了滿⾜⼯作業務，不是使⽤者⽣活需求

74. 需求
API ⽂件
Wireframe
Table Schema
前端⼯程 後端⼯程
UI Design
Story
UX Design
User Research
資料庫規劃
使⽤者: 產線或公司內部⼈員
需求是為了滿⾜⼯作業務，不是使⽤者⽣活需求
形隨機能的設計
不⽤ UI Design 只要 UI Components

75. 需求
API ⽂件
Wireframe
Table Schema
前端⼯程 後端⼯程
UI Design
Story
UX Design
User Research
資料庫規劃
使⽤者: 產線或公司內部⼈員
需求是為了滿⾜⼯作業務，不是使⽤者⽣活需求
形隨機能的設計
不⽤ UI Design 只要 UI Components
資訊架構學

76. 需求
API ⽂件
Wireframe
Table Schema
前端⼯程 後端⼯程
UI Design
Story
UX Design
User Research
資料庫規劃
使⽤者: 產線或公司內部⼈員
需求是為了滿⾜⼯作業務，不是使⽤者⽣活需求
形隨機能的設計
不⽤ UI Design 只要 UI Components
資訊架構學
資料庫正規化

77. 需求
API ⽂件
Wireframe
Table Schema
前端⼯程 後端⼯程
UI Design
Story
UX Design
User Research
資料庫規劃
使⽤者: 產線或公司內部⼈員
需求是為了滿⾜⼯作業務，不是使⽤者⽣活需求
形隨機能的設計
只要 UI Components
資訊架構學
資料庫正規化
Restful API
GraphQL

78. 好的⽂件 ≒ 好的開發者經驗
看範例，開瀏覽器

79. 重點！不是會寫程式
⽽是你會解決問題，或找資源來解決問題

80. 重點！不是會寫程式
⽽是你會解決問題，或找資源來解決問題
對症下藥

81. 這是最後⼀張了！
還有時間聊聊...