國立臺灣師範大學博碩士論文全文系統

簡易檢索 / 詳目顯示

回結果列表

研究生：	黃怡禎 I-Chen Huang
論文名稱：	展覽活動APP主題視覺與圖像符號之創作研究 Research on the Creation of Thematic Visuals and Graphic Symbols for Exhibition Apps
指導教授：	廖偉民 Liao, Wei-Ming
學位類別：	碩士 Master
系所名稱：	設計學系 Department of Design
論文出版年：	2014
畢業學年度：	102
語文別：	中文
論文頁數：	126
中文關鍵詞：	圖像符號、使用者介面、行動裝置應用程式、主題介面、主選單介面
英文關鍵詞：	Graphic Symbols, Graphic User Interface, Mobile Applications, Launch Image, Springboard
論文種類：	學術論文
相關次數：	點閱：233 下載：61
分享至:	分享至facebook 分享至twitter

查詢本校圖書館目錄查詢臺灣博碩士論文知識加值系統勘誤回報

隨著智慧型手機的普及化，App軟體下載已經成為現代生活模式，而一個友善美觀的介面會給人們帶來舒適的視覺享受，拉近人們與應用程式的距離。現今App應用程式內主選單介面中的圖像符號會影響整體App視覺風格。因此，想要探討圖像符號應用在行動裝置App主選單介面上視覺風格影響，協助設計師在設計及建立App使用者介面上能更自然且直覺化操作。本創作研究是針對App應用程式內主選單介面中的圖像符號，藉由文獻探討、啟發式評估法等探討圖像符號運用在展覽型App現有問題，及使用展覽類型App感受，瞭解圖像符號運用在App介面中對於主題與整體風格有何影響；根據綜合分析，得到介面設計上的統一最能提升使用者的好感與使用度。因此將所歸納出來的設計原則形成設計程序應用在設計創作。並以六項展覽之App主題介面創作為例(嬰幼兒用品大展、台北國際旅展、台北國際電腦展、台北國際書展、台北國際自行車展、台灣設計展暨台北城市設計展)，探討如何以使用者中心為基礎，進行行動裝置App使用者介面設計，創作針對展覽App主題介面與主選單介面，操作簡單兼具視覺美感符合展覽類型不同之設計。本研究重要結論如下 :
1.在設計介面時，無論是主題介面或圖像符號運用在主選單介面，都應符合主題的設定需要。
2.需滿足優良介面設計的基本共通原則。
3.介面設計上，需要考慮到主題的延伸性。
4.對於整體的風格，主題介面與主選單介面須有一致性。
5.對於整體介面設定時，要因主題去判斷適切的風格。

With the increasing presence of smart phones in nowadays society, downloading App software has become part of the modern lifestyle. A nice and aesthetic interface not only brings visual comfort to the user, but also draws people closer to applications. In present time, the images and symbols of the App’s springboard will affect the overall visual style of the App. Therefore, exploring the graphic symbols used on the App’s springboard of mobile devices is necessary to understand different visual styles, which can in turn help designers create and build up the App’s graphic user interface with more natural and intuitive operating system. This study focuses on the graphic symbols on the Springboard of the Application. The research is done through analysis of preceding writings and heuristic evaluation methods for in-depth understanding of the problems faced while using image symbols on exhibition APP, what do people feel when using exhibition APP, and what effect does the graphic symbols have on the App’s theme and overall style. Based on integrated analysis, a more consistent interface design has better impression on the user and has higher use frequency. Therefore, based on these principles, the design process is made up for creation and designing. And taking exhibitions of six different thematic visuals App for example, such as Baby Expectant FAIR、Taipei International Travel Fair、COMPUTEX TAIPEI、Taipei International Book Exhibition、Taipei International cycle show and Taiwan Design Expo X Taipei Design & City Exhibition, discussing how to design the graphic user interface on mobile Apps based on the user-centered, creating Launch Image and Springboard for exhibition App, and making designs with aesthetic visuals and easy controls suited for different exhibitions. Important conclusions of this study are as follows :
1 When designing the user interface, both the launch image and the graphic symbols used in the springboard, should be consistent with the needs of the theme.
2 Must meet the basic requirement of good interface design.
3 The interface design must consider the extensibility of the theme.
4 In terms of overall style, launch image and springboard must be consistent.
5 The overall interface must be designed according to the appropriate style of the theme.

