國際品牌的使用者圖形介面之風格研究

全文

(1)

(2) 摘要近年來，智慧型手機、平板電腦等急速的普及於我們的生活圈當中，電腦自發展以來，不超過一個世紀的時間，卻已經完全的扭轉了人類的生活形態。不少人一天花了大半的時間與電腦溝通，而電腦以一個系統的形態、建構一個虛擬的環境，或稱「心智模型」（Mental Model ），建立起與使用者溝通的模式，這樣一個使用經驗的建立，囊括了人因工程、人機介面、互動設計、圖形視覺設計、與工程開發、行銷...等等的串聯。研究者希望透過對文獻的整理與具指標性之品牌的探討，累積產業在這方面較少著墨的內容，拋磚引玉，幫助累積、整理較具有系統性的資料，以及統合業界經驗，提出更接近業界可執行層面的研究觀點。本研究專注於圖形介面外觀的設計作探討，透過文獻瞭解到其外觀由四個元素所構成：圖像（icon）、字型（font）、色彩（Color）、與操作元件（Controls ），進而針對四項元素做深入探討，接著藉由現今市場普及率較高的三個系統作為案例分析對象，進行解構分析，並且與其品牌個性與背景作共同討論，推斷出各個系統的風格特性。透過文獻探討與案例分析的綜合比較後，本研究發現認為理念一致、視覺統一的介面外觀，能夠增加使用者對該系統的認同，現今的系統平台也都有達到這樣的目的。並且整體科技生態呈現：大環境影響操作系統的構成、操作系統影響使用者的使用習性、使用者構成大環境的科技生態循環。. 關鍵字：使用者經驗、圖形使用者介面、視覺要素. I.

(3) Abstract In these years, smart phone and tablet PC are more and more popular in our life, they occupy most of our life. However, the history of computer is no more a century, but it is absolute change the life of human being. Most of us cost lots of time to communicate with computer, but how? Computer establish as a system, that’s a kind of invented environment, or you can call it “Mental Model”. To build up a communication mode between computer and human. “User Experience” is a hot topic around these years, it includes lots of theory, like Ergonomics, Human-Computer Interaction, Interaction Design, Graphic User Interface design, and Research/Development. This study made a literature review focus on Graphic User Interface Design, to find the element of it, they are icon, color, font, and controls. Use these four topics to deeply review three most popular systems of market share. To know how the background and personality of system brand to effect their interface design? After the study, we found that, if computer system making all the appearance of interface identical, can increase the sense of trust form user, as the system we saw in the world. and these computer systems, user, science and technology are make a cycle to satisfy each other.. Keywords: User Experience, Graphic User Interface, Visual Design Element. II.

(4) 目錄摘要 ……………………………………………………………………………………………I ABSTRACT …………………………………………………………………………………II 目錄 ……………………………………………………………………………………………III 圖目錄 …………………………………………………………………………………………V 表目錄 …………………………………………………………………………………………VII 第一章緒論 ………………………………………………………………………………… 9 第一節研究背景 ……………………………………………………………………… 9 第二節研究動機 ……………………………………………………………………… 11 第三節研究目的 ……………………………………………………………………… 11 第四節研範圍與限制 ………………………………………………………………… 12 第五節研究流程與架構 ……………………………………………………………… 12 第二章文獻探討. ……………………………………………………………………………14. 第一節使用者經驗設計意涵與開發流程 ……………………………………………14 第二節圖形使用者介面起源與名詞定義 ……………………………………………19 第三節圖形使用者介面設計原則 ……………………………………………………21 第四節圖形使用者介面之視覺要素 …………………………………………………23 第五節文獻總結 …………………… …………………………………………………40 第三章研究方法與案例分析 …………………………………………………………………42 第一節研究方法. ……………………………………………………………………42. 第二節案例分析_圖形介面元素 …………………………………………………… 45 第三節案例分析_整體統和 ………………………………………………………… 76 第四章創作成果解析. ……………………………………………………………………… 80. 第一節創作理念. …………………………………………………………………… 80. 第二節創作方法. …………………………………………………………………… 81. 第三節創作成果. …………………………………………………………………… 83. 第五章案例分析結果與綜合討論. …………………………………………………………86 III.

(5) 第一節案例分析結果 ……………………………………………………………… 86 第二節研究討論 …………………………………………………………………… 87 第三節後續研究與建議 …………………………………………………………… 89 參考文獻. …………………………………………………………………………………… 90. IV.

(6) 圖目錄圖1-1(a) 桌上型電腦操作系統市佔率………………………………………………… 8 圖1-1(b) 行動裝置操作系統市佔率. ………………………………………………… 9. 圖1-2 研究架構與流程 ……………………………………………………………… 12 圖2-1 1984至1997間電腦使用於家庭、工作、學校 ……………………………… 13 圖2-2 使用者經驗設計領域 ………………………………………………………… 15 圖2-3 使用者經驗開發流程 ………………………………………………………… 17 圖2-4 人機互動關係 ………………………………………………………………… 18 圖2-5 圖解使用經驗設計 …………………………………………………………… 23 圖2-6 歐語系字體基本架構 ………………………………………………………… 26 圖2-7 銀幕字的切角處理 …………………………………………………………… 29 圖2-8 銀幕字的加高處理 …………………………………………………………… 29 圖2-9 銀幕字的開口加寬處理 ……………………………………………………… 29 圖2-10應用程式圖像設計構成矩陣表 ……………………………………………… 33 圖2-11工具列圖像設計構成矩陣表 ………………………………………………… 33 圖2-12十二色相與混色 ……………………………………………………………… 34 圖2-13色彩明度變化 ………………………………………………………………… 34 圖2-14彩度變化 ……………………………………………………………………… 35 圖2-15操作元件材質感知分析矩陣圖 ……………………………………………… 38 圖3-1 Mac OS X之應用程式圖像設計結構矩陣 …………………………………… 46 圖3-2 Mac OS X 之工具列圖像設計結構矩陣 ……………………………………… 48 圖3-3 擷取自Mac OS X元件之色彩. ……………………………………………… 50. 圖3-4 Mac OS X之色彩分析 ………………………………………………………… 51 圖3-5 Android ICS之應用程式圖像設計結構矩陣 ………………………………… 57 圖3-6 Android ICS之工具列圖像設計結構矩陣 …………………………………… 59 圖3-7 截取自Android ICS之色彩 …………………………………………………… 61 圖3-8 Android ICS之色彩分析 ……………………………………………………… 61 V.

(7) 圖3-9 Windows Vista之應用程式圖像設計結構矩陣……………………………… 68 圖3-10Windows Vista視窗常用色 ………………………………………………… 69 圖3-11截取自Windows Vista之色彩 ……………………………………………… 70 圖3-12Windows Vista之色彩分析 ………………………………………………… 70 圖3-13三案例應用程式圖像設計結構統整矩陣 …………………………………… 75 圖5-1 Adaptive 的空氣感與穿透感 ………………………………………………… 79 圖5-2 主頁面框架 …………………………………………………………………… 80 圖5-3 色彩定義 ……………………………………………………………………… 80 圖5-4 Philosopher字體 ……………………………………………………………… 81 圖5-5 Optima字體 ……………………………………………………………………81 圖5-6 展覽海報設計……………………………………………………………………82 圖5-7 展覽宣傳卡設計…………………………………………………………………82 圖5-8 休眠狀態畫面設計………………………………………………………………83 圖5-9 主畫面設計 …………………………………………………………………… 83 圖5-10 使用者經驗元素海報. ……………………………………………………… 83. VI.

