由於行動裝置與個人電腦的普及,介面設計重要性大增,介面設計 的好壞對於產品銷售、品牌體驗、顧客滿意度等,都有決定性的影響。 本研究主旨為探討讓瀏覽者多加停留、再次造訪的網站,包含哪些特質 以及如何設計出功能性與視覺美學兼具的圖形介面。
本研究以原質化設計(Material Design)為主題,由兩大方向進行分析。 首先由文獻資料探討圖形介面的發展歷程與風格演進,進而探究原質化 設計風格表現形式,並歸納其特點。得出原質化設計「三大構面與九大 準則」之具像介面風格,分別從「資訊架構」、「內容組織」、「視覺 風格」三者探討,「資訊架構」的介面設計原則為「親和性」、「易用 性」、「可視性」; 而「內容組織」則強調「易讀性」、「回饋性」、 「操控性」;最後「視覺風格」之設計準則為「一致性」、「隱喻性」、 「識別性」。
另一個角度則探討抽象的心理感受,由使用者端出發,了解原質化 介面設計之視覺傳達效力與其潛在價值是非常重要的。本研究藉由場景 重現測驗,讓30位受測者實際進行票務訂購操作,分別訂購我國交通部 台灣鐵路局(傳統介面)與歐洲鐵路公司(原質化設計介面),操作兩 款差異極大,風格相互對比之介面,以最後按下「購買確認鍵」,為計 時之結束。過程中,詳盡記錄受測者的停頓點與疑慮之處,並鼓勵使用 「放聲思考法」,將疑問隨時表達出來,任務完成後,藉由深度訪談法, 循序誘導使用者提出內心對於原質化介面之想法,將使用者的「感受」轉化成「關鍵詞」,藉由方法目的鍊 (Means-end Chains)分析原質化設計 之 特 質,並 將分析結果繪製成原質化介面之階層價值圖(Hierarchical Value Map, HVM)。訪談結果得知,臺鐵介面帶給使用者的觀感為:系統分歧、資訊反覆 重述、圖示之使用未符合直覺性與一致性等較負面的感受;而歐洲鐵路公司之原 質化介面給予使用者的觀感包含簡單明瞭、有效率、信任感、舒適愉悅感等等價 值感受,而最重要的價值鍊為:內容簡單明瞭(A 2)、介面親和力(A 4)- 效 率高(C 4)- 愉悅感(V8),以此價值鏈為依據,綜合文獻研究之原質化介面 設計問題,並利用顧客管理經驗(Customer Experience Management, CEM)洞悉顧 客需求,從其角度思考,進一步擬出台鐵網站改版策略應用於創作。

Due to the popularity of mobile devices and personal computers, user interface design cannot be more crucial. Features of user interface design have a decisive impact on sales, brand experience, and customer satisfaction, etc. This study was to explore the websites, which make the viewers spend more time looking over and visit the page again, contain what kinds of traits as well as how to design a functional and aesthetic graphical user interface.
The study, based on material design, is analyzed through two ways. First, I examine the development of graphical user interface and further explore its context and manifestation. The interface styles can be summed up into “three facets and nine principles” (one facet—three principles), which are 1) information architecture— affinity, accessibility, and visibility. 2) content organization—legibility, feedback, and manipulability. 3) visual style—consistency, metaphor, and distinctiveness.
Second, I take a stance on the users, making them practically order the tickets online to perceive the direct feeling through the operating experience. After finishing the experience, by the in-depth interviewing, I gradually transfer the users’ thoughts about Material Design into keywords and analyze them with Means-end chains. I illustrate the analysis result into Hierarchical Value Map (HVM) of Material Design, and hence, the most important sector is Simple content (A2), User-friendly (A4) ⟶ High efficiency (C4) ⟶ Enjoyable (V8). Following this result, I explore the core problem of the traditional interface at Taiwan Railway Administration’s website. Furthermore, I avail myself of Customer Experience Management (CEM) to elaborate on the strategy of revising Taiwan Railway Administration’s web interface as well as apply it to the follow-up creation.