口試委員會審定書 ........................................................................................ #
中文摘要 ........................................................................................................ i
Abstract ....................................................................................................... ii
目錄.............................................................................................................. iv
表目錄 ......................................................................................................... vii
圖目錄 ........................................................................................................ viii
第一章 緒論 ................................................................................................ 1
1-1 研究背景與動機 ............................................................................. 1
1-2 創作研究目的................................................................................. 2
1-3 名詞解釋 ........................................................................................ 2
1-4 創作研究方法與架構 ...................................................................... 4
1-5 創作研究範圍與限制 ...................................................................... 6
第二章 文獻探討 ......................................................................................... 7
2-1 圖像符號理論................................................................................. 7
2-1.1 圖像與符號學....................................................................... 7
2-1.2 圖像符號意義與作用 .......................................................... 10
2-1.3 圖像符號設計原則與流程 ................................................... 12
2-2 圖形介面特性與設計原則 ............................................................. 16
2-2.1 圖形使用者介面特性 .......................................................... 16
2-2.2 行動裝置圖形使用介面設計原則 ........................................ 18
2-2.3 隱喻圖形使用者介面 .......................................................... 25
2-3 使用者中心設計 ........................................................................... 27
2-3.1 圖像設計與認知歷程 .......................................................... 27
2-3.2 使用者心智模型 ................................................................. 31
2-3.3 使用性與評估..................................................................... 33
2-4 小結 ............................................................................................. 40
第三章 研究方法與步驟............................................................................. 41
3-1 研究方法 ...................................................................................... 41
3-2 研究樣本與篩選 ........................................................................... 43
3-3 研究對象與測試情境 .................................................................... 47
3-3.1 預備分析 ............................................................................ 47
3-3.2 啟發式評估法..................................................................... 47
3-4 測試方法 ...................................................................................... 48
3-5 流程與建構 .................................................................................. 49
第四章 評估分析與結果............................................................................. 51
4-1 評估分析 ...................................................................................... 51
4-1.1 引起主題介面與主選單介面注意的視覺因素 ....................... 51
4-1.2 圖像符號的視覺元素構成特徵 ............................................ 53
4-1.3 圖像符號風格的一致性影響 ............................................... 57
4-1.4 主題介面與主選單介面的視覺關聯性重要性 ....................... 59
4-1.5 影響App 介面的整體美感因素 ........................................... 61
4-2 小結 ............................................................................................. 63
第五章 設計創作 ....................................................................................... 65
5-1 設計理念 ...................................................................................... 65
5-2 主題的擬定 .................................................................................. 65
5-3 設計方法與流程 ........................................................................... 67
5-4 設計創作內容............................................................................... 68
5-4.1 嬰幼兒用品大展創作過程與作品 ........................................ 68
5-4.2 台北國際旅展創作過程與作品 ............................................ 74
5-4.3 台北國際電腦展創作過程與作品 ........................................ 81
5-4.4 台北國際書展創作過程與作品 ............................................ 87
5-4.5 台北國際自行車展創作過程與作品 ..................................... 93
5-4.6 台灣設計展暨台北城市設計展創作過程與作品 ................... 98
5-4.7 創作成果展示................................................................... 105
5-5 創作作品分析 ............................................................................. 106
5-6 創作作品滿意度評估分析 ............................................................. 112
第六章 結論與建議 ................................................................................... 114
6-1 研究結論 ..................................................................................... 114
6-2 後續研究建議.............................................................................. 115
參考文獻 .................................................................................................. 116
附錄一 : 收集之三十九組樣本 ................................................................. 121
附錄二 : 介面滿意度評估問卷 ................................................................. 126

                                

