臺灣博碩士論文加值系統

電子產品介面隨著數位產品的普及，數位平板電腦等相關產品興起，整體設計水準整體的提高，需要更加深入的使用者介面設計。觸控式智慧型手機與電腦的App需專注產品呈現，包括使用者與系統之間的溝通介面，產品本身的介面設計愈顯重要，不僅業者注重開發歷程，使用者對於產品品質與需求也隨之提高，觸控式介面設計的模式需考量使用者認知，以達成直覺式的介面操作特性，確立視覺體驗的統一。
　　本研究運用圖像認知機制與人們行為心理，歸納Nilson與Susan Weinschenk所提出的易用性介面設計原則，參考心理學知識讓UI呈現更直覺及更貼近人性思維，考慮「產品用起來的感覺」應用於觸控式介面設計。透過設計原則進行APP Inventor案例之介面重新設計與POP原型操作測試，檢視原則運用之成效。企業案例藉由Qt designer實作雷射照射儀介面設計，使用高擬真度產品原型，並帶入使用者測試，觀察使用者的使用過程，依循線索修正現有問題，並在設計的前期階段，針對遺漏或誤解的使用者需求加以改進，將設計稿移交給工程師，記錄相關的溝通技巧，以使用者導向的角度讓UI呈現更貼近人。結合易用性原則與企業設計策略，規劃設計符合需求之觸控式介面設計，讓產品更符合與貼近實際使用的狀態，最後以介面的操作測試進行最終修正，達到預期且理想的效果，並歸納案例延伸之設計原則：「安全性為首要原則」重視操作流程的正確性，模糊的辨別方式將容易導致錯誤的認知操作；「醫療類型產品的色彩應用原則」醫療類別的色彩應用與一般應用程式設計具有差異性，社會文化帶來的觀感與認知讓部分色彩具有特殊意義。

With the population of digital product interface, the rise of digital tablet and other relative product. A much higher level of overall design skill requires deeper user interface design. Smartphone for touch screen and App on computer focus on product presentation, including the communication interface between user and system. It is more important to the design of product interface. Not only the merchant pays attention on development, but also the user increase the product quality and requirement. In order to achieve the intuitive interface operating characteristic and establish a unified approach to visual experience, the designer need to consider user awareness of the touchscreen mode.
　　This study use image awareness and human behavior in psychology, to sum up interface design usability refer to the psychology knowledge base let the UI present intuition and human humanistic thinking, also the designer consider “the feeling about product” in touch screen design by Nilson and Susan Weinschenk. Reviewing the effectiveness of design rule through redesign APP Inventor interface and POP prototype operational test. The business case use high immersive prototype to design laser irradiation interface lead to user testing by Qt designer. During the test process, designer follow the clue to revise the existing problem. In order to let the UI closer to the user by user oriented, we improved the misunderstood user then hand over drawing to engineer and record relative communication skill in the early stage of design. Combing the usability and company design strategies, planning a touch interface design to make product more consistent in actual state. The final revision test meet the expected and ideal result therefore to sum up the design principle “ The priority principle is safety.” to ensure correct process. Unclear identification leads to incorrect operation easily. “Principle of medical product color” indicate that difference between medical product color and general programming, some color have special meanings associated with the perspective and awareness from culture.