(8) 表目錄表2-1 操作介面分類 ………………………………………………………………… 19 表2-2 GUI發展革沿. ………………………………………………………………… 20. 表2-3 使用者、網頁介面設計視覺要素之相關文獻 ……………………………… 24 表2-4 Vox-Atypl字型分類…………………………………………………………… 27 表2-5 圖形、符號、記號 …………………………………………………………… 32 表2-6 立體程度差異標準 …………………………………………………………… 37 表2-7 視覺形態感受差異 …………………………………………………………… 38 表2-8 觸覺形態感受差異 …………………………………………………………… 38 表3-1 案例分析說明範例 …………………………………………………………… 41 表3-2 Mac OS X之應用程式圖像規範內容 ………………………………………… 44 表3-3 Mac OS X 之應用程式圖像分析樣本………………………………………… 45 表3-4 Mac OS X之工具列圖像與系統圖像規範內容……………………………… 47 表3-5 Mac OS X之工具列圖像分析樣本…………………………………………… 48 表3-6 Mac OS X之字型分析_Lucida Grande. …………………………………… 49. 表3-7 Mac OS X之操作元件描述 …………………………………………………… 51 表3-8 Mac OS X操作元件整體分析 ………………………………………………… 53 表3-9 Android ICS之應用程式圖像規範內容 ……………………………………… 55 表3-10Android ICS之應用程式圖像分析樣本 ……………………………………… 56 表3-11Android ICS工具列圖像規範內容 …………………………………………… 57 表3-12Android ICS工具列圖像分析樣本 …………………………………………… 58 表3-13Android ICS系統字型分析_Roboto ………………………………………… 60 表3-14Android ICS操作元件描述. ………………………………………………… 62. 表3-15Android ICS操作元件整體分析 ……………………………………………… 64 表3-16Windows Vista之應用程式圖像規範內容…………………………………… 66 表3-17Windows Vista之應用程式圖像分析樣本…………………………………… 67 表3-18Windows Vista系統字型分析_Segoe UI …………………………………… 68 VII.

(9) 表3-19Windows Vista 操作元件描述 ……………………………………………… 70 表3-20Windows Vista操作元件整體分析…………………………………………… 73 表3-21三案例字體類別統整 ………………………………………………………… 76 表3-22三案例色彩描述統整 ………………………………………………………… 76 表3-23三案例操作元件整體分析 …………………………………………………… 77. VIII.

(10) 第一章、緒論. 第一節研究背景過去，圖形使用者介面主要扮演着與機器與人類溝通的角色；近十年來，電腦與行動裝置在生活中快速普及，以直線攀升的方式影響著人類的生活形態，而由於生活型態的轉變，電子裝置與人類更以密不可分的關係存在，圖形使用者介面（Graphic User Interface）除了是機器語言，更是軟體操作環境氛圍的營造者，人們所操作的軟體環境，越亦多元活潑。演進至這一兩年來，操作系統平台除了行之有年的桌上型電腦操作系統，亦多了數個行動裝置操作系統，整體操作系統平台中也從一支獨秀的Microsoft Windows發展成Windows、Android、MacintoshOS、iOS...等等，如圖1(a)、圖 1(b)，不論桌上型電腦或行動裝置，多個操作系統皆有廣大的客群，而每個系統平台在同一個與人類互動的基礎上，皆有獨特的風格特性。. 92%. Windows MacintoshOS Linux. 1% 7%. 圖1-1(a)：桌上型電腦操作系統市佔率（資料來源：Net Application Co., 2012 三月）. 9.

(11) 61. 1 2 3 iOS Android Java9Me Symbian BlackBerry Other. 14 19. 圖1-1(b)：行動裝置操作系統市佔率（資料來源：Net Application Co., 2012 三月） Aaker（1995）所提倡，認為管理、建構品牌須由識別風格出發，識別風格擔任品牌建構的方向、目的、意義之方針，而讓消費者意識到品牌風格。全球科技產業的競爭激烈，引領着人類生活的數個操作系統平台，各以不同的姿態與個性立足於產業。在2000年代以後，受到蘋果電腦在軟硬體整合有成、創造完美的使用者經驗之影響，各大操作系統平台逐漸意識到：電子裝置的操作環境應更具風格性、並且思考使用者需求，整合網路、媒體內容，創造出產品差異化、以及更多的附加價值，各個品牌追求以使用者為中心，開發更賞心悅目且具有獨特性的系統平台。以操作系統的開創來說，猶如一個創新環境的建立，需要明確地建構出操作邏輯、開發條件、環境的風格等等，如同建立一個宇宙一般。而一個開放性系統的釋出，需要有非常多的共同開發者一同參與，開發出各式的應用程式，開發團隊中有各種專業的人員需要對這個新的系統有不同切入點的理解，專案管理者、工程師、使用者經驗設計師等等，因此需要為這個新環境提供一套完整的規範，予各專業人員參考。. 10.

(12) 第二節研究動機儘管市面上操作系統平台數量多、且繁，但使用者對於操作系統的認知與識別程度還是相當高，能夠識別出每個操作系統之差異，並且依照當時所操作的系統做出邏輯調整，主要原因是該系統平台所呈現出來的圖形使用者介面風格予以視覺上的識別差異。圖形使用者介面設計風格旨在提供一參考準則予設計者、及共同開發者，達到該品牌明確的個性。而此一風格涉及的層面極廣，淺如視覺表現的定義；深至操作模式、資訊架構的擬定標準，都是可以構成操作系統介面風格的元素。我們是否能夠將這些元素加以系統化的劃分，以明確得知每項元素所影響的層面。至於這些元素，又跟該系統的背景、品牌個性、開發模式...之關聯性為何？對於一個新興的專業來說，相關的研究與資料整理都還有限，研究者從事相關專業的工作幾年，藉由經驗的累積尚能粗淺地判斷與提出觀點，希望藉由觀察國際知名的操作系統平台所定義之介面設計風格，分析、探討其內容架構，作為後人開發的參考。. 第三節研究目的同樣身為消費者與設計者的角度，本研究目的希望能夠分析統整出“以視覺角度切入，構成圖形使用者介面風格的元素為何”，幫助粗略將該領域的大架構劃分出來，藉由基本理論（使用者經驗、圖形使用者介面）的探討理解在介面設計的相關原則，並透過國際知名操作系統的圖形使用者介面案例做分析與探討，並統整、比較其差異。期盼在這樣的過程中，能夠系統性的擬出該範疇之視覺元素的組成架構，並針對現階段產業狀況作研究與探討，加上研究者具有實際業界經驗，能夠提供更接近執行層面的觀點，幫助未來學界或業界之相關發展得以更有組織性的幫助。 11.

(13) 除此之外，研究者鑑於圖形使用者介面設計的相關研究較少，台灣至今對於這項專業領域的人才、書籍、資源、較具系統性的文獻累積、專業的訓練都還不足，因此亦希望能夠藉由本研究，拋磚引玉地為該專業領域提供更多資料匯集與整理。亦在研究的過程中，實際產生創作成果，以實際執行設計輔助理論的發展，兩者相輔相成。如圖1.2。本研究主要研究目的如下： 1. 探討操作系統之識別以及圖形使用者介面的構成。即識別性、背景目的、風格、元件構成等屬性。 2. 藉由世界受矚目的操作系統之風格的分析過程，歸納出各個品牌的差異，並推論其原因。. 第四節研究範圍與限制就圖形使用者介面的包含層面極廣，包含了人因工程、互動設計、工程開發...等等，本研究主要以介面設計的視覺作為討論對象，將焦點放在畫面處理的各項原則與發揮元素。因此，在文獻與案例中若提及其他範疇的資料，本研究將暫不討論。. 第五節研究流程與架構本研究主要的設計架構是：藉由有系統的文獻資料，統整更多圖形使用者介面設計的相關理論，作為案例分析的流程依據；接著針對產業界具有指標性的案例作為分析對象，為日後的業界提供一套參考。（圖1-2）. 12.