中文文獻
1.Fiske, John (1995)。傳播符號學理論(Introduction to communication studies) (張錦華等譯)。臺北市：遠流。
2.Norman,D.A. (2000)。設計心理學(The Psychology of Everyday Things) (卓耀宗譯)。臺北市：遠流。
3.Rudolf Arnheim (1976)。藝術與視覺心理學 (Art and visual perception) (李長俊譯)。臺北市：雄獅。
4.Preece,J.,Rogers,Y.& Sharp,H. (2006)。互動設計：跨越人－電腦互動 (Interaction Design : Beyond Human-Computer Interaction) (陳建雄譯)。臺北市：全華圖書。
5.Shneiderman, B. (2005)。人機介面 : 有效的人機互動策略 (Designing the user interface : strategies for effective human-computer interaction) (曾志軒譯)。臺北市：臺灣培生教育。
6.Steven Hoober & Eric Berkman (2012)。行動介面設計模式(Designing Mobile Interfaces) (鄭巧玉譯)。臺北市：基峯。
7.Suzanne Ginsburg (2011)。iphone User Experience簡單法則—好感度的iphone使用者體驗 (洪沛然譯)。臺北市: 基峯。
8.Theresa Neil (2012)。行動介面設計模式圖鑑—以視覺範例學習有效的介面設計模式( Mobile Design Pattern Gallery)(鄭巧玉譯)。臺北市 : 基峯。
9.林品章、張照聆(2009)。圖像傳達系統化之理論基礎。設計學研究， 12(2)， 46-65。
10.林榮泰(1991)。從圖像語意傳達探討人機介面圖像的視認與設計。技術學刊， 6 (2)， 195-202。
11.林榮泰(1993)。評估圖像符號方法的研究。明志工專學報， 25， 239-256。
12.朱新明、李亦菲(2001)。架設人與電腦的橋樑：西蒙的認知與管理心理學。臺北市 : 城邦文化。
13.方裕民(2003)。人與物的對話：互動介面理論與實務。臺北市：田園城市。
14.李幼蒸(1997)。文化符號學 :符號學和意識形態。臺北市：唐山。
15.李青蓉、魏丕信、施郁芬、邱昭彰(1998) 。人機介面設計。臺北市：空中大學。
16.周陟(2010)。UI 進化論：行動裝置使用者介面設計 (謝季穎譯)。臺北市 : 上奇資訊。
17.卓良政(2000)。圖像式操作介面之研究-以數位相機為例。國立成功大學工業設計所碩士論文。
18.姚村雄(2001)。從記號學角度探討日治專賣時期台灣酒類標貼設計之視覺符號運作。設計研究， 1， 121-140。
19.許有真(2001)。人機介面隱喻之探討。教學科技與媒體， 58， 26-33。
20.黃柏文(2004)。行動電話人機介面圖像意象及其偏好之研究。中原大學商業設計研究所碩士論文。
21.張悟非(1992)。從認知心理觀點來探討視覺資訊設計的方向。工業設計， 21(1)， 4。
22.張繼文(1991)。商業設計的本質性任務與趨向-透過視覺傳達呈現影像世界。現代美術，39， 47-52。
23.湯永成(1992)。家電機械與記號圖案。工業設計， 21 (1)， 47。
24.陳美蓉(2002)。應用符號學理論探討圖像符號的意義建構與解讀之特質。國立交通大學應用藝術研究所碩士論文。
25.管倖生、阮綠茵、王明堂、王藍亭、李佩玲、高新發、黃鈴池、黃瑞菘、陳思聰、陳雍正、張文山、郭辰嘉、楊基昌、楊清田、童鼎鈞、董黃志、鄭建華、盧麗淑(2009)。設計研究方法(第二版) 。臺北市：全華圖書。
26.鄭昭明(1993)。認知心理學 -理論與實踐。臺北市：桂冠圖書。
27.翟治平、王韋堯(2009)。廣告圖像中對比形式設計之探討。國立臺灣科技大學設計研究所／國立高雄應用科技大學文化事業發展系，設計學報， 14(1)， 63-80。
28.蔡劼明(2006)。智慧型手機圖像辨識率與滿意度之評估研究。國立臺北科技大學創新設計研究所碩士論文。
29.謝育仁(2000)。指示性圖示之研究-以旅遊地圖為例。國立成功大學工業設計研究所碩士論文。
30.蕭淑芳(2004)。電腦繪圖軟體圖像設計形式對圖像意義傳達影響之研究。國立成功大學工業設計系研究所碩士論文。