摘要 I
Abstract II
誌謝 III
目錄 IV
表目錄 VII
圖目錄 IX
第 1 章 緒論 1
1.1 研究背景與動機 1
1.2 研究目的 2
1.3 研究範圍與限制 3
1.4 研究與創作流程 3
第 2 章 文獻探討 5
2.1 手持裝置的介面設計需求 5
2.2 應用程式開發框架 6
2.2.1 APP Inventor Web based設計平台 6
2.2.2 Qt多硬體開發平台與介面設計串接方式 8
2.2.3 開源平台與討論 8
2.3 介面設計原則 9
2.3.1 易用性原則 10
2.3.2 設計介面心理 12
2.3.3 圖形視認度 14
2.3.4 使用者經驗 14
2.4 研究方法 15
2.5圖形介面設計者與程式介面設計者的合作需求 16
2.5.1溝通障礙 17
2.5.2邏輯使用者介面 17
2.5.3 POP（Prototyping On Paper）介面模擬操作 17
第 3 章 APP INVENTOR案例改善 19
3.1 APP inventor介面設計案例一：Where’s My Laundry 19
3.1.1 Where’s My Laundry介面改善 20
3.1.2 Where’s My Laundry介面改善運用原則 23
3.2 APP inventor介面設計案例二：GPS Findthatthing 24
3.2.1 GPS Findthatthing介面改善 25
3.2.2 GPS Findthatthing介面改善運用原則 34
第 4 章 醫療產品設計實作與分析 35
4.1 醫療用途設計原則 35
4.2 醫療產品法規 35
4.3 雷射照射儀 37
4.3.1 觸控雷射照射儀介面設計 42
4.3.2 觸控雷射照射儀介面測試 53
4.3.4 觸控雷射治療儀介面測試分析 69
4.4 雷射減脂機 71
4.4.1 雷射減脂機介面設計 71
4.5 圖形介面設計者與程式介面設計者訪談紀錄 81
第 5 章 結論與建議 85
5.1 研究結論 85
5.2 後續研究建議 86
參考文獻 88
附錄一：受測者A操作秒數與SUS 系統易用性評分 93
附錄二：受測者B操作秒數與SUS 系統易用性評分 94
附錄三：受測者C操作秒數與SUS 系統易用性評分 95
附錄四：受測者D操作秒數與SUS 系統易用性評分 96
附錄五：受測者E操作秒數與SUS 系統易用性評分 97
附錄六：受測者F操作秒數與SUS 系統易用性評分 98
附錄七：受測者G操作秒數與SUS 系統易用性評分 99
 
表目錄
表 2-1 APP Inventor開發流程 7
表 3-1 Where’s My Laundry案例APP Inventor模式 22
表 3-2 GPS Findthatthing圖示說明 29
表 3-3 GPS Findthatthing設計與流程說明 31
表 3-4 GPS Findthatthing案例APP Inventor模式 33
表 4-1 AURA-100雷射照射儀產品規格與說明 38
表 4-2 觸控雷射照射儀介面設計：Wireframe 45
表 4-3觸控雷射照射儀介面設計：第一版Mockup 47
表 4-4 觸控雷射照射儀介面設計：Wireframe修正 49
表 4-5 觸控雷射照射儀介面設計：第二版Mockup 50
表 4-6 觸控雷射照射儀介面設計：Prototype 52
表 4-7 觸控雷射照射儀介面測試：任務A 54
表 4-8 觸控雷射照射儀介面測試：任務B 55
表 4-9 觸控雷射照射儀介面測試：任務C 56
表 4-10 基本操作秒數 57
表 4-11 任務A施測操作記錄表(施測時間單位：秒) 58
表 4-12 任務B施測操作記錄表(施測時間單位：秒) 58
表 4-13 任務C施測操作記錄表(施測時間單位：秒) 59
表 4-14 SUS系統易用性量表 60
表 4-15 測試者A基本資料與操作紀錄 61
表 4-16 測試者B基本資料與操作紀錄 62
表 4-17 測試者C基本資料與操作紀錄 63
表 4-18 測試者D基本資料與操作紀錄 64
表 4-19 測試者E基本資料與操作紀錄 65
表 4-20 測試者F基本資料與操作紀錄 66
表 4-21 測試者G基本資料與操作紀錄 67
表 4-22 雷射減脂機介面設計：Wireframe 75
表 4-23 雷射減脂機介面設計：Mockup 77
表 4-24 程式設計師訪談記錄 81
 