(14) 圖1-2：研究架構與流程. 13.

(15) 第二章、文獻探討如前章所述，高科技發展急速，人機互動（Human-Computer Interaction，簡稱HCI）、用戶體驗（User Experience）這類議題被高度的重視與討論。日常生活中除了電器用品與公共/私人的電子裝置..等等，皆在這類範疇之內，甚至是更狹義的「電腦」，亦是替人類加快工作效率、節省時間、人力成本，使人類有更多的時間朝向更多元的發展。藉由圖2.1中的數據可以明顯觀察到電腦產品已經遍佈於我們的生活領域中，而其中人與機器之間的溝通模式、機器介面所表現的型式、使用者所產生的感受，都是本章探討的議題。圖2-1： 1984至1997間電腦使用於家庭、工作、學校（單位：％） Households with computers. Adult use at home, school, or work. Children’s use at home or school 74.4. 58.5 47.1. 46.0 36.0 30.2 18.3. 36.6. 28.1 22.8 15.0. 8.2. 1984. 1989. 1993. 1997. （資料來源：U.S. Census Bureau, Current Population Survey,1984, 1989, 1993, and 1997）. 第一節使用者經驗設計意涵與開發流程而基於這樣的科技生態下，西方產品設計發展出了「使用者經驗」的理論。使用者經驗之父Donald Norman於1993年提出此一名詞，其與Jakob Siel14.

(16) sen共同擁有的公司—Nielsen Norman Group針對此名詞的定義：「使用者經驗」囊括了使用者與業者的互動的所有面向，像是服務或者產品等。最基本的層面是從容地滿足使用者的需求；其次是製造簡單與優雅的產品，讓使用者開心的擁有、使用。一個優越的使用者經驗並非符合使用者提出的需求，而是在這個前提下，提供使用者多個面向皆高品質的完美體驗，包括技術開發、行銷、圖像設計、產品設計、與圖形使用者介面設計等等。維基百科中對此釋義：「使用者經驗」為一專有名詞，其敘述使用者使用一產品或系統的整體經驗與滿意程度，而其最常被使用於軟體應用與商業議題的結合，例如：銷售網站、客戶服務網站等；但廣義地說，該名詞其實通用於各種互動設計上。周陟（2010）提出，使用者經驗的程度，可採用幾個向度去量測：產品在特定環境下為特定使用者所產生的使用效率，以及使用者主觀的滿意度。而這兩個向度中還包含了產品使用學習曲線的程度、產品對於使用者的吸引程度、使用者使用產品前後的心理差異程度...等等。葉錦睿（2010）針對使用者經驗亦提出三“e”指標作為評估互動介面的方式，分別是：Effective-有效、Easy-簡單、Enjoyable-享受。 1. 「Effective-有效」為介面互動設計的最基本需求，即介面互動設計主要是需要成功地協助使用者解決問題、或完成目的性任務，即基礎功能的具備。 2. 「Easy-簡單」對設計者來說是一項艱難且複雜的工作，需要藉由抽絲剝繭的方式，將功能與操作結構分層、歸類、重新組合，以有效地減輕使用者的記憶工作、肢體工作、視覺工作、與理解工作，幫助使用者專注於操作上。. 15.

(17) 3. 「Enjoyable-享受」則是要著重於產品從生理、社會、心理、思想等層面帶給使用者的愉悅感，此指標所囊括的範圍較為廣，從五感至心理需求或虛榮等，皆屬該指標的範疇內。 Montparnas（2006），一個位於波斯頓的使用者經驗設計團隊提出，使用者經驗設計囊括了互動設計、資訊架構、使用性、人機互動、人因工程、與圖形使用者介面設計等六項，其中使用者介面被定義屬於其他五項的交集處，代表使用者介面為使用經驗的核心表現區塊，藉由使用者介面的傳達，構成使用者與裝置之間的溝通，這中間有圖形設計、資訊設計...等等方式，更廣泛地包含了多種使用性的細節，如圖2-2。. 圖2-2：使用者經驗設計領域（資料來源： Montparnas，2006） UPA（Usability Professionals’ Association）是在國際上於易用性領域中，具有聲望的會議組織之一，該組織整理出使用者介面的開發流程，開發團隊從一開始提出需求，釐清產品的條件、欲達成目的、功能等等，以及定義 16.

(18) Persona（人物誌設計方法）對象，使用者經驗設計師逐一將所有背景資訊列入開發文件中。接著才開始與圖形介面設計師進行溝通與設計，圖形介面設計師一方面理解心智模型（Mental Model）狀態機的架構，一方面亦思考如何利用定義好的企業風格、品牌風格將介面呈現，接著依據條件、對象進行腦力激盪、使用情境建立，逐漸架構起使用者介面的心智模型與邏輯；最後架構起原型 Prototype，模擬介面所帶給使用者的感受，並且進行多數人或關鍵人（視開發專案的時間與規模大小）的測試與修正，待全數確定後，這才算結束所有設計流程，並開始進入工程師開發流程，將設計元件實際導入操作平台中，利用工程開發語言建構於系統上，並輸出成品（如圖2-3）。統整以上使用者經驗設計的釋義，本研究歸納：能夠讓使用者非常容易地操作並且完成任務、達到一個高滿意指數，則能夠稱為是一個優質的使用經驗。在這個條件下，設計者需要做足準備，徹底釐清幾項問題： 1. 目標使用者 2. 使用者的操作目的 3. 使用者的經驗層級（重度使用者、中度使用者、輕度使用者） 4. 產品中需要傳達予使用者的資訊與指引 5. 產品欲塑造的印象能夠釐清以上問題，則該開發流程算是完成了三分之一。其次則屬於技術問題，即與工程人員的開發溝通及銜接；最後進入測試與調整階段，確認使用性無虞，才交到使用者手中，以上為一完整開發流程。. 17.

(19) 圖2-3：使用者經驗開發流程（資料來源： Usability Professionals’ Association） 18.

(20) 第二節圖形使用者介面(GUI)起源與名詞定義圖形使用者介面（Graphic User Interface，簡稱GUI），指的是一種讓使用者與電子裝置互動的介面種類之一，採用圖型式的溝通型式，而非開發語言。此種介面被廣泛的應用於電腦、行動裝置、MP3隨身播放器、攜帶裝置、遊戲裝置...等等，普遍應用於家用或辦公的需求。電子裝置通常由「硬體」與「軟體」共同組成，硬體包含了運算晶片、記憶體、儲存碟…等等；而軟體則是運行於硬體資源的應用程式及系統（Kayne， 2003）。當使用者（user）與工具（tools）之間產生互動，雙方所接觸的點，則稱為「使用者介面（user interface）」（Cox & Walker，1992），（如圖 2-4）。使用者與機器之間藉著媒介來回互動，產生關係，姚美玲（2004）將使用者與電腦溝通的介面型式劃分為實體、觸控、與圖形操作介面，其中觸控操作介面與圖形操作介面，又因為時代與科技的演進，觸控式手機與平板電腦的問世，區隔越趨模糊（如表2-1）。. 圖2-4：人機互動關係（資料來源：Cox & Walker） 19.

