研究生: |
林孟潔 LIN, MENG-CHIH |
---|---|
論文名稱: |
時間性資訊圖像應用於互動式介面設計之創作研究-以近代平面設計史為例 A Study of Applying Temporal Infographics with Modern Graphic Design History to Interactive Interface Design |
指導教授: |
林俊良
Lin, Chun-Liang |
學位類別: |
碩士 Master |
系所名稱: |
設計學系 Department of Design |
論文出版年: | 2014 |
畢業學年度: | 102 |
語文別: | 中文 |
論文頁數: | 118 |
中文關鍵詞: | 資訊設計 、資訊圖像 、時間性資訊圖像 、互動式介面設計 、平面設計史 |
英文關鍵詞: | information design, infographics, temporal infographics, interactive interface design, graphic design history |
論文種類: | 學術論文 |
相關次數: | 點閱:467 下載:190 |
分享至: |
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報 |
面對資訊的爆炸與氾濫,人類一天所必須閱讀的資訊量已遠超過以前的幾億倍。從四面八方而來的資訊,繁雜而無系統,迫使人類吸收過多的累贅訊息。因此,如何將龐大的資訊加以整理與簡化,使接收者得以在訊息的洪流中,快速準確的擷取重點,將會是這一波「大數據」時代裡,亟需解決的溝通方式。
本研究以資訊設計(information design)的分支-資訊圖像(infographics)為研究方向,將目標鎖定在時間性資訊圖像與互動式介面設計之研究,透過內容分析法歸納整理出一套可供遵循的時間性資訊圖像設計規則。本研究將資訊圖像分為三大類:數據類-將數據轉化為圖像、非數據類-將文字轉化為圖像、綜合類-將數據與文字整合轉化為圖像。並將其表現形式分為三大類:靜態式、動態式和互動式。本研究針對時間性資訊圖像進行分類與分析,得出時間表示法以線性與環狀的時間概念與性質,有五種呈現方式:水平、垂直、曲線、循環、無循環。最後的實驗創作即依循所歸納與整理之設計模式,以近代平面設計史為主題,互動式介面設計為呈現方式,作為研究試驗成果。希冀研究結果能作為往後業界與學界於資訊圖像研究之參考依據。
Facing the information explosion, a huge amount of information that must be read in a day has far exceeded than the old days hundreds of millions of times. Information comes from all directions, mixed and disordered, forcing humans to absorb excessive unnecessary messages. Therefore, how to integrate the humongous amount of information into simple and systematic graphics, that readers and users can quickly and accurately capture the key idea, is definitely the main task in “big data” era.
This study focused on the research of infographics, a branch of information design. Also targeted on temporal infographics and interactive interface design as the main approach. Through the method of content analysis, it had come out with a design method of how to design temporal information. The study divided infographics into three categories: statistics infographics – transform statistics into graphics; non-statistics infographics – transform text into graphics; integrated data infographics – transform both statistics and text into graphics. There were also three presentation styles to convey infographics: static, dynamic and interactive. With the analysis and division, the main study focused on temporal infographics. Time had its two main modules: liner and circular. There were five ways to present temporal infographics: horizontal, vertical, curve, circulation, and non-circulation. The final design was based on the results and design principles of previous researches, to design a modern graphic design history interactive website interface. Hoping this study can become a future reference for Taiwan’s industry and academic research, and bring Asian design a fresh new look.
中文專書
1.王受之(2000)。世界現代平面設計1800-1999。臺北:藝術家。
2.方裕民(2003)。人與物的對話-互動介面設計理論與實務。臺北:田園城市。
3.林品章(1986)。商業設計。臺北:藝術家。
4.林品章(2007)。視覺傳達設計的理論與實踐。臺北:全華圖書。
5.林品章(2012)。設計學方法論。臺北:桑格文化。
6.林俊良(2004)。視覺傳達設計概說。臺北:藝風堂。
7.洪明宏(2002)。情報視覺化設計的裡論與實踐。臺北:全華圖書。
8.孫皓瓊(2012)。解構圖像-隱藏在圖像設計間的訊息傳達。臺北:佳魁資訊。
9.管倖生、阮綠茵、王明堂、王藍亭、李佩玲、高新發(2009)。設計研究方法(三版)。臺北:全華圖書。
10.陳俊宏、楊東民(2008)。視覺傳達設計概論(二版)。臺北:全華圖書。
11.木村博之(2012)。設計的邏輯:INFOGRAPHICS深入人心的視覺法則(楊宗訓譯)。臺北:旗標。(原著出版年:2010)。
12.柳本浩市(2009)。設計=社會(高詹燦譯)。臺北:瑞昇文化。
13.原田 泰(2012)。創意設計的基礎訓練:100%的思考圖解力(許郁文譯)。臺北:旗標。(原著出版年:2010)。
14.Holmes, N.(2005)。有例可圖-停格的異想世界。臺北:時報。
15.Kroeger, M.(2010)。設計是甚麼?保羅.蘭德給年輕人的第一堂啓蒙課程(吳莉君譯)。臺北:原點。
16.Lankow, J., Ritchie J. & Crooks R.(2013)。2013視覺資訊的力量讓數字故事「更好看」:抓住眼球經濟的「資訊圖」格式全書(簡美娟譯)。臺北:大寫。
17.Lohr, L. L.(2008)。視覺圖像與教學設計(張明傑譯)。臺北:心理。
18.Norman, D. A. (2000)。設計心理學—以使用者為中心,安全易用的日常生活用品設計原理(卓耀宗譯)。臺北:遠流出版。
19.Pratt, A. & Nunes, J. (2013)。人本X互動設計:有溫度的思考,讓設計滿足使用需求(吳國慶譯)。臺北:果禾文化。
20.Preece, J., Rogers, Y., & Helen, S.(2006)。互動設計:跨越人電腦互動(陳建雄譯)。臺北:全華圖書。(原著出版年:2002)
21.Wurman, R. S.(1994)。資訊焦慮Information Anxiety(張美惠譯)。臺北:時報(原著出版年:1989)。
英文專書
1.Horton, W. (1994). The Icon Book: Visual Symbols for Computer Systems and Documentation. New Jersey: John Wiley & Sons, Inc.
2.Jong, C. W., Purvis, A. W. & Tholenaar, J. (2009). Type-A Visual History of Typefaces and Graphic Styles. Cologne: TASCHEN.
3.Klanten, R. (2008). Data Flow: Visualizing Information in Graphic Design. Berlin: Gestalten.
4.Meirelles, I. (2013). Design for Information. Massachusetts: Rockport Publishers.
5.Meggs, P.B. & Purvis, A. W.(2006). Meggs' History of Graphic Design (Fourth Edition). New Jersey: John Wiley & Sons, Inc.
6.O'grady, J. V. & K. V. (2008). The Information Design Handbook. Ohio: HOW Books.
7.Rendgen, S. (2012). Information Graphics. Cologne: TASCHEN.
8.Smiciklas, M. (2012). The Power of Infographics. Indiana: Que Publishing.
中文論文期刊
1.IdN雙月刊(2008)。We love infographics-時代符號。第15季第4期。香港。
2.王孝筠(2007)。資訊圖像應用於蘋果日報編排設計之研究。中原大學商業設計研究所碩士論文,桃園。
3.王秀如、陳俊宏(1996)。圖表設計原理與表現形式初探。第十一屆技職教育研討會論文集-家政藝術類,臺北。
4.尹相崙(2010)。資訊圖像應用於台灣與日本飲食文化比較之研究創作。銘傳大學設計創作研究所碩士論文,臺北。
5.李欣青(1998)。視覺圖像在教學上的設計與運用。淡江大學教育資料科學研究所碩士論文,臺北。
6.李育全(2012)。資訊圖像應用於速食麵文化之創作與研究。銘傳大學商業設計學系碩士論文,臺北。
7.李郁桂(2002)。資訊通信產品圖像介面使用性之評估研究。國立臺北科技大學創新設計研究所碩士論文,臺北。
8.江欣潔(2013)。資訊視覺化觀點之互動展示策略研究。國立臺灣師範大學圖文傳播學系碩士論文,臺北。
9.林明陽(2013)。資訊視覺化以國小數學分數單元為主題之海報設計。崑山科技大學視覺傳達設計研究所碩士論文,臺南。
10.林紹萍(2011)。電子雜誌視覺資訊與資訊架構之可尋性研究。國立臺灣科技大學設計研究所碩士論文,臺北。
11.柳惠文(2004)。報紙新聞內容與圖像呈現對認知效果的影響。世新大學傳播管理學系碩士論文,臺北。
12.張悟非(1992)。從“認知心理”的觀點來探討視覺資訊設計的方向。明志工專學報,24,164-174,新北。
13.張喬雯(2005)。以資訊視覺化導向看虛擬物件在電視媒體運用之研究。國立臺灣師範大學圖文傳播學系碩士論文,臺北。
14.張藝樺(2012)。植物單元教材之信息圖像設計研究。國立新竹教育大學數位學習科技研究所碩士論文,新竹。
15.黃郅鈞(2004)。數位編織-虛擬環境中資訊視覺化探討。國立成功大學建築學研究所碩士論文,臺南。
16.陳乃綾(2013)。報紙圖像資訊產製分析:以示意圖新聞為例。臺灣大學新聞研究所,臺北。
17.陳芝菁(2011)。智慧型手機選單介面資訊呈現型式之設計研究。國立臺灣科技大學設計研究所碩士論文,臺北。
18.陳思仁(1998)。加入時間觀點的數值地籍系統之研究。國立成功大學測量工程研究所碩士論文,臺南。
19.陳品希(2013)。資訊圖像應用於推廣咖啡文化之平面設計創作研究。銘傳大學商業設計學系碩士論文,臺北。
20.陳俊文、梁朝雲(2001)。資訊設計及其延展與應用。教學科技與媒體,第57期,46-57。
21.陳國祥(1987)。圖表設計之理論與實務。成功大學學報,第22期,頁123-132。國立成功大學,臺南。
22.陳麟(2003)。可觸及的時間-人時互動介面於歷史性展示空間中之應用。國立成功大學建築研究所碩士論文,臺南。
23.陳娜文(2011)。圖像設計應用於螢幕介面訊息傳達之研究─以網頁圖像及行動電話圖像為例。台南應用科技大學應用設計研究所碩士論文,臺南。
24.馮淑萍(2000)。全球資訊網頁視覺傳達之使用者介面設計要素研究-以台灣企業形象網頁為例。雲林科技大學視覺傳達設計學研究所碩士論文,雲林。
25.單文經(1996)。插圖的種類與設計原則。教學科技與媒體,第30期,臺北。
26.楊惟玲(2012)。時間軸使用者介面欄位數目及資訊呈現方式之設計研究。國立臺灣科技大學設計研究所碩士論文,臺北。
27.蔡孟侖(2010)。資訊圖像形式詮釋金門縣戰地文化之創作研究。銘傳大學設計創作研究所碩士論文,臺北。
28.劉慧君(1998)。電子報資訊圖像呈現方式與閱聽人認知型態對閱讀成效、閱報時間與使用態度之影響。國立交通大學傳播研究所碩士論文,新竹。
29.鄭琨耀(2010)。數位看板之互動式介面設計之研究與應用–以中台山博物館為例。大同大學工業設計學系(所)碩士論文,臺北。
30.賴采秀(2014)。智慧型行動裝置應用程式圖示之識認度與聯想力研究。國立臺灣科技大學設計研究所碩士論文,臺北。
31.謝明倫(2013)。〈地方‧起點〉-資訊圖像表現於鐵道文化之創作研究。國立臺灣藝術大學視覺傳達設計學系碩士論文,臺北。
32.魏汝晏(2011)。數位教材介面多媒體訊息設計分析。世新大學資訊管理學研究所碩士論文,臺北。
英文論文期刊
1.Friendly, M. (2009). Milestones in the history of thematic cartography, statistical graphics, and data visualization.
2.Heeter, C. (1989). Implications of new interactive technologies for conceptualizing communication. In J. L. Salvaggio and J. Bryant (Eds). Media use in the information age: Emerging patterns of adoption and consumer use (p.217-235). Hillsdale, NJ: Lawrence Erlbaum.
3.Horn, R. E. (2000). Information Design: Emergence of a New Profession. Information Design (p15-33). Massachusetts: The MIT Press.
4.Mullet, K. & Sano, D. (1995). Designing Visual Interfaces. Mountain View, CA: SunSoft Press.
5.Nielsen, J. (1993). Usability Engineering. California: AP professional press.
6.Robert, J. (2000). Introduction: Why Information Design Matters. Information Design (p1-10). Massachusetts: The MIT Press.
7.Shedroff, N. (2000). Information Interaction Design: A Unified Theory of Design. Information Design (p267-292). Massachusetts: The MIT Press.
8.Smith, E. J. & Hajash, D. J. (1988). Informational Graphics in 30 Daily Newspapers. Journalism Quarterly, 65(3), p714-718.
9.Tullis, T. S. (1988). A system for evaluating screen formats: Research and application. Advances in Human-Computer Interaction. USA: Norwood, p 214-286.
10.Wurman, R. S. (2000). Foreword. Information Design. Massachusetts: The MIT Press.
網路資料
1.東京の土地・空間史年表(民國103年6月19日)。取自:http://nakano-design.com/?p=6325&cat=20
2.敘事設計資訊中心(民國102年12月28日)。取自:http://home.educities.edu.tw/lingyf/na/motop.html
3.蘋果電腦推出的歷代iPhone首頁介面設計(民國103年6月20日)。取自http://bostinno.streetwise.co/2013/08/14/ios-7-beta-apple-releases-ios-7-beta-ahead-of-ios-7release-date/
4.IKEA的組裝流程圖(民國103年4月12日)。取自http://classicwithatwistct.blogspot.tw/2013/04/how-to-build-ikea-dresser-step-5973.html
5.A Short Introduction to GRAPHIC DESIGN HISTORY(民國102年12月21日)。取自:http://www.designhistory.org/
6.A Visual History of the American Presidency(民國103年1月9日)。取自:http://www.timeplots.com/
7.Agricultural infographics + Tutorial(民國103年4月17日)。取自https://www.behance.net/gallery/Agricultural-infographics-Tutorial/6659287
8.Anatomy & Botany(民國103年6月18日)。取自http://rachelignotofskydesign.com/PLANT-ANATOMY
9.Andy Warhol-Chelsea Girls(民國103年1月8日)。取自:http://www.wardshelley.com/
10.Baltimore Waste(民國103年1月9日)。取自:http://www.kallwejt.com/
11.Biofuel(民國103年4月29日)。取自:http://www.newhousedesign.com/
12.Brocelets Through the Ages(民國103年4月15日)。取自:http://nymag.com/news/intelligencer/topic/man-bracelets/
13.Carland: A Century Of Motoring In America(民國103年1月9日)。取自http://visual.ly/carland-century-motoring-america
14.CNN.com Traffic Analysis(民國103年4月12日)。取自:http://happyfamousartists.com/blog/tag/mind-expanding/page/7/
15.Confessions of a Blog-a-holic(民國103年6月25日)。取自http://www.informationisbeautifulawards.com/showcase/23-confessions-of-a-blog-a-holic
16.Cosmic 140(民國103年1月9日)。取自:http://ia.net/blog/c140/
17.Data77(民國103年6月20日)。取自http://www.data77.com/
18.Death of the Titanic, Step by Step(民國103年4月30日)。取自:http://www.deviantart.com/morelikethis/144042438/fanart/cartoons?view_mode=2
19.DESIGN HISTORYAn Interactive timeline(民國102年12月28日)。取自:http://designhistorytimeline.com/
20.Design is History(民國102年12月28日)。取自:http://www.designishistory.com/
21.Digital Nostalgia-Life Online & Disk Space(民國103年1月9日)。取自:https://www.behance.net/gallery/236395/Digital-Nostalgia
22.(En)tangled Word Bank(民國103年4月12日)。取自:http://www.stefanieposavec.co.uk/entangled-word-bank/
23.ESPN NBA Hall of Fame(民國103年4月30日)。取自:http://cdgd.com/work/infographics/nba_hall_of_fame
24.Everyone Ever in the World(民國103年4月12日)。取自:http://theluxuryofprotest.com/Everyone_Ever_in_the_World.html
25.Flickr Flow(民國103年1月8日)。取自http://hint.fm/projects/flickr/
26.Food Assistance-The Growth of Food Stamps(民國103年4月12日)。取自:http://www.thefoxisblack.com/2009/08/25/food-assistance-good-transparency-by-gavin-potenza/
27.Global Warning(民國102年12月20日)。取自:http://www.informationisbeautifulawards.com/showcase/98-global-warning
28.Guess Who(民國103年4月12日)。取自:http://typeinspire.com/guess-who-by-craig-ward/
29.Here is Today(民國103年6月20日)。取自http://hereistoday.com/
30.History of Graphic Design(民國102年10月30日)。取自:http://www.johnmgarrison.com/designhistory/
31.History of Life(民國103年3月26日)。取自http://visual.ly/history-life
32.How Plants Grow(民國103年4月12日)。取自:http://www.pinterest.com/pin/171770173257188194/
33.Hunting Whales(民國103年4月12日)。取自:http://saibadesign.wordpress.com/2010/09/14/superinteressante-a-revista-dos-infograficos/
34.Idea Line(民國103年3月24日)。取自http://whitney.org/Exhibitions/Artport/Commissions/IdeaLine
35.Imaginary Factory(民國103年6月25日)。取自https://www.behance.net/gallery/8067551/Imaginary-Factory
36.Influence: A Brief History(民國103年4月15日)。取自:http://content.time.com/time/interactive/0,31813,2112166,00.html
37.It’s Tea Time(民國103年6月18日)。取自http://visual.ly/it%C2%B4s-tea-time
38.Jacko: Success in Black, Failure in Whitewhite(民國103年4月12日)。取自:http://www.alvarovalino.com/Michael-Jackson
39.Jess & Russ(民國102年10月30日)。取自:http://jessandruss.us/
40.Josef Müller-Brockmann’s visualization(民國103年6月19日)。取自:http://www.quentindelobel.com/josef-muller-brockmanns-visualization/
41.LA-NYC(民國103年4月12日)。取自:http://papercut.fr/2010/03/laxnyc-map/
42.La cascata quotidiana (Daily Waterfall)(民國103年1月9日)。取自:https://www.flickr.com/photos/ffranchi/4082408085/in/photostream/
43.Life Map to Quarter-Life(民國103年4月12日)。取自:http://www.mymodernmet.com/profiles/blogs/life-map-to-quarter-age-crisis
44.Meteorites 1900 - 2000(民國102年12月20日)。取自:http://www.informationisbeautifulawards.com/showcase/122-meteorites-1900-2000
45.Mission(s) to Mars(民國103年4月12日)。取自:http://laughingsquid.com/missions-to-mars/
46.Mount Everest(民國102年12月20日)。取自:http://www.infographicsvillage.com/other/the-inescapable-summon-of-mount-everest.html
47.Motown’s 191 Number One Hits(民國103年4月12日)。取自:http://www.alvarovalino.com/Motown
48.National Football League-History of Current Franchises(民國103年4月12日)。取自:http://www.flipflopflyin.com/flipflopflyball/other-nflfranchises.html
49.Newsweek Tusk(民國103年4月30日)。取自:http://www.kallwejt.com/
50.Nobels, no degrees(民國102年12月20日)。取自:http://www.informationisbeautifulawards.com/showcase/204-nobels-no-degrees
51.Over the Decades, How States Have Shifted(民國103年3月9日)。取自http://www.nytimes.com/interactive/2012/10/15/us/politics/swing-history.html?_r=0
52.Project GDH(民國103年6月30日)。取自http://www.miiradesign.com/project_gdh/
53.Seasonal Produce Calendar-Fruit(民國103年4月15日)。取自http://chasingdelicious.com/category/kitchen101/
54.Seismi(民國103年4月12日)。取自:http://www.nikoknappe.com/works/seismi/
55.Shneiderman, B. & Plaisant, C.(民國103年4月30日)。取自:https://www.cs.umd.edu/users/ben/goldenrules.html
56.Short Guys Can Dunk(民國103年4月30日)。取自:http://www.charlesapple.com/2012/03/is-it-the-shoes-its-gotta-be-the-shoes/
57.So You Need A Typeface(民國103年4月12日)。取自:http://julianhansen.com/
58.STATITICS STRIP(民國103年6月19日)。取自:http://www.artcom.de/en/projects/project/detail/statistics-strip/
59.Sunlight Calendar(民國103年4月12日)。取自http://technabob.com/blog/2013/12/04/sunlight-calendar/
60.Supply Chain of Mitsubishi Logistics(民國103年4月12日)。取自:http://news.infogra.me/ja/?p=621
61.Ten Artists, Ten Years(民國103年4月15日)。取自:http://visual.ly/10-artists-10-years-color-palettes
62.TextArc: Alice adventures in wonderland(民國103年4月12日)。取自:http://static.chinavisual.com/storage/contents/2003/02/18/5758T20030218125836_1.shtml
63.Thanksgiving-Timed Right(民國103年6月19日)。取自:http://www.coolinfographics.com/blog/2013/11/26/thanksgiving-timed-right.html
64.The Afghan Conflict: A Map of Possible Scenarios(民國103年4月12日)。取自:http://kkharsa.wordpress.com/category/infographics/
65.The Evolution of Video-Game Controllers(民國103年4月12日)。取自:http://laughingsquid.com/the-evolution-of-video-game-controllers/
66.The History of Visual Communication(民國102年12月28日)。取自:http://www.citrinitas.com/history_of_viscom/
67.The Hybrid Graphic Novel(民國102年10月30日)。取自:http://graphicnovel-hybrid4.peugeot.com/start.html
68.The Imp of The Mind: Invasive Bad Thoughts(民國103年3月26日)。取自https://www.behance.net/gallery/The-Imp-of-The-Mind-Invasive-Bad-Thoughts/15466737
69.The Popification of Top 40(民國103年4月15日)。取自:http://gavinpotenza.com/billboard-magazine/
70.The Popular Science Archive Explorer(民國103年3月24日)。取自http://www.popsci.com/content/wordfrequency
71.The Red List(民國102年12月31日)。取自:http://theredlist.com/wiki-2-343-view-graphic-design.html
72.The Sharks of Business(民國103年4月12日)。取自:http://infographics-inspiration.blogspot.tw/2010/10/sharks-of-business.html
73.The World Cup Predicted(民國103年4月12日)。取自:http://sectiondesign.co.uk/the-world-cup-predicted-wired-uk
74.Wake up, Back to Sleep(民國103年4月29日)。取自:http://www.pinterest.com/pin/56576539042764367/
75.Wicked World Weather for Audi Magazine(民國103年4月12日)。取自http://infonauts.in/project_details.php?pID=40
76.Wind Map(民國103年1月8日)。取自http://hint.fm/projects/wind/
77.Women as Academic Authors, 1665-2010(民國103年3月9日)。取自http://chronicle.com/article/Women-as-Academic-Authors/135192