圖目錄
圖 1-1研究與創作流程圖 4
圖 2-1 UCD核心流程 5
圖 2-2 Qt Design介面 9
圖 2-3字體大小和x高度的測量方法 14
圖 2-4 Prototyping On Paper 雛型工具 18
圖 2-5 Prototyping On Paper 頁面設置 18
圖 3-1 Where’s My Laundry介面 19
圖 3-2 Where’s My Laundry介面改善 21
圖 3-3 GPS Findthatthing案例原始介面 24
圖 3-4 GPS Findthatthing Function Map：Information 26
圖 3-5 GPS Findthatthing Function Map：Functional 26
圖 3-6 GPS Findthatthing介面改善流程圖 27
圖 3-7 GPS Findthatthing UI Flow 28
圖 3-8 GPS Findthatthing 視覺稿頁面操作流程 30
圖 4-1 以人為中心設計的主要階段 37
圖 4-2 雷射照射儀主機與配件 38
圖 4-3 AURA-100雷射照射儀流程圖 39
圖 4-4 AURA-100 啟動與安全功能項 40
圖 4-5 AURA-100 雷射照射儀按鍵圖示 40
圖 4-6 觸控雷射照射儀介面設計：Function Map 42
圖 4-7 觸控雷射照射儀介面設計：Flow Chart 43
圖 4-8 觸控雷射照射儀介面設計：UI Flow 44
圖 4-9 觸控雷射照射儀介面設計：基本元件 46
圖 4-10 SUS Score 60
圖 4-11 觸控雷射照射儀介面測試維恩圖：操作優勢 69
圖 4-12 觸控雷射照射儀介面測試維恩圖：操作障礙 71
圖 4-13 雷射減脂機Function Map 72
圖 4-14 雷射減脂機流程圖 73
圖 4-15 雷射減脂機UI Flow 74