(21) 表2-1：操作介面分類 (資料來源：姚美玲，2004) 操作介面項目. 定義. 實體操作介面. 具有實體、傳統的操作器、顯示器控制面. （Solid User Interface, SUI）. 板。多半使用按鈕、肘節開關、旋轉選擇器或旋鈕等等。近十年來在此領域強調應用語意學、符號學的操作提示設計。. 觸控操作介面. 觸控式面板過去被大量用於影印機、數位. （Touch User Interface, TUI）. 相機操作等等。其結合軟體與硬體的使用介面，此種操作介面近年來由於硬體逐漸普及於手機、平板電腦，與圖形操作介面的界線越來越模糊。. 圖形操作介面. 指電腦軟體與使用者之間的互動，電腦使. （Grahpic User Interface, GUI）. 用軟體或微處理器來控制、處理龐大的訊息，將指令式的開發語言導入圖形顯示的互動方式，以使用者能夠學習理解的圖形畫面與使用者溝通。. 關於圖形使用者介面的發展，始於1962年至今，使用者為中心（User Centered）的意識逐漸被重視，繼Win3.1 桌面的概念、到Apple電腦採用Intel處理器以致普及、iPhone的創新應用且開創智慧型手機市場、iPod以跳脫「機器」之姿深植人心、Android以開放系統的雄心加速拓展智慧型手機應用...等等，對於圖形使用者介面的發展，50年的時間，算是相當的快速（表2.2），這當中開發者與使用者都不斷地學習，藉由使用經驗的適當拿捏，圖形使用者介面逐漸拉近人類與機器之間的距離。. 20.

(22) 表2.2：GUI發展沿革 (本研究整理) 年份 1962年. 沿革 Ivan Sutherland在MIT研究期間，所研討的Sketchpad計畫最早開始試圖以圖形方式顯示資訊。. 1970年. Alan Kay採用圖形的方式建立超連結、重疊視窗、彈出式選單，並搭配滑鼠來操作介面中元素，將GUI的概念導入全祿 Xerox Alto電腦中，現今普遍使用的電腦介面皆始於此。. 1981~1985. Xerox繼Alto之後推出的商用產品為Xerox Star Information. 年. System，使用重疊式及瓷磚式視窗、以及選單元素；Apple Lisa於1983年同樣採以視窗與選單型式推出；1984年Apple Macintosh 128K亦以類似模式推出。. 1988年. IBM發表的OS/2 1.10 Presentation Manager，為第一款支援Intel 電腦且穩定的圖形使用者介面. 1992年. Microsoft Win3.1一推成名，開始了微軟在作業系統上壟斷市場之路，也迫使圖形使用者介面的普及。. 2007年. 蘋果公司執行長Steve Jobs於Macworld上發表iPhone，第一隻成功結合相機、數位個人助理、多媒體、與無線通訊裝置為一體的手持裝置。讓科技產品終於透過友善的介面與人類產生密不可分的使用經驗，從此讓電子裝置在人類生活中的重要性大提升。. 第三節圖形使用者介面設計原則以目前市面上的主流操作系統Windows、Android、MacintoshOS、iOS來說，不論系統本身或系統中圖形化用戶介面、或第三方廠商所開發的應用介面，多半具備以下基本特色（李青蓉，1998）：. 21.

(23) 1. 物件導向：以各個對象為單位的認知傳達方式。例如：某個檔案、某個視窗、某個應用程式,,,等等。 2. 視覺化介面：以圖像方式譬喻應用的內容與物件之關係。例如：資源回收桶圖像所表達的是欲刪除的檔案群。 3. 互動回饋：利用動態改變給予使用者操作上的回饋。例如：滑鼠經過、或按下按鈕時，按鈕型式產生改變。 4. 邏輯建立：以一套明確、穩定、容易識別的邏輯來詮釋應用方式（或稱為心智模型），並且貫徹該應用範圍。例如在購物程式中，以購物車代表欲購買的商品，結帳代表結束挑選，前往付賬。這類虛擬環境中邏輯建立、與實際生活的連結，都是構成與使用者溝通的方式。 5. 目標導向：以使用者所欲完成的操作目的為建構精神。例如在音樂播放程式中，必須將焦點放在如何讓使用者輕易地播放、挑選音樂、控制音量等等。而圖形使用者介面的最主要精神為「所見即所得」（What you see is what you get），也就是利用物件呈現的型式將電腦運算的結果以圖形表現出來，使用者可隨時理解狀態並操作（Preece，1998）。Shneiderman（2005）所提出的使用者介面的八個黃金定律是經由他本人的經驗與觀察互動系統之後，整理、延伸後所得出，這八個定律在使用者介面設計的領域被視為指南： 1. 保持一致性：提示、功能、選單等如果類似的指令，須保持邏輯的一致性。 2. 滿足普遍的可用性：需要理解不同的使用族群之需求，提供使用者所需的彈性。例如生手與熟手的使用差異之考量，因此導覽需求需更廣泛地考量。 22.

(24) 3. 提供回饋：系統對使用者的操作給予回饋。適當調整出現頻繁的操作回饋；強調出現頻率不高但重要的運作回應。 4. 結束的對話：當完成一個段落的操作時，提供回饋告知使用者，使其產生滿足感，亦減輕其壓力。 5. 簡化錯誤處理：避免讓使用者在操作上產生嚴重的錯誤，若使用者犯錯，系統應提供一個簡單、具有建設性、且詳盡的引導指示方案。 6. 允許回復到上一步操作：使用者能夠簡易地回復所執行的動作，可以減低其使用的不安、進而加大嘗試各種功能的意願。 7. 滿足使用者的控制慾望：提供有經驗的使用者能夠完全掌控介面的感受，並且藉由系統的回饋傳達出操縱感。 8. 減少短期記憶負擔：人類的短期記憶能力有限，因此畫面的內容要保持簡單、同時顯示多頁內容、減少視窗跳動與移動頻率，簡化記憶指令與減少動作順序的時間。綜合以上條件與原則，本研究歸納出基本的圖形使用者介面之設計原則：以一明確的心智模型（Mental Model）為基礎，提供予使用者完整的操控權、明確的資訊，以識別取代記憶的設計。除此之外，適當的讓該介面有趣，可以提高使用者的忠誠度。. 第四節圖形使用者介面之視覺要素從Cummings（2010）所繪製的「圖解使用經驗設計」中，以使用者的知覺意識分層解析，將使用經驗分為語言、圖形、聲音、動態、資訊設計、介面設計、互動設計與系統程式等八個層面（圖2-5）。越屬上層之元素，越是使用者知覺意識高的範疇，亦是能夠直接影響使用經驗的元素。 23.

(25) 圖2-5：圖解使用經驗設計（資料來源：uxdesign.com，by Cummings）. 延續Cummings（2010）所提出的圖解使用者經驗設計中，圖形使用者介面設計所討論的範疇囊括了該圖中的文字、視覺設計。即使用者知覺意識較為表層、且關乎於視覺的部分，亦是將底層複雜的狀況表達予使用者的外觀。圖形使用者介面的解構，在早期是以WIMP為典範，是由Windows（視窗）、Icon（圖像）、Menu（選單）、與Pointer（指標）四個字所構成，包括微軟的Windows系統、Apple MacOS、以及其它以X Window、Linux 系統為基礎的操作系統皆採用該四元件構成系統互動型式。林錦全（2004）歸納出介面設計視覺元素包含：文字、圖像、色彩搭配、介面編排設計四項。關於使用者介面之視覺要素，與網頁介面之視覺要素除了瀏覽載具、呈現型式之外，兩者有某種程度的相似，因此，本研究除了從使用者介面 24.