中文專書
1. Lakoff, G. & Johnson, M.(2006)。我們賴以生的譬喻(周世箴譯)。臺北:聯經。
2. 方裕民(2003)。人與物的對話-互動介面設計理論與實務。臺北:田園城市文 化。
3. 趙大羽,關東升(2014)。互動設計的藝術- iOS7/8擬物化到扁平化革命。 臺北:佳魁資訊。
4. Louis, R.G. & Peter, M. (2003)。資訊架構學-網站應用第二版(陳建勳譯。臺 北:歐萊禮。
5. 魏澤群(2007)。優使性2.0(Usability 2.0)-網站經驗設計與使用者研究。臺 北:網奕資訊科技。
6. Preece, J., Rogers, Y., & Helen, S.(2006)。互動設計:跨越人電腦互動(陳建雄 譯)。臺北:全華圖書。
7. Bernd H. Schmitt (2004 )。顧客管理經驗:天衣無縫的整合式顧客經營(顧淑 馨譯)。新北市:中國生產力中心。
8. Andy, P. & Jason N. (2013)。人本X互動設計:有溫度的思考,讓設計滿足使 用需求》 (Interactive Design: An Introduction to the Theory and Application of User-Centered Design)(吳國慶譯)。臺北:果禾文化。
9. Theresa, N. (2014)。行動介面設計模式圖鑑(第二版)(鄭巧玉譯)。臺北:歐 萊禮 。
10. Jenifer, T.(2012)。操作介面設計模式 第二版(莊惠淳譯)。臺北:歐萊禮 。
11. 葉謹睿(2010)。互動設計概論。臺北:藝術家。
12. 原田秀司(2014)。多元裝置時代的網站UI/UX設計法則:打造出讓使用者完 美體驗的好用介面(許郁文譯)。臺北:博碩文化。
13. Randy, J. H.(2014)。使用者至上:重視瀏覽體驗,規劃出絕佳網路產品的 思考秘訣。(林書傑譯)。臺北:果禾文化。
14. Steve, K.(2014)。如何設計好網站:Dont Make Me Think(陳芳智譯)。臺北: 上奇資訊。
15. Norman, D. A. (2000)。設計心理學—以使用者為中心,安全易用的日常生活用 品設計原理(卓耀宗譯)。臺北:遠流出版。
英文專書
1. Mullet, K., and Sano, D. (1995). Designing Visual Interfaces: Communication Oriented Techniques. Mountain View, CA: Sunsoft Press.
2. Nielsen, J. (1989). Coordinating User Interface for Consistency. Boston: Academic Press.
3. Bowles C., Box J. (2011). Undercover user experience design: Learn How To Do Great UX Work with Tiny Budgets, No Time, and Limited Support. Berkeley, CA: New Riders Berkeley.
4. Johnson, J. (2014). Designing with the mind in mind (2nd ed.). San Francisco: Morgan-Kaufmann Publishers.
5. Johnson, J. (2000). GUI Bloopers: Don’t and Dos for Software Developers and Web Designers. San Francisco: Morgan-Kaufmann Publishers.
6. Apple Computer, Inc. (1993). Macintosh Human Interface Guidelines. Reading,MA:Addison-Wesley.
7. Microsoft. 1995. The Windows Interface Guidelines for Software Design: An Application Design Guide. Redmond, WA:Microsoft Press.
8. Kamil, Z., & Jerry, C. 2016. Interaction Design Trends 2015 & 2016. Retrieved from https://www.uxpin.com
9. Ben, G., & Carrie C. 2016.The State of Web Design. Retrieved from https://www.uxpin.com
10. Matt, E., & Krzysztof, S., & Kamil, Z., & Jerry, C. 2015.The Curated Collection of Web Design Techniques-Cards and Minimalism. Retrieved from https://www.uxpin.com
中文論文期刊
1. 藍先鴻(2015)。扁平化與擬物化圖標設計對主觀偏好、知覺和記憶的影 響—事件相關電位研究。輔仁大學心理學系碩士論文,臺北。
2. 鄒智豪(2014)。扁平化設計對藝術設計教學影響的新思考。楚雄師範學 院學報第7期。
3. 賴盈雯、蔣世寶、陳靜儀(2015)。蘋果公司行動裝置作業系統之介面圖示 設計。嶺東學報第35期,臺中。
4. 張恬君、蔡子瑋、陳俊瑋(2004)。以信息熵理論探討數位互動美學的創 作機制-以數位博物館網頁設計為例。國立交通大學應用藝術研究所研究計 畫,新竹。
5. 羅宗藩(2012)。智慧型手機 GUI 設計發展模式。銘傳大學商品設計學系碩 士論文,臺北。
6. 鄭琨耀(2010)。數位看板之互動式介面設計之研究與應用-以中山博物館 為例。大同大學工業設計研究所碩士論文,臺北。
7. 林君玲(2014)。網站之使用者介面設計探討與創作-以音樂平台為例。國 立臺灣師範大學設計學系碩士論文,臺北。
8. 羅家駿、王勇傑(2004)。針對使用者認知型態設計個人化墊子商務網站 介面。中華管理學報電子商務專刊,新竹。
9. 馮淑萍、嚴真(2008)。服務溝通介面設計之研究。設計研究學報第八期, 臺北。
10. 林孟潔(2014)。時間性資訊圖像應用於互動式介面設計之創作研究-以近 代平面設計使為例。國立臺灣師範大學設計學系碩士論文,臺北。
11. 陳瀚凱(2015)。動態網頁在美感喚起與審美性因子關係上之研究。商業 設計學報第19期,臺中。
12. 金哲敏、陳一賢(2008)。博物館網站首頁佈局編排與風格之關係研究(2008)。 圖文傳播藝術學報,臺北。
13. 許雅雯、林建漢(2010)。臺灣現代劇團網站介面設計之使用性研究。商 業設計學報第14期,臺中。
14. 蘇子淵、何宏文(2015)。跨平台網頁介面 RWD 對於網頁瀏覽之視覺傳 達的影響。商業設計學報第19期,臺中。
15. 蘇昭銘(2006)。台灣文化創意產業網站內容分析。世新大學行政管理學 系碩士學位論文,臺北。
16. 鄭恩維(2007)。國內外著名購物網站使用者介面設計之研究。國立臺灣 藝術大學圖文傳播藝術學系碩士論文,臺北。
17. 胡惠君(2015)。察覺App使用者之心智模式 —以即時通訊軟體LINE為例。 國立嘉義大學視覺藝術系碩士論文,嘉義。
18. 游凱婷(2012)。平板電腦之電子食譜使用者介面設計研究。大同大學工業 設計研究所碩士論文,臺北。
19. 林勤豐、葉明義、邱兆民(1999)。「方法目的鏈」研究法建構行銷研究變 數與行銷策略之探討。中華管理評論國際學報第2期,頁107-128。
20. 林裕淩、李兆益(2009)。以方法目的鏈探討遊戲機對顧客價值之研究。 國立勤益科技大學企業管理系碩士論文,臺中。
21. 王愉嘉(2012)。禮品包裝設計之研究——方法目的鏈之應用。藝見學刊 第4期,臺中。
22. 曾光華、陳貞吟、張永富(2004)。以方法目的鏈探討旅客懷舊體驗的內 涵與價值。國立中正大學企管系暨行銷研究所,嘉義。
23. 許峻誠(2011)。數位典藏藝術網站頁面之使用者經驗研究。 藝術教育期 刊,第22卷期,79-103.
24. 林裕淩、鄭麗珍、林芝亘(2008)。以方法目的鏈探求數位學習平台需求 之研究。數位學習科技期刊創刊號。
25. 翁慧敏(2004)。應用隱喻誘引技術探討消費者心中理想的品牌形象:以即 飲咖啡為例。世新大學傳播研究所碩士論文,臺北。
26. 吳敏瑄(2008)。網頁的美感概念及設計原則之研究。世新大學資訊傳播 學系碩士論文,臺北。
27. 郭如萍(2006)。使用者中心設計取向之網路使用性實踐初探:意義、方法 與台灣網路產業現況。國立交通大學傳播研究所碩士論文,新竹。
28. 張紹甫(2013)。用於資訊空間導覽的實體使用者介面隱喻。工業設計第2 期,桃園。
29. 林銘煌(2012)。極簡主義在設計上的形式表徵與發展趨向。設計學報第 17卷第1期。
30. 陳建文、李有仁、嚴秀茹、鄭江宇(2008)。消費者使用購物網站之行為 模式。資訊管理學報第15卷第3期。
網路文獻:
1. Google I/O 2014 開發大會快報:Material Design 最讓開發者驚艷 (民國 104 年 9 月 1 日)。取自 :http://www.ithome.com.tw/news/89167
2. Google 在擬物與扁平設計間的新理念:Material Design (民國 105 年 9 月 1 日)。取
自:https://buzzorange.com/techorange/2014/07/03/google-on-material-design/
3. “類扁平化設計”時代到來了 (民國 105 年 9 月 1 日)。
4. 自 :http://blog.fourdesire.com/2014/12/11/li-zu-zai-ni-wu-yu-bian-ping-zhi-jian/
5. 立足在擬物與扁平之間(民國 105 年 9 月 1 日)。取
自 :http://blog.fourdesire.com/2014/12/11/li-zu-zai-ni-wu-yu-bian-ping-zhi-jian/
6. 最強 UI 設計守則:遵守以下 75 點,讓你擁有完美界面設計(民國 105 年
9 月 1 日)。取
自 :https://buzzorange.com/techorange/2015/12/29/75-rules-of-a-good-ui-design/
7. Material Design(原質化設計)視覺設計語言規範(民國 105 年 9 月 1 日)。
取自 :https://wefollownews.appspot.com/cittopnews201408_10/5510.html
8. Google Material Design Introduciton(民國 105 年 9 月 1 日)。取
自 :http://wear.techbrood.com/design/spec/material-design/introduction.html#
9. 14 款 Material Design 介面設計 Android App 嘗鮮推薦(民國 105 年 9 月
3 日)。取
自 :http://www.playpcesor.com/2014/08/14-material-design-android-app.html
10. 扁平化與近代介面設計趨勢分析。(民國 105 年 9 月 3 日)取自:
https://issuu.com/kylechen/docs/flat_design
11. Flat Design vs. Material Design(民國 104 年 9 月 3 日)。取
自 :http://designmodo.com/flat-vs-material/
12. Material world: how Google discovered what software is madeof(民國 104 年 9
月 3 日)。取
自 :http://www.theverge.com2014/6/27/5849272/material-world-how-google-discov ered-what-software-is-made-of
13. 如何讓動效符合設計原則?(民國 104 年 9 月 3 日)。。取 自 :http://www.uisdc.com/animation-follow-design-principle
14. 紙墨暈開的靈感初探 Material Design(民國 104 年 9 月 7 日)。取
自 :http://article.pchome.net/content-1733990.html
15. Material-UI(民國 104 年 9 月 7 日)。取自 :http://www.material-ui.com/#/
16. 談一談設計風格| 5.虛擬元素活在物質 Material design 世界(民國 104 年 9
月 7 日)取自 :http://www.bigertech.com/post/materialdesign/
17. UI Design Tips: Web Application Icon Design(民國 104 年 9 月 7 日)取
自 :http://blog.stationfour.com/helpful-tips-for-designing-web-application-icons/
18. Collection of Google Material Design Resources(民國 104 年 9 月 20 日)取
自 :https://codegeekz.com/collection-google-material-design-resources/
19. First implementation of Material Design(民國 104 年 9 月 20 日)。取
自 :https://medium.com/feedly-behind-the-curtain/first-implementation-of-material-
design-by-feedly-fba1494022a4#.lqb1j0snw
20. An exploration in Material Design(民國 104 年 9 月 20 日)。取
自 :https://medium.com/feedly-behind-the-curtain/an-exploration-in-material-design
-by-feedly-8c1a1cbdfdcd#.2dq1nd4r6
21. A Tale of Two Platforms: Designing for Both Android and iOS(民國 104 年 9 月
20 日)。取
自 :http://webdesign.tutsplus.com/articles/a-tale-of-two-platforms-designing-for-bot h-android-and-ios--cms-23616
22. What are the real merits of material design?(民國 104 年 9 月 20 日)。取
自 :http://thenextweb.com/dd/2015/11/10/what-are-the-real-merits-of-material-desig n/#gref
23. Is Material Design killing the Web?(民國 104 年 9 月 20 日)。取
自 :http://www.webdesignerdepot.com/2015/10/is-material-design-killing-the-web/
24. Material Design Awards(民國 104 年 9 月 20 日)。取 自 :https://design.google.com/articles/material-design-awards/
25. 卡片式設計 大未來 Part1(民國 104 年 9 月 20 日)。取
自 :https://designtongue.me/%E5%8D%A1%E7%89%87%E5%BC%8F%E8%A8% AD%E8%A8%88%E5%A4%A7%E6%9C%AA%E4%BE%86part1/
26. UI 美學趨勢備忘錄─淺析扁平化設計(民國 104 年 10 月 30 日)。取 自 :http://www.inside.com.tw/2013/03/25/flat-design
27. 扁平化設計與 型學(iOS 7 特別更新版)(民國 104 年 11 月 10 日)。取 自 :http://blog.justfont.com/2013/05/flat-design-and-typography/
28. SWISS DESIGN(民國 104 年 11 月 10 日)。。取 自 :http://www.designishistory.com/home/swiss/
29. Flat Design: Can You Benefit from the Trend?(民國 104 年 11 月 10 日)。取 自 :http://designmodo.com/flat-design/
30. What is the Point of Material Design?(民國 104 年 11 月 10 日)。取 自 :http://designmodo.com/material-design/
31. Material Design Resources and Inspiration(民國 104 年 11 月 10 日)。取 自 :http://designmodo.com/material-design-resources/
32. Learned From Analyzing Material Design Components(民國 104 年 11 月 15 日)。取 自 :http://designmodo.com/material-design-components/
33. Four Design Lessons from Material Design Documentation(民國 104 年 11 月 15 日)。取自 :http://designmodo.com/material-design-documentation/
34. Flat Design vs. Material Design: How Are They Different?(民國 104 年 12 月 21 日)。取自 http://designmodo.com/flat-vs-material/
35. What Is Flat Design?(民國 104 年 11 月 10 日)。取 自 :http://gizmodo.com/what-is-flat-design-508963228
36. How we used card sorting to design a Style Guide for web developers and UX designers(民國 104 年 10 月 27 日)。取
自 :https://www.optimalworkshop.com/blog/how-we-used-card-sorting-to-design-a- style-guide-for-web-developers-and-designers/
37. Material Design showcase: Best-in-Class Android app designs picked by Google(民 國 104 年 10月 20 日)。取
自 :http://materialdesignblog.com/material-design-showcase-best-in-class-android-a pp-designs-picked-by-google/