1. 張欣雯，2011，”使用者中心之產品介面設計與研究-以手持式行動裝置設計為例”，國立台灣師範大學設計研究所，碩士論文。
2. Susan Weinschenk,Ph.D.,2011, 100 Things Every Designer Needs to Know About People ,New Riders Pub.
3. Interaction Design Foundation “User Centered Design”：
https://www.interaction-design.org/literature/topics/user-centered-design
4. The White House, 2016, “Weekly Address: Giving Every Student an Opportunity to Learn Through Computer Science For All” ,Office of the Press Secretary：
https://obamawhitehouse.archives.gov/the-press-office/2016/01/30/weekly-address-giving-every-student-opportunity-learn-through-computer
5. Hwang W Y, Wang C Y, Hwang G J, et al, 2008. A web-based programming learning environment to support cognitive development. Interacting with Computers, 20(6): pp.524-534.
6. B. Xie and H. Abelson, "Skill progression in MIT app inventor," IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC), Cambridge, pp. 213-217, 2016.
7. Mitch Resnick,2012, "Let's teach kids to code".TEDxBeaconStreet：https://www.ted.com/talks/mitch_resnick_let_s_teach_kids_to_code?language=zh-tw
8. Hartness, Ken. "Graphics and user interfaces in C++ with Qt." Journal of Computing Sciences in Colleges 20.4 (2005): 198-199.
9. JIN, Yu-xin, and Feng-shan BAI. "Design of GUI Based on Qt/Embedded [J]." Computer Knowledge and Technology 13 (2008).
10. Chen, Zu-jue, Zhi-xiong Zhang, and Jian-jiang Zhang. "Design and implementation of video player system based on embedded system and Qt/E." (2008): 468-472.
11. Rhyder, A., R. N. Fernandes, and A. Starritt. "Qt based GUI system for EPICS control systems." Proc. 9th Int. Workshop on Personal Computer and Particle Accelerator Controls (PcaPAC2012). 2012.
12. Granado, Liher, and Oskar Berreteaga. "Creating rich human-machine interfaces with Rational Rhapsody and Qt for industrial multi-core real-time applications."Procedia Manufacturing 3 (2015): 1903-1909.
13. Qt Design Studio 1.0 Feature Overview：
https://resources.qt.io/development-topic-ui-design/qt-designstudio-demoreel
14. He, Xiang, and Xiao-Hua Meng. "Design and implementation of human-computer interface in embedded intelligent home system." Computer Engineering and Design 31.10 (2010): 2166-2168.
15. Sun, Ruirui, Guanghe Cheng, and Xiang Sun. "Design and Research of HMI Based on the Qt for CNC System." (2016).
16. Chen, Xiaoju, Quanli Liu, and Wei Wang. "Design and Development of Train Air-conditioning Controller Interface Based on Linux and Qt." 2019 Chinese Control And Decision Conference (CCDC). IEEE, 2019.
17. DI, Yan-jun, J. I. N. Ni, and Li-guo WANG. "Design of Virtual Instrument Interface Based on Embedded Linux+ QT." DEStech Transactions on Computer Science and Engineering ccme (2018).
18. Ferreira, Jennifer, James Noble, and Robert Biddle. "Agile development iterations and UI design." Agile 2007 (AGILE 2007). IEEE, 2007.
19. Wilson, James, and Daniel Rosenberg. "Rapid prototyping for user interface design." Handbook of human-computer interaction. North-Holland, 1988. 859-875.
20. Gabillon, Yoann, Nicolas Biri, and Benoıt Otjacques. "Designing an adaptive user interface according to software product line engineering." Proc. ACHI 15 (2015): 86-91.
21. Jakob Nielsen ,1994, Usability Engineering, Academic Press. Inc., USA. pp.115-151.
22. 10 Usability Heuristics for User Interface Design：
https://www.nngroup.com/articles/ten-usability-heuristics/
23. Preventing User Errors: Avoiding Unconscious Slips：https://www.nngroup.com/articles/slips/
24. [But桑專欄] 字型設計自己來－英文字型設計的第一課(1)：https://blog.justfont.com/2012/11/latin-type-design-1/
25. Chris Britton著；黃振量譯，2016，《寫給PM、RD與設計師看的設計需求分析：使用者想要的應用程式都是這樣打造出來的！》，松崗資產管理股份有限公司，臺北市，pp2-26。
26. 嫁給RD的UI Designer，"讀者來信：UI 設計流程"：
https://blog.akanelee.me/posts/686437-ui-design-process/
27. POP(Prototyping On Paper)參考網址：https://marvelapp.com/pop/
28. POP Joins Marvel!：https://blog.marvelapp.com/pop-joins-marvel/
29. Taylor's Mobile Portfolio, Where's My Laundry? Final Project：
https://sites.google.com/site/taylorsmobileportfolio/performance-tasks/where-s-my-laundry-final-project
30. Electronic Code of Federal Regulations, TITLE 21—Food and Drugs： https://www.ecfr.gov/cgi-bin/text-idx?SID=527feb833bba67614c3901ced929591b&mc=true&tpl=/ecfrbrowse/Title21/21cfr820_main_02.tpl
31. Association for the Advancement of Medical Instrumentation, 2001, “Human factors design process for medical devices”, ANSI/AAMI HE74:2001.
32. Vincent, Christopher James, Yunqiu Li, and Ann Blandford. "Integration of human factors and ergonomics during medical device design and development: It's all about communication." Applied ergonomics 45.3 (2014): 413-419.
33. Vincent, Christopher J., and Ann Blandford. "Usability standards meet scenario-based design: Challenges and opportunities."Journal of biomedical informatics53 (2015): 243-250.
34. Harte, Richard, et al. "A human-centered design methodology to enhance the usability, human factors, and user experience of connected health systems: a three-phase methodology." JMIR human factors 4.1 (2017).
35. Bangor, A.(2009)”Determining what individual SUS scores mean: Adding an adjective rating scale”.Journal of Usability Studies:114-123.
36. 胡祖武、陽禮安，2011，”醫療美容儀器操作性改良研究設計-以3D變頻飛梭雷射治療機(Sellas evo)為例”，2011明志科技大學技術與教學研討會論文集，新北市，明志科技大學。
37. 陳圳卿、陳嘉妮，2011，”多點觸控手持式行動裝置之互動介面使用性評估研究”，臺北科技大學學報，44，1，89-118。
38. 薛羽婷，2018，” 智慧化家庭系統介面設計–以Revohome 為例”，朝陽科技大學工業設計研究所，碩士論文。
39. 林婉瑜、高千又、周沂樺，2014，” 年輕女性使用APP需求與介面設計之研究－以瑜珈教學APP為例”，國立台灣藝術大學圖文傳播藝術學系學士班，學士論文。
40. 涂秀美、蔡芸芳、汪國成、江秀文、李亭亭，2007，"護理人員對於臨床路徑資訊化目的及介面設計之需求探討"，《醫療資訊雜誌》第200703期，臺灣醫學資訊學會，pp.47~59。
41. 吳立雅、張文山、姜郁美，2005，"台灣大型醫院醫令資訊系統介面使用性評估之研究"，《醫療資訊雜誌》第200506期，臺灣醫學資訊學會，pp.37~50。
42. Yerkes RM, Dodson JD ,1908, "The relation of strength of stimulus to rapidity of habit-formation". Journal of Comparative Neurology and Psychology. 18 (5): 459–482.