(26) 之相關文獻切入探究，亦將網頁介面設計的文獻加以討論，擷取其設計要素。以下表格為本研究針對使用者介面、網頁介面相關學者所定義的視覺要素彙整：表2-3：使用者、網頁介面設計視覺要素之相關文獻（本研究整理）學者(年份). 定義. Oman-. 網頁介面之構成：. son（1998）. 導覽(Navigation)、標題(Heading) 、背景(Background)、排版標誌(Layout)、圖像(Icon)、文字風格(Style). 蔡宜臻（2000）. 網頁版面的構成：單元劃分、畫面構成、文字、圖形、動畫、色彩. 馮淑萍（2000）. 網頁設計需考量的七大視覺要素：文字、圖像、符號、色彩、介面編排設計、操作性與企業形象。. Christi-. 網頁版面是由標題、頁面分割、留白與顏色所構成。. ne（2002）莊錦昌（2001）. 使用者介面的影響因素：主題種類、超連結種類、超連結位置配置點、背景、背景明暗、背景色彩、版面留白量與內文編排。. Thomas. 頁面邊框、文字、圖形、標題、顏色、影像、前後景的對. （2001）. 比皆為構成網頁的重要因子。. 25.

(27) 學者(年份) 張惠如（2003）. 定義網頁版面的構成： ● 頁面分割：如同平面設計中的版面規劃，透過分割可以將不同的網頁內容分別引用在各個版面中。 ● 背景：以風格為基礎，擇一與文字、圖像可搭的背景 ● 動畫：因互動而改變呈現狀態，是非必要的元素。 ● 文字：除了所有裝飾類元件，語言文字依舊為最基本的傳達媒介。 ● 色彩：以網站個性為基礎，運用色彩來傳達欲傳達的情緒與感覺，進而影響使用者對網頁的感受。. 近年，由於觸控式面板的普及，讓手指直接作為Pointer的型式更為直接、也因為手持裝置銀幕尺寸的限制，不見得會使用視窗作為單元劃分，歸納統整了過去WIMP的介面、與現今非視窗型的手持裝置之介面之後，本研究剖析操作介面之元素，將圖形使用者介面之視覺元素歸納為：字型(Typography)、圖像 (Icon)、色彩(Color)、操作元件(Component)、與介面編排(Layout)五大要件。接下來，即開始針對圖形使用者介面設計的各個元素做探討，藉由相關文獻得知如何對風格造成影響、並歸納出該元素所在視覺上所能表現的變因，以作為實驗參考。其中，前四者偏重於視覺設計之技巧，為本研究的討論範疇；而第五項介面編排關乎於人類心智模型及人因工程層面居多，因此暫不列為影響視覺風格及識別的行列中，故僅針對字型、圖像、色彩、操作元件四項做探討。. 一、字型張閩生（1990）指出，文字辨識首重易讀性（Legibility），閱讀者容易瞭. 26.

(28) 解、美觀又不至於產生疲勞。至於形態的部分，襯線與弧線對於字體來說，是相當重要的改變條件，襯線可以說是在字型架構又更上一層次的維度，每個字樣（letterform）所用的弧線與角度所結合起來而形成的整體紋理，皆有所不同，如圖2-6（Tidwell，2012）。. 圖2-6：歐語系字體基本架構依照VoxAtypl的定義方式，大致將歐語系字體分為三大類型：古典、現代、書法（Vox，1954）。此種定義方式被提出以後，於1962年正式被 Association Typographique Internatioal 所認定並且使用，至1967年亦成為British Standard，其內容分別如表2-4所示。. 27.

(29) 表2-4：Vox-Atypl字型分類 (資料來源：本研究整理) 學者(年份) 古典 Classical. 定義又可分為以人為本、傳統等子項目，字體襯線呈現三角型式，字體粗細變化對比較為平均，通常亦被稱為”舊風格”。代表的字體有：Centaur、Garamond、Bulmer等皆為此類型。. 現代 Moderns. 興起於工業革命以後，是一種較為簡約且功能導向的字體，在這類的字型幾何程度通常較高，是經過修飾的字體。例如：Futura、Gill Sans、Univers等字體。. 28.

(30) 學者(年份). 定義. 書法 Calli-. 採用手寫、工藝的方式建立，不論是雕刻或書寫而構成的字. graphic. 體，風格性較為前二者強烈。例如：Trajan、哥德體、 Mistral、或Banco等字體。. 除了襯線與否的決定以外，王明嘉（1997）於其字體挑選工具中列出了選擇字體的三個主要關鍵為，並且針對數個經典字型做此三個關鍵的程度分析： 1. 適讀性（Readability）以作為內文字體來說，字體的筆劃調整可以增加閱讀的舒適性，能夠避免因為長篇閱讀而產生疲勞感，另一方面也不至於因為字體的過分修飾而干擾閱讀。 2. 易讀性（Legibility）每個字母間的形狀大小差異，可以足以達到迅速辨認不同字母或符號的程度，方能避免字母間的混淆或文句誤讀的狀況。 3. 灰色調（Hue）不同的字型筆畫會造成不同程度的明暗階調，而字面上的濃淡輕重則決定了整體版面的性格因素。而關於載體、文字排列等亦影響文字數字顯示的特徵，在顯示面板中文字數字密度越低、越平均，則易於辨識；或者藉由排列的方式呈現出群組化，議有助於辨識（Tullis，1988）。印刷品中，以serif 有襯線的文字作為內文文字較具有可讀性，原因是襯線能夠對閱讀者產生引導；而圖形使用者介面所使用. 29.

(31) 的字體，受限於銀幕像素的影響，較難完整呈現serif 襯線的細節，因此大部份皆使用無襯線sans-serif 的字型，以保留文字美觀。考慮到適讀性的問題，銀幕字、手機字亦需要作差異化處理，包括「切角處理」、「增高處理」與「開口加寬處理」。切角是為了在解析度較低的情況下依舊能夠明確辨字，因此在筆畫交界處作切削處理，以避免筆畫模糊（圖 2-7）；增高處理是藉由字體的拉長，將字體的骨架與比例特徵更顯誇張，亦能夠增加辨識度（圖2-8）；而開口加寬處理則是單就字體缺口的地方再加強，主要還是要加強字體特徵（圖2-9）。. 圖2-7：銀幕字的切角處理. 圖2-8：銀幕字的增高處理. 30.

(32) 圖2-9：銀幕字的開口加寬處理. 藉由以上文獻中字型的相關探討得知，歐語系字型被劃分為襯線與非襯線兩大系統，其決定了字型裝飾抑或俐落的個性。除此之外，字型也受文字載體、及書寫工具的差異而有所不同。如今，在電子產品中的顯示，對文字來說，亦是一套創新的載具與書寫方式，儘管如此，其依舊以一般文字為基礎，考慮電子產品銀幕的解析度（Resolution）改良。綜合文字的傳統風味、與新的載具，激盪出新的字型式樣。. 二、圖像談及圖像的使用及發展，應該追朔自符號學的建立。圖示設計反映出人類對於事物的認知及理解，並且藉由社會性、人文性等多重概念展現而出；現今為一個資訊發達的時代，人類溝通亦是透過高度視覺化而建立，圖像語言幫助跨國的溝通更為順暢（周陟，2010）。Huang et al., （2002）提出在圖形使用者介面中所使用的圖像應該包含幾項準則及功能：風格形態（Style）、訊息品質（Message quality）、具意義（Meaningfulness）、區域性（Localizability）及象徵性（Metaphor）。鄭文俊（1999）提到使用圖像的好處： 1. 幫助使用者舉一反三的能力，提升其自我學習的彈性 31.

