簡易檢索 / 詳目顯示

研究生: 周淨柔
Ching-Jou - Chou
論文名稱: 行動裝置修圖應用程式功能列選單介面之研究
A Study on the Tool Bar User Interface for Retouching Application of Mobile Device
指導教授: 陳建雄
Chien-Hsiung Chen
口試委員: 柯志祥
ko,Chin-Hsiang
吳志富
Chih-Fu,Wu
學位類別: 碩士
Master
系所名稱: 設計學院 - 設計系
Department of Design
論文出版年: 2017
畢業學年度: 105
語文別: 中文
論文頁數: 126
中文關鍵詞: 智慧型手機照相修圖App使用者介面功能列樣式操作區域
外文關鍵詞: smartphone, photo retouching app, user interface, menu bar style, operating area
相關次數: 點閱:321下載:19
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 隨著智慧型手機的普及,螢幕尺寸越大的手機將成為目前現代人的需求,故介面設計上的區域劃分與介面設計之使用性將深深影響使用者對於應用軟體之忠誠度。隨著社交軟體(例如Facebook, Instagram)的普及,許多人對於上載照片的意願增高,故對注重外貌的使用者來說,呈現完美的照片需求度增加,因此修圖軟體App具備相當重要性。本研究探討照相修圖App介面於大螢幕手機中,操作區域大小與操作功能列樣式彼此影響之因素。透過文獻探討,了解修圖軟體之發展脈絡,以人機互動之理論環繞研究架構,以參考介面設計原則、互動設計原則、視覺設計原則與現有功能列樣式之研究。
    本研究實驗分作兩個部分,首先為前導性實驗,主要探討台灣現有手機上的照相修圖App,並透過前導性實驗探討結果,將「取代型功能列」、「混合型功能列」及「疊加型功能列」之不同類型之功能列與功能列操作區域大小作為驗證實驗介面設計之參照,設立完本研究變因後,並於驗證實驗中加以探討。綜觀以上,本研究主要探討功能列樣式與功能列操作區域大小的操作關係,實驗採用3 (功能列樣式) x 2 (操作區域大小)混合雙因子設計的方式進行。實驗紀錄操作績效(計測任務時間),並讓受測者填寫SUS系統使用性量表、QUIS系統滿意度問卷,接著進行質性事後訪談,並於最後進行分析、歸納整合,提出結果與建議。本研究發現:(1)功能列樣式主效應中具顯著差異,使用者操作「取代型功能列」皆有較高之操作績效。(2)功能列樣式主效應中具顯著差異,使用者操作「混合型功能列」和「疊加型功能列」皆有較高之滿意度。(3)照相修圖App介面原型之操作績效分析越快,而介面系統使用性及滿意度調查越低,反之,照相修圖App介面原型之操作績效分析越慢,而介面系統使用性及滿意度調查越高。(4) 於操作區域大小之主效應中,操作績效、使用性及滿意度感受皆無顯著差異。綜觀以上,提出照相修圖App之介面設計上之優缺點與結論與建議,用來提升使用者操作之使用性及滿意度,提供給往後需進行功能列樣式介面設計之設計師及未來學者研究之參考。


    With the ubiquity of smartphones, what people need today is a smartphone with a screen the larger the better. Therefore, area division and ease of use in interface design will have profound impacts on user loyalty towards apps. Popularization of social software (such as Facebook, Instagram, etc.) also makes users more willing to upload their photos. For appearance-focused users, this also means a greater need to present their perfect photos, hence the greater importance of retouching software.
    This study investigated how the size of operating areas and menu bar style affected each other on the interfaces of photo retouching apps in large-screen smartphones. The purposes are to understand the context in which retouching software developed through a literature review, reassemble the theoretical framework around theories in human-computer interaction, and refer to principles of interface design, interaction design and visual design as well as existing menu bar styles.
    This study consisted of two parts. The first part was a pilot experiment that focused on photo retouching apps in smartphones currently available in Taiwan. From the results of this experiment, different types of menu bars, i.e., replaceable, hybrid, and overlay menu bars, and sizes of operating areas were derived as references for interface design in the subsequent validation experiment. Variables were also established for this study to be examined in the validation experiment. To sum up the above, this study mainly looked into the operating relationship between menu bar style and size of operating areas by conducting the validation experiment using a two factor (3 menu bar styles x 2 sizes of operating areas) mixed design. The experiment included recording of operating performance (measurement of task times), participant completion of the System Usability Scale (SUS), and the Questionnaire for User Interaction Satisfaction (QUIS), qualitative post hoc interviews, eventual analysis and conclusion as well as presentation of results and suggestions. The findings of this study reveal the following. (1) The menu bar styles differed significantly in their main effects in the way that users operating with the replaceable menu bar all experienced higher operating performance. (2) Another significant difference between the main effects of the menu bar styles was that users operating with the hybrid and overlay menu bars all had higher satisfaction. (3) The faster the operating performance analysis for retouching app interface prototypes, the lower the responded ease of use and satisfaction with the interface systems in question, and vice versa. (4) Both sizes of operating areas did not differ significantly in their main effects, i.e., their effects on operating performance, ease of use and satisfaction. The above are the advantages and disadvantages of different interface designs for photo retouching apps as well as the conclusions and suggestions from this study, which are provided as considerations for improvement in ease of use and user satisfaction and as references for designers in the design of menu bar styles on interfaces and future researchers in their research.

    摘要 i Abstract ii 目錄 vi 圖目錄 x 表目錄 xii 第一章 緒論 1 1.1 研究背景 1 1.2 研究動機 2 1.3 研究目的 2 1.4 研究範圍與限制 6 1.5 研究架構與流程 7 第二章 文獻探討 10 2.1 照相修圖軟體 10 2.1.1 照相修圖軟體來源 10 2.1.2 照相修圖功能探討 11 2.2 使用者操作介面使用性高低之關鍵要素 12 2.2.1 互動設計與使用者經驗目標 12 2.2.2 介面設計原則之實際應用 15 2.2.3 使用者認知之概念與結構 16 2.3 人機介面設計之準則 21 2.3.1 使用者介面設計準則 21 2.3.2 介面視覺設計 24 2.3.3 視覺設計重要性 25 2.4 功能列選單 26 2.4.1 功能列選單樣式 26 2.4.2 功能選單設計 27 第三章 研究方法 29 3.1 實驗建構 29 3.2 研究方法 29 3.3 實驗步驟流程 30 第四章 前導性實驗 32 4.1 前導性實驗樣本 32 4.1.1 修圖軟體程式(美圖秀秀) 32 4.1.2 修圖軟體程式(相機360) 33 4.1.3 修圖軟體程式(Line Camera) 34 4.2 前導性實驗設計 36 4.2.1 前導性實驗設備 36 4.2.2 前導性實驗問卷內容 36 4.2.3 前導性實驗流程與步驟 37 4.2.4 前導性實驗受測者 37 4.3 前導性實驗結果與分析 38 4.3.1 使用者偏好照相修圖App之功能調查 38 4.3.2 任務操作績效 38 4.3.3 SUS系統使用性問卷分析 44 第五章 驗證實驗 47 5.1 研究變因 47 5.1.1 選單樣式調查 48 5.1.2 選單樣式設計 48 5.2 實驗設計 53 5.2.1 實驗流程 53 5.2.2 實驗設備 54 5.2.3 實驗說明 54 5.2.4 實驗受測者與受測者經驗調查 55 5.3 驗證實驗結果分析 57 5.3.1 任務績效 57 5.3.2 SUS系統使用性量表之分析 69 5.3.3 QUIS使用者滿意度量表之分析 73 第六章 結論與建議 92 參考文獻 97 中文文獻 97 英文文獻 98 網路文獻 100 附錄A:前導性實驗問卷 101 附錄B:驗證實驗問卷 106

    中文文獻
    1. 王啟翰 (2006)。數位家庭多媒體中心互動介面選單結構與使用者之認知風格探討,國立台灣科技大學設計研究所。
    2. 任宗浩 (2001)。心智模式動態變化之研究--物理現象的觀察與詮釋.科學教育學刊,9(2),147-168。
    3. 林建宏、徐國堂(2013)。Android+iOS UIDesign行動裝置介面設計,台北:佳魁資訊。
    4. 柳永青 (2012)。友善的人機介面,科學發展,472,6-13。
    5. 陳立民、張、黃俊綸、陳怡欣 (2005)。從隱喻手法探討圖形使用者介面之溝通意涵。數位設計研討會-數位內容之教學、研發與產學合作,台中技術學院,156-165。
    6. 陳芝菁、陳建雄. (2011). 智慧型手機操作介面之使用性評估. 工業設計,124,52-57.
    7. 陳俊宏、楊東民 (1998)。視覺傳達設計概論,台北:全華科技。
    8. 陳建雄 (2015)。Introduction to Human Memory,陳建雄人因工程上課講義。
    9. 陳思帆 (2011)。國小學童繪圖軟體介面圖像設計創作與研究. 臺灣師範大學設計研究所學位論文,1-122。
    10. 鍾聖校 (1990)。認知心理學,台北:心理出版社。
    11. 吳泰毅 (2009)。中高齡者對數位相框使用者介面按鍵功能提示與動態回饋設計之探討。國立台灣科技大學設計研究所.
    12. Hall, S. (2015)。這就是符號學! 探索日常用品、圖像、文本,76個人都能讀懂的符號學概念 (呂奕欣譯)。台北:積木文化。(原著出版年,2007 )。
    13. Norman, D.A. (2007)。設計 & 日常生活: 如何選擇安全好用的日常生活用品 (卓耀宗譯),台北:遠流 (原著出版年,1998 )
    14. Norman, D. A. (2014)。設計的心理學:人性化的產品設計如何改變世界(陳宜秀譯)。台北市:遠流。
    15. Preece, J., Rogers, Y., & Sharp, H. (2010)。互動設計(二版) (陳建雄譯),台北:全華科圖書 (原著出版年,2005 )。
    16. Preece, J., Rogers, Y., & Sharp, H. (2006)。互動設計 跨越人-電腦互動 (陳建雄譯),台北:全華科技圖書 (原著出版年,2002 )。
    17. Gerrig, R. J. & Zimbardo, P. G. (2006)。心理學 (游恆山譯),(原著出版年,2003),台北:五南圖書。
    18. Suzanne, G. (2011)。iPhone User Experience簡單法則:好感度的iPhone使用者體驗 (洪沛然譯),台北:碁資訊 (原著出版年,2010 )。
    19. Tidwell, J. (2012)。操作介面設計模式(Patterns for Effective Interaction Design)(2 版)(莊惠淳譯),台北市:碁資訊。(原著出版年,2011 )。

    英文文獻
    1. Broadbent, D. E. (1957). A mechanical model for human attention and immediate memory. Psychological Review, 64(3), 205.
    2. Card, S. K., Moran, T. P., & Newell, A. (1983). The psychology of human-computer interaction. Hillsdale, NJ: Lawrence Erlbaum Associates.
    3. Craik, K. J. (1943). The nature of explanation. Cambridge, MA: Cambridge University Press.
    4. Harrell, G. D., Hutt, M. D., & Anderson, J. C. (1980). Path analysis of buyer behavior under conditions of crowding. Journal of Marketing Research, 45-51.
    5. I.S.O. (1999). 13407: Human-centred design processes for interactive systems. Geneva: ISO.
    6. Kee, E., & Farid, H. (2011). A perceptual metric for photo retouching. Proceedings of the National Academy of Sciences, 108(50), 19907-19912.
    7. Lachman, M. E. (1979). Perceptions of intellectual aging: Antecedent or consequence of intellectual functioning? Developmental Psychology, 19(4), 482.
    8. Laird, J., & Newell, A. (1983). A universal weak method. Pittsburgh, PA: Carnegie Mellon University, Dept. of Computer Science.
    9. Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological Review, 63.
    10. Newman, W. M. & Lamming, M. G. (1995). Interactive system design. UK: Addison-Wesley, p.300-301.
    11. Nielsen, J. (1993). Usability Engineering. San Diego CA: Academic Press.
    12. Norman, D. A. (1988). The psychology of every day things. New York: Basic Book INC.
    13. Peachpit, P. (2005). Graphic design portfolio-builder: Adobe Photoshop and Adobe Illustrator Project.
    14. Scaife, M., & Rogers, Y. (1996). External cognition: how do graphical representations work? International journal of human-computer studies, 45(2), 185-213.
    15. Shneiderman, B. (1986). Designing the user interface-strategies for effective human-computer interaction. India: Pearson Education.
    16. Simon, H. A., & Kaplan, C.A. (1989) Foundations of cognitive science. In M. I. Posner (Ed.), Foundations of Cognitive Science (pp.1-48). London, England: MIT Press.

    網路文獻
    1. Machael, Z. (2013, February). Source Code for Original 1990 Version of Adobe Photoshop Released. Retrieved from: http://petapixel.com/2013/02/14/photoshop-v1-0-1-source-code-released/
    2. Wikipedia. (2015, February). Photo Manipulation. https://en.wikipedia.org/wiki/Photo_manipulation
    3. My Survey線上問卷調查系統,(2015)。探討自拍的趨勢及自拍對青少年的影響。http://www.mysurvey.tw/quizresult.htm?id=e2923e77-4500-413f-99b7-9de760cfe225
    4. 經濟部資策會,(2014)。驚!每人每日有1/8醒著的時間都在使用APP! 資策會FIND:LINE、FB等社群APP平均使用時間更超過1個小時。http://www.find.org.tw/market_info.aspx?n_ID=8304。
    5. 經濟部資策會,(2014)。智慧型行動裝置普及率近7成市場即將飽和! 資策會FIND:行動族群半年增加逾100萬人、全臺滑世代破1,432萬。http://www.find.org.tw/market_info.aspx?n_ID=8303。
    6. 經濟部資策會,(2016)。Canon城市即時教戰守則,教你拍出IG美照http://www.find.org.tw/market_info.aspx?k=1&n_ID=8796。

    QR CODE