外文文獻
1.Apple Computer Inc. (1992).Macintosh human interface guidelines. Addison-Wesley.
2.Biederman,I.,& Coorper,E. E. (1992).“Size Invariance in Visual Object Priming.”Journal of Experimental Psychoogy:Human Perception and Performance,18(1) ,121-133.
3.Charles W Morris (1938). Foundations of the Theory of Signs. The University of Chicago Press.
4.Getner,D.,& Stevens,AL.(1983).Mental Models,Hillsdale,NJ:Erlbaum.
5.Gong, J., & Tarasewich, P. (2004).Guidelines for handheld mobile device interface design,Proceedings of the 2004 Decision Sciences Institute Annual Meeting,Boston.
6.Hsu, Yu-Chen (2000).Design of Multiple Metaphors in User- Interface. Proceedings of International Conference on Computers in Education.Taiwan.
7.Horton, William (1994). The Icon Book：Visual Symbols for Computer Systems and Documentation. New York : John Wiley ＆ Sons, Inc.
8.Kelvin Kam Wing Chu (2001). Users with Small Screens - Less than 640 x 480, Principles and strategies for practitioners designing universally usable sites.
9.Nielson, J. (2000). Why you only need to test with 5 users. Alertbox. Retrieved February 18, 2012, from www.useit.com/alertbox/2000319.html
10.Norman,D.A.(1983).Some observations on mental modes In D.Gentner&A.L.Stevens(Eds.),Mental models(pp.7-14). NJ:Lawrence Erlbaum.
11.Norman, D.A.(1988).The psychology of everyday things. New York: Basic Books.
12.Norman, D.A. (1988). The Design of Everyday Things. New York : Currency.
13.Nielsen, J.(1993).Usability Engineering. San Francisco.CA: Morgan Kaufmann Publishers Inc.
14.Peddie, J.(1992).Graphical User Interfaces and Graphic Standards.New York.McGraw-Hill.
15.Preece,J.(1993).A guide to usability:Factors in computing,Addison-Wesley,Wokingham,England.
16.Richards, S., Barker, P., Banerji, A., Lamont, C., & Manji, K.(1994).The use of metaphors in iconic interface design. Intelligent Tutoring Media, 5(2), 73-80.
17.Rouse,WB.,&Morris,NM.(1986).On looking into the black box:prospects and limits in the search for mentals. Journal of Experimental Psychology;Learning,Memory,and Cognitions,15,p729-747.
18.Weiss,S. (2002).Handheld Usability . John Wiley & Sons Inc., New York.
19.Saussure, F. (1966). Course in general linguistics. New York : Mcgraw-Hill.
20.Marcus, A. et al. (1984). Baby Faces: User-Interface Design for Small Displays. ACM, p18-23.
21.Marcus, A. (2001). Babyface design for mobile devices and the web. Paper presented at the Human-Computer Interface Internet (HCII), New Orleans, LA, USA.
22.Molich,R.,& Nielsen,J.(1990).Improving a human-computer dialogue. Communications of the ACM,33(3),338-348.

網路資料
1.2013台灣設計展暨台北城市設計展(2013)。瀏覽日期 : 2014年3月23日，取自 : http://www.designexpo.org.tw/
2.AppArchitect。How to include a Launch Image? (Splash Screen)。瀏覽日期 : 2014年3月23日，取自 : http://support.apparchitect.com/knowledgebase/articles/215151-how-to-include-a-launch-image-splash-screen
3.台北國際旅展。亞太地區最大型展售合一旅展。瀏覽日期 : 2014年3月23日，取自 : http://www.taipeiitf.org.tw/Content/article.aspx?Lang=1&SNO=02000001
4.維基百科。台北國際自行車展覽會。瀏覽日期 : 2014年3月23日，取自 : http://zh.wikipedia.org/wiki/%E5%8F%B0%E5%8C%97%E5%9C%8B%E9%9A%9B%E8%87%AA%E8%A1%8C%E8%BB%8A%E5%B1%95%E8%A6%BD%E6%9C%83
5.維基百科。台北國際電腦展。瀏覽日期 : 2014年3月23日，取自 : http://zh.wikipedia.org/wiki/%E5%8F%B0%E5%8C%97%E5%9C%8B%E9%9A%9B%E9%9B%BB%E8%85%A6%E5%B1%95
6.維基百科。台北國際書展。瀏覽日期 : 2014年3月23日，取自 : http://zh.wikipedia.org/wiki/%E5%8F%B0%E5%8C%97%E5%9C%8B%E9%9A%9B%E6%9B%B8%E5%B1%95
7.維基百科。行動應用程式。瀏覽日期 : 2014年3月23日，取自 : http://zh.wikipedia.org/wiki/%E6%B5%81%E5%8B%95%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F
8.維基百科。Android。瀏覽日期 : 2014年3月23日，取自 : http://zh.wikipedia.org/wiki/Android
9.維基百科。IOS。瀏覽日期 : 2014年3月23日，取自 : http://zh.wikipedia.org/wiki/IOS
10.維基百科。Windows Phone。瀏覽日期 : 2014年3月23日，取自 : http://zh.wikipedia.org/wiki/Windows_Phone
11.維基百科。易用性。瀏覽日期 : 2014年3月23日，取自 : http://zh.wikipedia.org/wiki/%E6%98%93%E7%94%A8%E6%80%A7

簡易檢索 / 詳目顯示

相關論文