(33) 2. 表達視覺及空間的關係，減低平面及立體物件的差異 3. 節省介面中的空間，以群組的方式排列、組織操作指令 4. 幫助使用者識別、區隔功能，增加搜尋速度，並瞭解介面結構關係 5. 加快操作速度 6. 記憶圖像的速度遠比記憶文字快，能夠幫助記憶 7. 使用者毋需高度的閱讀能力，減輕文盲與老年人口的負擔 8. 加快資訊流通速度，幫助全球化圖像為縮小的圖片影像，通常以隱喻的方式來比擬介面中的各個單元，其目的是為了讓使用者容易學習（Preece，1994）。而由於以下原因，加強了圖像容易為人學習及記憶： 1. 對於代表的單元提供視覺上的提示。 2. 利用形態的表現，加強記憶上的暗示。 3. 清楚地表達該單元與系統之間的關聯。而張悟非（1992）思考到縮小的圖像，需要透過視覺將訊息傳達予使用者，最基本的四項要件為： 1. 可識性：訊息可以在短時間內馬上被解讀。 2. 顯著性：與其它訊息之間的區隔明確。 3. 可讀性：圖像或文字的語法結構安排適切。 4. 含義性：即訊息的聚焦、了解程度。透過以上文獻可以瞭解到圖像之於使用者，是一種功能上的溝通，亦可稱作是情感上的共鳴。在圖形使用者介面中，既有功能目的、也具有極大的美學 32.

(34) 影響力，扮演着極重要的角色。林榮泰（1991）以構成元素為分類基準，將圖像設計方式分為三種類型（如表2-5）： 1. 具象型圖像：將相關的事物特徵以視覺的方式利用具象的方式傳達，具有易辨識、易學習、易記憶的優點。 2. 抽像型圖像：將事物實際概念或抽象概念予以視覺化，其意義需要轉譯方能理解。而其特性是一旦認同該圖像的意涵，就不容易受到外在因素而改變解讀方式。例如：以資源回收筒傳達“刪除”。 3. 強制型圖像：新建立的符號，須確定圖像的使用率高、且獨特，例如：＠被解讀成電子郵件。表2-5：圖形（Picture）、符號（Symbol）、記號（Sign）設計方式：. 設計方式：. 設計方式：. 具象型. 抽象型. 強制型. 圖形. 符號. 記號. 然而在圖形使用者介面設計的範疇中，圖像於不同目的性也以不同的方式存在，而設計風格亦依照每種圖像類型有不同的型式表現： 1. 應用程式圖像：用於系統桌面、或應用程式選單等等，亦是顯示空間最大、使用最廣泛的圖像。此種圖像通常是會以3D的插圖繪製表現。而風格的部分，主要由造形及材質兩大要件構成。造形分為有機與幾何，有機屬於自然造形、自然筆觸，有較重的人文與生活感受；幾何則是線條與造形經過修飾，不那麼寫實的表現型式，相較於前者，稍微制式與工整一些。材質的部分，真實的材質、光影表. 33.

(35) 現出比較精良的精神，另一方面非真實、插畫風格的圖像，個性相較之下比較溫潤些（如圖2-10）。 2. 工具列圖像：使用於工具列中，表示某些特定的功能執行按鈕，是意涵最需要被明確表達的圖像。 3. 系統圖像：用於系統顯示狀態的圖像，尺寸較小、語意敘述亦須明確。其與工具列圖像有比較相似之處，主要差異在顯示的大小與詞性的不同，工具列圖像屬於動詞、系統圖像則是屬於形容詞。此兩種類型多半以單色圖像、或是多色正視簡易圖像為主，多色圖像較能表現出情境，但也由於需要較多的繪製時間，成本較高。由於Tray icon 需要在較小的空間，表現較重要的資訊，因此其設計條件較應用程式圖像嚴苛，也因為如此繪製手法通常都採用比較幾何的方式。而在幾何方式下，則可以分為較圓潤及較方正。圓潤的圖像較能感受其親和力，但專業感也相較於方正於低；方正的圖像叫工整、但顯的比較生硬（如圖2-11）。. 圖2-10：應用程式圖像設計構成矩陣圖 34.

(36) 圖2-11：工具列圖像設計構成矩陣圖. 三、色彩心理學家認為，對於色彩的知覺與嗜好程度，與觀看者感情上的舒適程度有關，因此色彩會影響工作效率（鄭國裕，1987）。關於設計，色彩與基礎形狀兩者同為觀賞者最早感知的層面，因此色彩具有立即性的效果（Tidwell， 2012）。顏色分為色相、明度、彩度三個基本屬性。例如：通常顏色辨識會先確認色彩，即色相的部分；再來是觀察紅色是屬於明亮的紅色還是暗紅色？此為明度的階段；最後才觀察紅色是否鮮艷？即彩度的部分（歐秀明、林文昌， 2005）。此三者分別定義為：. 35.

(37) 圖2-12：十二色相與混色. 圖2-13：色彩明度變化. 1. 色相（Hue）在不顧及顏色明暗深淺的情況下，可先分為三個差異頗大的紅、黃、藍顏色，進而演化出澄、綠、紫等六色，再12色、 28色...等等（如圖2-12）。 2. 明度（Value）為色彩的明暗程度，又稱為色彩的亮度，將色彩切換至無彩色，亦有各種層次的灰階，即明度（如圖2-13）。 3. 彩度（Sturation）為色彩的鮮艷程度。在顏色尚未混色與稀釋之前，為彩度最高的階段（圖2-14）。. 圖2-14：彩度變化. 36.

(38) 圖形介面設計者通常依據不同的功能與訊息層級、品牌傳達選擇適當的色彩，但以使用者而言，較難察覺其用色差別，甚至感受比較模糊，這是因為每個使用者接受到的主觀意識不同而產生差異（姚美玲，2004）。因此我們建構在這個籠統的模式上予以一些判斷原則，藉以分析用色的邏輯： 1. 色彩使用種類。由於圖形使用者介面為一多重訊息呈現的綜合體，時常會藉由顏色的差異區別訊息的重要性。反之若使用過多的色彩反而會造成閱讀困難。 2. 背景、視窗與文字色彩的選擇。選擇適合作為背景的顏色可以加強其他配色的顯著性。 3. 色彩注目性。即使人對色彩產生注意力，若能夠達到此效果，則能夠強調重要訊息的傳遞；而適切的色彩的搭配方式亦能夠加強色彩的注目性。下列為達到色彩注目性的條件，通常則一即可達成： ◎明視度高的色彩 ◎少見的顏色 ◎周圍沒有類似色 ◎與大眾好奇心相符的色彩、流行的色彩 ◎積極性的色彩 ◎整體關係強烈、美感度高的色彩 ◎具有某種主題，而引發情感層面的色彩. 四、操作元件操作元件是圖形使用者介面發展以來，逐漸形成的一個跨國際、跨產品的. 37.

(39) 選單型式，儘管是不同的操作系統平台，在操作元件的邏輯是會互相潛移默化而統一的。選擇對的操作元件對設計者來說，能夠有效率的與使用者溝通。舉例來說，在一個天氣預測的應用軟體中，需要使用者設定其欲知的地點，使用者應該提供的是一個郵遞區號？一個國家？還是某個地點城市？設計者應該提供給使用者的是一個地圖？一個文字輸入框？一個選單？或是其他操作元件？在希望快速幫助使用者設定的目的下，通常設計者會選擇兩個下拉選單，先選國家、接著選城市。操作元件的設計方法沒有統一做法，唯有設計者必須思考條件，提供使用者有效率的方式。關於這些操作元件的風格型式，是架構在所謂的預設用途（Affordance）之上。知覺心理學家Gibson（1979）觀察生態心理學之後，解釋以預設用途對應於環境與生物之間的關聯，他認為物件擁有的預設用途透過視覺，能夠將訊息直接表現出來。例如：在電子裝置的銀幕中，儘管是平面的表現型式，按鈕依舊是被繪製以3D實際按鍵的模式存在。在這樣的文獻基礎下，本研究將操作元件的風格分析角度分別以立體效果、形態、與繪製材質三個部分切入： 1. 立體效果：從圖形使用者介面發展以來，由於系統「桌面」邏輯的樹立，操作元件普遍是以立體的效果呈現，直至近幾年來，由於逐漸普及的攜帶式裝置沒有視窗邏輯，無需以視窗為單位呈現前、後空間關係；再加上去裝飾性、以資訊為主的Infographic風格廣泛被運用於產品中（例如：Win8、Windows Phone7、部分Android元素...等等），因此，立體效果成了非必要的裝飾型式。話雖如此，立體效果的表現，較能暗示操作元件的存在；反之，立體效果低的操作元件，在畫. 38.

(40) 面中較難被察覺能夠被操作，但視覺呈現也比較簡潔。本研究將立體效果分為三個程度差異，作為討論標準（表2-6）。表2-6：立體效果差異標準程度. 定義. 4.a1 立體效果低. 幾乎無法察覺到有使用立體效果。. 4.a2 立體效果中. 一開始沒有察覺，但仔細看可以察覺。. 4.a3 立體效果高. 一看就馬上知道有立體效果。. 2. 形態：操作元件的形態可以分為視覺形態（單純的形狀）與觸覺形態（若具有立體效果，所傳達出來的觸覺感受）兩種，此兩種皆有圓潤、方正/平緩的感受差異。對於純粹的形（Shape）來說，方正會較圓潤來的理性，而圓潤的形相對的會稍微較具親和力；在「a.立體程度」成立的情況下，則可進一步探討觸覺形態，以產生的觸覺效果來說，圓潤效果讓操作元件的表現更豐富、風格性也更強烈，但也較平緩的效果來的複雜一些（圖2-7）。表2-7：視覺形態差異程度. 定義. 4.b1 形狀方正. 扣除操作元件上的裝飾效果，其形是方正的. 4.b2 形狀中等. 扣除操作元件上的裝飾效果，其形具不易察覺的切角（R角或C角）. 4.b3 形狀圓潤. 一眼即可判斷操作元件是圓潤的形狀. 表2-8：觸覺形態差異程度. 定義. 4.b4 觸覺平坦. 立體、但平坦的面. 4.b5 觸覺中等. 立體、平坦帶著微弧面. 39.

(41) 程度 4.b6 觸覺圓潤. 定義立體、大的立體弧面. 3. 繪製材質：在「1.立體效果」成立的情況下，則操作元件受光影的影響，會呈現出其材質，設計者可以藉由材質表現出介面的主題性，並且彰顯其個性（如圖2-15）。就溫度的標準來說，溫暖表達出較具人文的感受，冰冷則較為洗鍊；而就表面所呈現的觸覺感受上，粗糙傳達出內斂的感覺，光滑則較有精緻、精品的感覺。. 圖2.15：操作元件材質感知分析矩陣圖. 第五節文獻總結在本章文獻探討中，從人機互動認知、功能訊息傳達、心智模型建立、以及視覺美觀感受，對各個部分進行理解，從中得知圖形使用者介面的發想、設計與開發流程。其中，由於「使用者」一詞所囊括的角色相當多元，因此，使用者經驗設計相關的文獻相當廣泛，從服務、產品、乃至於行銷都屬該探討範圍，本研究為了收斂文獻資料，將焦點放置於圖形使用者介面上，因此多半由. 40.

(42) 互動設計及人機互動的角度切入。以圖形使用者介面的開發來說，儘管本文獻著重於視覺元素的單一探討，但該範疇屬於一個複雜、交錯影響的成品，每個元素的呈現僅是一個系統中的一個螺絲釘或齒輪，尚須具有整體與宏觀的考量及思維。此外特別提出，圖形使用者介面中色彩的使用，亦是較少有的文獻研究領域，包括介面中顏色的運用與使用者感受之間的關聯、色彩透過銀幕顯示所帶來的風格與個性等等，皆是具有延伸探討價值的議題。. 41.

(43) 第三章、研究方法與案例分析. 第一節研究方法承襲了以上所統整，關於圖形使用者介面的相關文獻，本研究預期以案例分析法來研究目前市場佔有率較受矚目、具指標性的三個操作系統平台的圖形介面風格，延續文獻分析中所得出的比較因子作為解析的參考依據。其中，案例的選擇，本研究整理了各個國際知名電子、科技品牌之介面設計規範，並從中選擇三個具有研究效度的面向，包括近年來佔有率竄升的 Apple Mac OS X系統、近年來手持裝置最多數人使用的Google Android ICS（Ice Cream Sandwich）系統與全球使用率最高的微軟系統，並選擇其風格性最強烈的Windows Vista，透過此三個案例之介面設計規範的解構與分析，分別挑選四個介面設計元素（圖像、文字、色彩、操作元件）切入，再歸納、比較各個品牌之圖形介面設計架構、品牌背景、與其發展脈絡。之所以採用國際知名的操作系統平台之圖形介面設計作為分析對象，主要因素兩個： 1. 介面風格的建立主要是傳達識別訊息予消費者，其所定義的風格必定經過專業設計團隊縝密的規劃，去蕪存菁後得到最符合該品牌、及其背景內容；完整度方面相對的完善，所分析的結果具有較高的參考價值。 2. 國際知名操作系統平台與其他廠牌、第三方廠商的共同開發機會頻繁，因此得到的回饋與修正的機會多，所建立起的風格擁有比較高的完整性。風格的解析方式，主要是由該系統平台所提出的介面設計規範來作分析依 42.

(44) 據，圖形介面規範中，扣除工程技術方面、開發原則的條件解釋，以及偏屬人因工程及狀態機討論的細節，例如：The Macintosh Experience、Application Design Fundamentals。由於工程技術的條件解釋對本研究來說，並非與圖形介面設計有直接關聯，比較屬於操作系統的原生環境，在分析的過程中比較難將之與設計元素共同討論；而開發原則的說明則是關乎於使用者需求層面、及產品定位，例如：如何讓應用程式符合使用者需求，由於這類規範所囊括的設計整合層面太廣，相對比較難以聚焦於圖形使用者介面上；另外人因工程與狀態機的討論亦然，較無法針對風格設計構成影響。至於案例的研究方法會針對前一章所提到的圖形使用者介面四項元素進行每個系統的分析與探討，分別是圖像、文字、顏色、操作元件。而每個部分從具有代表性的項目中隨機挑選作為分析對象（如表3-1），分析方式則依據其性質比較，而比較的最終目標主要是研討出該系統的精神風格。挑選出元件之後，針對每個類別各自做該類別的綜合比較。表3-1：案例分析說明範例 Google+ ：Goo-. Google Talk：Goo-. gle所開發之社交平台. gle所開發之即時通訊. 捷徑。. 程式。. 圖. 應用程式. 應用程式. 像. Gmail：Goo-. Google Map：. gle所開發之電子郵件信箱。應用程式. 工具程式. 色彩. 43.

(45) 字體操作元件本研究整理出的案例分析方式如下： 1. 圖像：該類別分為應用程式圖像（10個樣本）與工具列圖像（10個樣本）的特徵分開比較。首先，針對挑選出來的圖像做功能上簡易的敘述，幫助釐清每個樣本的多樣性種類平均，接著將所有挑選圖像以比較方式置入圖像設計結構矩陣（材質/造形）中，依照每個樣本放在適合的定點上。最後依照該矩陣作理性分析與說明。 2. 色彩：將系統所定義、或者系統常用的色彩擷取以作為樣本，並且將該色彩以橫向彩度、縱向明度的方式置入表中做落點分析，希望藉由觀察整體的用色，分析該系統的用色邏輯。 3. 字體：針對系統所規範的字體做形態上的分析，並試著以現有的分類方式將該字體作分類歸納，藉由類別投射出該字體所欲傳達予使用者的個性為何。 4. 操作元件：隨機選擇10個最常使用的元件樣本作為探討對象。首先，敘述各個元件的外觀型式、及互動方式；接著依照文獻所歸納的立體效果、形態作程度上的落點，並且針對材質做光澤度與溫度的矩陣落點。本研究方式是期望從各個元件的角度切入，單一的去探討系統使用該元件. 44.

(46) 所欲傳達的訊息，再進一步的相互比對單一層面的結論，並且歸納出整體的論點，了解圖形使用者介面設計所表達出來的外觀與其背景的相互關聯性。. 第二節案例分析_圖形介面元素此章節針對三個系統平台的各個視覺元素分別作該元素的性質分析。並在最後作出跨系統地分析總結論。. 一、 Macintosh OS X Apple是目前市面上的操作系統中，唯一軟硬體皆自家開發的封閉式系統，儘管其開發空間與第三方開發廠商進行應用軟體的開發，但仍舊以相當高的標準在整合第三方應用軟體與自家系統的一致性。此研究關於該系統平台的資料來源自於Mac OS X 規範，內容詳細記載該系統之開發原則與設計方向。而他們稱這個版本的介面風格為Aqua，此版本至今上在使用、並且還在不停的更新與調整當中： ”Aqua is the overall appearance and behavior of Mac OS X. Aqua defines the standard appearance of specific user interface components such as windows, munes, and controls and is also characterized by anti-aliased appearance of text and graphics, showing, transparency, and careful use of color. Aqua delivers standardized consistent behaviors and promotes clear communication of status through animated notifications, visual effects and more. Designing for Aqua compliance will ensure you provide the best possible user experience for your customers.“ 截取自Apple Human Interface guidelines 45.

(47) 1. 圖像（ICON）分析（1）應用程式圖像分析 Mac OS X 針對應用程式圖像的規範內容著重於透視形態的定義，根據應用程式的形態有不一樣的透視，予使用者專注、抑或俯視桌面的感受差異；其次則是在圖像構成元件的選用，需要能夠明確傳達圖像欲表達的資訊；最後才是專注於設計精緻度、與系列性等議題。（表3-2）表3-2：Mac OS X之應用程式圖像規範內容. 應用程式與文件使用的圖像透視，就如同該物件擺放在桌子上的視角；至於設定工具的圖像透視則仿佛物件呈現於使用者正前方的架上。. 盡可能的讓圖像所屬的功能明顯，如果該軟體會有輸出檔案，則必須要讓該輸出檔案與軟體圖像有明顯的連結。在選用圖像元素時，視情況選擇能夠彰顯或補述說明功能的元件作為輔助元素，但若物件本身就夠清楚表達，則無需再添加。. 以高品質的標準繪製圖像，採用實際的材質、紋理及光線，盡可能的以擬真、現實主義的手法來表現，並且讓細節更加精緻。. 46.

(48) 利用相同的視覺元素，帶給使用者同一系列的感受，讓使用者能夠藉此線索了解各個圖像中的關聯。經過了規範案例的內容解析以後得知，在應用程式圖像規範中，Mac OS X將應用程式類型劃分為工具程式、應用程式、檔案類型三種。因此，本研究挑選了4個應用程式軟體圖像、4個檔案類型圖像、與4個工具程式圖像進行分析與比對（如表3-3），藉此以平衡不同類型中帶來的設計差異。表3-3：Mac OS X 之應用程式圖像分析樣本 Pages：文件編寫工. Dictionary：包括. 具，可進行文件編輯. 牛津字典與日英字. 與修改，並輸出。. 典。. 應用程式. 應用程式. Hard disk：顯示於桌. System Prefer-. 面空間，為一檔案群. ences：系統內的所. 組。. 有設定控制中樞。. 檔案類型. 工具程式. iMove：視訊影片的. Stickies：隨手記錄. 應用編輯工具，亦可. 工具。. 輸出成影片。應用程式. 應用程式. Playlist：為音樂播放. Console：系統Log. 軟體iTun-. 閱覽設定工具。. es所輸出的播放清單。檔案類型. 工具程式. 47.

(49) iPhoto圖庫：iPho-. Dmg執行檔：安裝. to的檔案群組捷徑。. 執行封包。. 檔案類型. 檔案類型. 網路工具程式：設定. 活動監視器：監視. 網路活動帳號等細節. 電腦運作狀況的工. 之工具。. 具. 工具程式. 工具程式. 圖3-1： Mac OS X之應用程式圖像設計結構矩陣. Mac OS X所規範的應用程式圖像主要強調真實質感與造形，根據圖3-1所示，Mac的應用程式圖像設計結構中，造形囊括了有機到幾何，材質的部分全數都屬真實質地的表現方式。而其中依據其圖像所屬類型比對得知：應用程式的造形較為有機，展現出比較具有人文與自然、且輕鬆的型式；設定工具之造形偏屬幾何，許多是經過修正的圓形與方形，視覺上予人專業精良的感受，也. 48.

(50) 比較嚴謹。（2）工具列與系統圖像分析系統圖像及工具圖像設計原則上，Mac OS X 仍舊是首重語意上的傳達及生活中的連結，其次才是設計精緻度、整體性、與對比度的定義（表3-4）。表3-4： Mac OS X之工具列與系統圖像規範內容. 好的工具列圖像，使用較為使用者熟悉的心智模型元件。盡可能的描繪好識別、實際生活中的元件、以及既有的傳達元件，可以幫助使用者理解、記憶其功能。. 將實際生活中有的實體型式表現於圖像上，對使用者而言將更直接。. 工具列圖像通常使用於主要視窗的與文件編輯視窗的上方選單中，並排的情況下，圖像線條需要清晰、對比明確，並且左右等距、上下齊高。. 若圖像會出現於按鈕上，則使用黑色來描繪輪廓，以及少數的透明度（斟酌使用，以免與disable的系統效果混淆）。在工具列圖像的部分，經過了規範案例的內容解析以後得知，在工具列圖像型式沒有功能上特殊的分別，僅有單色與多色之形態的差別，視開發者使用狀況選擇。因此，本研究挑選了6個工具列功能（多色）、6個按鈕功能（單. 49.

(51) 色）予以分析比較（表3-5）。表3-5：Mac OS X之工具列圖像分析樣本刪除工具. 設定為垃圾郵件. 收取郵件. 設定. 備忘錄. 編寫郵件. 插入各式形狀色塊. 列印指令. 鎖定. 所有設定的檢閱器. 調色盤. 上傳、分享. 圖3-2： Mac OS X 之工具列圖像設計結構矩陣. Mac OS X所規範的工具列圖像重視明確的語意以及圖像的精緻度，而經由圖3-2所示，Mac OS X 的工具列圖像造形圓潤方正各半，多色與單色型式的的使用狀況與所屬的應用程式有關聯，工具形態、系統層級的指令多使用單色 50.