展覽活動APP主題視覺與圖像符號之創作研究

全文

(1)

(2) 謝誌能完成此篇論文，我要特別感謝我的指導教授廖偉民老師，雖然父親早逝，但廖老師對待學生，就猶如我們是他的小孩一樣，不厭其煩幫我們修正論文方向，熱切為我們引導研究方法。廖老師對學生的大方付出與用心，只希望自己將來可以成為更好的人回饋社會，回報老師。也謝謝我的口試委員鄧建國老師與劉建成老師，細心提點我更多不同思考的方向，補強了自己更多看不到的面向，讓論文能再修正後更完整。感謝教過我們的諸位老師們，除了學識的增長，更開拓了心中視野，讓我習得從更多角度去思考，看待人、事、物。謝謝同班同學一起努力的湘玲、淳鈴、葦穎等同學；並謝謝立民學長的提醒跟打氣。感謝前同事何宛玲小姐一直在求學這條路上鼓勵我，協助我檢視英文摘要。謝謝國立臺中科技大學謝寶泰老師，勸勉我人生要不斷接受挑戰。在我無助時，要謝謝前建中國文科周老師，教導我如何面對黑暗的力量。同時感謝廖偉民老師鐵定畢業團內的成員典益、俊民、源暢、偉婷，互相討論、研究論文，一起參加研討會。難忘那個說說笑笑在青田街的 meeting 時光。還要感謝在師大兩年內熱心幫助我們的碧華助教，她對研究生的關懷讓我們就學其間感到溫馨。永遠記得六點半趕到 913 教室的日子，和那些在醫院陪著家人，自己抱讀論文的時分。在醫院、學校、工作奔走之間，我終究完成了別人眼中的不可能。謝謝設研 103 的同學們，從你們身上學習到人生難能可貴的經驗。謹以此論文獻給我天上的父親，與辛苦扶養我長大的母親與奶奶。. 黃怡禎謹誌民國 103 年 8 月於臺灣師範大學設計學系設計創作碩士班.

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

(4) Abstract 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 :. ii.

(5) 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.. Keywords: Graphic Symbols、Graphic User Interface、Mobile Applications、 Launch Image、Springboard. iii.

(6) 目錄口試委員會審定書 ........................................................................................ # 中文摘要 ........................................................................................................ 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. iv.

(7) 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. v.

(8) 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. vi.

(9) 表目錄表 2-1 皮爾斯符號學分類 ................................................................................... 8 表 2-2 圖像設計原則相關研究論文 ................................................................... 13 表 2-3 介面設計原則比較 ................................................................................. 23 表 2-4 修辭格技巧運用在圖像設計 ................................................................... 25 表 2-5 隱喻圖像使用者介面之隱喻範例 ............................................................ 26 表 2-6 使用性方法運用時機與優缺點比較 ........................................................ 35 表 2-7 建立 iphone 應用程式的方法 ................................................................. 39 表 3-1 受測用樣本基本介紹.............................................................................. 43 表 3-2 受試者人口特徵 ..................................................................................... 48 表 3-3 檢核表 ................................................................................................... 49 表 4-1 引起主題介面與主選單介面注意的視覺因素 .......................................... 51 表 4-2 圖像符號的視覺元素構成特徵................................................................ 53 表 4-3 圖像符號是否有適當的隱喻 ................................................................... 55 表 4-4 圖像符號風格的一致性影響 ................................................................... 57 表 4-5 主題介面與主選單介面的視覺關聯重要性 .............................................. 59 表 4-6 影響 App 介面的整體美感因素分析........................................................ 61 表 5-1 主題擬定表 ............................................................................................ 66 表 5-2 創作作品嬰幼兒用品大展分析.............................................................. 106 表 5-3 創作作品台北國際旅展分析 ................................................................. 107 表 5-4 創作作品台北國際電腦展分析.............................................................. 108 表 5-5 創作作品台北國際書展分析 ................................................................. 109 表 5-6 創作作品台北國際自行車展分析 ........................................................... 110 表 5-7 創作作品台灣設計展暨台北城市設計展分析 ......................................... 111 表 5-8 評估準則表 ........................................................................................... 112 表 5-9 滿意度評估表 ....................................................................................... 113. vii.

(10) 圖目錄圖 1-1 Springboard 用的格狀版面 ..................................................................... 3 圖 1-2 研究流程步驟 .......................................................................................... 5 圖 2-1 符號的兩軸關係 ....................................................................................... 9 圖 2-2 圖像設計流程 ........................................................................................ 14 圖 2-3 使用者熟練度比較 ................................................................................. 17 圖 2-4 觸發觸控的最小區域範圍....................................................................... 22 圖 2-5 使用螢幕邊框上的空間或螢幕周圍的邊框 .............................................. 22 圖 2-6 人機互動過程 ........................................................................................ 29 圖 2-7 設計模式、使用者模式及系統介面 ........................................................ 32 圖 3-1 本研究流程與步驟 ................................................................................. 50 圖 5-1 創作流程說明圖 ..................................................................................... 68 圖 5-2 嬰幼兒用品大展原型設計(一) ................................................................. 69 圖 5-3 嬰幼兒用品大展原型設計(二) ................................................................. 70 圖 5-4 嬰幼兒用品大展原型設計(三) ................................................................. 71 圖 5-5 嬰幼兒用品大展原型設計(四) ................................................................. 72 圖 5-6 嬰幼兒用品大展上架之高解析圖示 ........................................................ 72 圖 5-7 嬰幼兒用品大展情境圖 .......................................................................... 73 圖 5-8 台北國際旅展原型設計(一) .................................................................... 75 圖 5-9 台北國際旅展原型設計(二) .................................................................... 75 圖 5-10 台北國際旅展原型設計(三)以 10%灰為底 ............................................ 76 圖 5-11 台北國際旅展原型設計(四)................................................................... 77 圖 5-12 台北國際旅展原型設計(五) .................................................................. 77 圖 5-13 台北國際旅展原型設計(六) .................................................................. 78 圖 5-14 台北國際旅展原型設計(七) .................................................................. 79 圖 5-15 台北國際旅展上架之高解析圖示 .......................................................... 79 圖 5-16 台北國際旅展情境圖 ............................................................................ 80 圖 5-17 台北國際電腦展原型設計(一) ............................................................... 82 圖 5-18 台北國際電腦展原型設計(二) ............................................................... 83 圖 5-19 台北國際電腦展原型設計(三) ............................................................... 84 圖 5-20 台北國際電腦展原型設計(四) ............................................................... 85 圖 5-21 台北國際電腦展上架之高解析圖示....................................................... 85 圖 5-22 台北國際電腦展情境圖 ........................................................................ 86 viii.

(11) 圖 5-23 台北國際書展原型設計(一) .................................................................. 88 圖 5-24 台北國際書展原型設計(二) .................................................................. 89 圖 5-25 台北國際書展原型設計(三) .................................................................. 89 圖 5-26 台北國際書展原型設計(四) .................................................................. 90 圖 5-27 台北國際書展原型設計(五) .................................................................. 91 圖 5-28 台北國際書展上架之高解析圖示 .......................................................... 91 圖 5-29 台北國際書展情境圖 ............................................................................ 92 圖 5-30 台北自行車展原型設計(一) .................................................................. 94 圖 5-31 台北自行車展原型設計(二) .................................................................. 95 圖 5-32 台北自行車展原型設計(三) .................................................................. 95 圖 5-33 台北自行車展原型設計(四) .................................................................. 96 圖 5-34 台北自行車展上架之高解析圖示 .......................................................... 96 圖 5-35 台北自行車展情境圖 ............................................................................ 97 圖 5-36 台灣設計展暨台北城市設計展原型設計(一).......................................... 99 圖 5-37 台灣設計展暨台北城市設計展原型設計(二)........................................ 100 圖 5-38 台灣設計展暨台北城市設計展原型設計(三)........................................ 100 圖 5-39 台灣設計展暨台北城市設計展原型設計(四)........................................ 101 圖 5-40 台灣設計展暨台北城市設計展原型設計(五)........................................ 101 圖 5-41 台灣設計展暨台北城市設計展原型設計(六)........................................ 102 圖 5-42 台灣設計展暨台北城市設計展原型設計(七)........................................ 102 圖 5-43 台灣設計展暨台北城市設計展原型設計(八)........................................ 103 圖 5-44 台灣設計展暨台北城市設計展上架之高解析圖示 ............................... 103 圖 5-45 台灣設計展暨台北城市設計展情境圖 ................................................. 104 圖 5-46 創作成果展示 .................................................................................... 105 圖 5-47 創作作品局部展示 ............................................................................. 105. ix.

(12) 第一章緒論 1-1 研究背景與動機隨著行動裝置的普及化，它不僅方便人們的生活更豐富感官經驗。行動裝置應人們的需求不斷求新求變，運用在行動裝置上的 App 應用程式必須符合人們的需求和使用習慣，在使用 App 應用程式中好看易用的介面會影響使用者的心情，而視覺上的圖形介面設計，能夠提供比文字更傳達訊息與完整的視覺概念，帶來趣味性與記憶點。最明顯的例子即是圖像沒有語言和文化的隔閤，對複雜的意念表達也往往比文字更精簡明快(張悟非，1992)。好的圖形介面設計會影響到銷售或者使用者意願等，而圖形介面設計的開發初始點就是更方便簡單、滿足人性。設計的優劣將影響使用者的喜好觀感；如李青蓉等人(1998)認為介面設計除加強功能及使用效率外，介面的整體美感與統一品質，更會讓使用者留下深刻印象及給予正面評價。足以看見圖形介面設計影響到整體視覺感受的重要性。研究者本身從事 App 應用程式開發視覺設計，對於使用者介面設計有濃厚興趣，工作之中需要幫客戶界定很多圖形介面，發現到不同的主題會影響到圖形介面的設計，而看似簡單的圖像符號設計，卻是影響到整體 App 使用者介面視覺經驗的關鍵；過去國內在圖像符號領域有許多關於圖像辨視的研究，但辨視只是影響圖像認知的要素之一，對於圖像符號運用在 App 應用程式上所涉及到主題與視覺設計風格的論述卻付之闕如。藉由分析圖像符號，探討圖像符號應用於 App 的整體視覺風格影響，可作為日後設計師或相關觸控視覺上運用的設計參考方法。. 1.

(13) 1-2 創作研究目的根據上述之研究動機，歸納本研究之主要目的有幾點，分述如下: 1. 探討圖像符號應用在手機 App，對於主題與主選單介面視覺風格之影響。 2. 經由文獻探討圖像符號建構、意義、轉換中，達到設計的目的。運用在行動裝置螢幕上所需之注意事項，其中包含使用者認知心理、圖像符號之轉換以及使用者介面設計原則等。 3. 分析現有展覽類型 App 之設計運用模式，並探討現有展覽類型 App 主題與圖像符號主選單介面之關聯性。 4. 以使用者中心為基礎，將分析結果創作不同風格之展覽活動 App 主題視覺介面與圖像符號主選單介面。最後提出結論與後續研究建議，提供設計相關人士作為日後參考。. 1-3 名詞釋義 1. 圖形使用者介面 (Graphic User Interface) : 指採用圖形方式顯示的操作用戶介面。畫面上顯示視窗、圖示、按鈕等圖形，表示不同目的之動作，使用者透過滑鼠等指標裝置進行選擇。(維基百科，2014) 2. 行動裝置應用程式(mobile Apps) : 行動裝置應用程式（英語：mobile application，簡稱 mobile app、app），或手機應用程式、行動應用程式、手機 app 等，是指設計給智慧型手機、平板電腦和其他行動裝置上運行的應用程式。 (1) Android : 是一個以 Linux 為基礎的半開放原始碼作業系統，主要用於行動設備，由 Google 成立的 Open Handset Alliance（OHA，開放手機聯盟）持續領導與開發中。 (2) Windows Mobile : 是 Microsoft 針對移動産品而開發的精簡操作系統。 (3) iOS（原名：iPhone OS）: 是由蘋果公司為行動裝置所開發的操作系統，. 2.

(14) 支援的裝置包括 iPhone、iPod touch、iPad、Apple TV。與 Android 及 Windows Phone 不同，iOS 不支援非蘋果硬體的裝置。(維基百科，2014) 3. 主選單介面(Springboard) : 使用者經驗設計專家 Theresa 分析在行動應用程式中的主要選單模式的 Springboard 模式，不受限於作業系統，能用在各種裝置上，有時它也會被用來指 Launchpad。Springboard 的特徵是有一個到達頁，上面有選單項目，作為應用程式的入口；Facebook 按照 ios 系統首頁的 Springboard 設計，很快地其它應用程式也仿效它們。3x3、2x3、2x2 和 1x2 的格狀版面是最常見的版型，不過 Springboard 不一定得用格狀版面，有些選項在比例上可以比較大，傳達比較重要的意涵，例如 iphone 的 Masters 應用程式裡的影音選項比其它選單項目大 2 到 3 倍 (Neil,2012) 。. 圖 1-1 Springboard 用的格狀版面(Neil,2012). 4. 主題介面 (Launch Image) : 是所有應用程式在上架時都必須準備的一張圖片，也是將來使用者在開啟此應用程式時第一眼所看到的影像。此圖片是代表此 App 的主題圖片，它增強了應用程序的整體經驗，往往會提供一個更專業的感覺 (AppArchitect,2014) 。在本研究中將它定義為「主題介面」。 5. 使用性 : 使用性是一種以使用者為中心的設計概念，使用性設計的重點在於讓產品的設計能夠符合使用者的習慣與需求。(維基百科，2014) 6. 使用性工程 : 是指以使用者為中心，評估系統或使用介面之使用性的方法 (Nielsen,1993)，主要探討如何與使用者溝通、觀察使用者的工作環境、情境分析等。. 3.

(15) 1-4 創作研究方法與架構創作研究方法 1. 運用文獻探討法，分析圖像符號理論，了解圖像符號在使用者介面上之應用要點；運用在行動裝置螢幕上所需之注意事項，其中包含使用者認知心理、圖像符號之轉換以及使用者介面設計原則等。. 2. 以使用性工程中的啟發式評估法來探討展覽類型 App 的現有問題，以及使用展覽類型 App 感受，以瞭解展覽活動 App 主題視覺與主選單圖像符號設計的風格關係。分析其構成元素，及使用上的優缺點，分析適合視覺設計師在設計相關 App 圖形介面設計時，可使用之設計方法及模式。. 3. 運用文獻探討結論與研究方法評估分析結果，所歸納與思考出的設計程序，進行不同風格之展覽類型 App 設計創作。. 4.

(16) 研究流程步驟. 圖 1-2 研究流程步驟. 5.

(17) 1-5 創作研究範圍與限制本創作研究將以「展覽類型 App 圖像符號設計」之案例進行研究，並將範圍限定在行動裝置 App 系統主題介面與主選單介面作為創作依據。針對目前國內對於展覽有興趣，並且使用行動裝置 App 之使用者作為研究對象。現今科技發展之行動裝置 App 包含文字、圖形、聲音、動態影片等元素，由於時間限制，所以將本創作研究限制範圍如以下 : 1. 針對五吋以內面板行動裝置展覽類型 App 作為研究對象。 2. 對於動態圖像、聲音等元素，因涉及研究範圍過大，僅以靜態之圖像設計運用在行動裝置上主選單介面設計為主要研究對象。 3. 創作主題以展覽活動 App 主題介面與主選單介面設計為主。. 6.

(18) 第二章文獻探討本創作研究在探討圖像符號運用於行動裝置展覽類型 App 之使用者介面使用情形，因而需將圖像符號既有的理論分析，對於圖像意義、形成與轉換，從中發掘現有問題與尚未發現的領域，並考慮到使用者介面設計原則與使用者認知心理等。. 2-1 圖像符號理論圖像符號的形成乃自符號學基礎理論衍伸而來，因此必須瞭解符號學基礎理論，而符號學理論應用涉及範疇廣闊，透過研究分析符號學對溝通的傳達，將有助於設計師在圖像符號建構、意義、轉換中，達到設計的目的。. 2-1.1 圖像與符號學威斯康辛大學傳播藝術系教授 John Fiske(1995)曾說 :「要研究是甚麼使得文字、圖像或聲音能變成訊息，就必須研究符號」，而符號學就是研究符號和符號運作的學問。依據索緒爾符號學理論分析，符號乃是以「符號具」(符徵)和「符號義」(符旨) 的兩面性，作為表裏一體而成立的；亦即任何一個整體的符號，都同時兼具有符號具與符號義。符號具，指用來表示具體事物或抽象概念之各種符號，是一個物質化的媒介物，如：語言、文字、聲響、影像，造形…等；符號義，則是符號具所表示的具體事物或抽象概念之內在意義，它並不是「一個事物」，而是此「事物」的內在表現。兩者不僅分別具有符號之「外延意義」(Denotative meaning)與「內涵意義」(Connotative meaning)，彼此並形成一種非自然的、任意(arbitrary)的關係，根據所存在之社會、文化環境的脈絡變化，而形成不同的符號意義；所以，符號具與符號義是一種約定俗成的關係(Saussure,1966)。. 7.

(19) 透過符號組成的方式，我們可以對某件事物進行符號具與符號義的區分與解釋，把隱藏在符號背後的意義解構成多重結構之元素，使得符號的表象與內在意義，經由符號組成的深層意義分析，更了解符號隱含之外延意義與內涵意義(李幼蒸，1997)，藉由外延意義與內涵意義建構出完整的符號脈絡。美國符號學之父皮爾斯認為人類所有的經驗和思想都是符號活動，因此符號理論也是關於意識和經驗的理論。而人類所有的經驗皆是在組織符號與對象物之間的意義解釋。皮爾斯(Charles S.Peirce)把圖像符號分為三類 :「圖示符號(Icon)」、「象徵性符號(Symbol)」、「指示性符號(Index)」(Fiske,1995)。表 2-1 為皮爾斯符號學分類。表 2-1 皮爾斯符號學分類指符號與其所代表的事物或概念，具有全部或部份的類存關係存圖示符號(Icon). 在，可藉由符號本身的觀察而嘹解其意義，例如圖畫、雕像、攝影等形象逼真的視覺符號。. 象徵性符號(Symbol). 指符號與對象之間存在一種邏輯關係，可藉由符號所提供的線索，而聯想到其意義，例如看到冒煙會聯想到火。指符號與對象之間的關係，是基於某種環境、文化下約定的連結，. 指示性符號(Index). 符號的意義的嘹解是必須經過學習的。例如旗幟、數字等人工象徵符號。. (姚村雄，2001). 就文獻整理中得知，符號的運作是藉由傳遞或溝通與人互動而產生了意義。索緒爾提出符號組成之符號具與符號義就是在兩者牽引之下產生意義；皮爾斯的「符號意義結構」也是強調「符號」、「客體」、「解釋」互動交錯而產生意義的關係。(陳美蓉，2002)也因此當人們觀看圖像符號時就會因互動的不同而產生不同意義。而符號在演化過程中，需要靠符號轉換作用的「系譜軸」(Paradigm Axis)和「毗鄰軸」(Syntagm Axis)交互作用才能創造出意義(如圖 2-1)。因此，兩軸關係是意義傳達的重要方法。. 8.

(20) 1.. 系譜軸：是一個可以選擇多種單位元素的垂直關係軸，其特徵有： (1) 同一系譜軸的各單位元素，有其共同之處共同性質，使這些單位元素同屬一個系譜軸。如 M 是一個字母，屬於字母的系譜軸。 (2) 在系譜軸裡，每一個單位元素必須和其他單位元素清楚區隔其顯著特色，且能分辨出同一系譜軸裡各個單位元素的之間差異，包括其符號具與符號義。. 2.. 毗鄰軸：是符號與符號間訊息組合之規則或慣例的橫向關係軸，如一串句子是字的毗鄰軸，它是由字母的系譜軸裡組合有意義的文(陳美蓉，2002)。. 圖 2-1 符號的兩軸關係(陳美蓉，2002). 而美國哲學家 Morries(1938)為符號學提出了三個向度 : 1.. 語法學(symtatics)，研究圖像本身的視覺要素，或圖像與圖像之間的視覺關係。. 2.. 語意學(semantics)，研究圖像外延意義(事實、觀念等)和內涵意義(情感、經驗等)。. 3.. 語用學(progmatics)，研究圖像如何被產生(設計)，及圖像如何被解譯(認知)。圖像就藉著上述的三的向度，作為人機的溝通介面。圖像的組成方式即為「語. 法」、圖像如何被詮釋即為「語意」、圖像與使用者的關係則為「語用」(林品章、張照聆，2009)。學者林榮泰曾在其研究中將人機介面圖示分為具象型、抽象型圖形及強制型圖形。 1. 具象型：將有關事物的特徵，利用視覺化方式予以具象化。此類圖像因參考實際事物繪製，具有望圖生意的效果，因此容易辨認、易學、易記。 2. 抽象型：將事物的概念或抽象化的觀念視覺化。使用者需運用想像力才能聯想。將事物觀念化或視覺化較容易學習，一經學習則容易記憶。大家認同的事物或 9.

(21) 觀念，不會因外在因素的改變而影響其傳達的語意。如用電話聽筒的圖形來表達「電話」的概念，不會因為電話外形的改變而影響所要傳達的語意。 3. 強制型：圖像本身與實際事物或觀念無關，是被強制指定或約定成俗的符號。尤於缺乏參考，強制型的圖像與學習較為困難，必須一再學習直到熟記為止，其優點唯一但被接受採用為記號後，則不容易被改變。如♂表示男生，♀表示為女生。. 2-1.2 圖像符號意義與作用圖像的定義也因象徵的意義或視覺層面的表現有所差異，圖像通常是指 image、icon、picture 等辭彙，picture 的原意為：圖畫、照片、實際的電影形象(翟治平、王韋堯，2009)，屬於視覺層面的表象。 Marcus(1984)指出每個圖示都具有三個面向的特質，即：外觀、意義及顯示方式。其中外觀指的是本身的形狀、顏色；意義指的是圖示本身所意涵的意思；顯示方式則是取決於螢幕的解析度，在實際的介面上的呈現情形；Horton(1994)則認為圖像就是一看就能瞭解的符號，以它傳達資訊最容易達到溝通的效果，但並不只是一個可辯識之物件意象而已，還必須包括外框(border)和背景(background)，而且需要有標籤(lable)說明此意象之意義。圖像的功能較文字與語言較為有許多彈性的空間與想像範圍，視覺心理學家 Rudolf Arnheim 在「視覺思考(Visual Thinking)」一書中指出，所謂的圖畫(Picture)、標識(Sign)、符號(Symbol)等圖像符號，經由不同的組合與架構，即形成有機能的指示意義。其功能包含了象徵作用、語言作用、識別作用。 1. 象徵作用 : 象徵性質的圖像符號通常是用來表達人生經驗。「象徵」以普遍性的語意，即顯示某一徵兆及指示的意涵。象徵作用的形式可以運用圖像元素組合的結構來代表所闡述的含意。例如烏雲密佈的閃電森林圖像符號之組合，可能意昧暴風雨的來臨，可能代表兇兆，意可能是強調人生巨變的「轉淚點」等。. 10.

(22) 因此象徵作用的目的在於將混亂、雜亂的訊息、構想、感受及情緒化為有秩序的簡化為意瞭解的議題。 2. 語言作用 : 圖像符號具有如語言功能般陳述圖像構成的意義，因此必然有類似語言的作用。視覺圖像符號對建構與解讀的運作具有語言的意義包含： (1) 類似語言式的社會制約，可穩定思想和情感作用，圖像符號可以令要傳達的意念有跡可尋。 (2) 透過適當的視覺圖像符號構成，觀賞者能夠具體的解讀訊息「說明」之內容，減少無效及多餘的溝通。 (3) 圖像符號有語言屬性地會使人產生心理層面的經驗效應。 (4) 有了共識的視覺圖像符號，建構者與觀賞者之間的溝通便能形成。 3. 識別作用 : 圖像符號給予觀賞者最重要的訊息解讀因素便在於識別作用。視覺由於惰性，會自主地經由視覺經驗，搜尋圖像中具有代表性、象徵性的形態辨認圖像訊息。而圖像符號具有識別作用的因素在於： (1) 圖像符號造形特徵：藉由圖像符號中曾認知過的視覺經驗與模式，即能感應物象特徵造形與造形特徵屬性的辨識效果。 (2) 圖像符號的邏輯：經由刻意組織的圖像形式，透過視覺邏輯的吻合，即產生經驗意義的脈絡識別。 (3) 決定性的因素：圖像符號的形態，能在視場環境中脫穎而出，受到解讀者感應，乃由於某些決定性造形的設置與建構；例如「十字架」是「醫療」、「宗教」等。周陟(2010)在 UI 進化論書中有整理出圖示設計的應用價值 : 1. 視覺設計的重要組成部分，用於提示與強調。 2. 使產品功能具象化、容易理解。 3. 使產品人機介面更具有吸引力，並富含娛樂性質。 4. 形成產品的統一特徵，給使用者以信賴感、便於功能的記憶。 5. 創造差異化、個性化的美，強化裝飾性的作用。. 11.

(23) 6. 圖示設計是一種藝術創作、能提高產品的品味。 7. 圖示設計的表現方式靈活自由，可以傳達不同的產品理念。 8. 圖示設計在螢幕上展現作品的最佳方式。. 2-1.3 圖像符號設計原則與流程圖像符號的設計原則，方裕民(2003)認為在發展有效圖像時應考慮下列幾點 : 1. 立即辨識（immediacy）：在相同的認知經驗上，視覺記號將會具備立即辨識的功能，會協助使用者在看到有效的畫面的瞬間，即刻從經驗與知識中分析出有用的資訊，可以稱之為「圖像力（graphical power）」。 2. 普遍性（generality）：符號本身的普遍程度，控制著符號是否代表著更廣意的類別。在使用者圖形介面中，若某個圖像時常運用於表現某類型事物，這符號本身若抽離某單一物品的細節特徵，符號經過抽像化後，便能代表類似的事物群。例如常見的照相功能圖標，常常可見單取相機鏡頭之特徵，作為圖標的主要表徵。 3. 一致性（cohesiveness）：在使用者圖形介面中，圖像通常以整個群組，系統性的出現。在系統中的每一個獨立視覺元素，一定要協同其他視覺元素共同的團隊合作。當圖像本身的共感特質接觸到生理感知的第一關—視覺感知，將立刻被查覺，此時具有協調統一的介面便可成立。共同的視覺特徵，讓每個元素之間的關聯性更加的密切。而且在使用者圖形介面中，運用協調的視覺特徵，也會減輕使用者對新元素的陌生與負擔。 4. 特徵描述（characterization）：圖像表現的特徵描述必須將焦點放在如何找出特質，利用正確的角度、減少不必要的細節、誇大的特色。可嘗試將真實世界的視覺細節，加入於虛擬介面的設計中，協助強化使用者的感知效果，讓該圖像更利於辨識。. 12.

(24) 5. 可溝通性（communicability）：符號訊息的發送者與符號訊息的接收者，透過共同的脈絡（context）中建立起符號的溝通，這樣共享的脈絡讓符號本身，建構成「發送者」與「接收者」兩端皆能辨識的管道。近年來研究圖像方面論述多樣，討論內容十分豐富，為幫助本研究推展，將相關圖像設計原則研究論文結果整理如表 2-2 : 表 2-2 圖像設計原則相關研究論文蕭淑芳. 電腦繪圖軟體圖像設計形式對圖像意義傳達影響之研究可理解性以及辨識性對於圖像的設計來說是很重要的，也是讓使用者容易瞭解圖像的重點所在，所以本研究將這類的原則歸類為「圖像的傳達性」。另外，在圖像認知部份的文獻也得知，圖像與使用者認知的關連性也是重要的一環，從表格中也可看出多位學者也提到類似的原則，將這部分則歸類為「容易聯想」。另一部份屬於整體設計，強調整體和諧、色彩、美感…等，將它歸類於「整體滿意度」。. 黃柏文. 行動電話人機介面圖像意象及其偏好之研究圖像與設計必須保持一貫性圖像意義明確性以使用者為中心考量具有美感、操作樂趣的圖像. 蔡劼明. 智慧型手機圖像辨識率與滿意度之評估研究普遍性：在人機介面裡，一般的、約定俗成的記號到處可見，大家早已熟悉的播放符號已普遍見於各型的消費性家電產品，如今在圖形使用者介面裡也大量運用，證明普遍性的視覺語言可以直接引用至資訊產品使用者介面裡。吸引性：圖像符號應討人喜歡，一個外表醜陋或過時的圖像會減低使用效率。聯想性：圖像和它所要傳遞的訊息應容易聯想，藉由喚起使用者心中對於欲指涉的物體的重要特徵，圖像符號便得以達到再現的功能。簡潔性：圖像設計需清晰簡潔，有效的圖像符號應該能夠毫不費力、本能地被辨識出來。比例適中：大小需配合顯示螢幕的尺寸，兩者之間的比例固定，各個圖像的尺寸一致。. (本研究整理). 13.

(25) Horton(1994)在圖像書(icon book)一書中提出圖像設計的流程，如圖 2-2 所示. 圖 2-2 圖像設計流程(Horton,1994). 林榮泰 (1993)在「評估圖像符號方法的研究」中，將 Gittins(1986)所提出的 6 個圖像評估因素： 1.可遐想的 2.可辨識的 3.意義深遠的 4.簡明的 5.引人注目的 6.象徵的；歸納為三個評估圖像的共同因子： 1.. 語意傳達(communication)：圖像欲傳達的意義是否明確。. 2.. 設計品質(Design Quality)：圖像的設計是否簡潔、好看。. 3.. 象徵意義(Image Function)：圖像表達的意義是否有具體的象徵意義。並將因子權數標準化，得到「綜合評估值＝語意傳達×0.41 +設計品質×0.33 +. 象徵意義×0.26」作為評估圖像的給分公式。林榮泰(1993)提出常用的圖像評估方式有下列幾點 : 1.. 理解測試(Comprehension Test) 理解力的測試的進行程序是由受測者觀察受測圖像後，敘述出圖像所代表的涵義，再從受測者的回答出的答案之中，可判斷出受測圖像是否可正確傳達出圖像原來的意義，也可從錯誤的答案之中，找出圖像被誤解的因素。. 2.. 配對測試(Matching Test) 配對測試的評估方式是在一堆圖像之中配對測試由受測者找出最符合受測題目的圖像，在經由多人次的測試，找出最多次被正確指認出的圖像。這種配對測試可以避免圖像設計太過相似，而造成圖像意義傳達的混淆。. 14.

(26) 3.. 偏好測試(Preference Rating) 圖像偏好測試是將數個相同的圖像，由受測者挑選出他們最偏好的一個圖像，或是受測者也可將數個圖像，由偏好的程度以順序加以排列。此種偏好測試對圖像設計師而言，可得知何種圖像設計與風格較易獲得使用者的青睞與喜愛。. 4.. 回想測試(Recall Test) 受測者必須先接受學習圖像的意義，再經過一段時間後，通常是一到兩個禮拜，再接受第二次的測試，以了解受測者對圖像回想的比率。此種方法可以了解圖像是否容易學習與容易記憶的特性。. 5.. 語意差異法(Semantic Differential Test) 語意差異法簡稱為 SD 法，通常是利用意義相互對立的詞彙，並以這些詞彙建立出尺度評量表，再由受測者再觀察圖像之後，依照本身的認知，評估圖像的感覺。圖像語意差異法是否成功，必須仰賴詞彙選擇是否適當。. 在圖像的評價方面，美國圖案藝術協會提出以語意性﹙Semantic﹚統一性 ﹙Syntatic﹚實用性﹙Pragmatic﹚三個條件作為圖像評價的基準，其中又以語意性 ﹙Semantic﹚為重點﹙湯永成，1992﹚ ；所謂語意性﹙Semantic﹚是指在圖像的視覺效果與意義之間的關係，其考量則包括有： 1.. 圖像應能貼切地傳達訊息. 2.. 不會引起誤會. 3.. 使用者因不同的文化背景，在解讀圖像時所產生的差異. 4.. 不同年齡的使用者，在解讀圖像時所產生的差異. 5.. 需易於學習、理解. 6.. 需被廣泛地接受. 7.. 不可存有潛在的、影響意義傳達的要素. 15.

(27) 2-2 圖形介面特性與設計原則使用者與機器間資訊交互往來的一個介面通路與環境，稱為人機介面（Human-Computer Interface；HCI），由於人機之間的溝通模式在於強調使用又稱為使用者介面（User-Interface；UI）（李青蓉等，1998），且是用來幫助機器使用者導向（user-oriented）與以使用者為中心（user-centered）的模式，因此人機介面使用者閱讀、輸入及搜尋資訊的媒介。所謂圖形化的使用者介面，則是利用大量的圖形，來代替掉原本需要輸入的字串，或是繁複的滑鼠操作。將圖形化使用者介面帶入一般資訊應用的是美國蘋果(Apple)公司，其後 Apple 更持續在圖形操作技術領域有非常多的進展。隨行動裝置流行，使用者不但注重操作上的易用性之外，美觀更是成為視覺介面的設計要點之一。. 2-2.1 圖形使用者介面特性林榮泰在 1991 年，從圖像語意傳達探討人機介面圖像的視認與設計中曾提到圖形使用者介面(graphicsuser interface，GUI)具有兩項特點。 1.. 直接操縱：藉由直接操縱螢幕上可視物件，以有如完成類似人類肢體的行動，造成系統狀態的改變，例如以滑鼠點選拖曳，或以光筆在螢幕上點選即屬直接操縱。. 2.. 隱喻互動：隱喻式理解是一種利用過去經驗或知識，與目前系統狀況類比，以進行新事物的學習。通常是運用熟悉的事物來傳遞抽象概念，它在使用者的心理建立起一致性的預期，使得各種圖像代表原先的抽象意義如同日常經驗的一分，例如「桌面」、「資源回收桶」等概念。而方裕民在 2003 年針對直接操作(Direct manipulation)亦提及其特性及優點：. 1.. 由於是視覺導向的。不使用複雜的指令，而利用圖像來隱喻物件，其功能表選項可下拉檢視，因此整個介面是透明易讀而容易操作的。. 16.

(28) 2.. 基本的操作(如：開啟、關閉、複製、刪除、捲動等)是高度互動的，而整個介面設計是一致的，因此對使用者而言是容易學習的。. 3.. 所有功能的「物件」是透明而易讀的。對話由使用者控制，由合乎邏輯的操作所驅動，操作通常可復原，而且具有立即回饋，因此得以鼓勵使用者能無後顧之憂的探索介面。 William Horton(1994)認為「使用在電腦介面中之選單、視窗中的小插圖或符. 號都稱為圖像(icons)」。它們代表系統中特定的功能而且可以讓使用者在視覺上產生隱喻的效果。而圖像運用在介面下的優點包含下列幾點 : 1.. 幫助使用者更快完成工作. 2.. 代表視覺和空間的概念. 3.. 節省記憶體空間. 4.. 可快速尋找. 5.. 可立即辨認. 6.. 有較好的記憶性. 7.. 使用者較容易閱讀. 8.. 使介面國際化對於圖像的認知證明美國學者 Peddie(1992)曾針對圖形化介面(Graphic User. Interface)與一般使用者介面(Common User Interface)，作使用者介面熟悉度比較的研究，一般使用者用的是命令輸入式介面 :. 圖 2-3 使用者熟練度比較(Peddie, 1992). 17.

(29) 研究結果顯示，圖 2-3 使用者在學習介面功能時期 GUI 的操作熟悉度比 CUI 低，到了中後期時 GUI 的操作熟悉度成長非常快。這表示友善的圖示化使用介面會對使用者提高使用軟體的熟練度。一個好的圖形化使用者介面系統應具備下列幾點特徵：介面視覺化、點選的互動方式（Pointing and selecting）、物件導向、操弄導向、靠識別而不是靠記憶、以使用者的應用為主、能接近使用者的觀點，讓使用者照自己所需，自行調整介面。因此圖形化使用者介面讓電腦變得更具有人性素養（李青蓉等，1998）。. 2-2.2 行動裝置圖形使用介面設計原則現今所使用的使用者介面設計原則，大多是依照大型螢幕去發展延伸出來，但這些並不全部適用於行動裝置，不論是使用介面螢幕的大小或圖像可觸控的範圍等。行動裝置必須隨使用情境或需求修正與變化。因此 Shneiderman (2005)藉由經驗與觀察互動系統後，將適合的經驗法則再精煉、延伸後整理八個黃金定律介面設計準則 : 1.. 取得一致性類似的情況應該有讓使用者有一致性的操作。在提示、選單與說明文件中，應該採用同樣的名詞。並且保持命令的一貫性。. 2.. 讓重度使用者使用捷徑當使用頻率增加時，使用者會希望減少互動的次數、讓每次的互動能夠一次做更多的動作。縮寫、功能鍵、隱藏功能與綜觀全局的功能，對專家來說非常有用。. 3.. 提供有意義的回饋當使用者做出一些動作時，系統應該提供回饋。越頻繁的動作，其回饋的強度可以低一些。越重要或不尋常的動作，其回饋強度應該要顯著一些。. 18.

(30) 4.. 設計對話產生結束一連串的動作應該被組織成開始、中間、結束三部份。當動作結束的時候，要提供回饋讓使用者知道動作已經完成。在做下個一連串的動作之前，先告知使用者整個流程，能夠減輕使用者的壓力、提高滿意度。. 5.. 提供簡單的錯誤處理最好不要讓系統有嚴重錯誤的可能性。如果還是造成錯誤，系統應該能夠偵測出來，並提供一個簡單、使用者可以理解的錯誤處理方式。. 6.. 允許回到上一步這個功能可以減低使用者的焦慮，因為使用者知道做錯了可以重來。這個功能鼓勵使用者探索不熟悉的選項。回到上一步的功能，可以包含一個、或是一連串的動作。. 7.. 滿足使用者控制的需求有經驗的使用者強烈的感覺到他們在控制系統，做出動作之後，系統提供回饋。系統設計上要讓使用者作為動作的觸發者，而不是回應者。. 8.. 減少短期記憶需求人類的短期記憶有限，因此顯示上要保持簡單、能同時顯示多頁資料以減少視窗切換頻率，減少記憶指令和動作順序的時間。 Gong 與 Tarasewich(2004)以 Shneiderman (2005)的八個黃金定律為基礎延. 伸出七個手持行動裝置附加介面設計原則 : 1.. 設計多樣且有力的情境. 2.. 專為小型裝置設計. 3.. 為有限且分散的注意力做設計. 4.. 必須考慮速度以及回復. 5.. 要設計 top-down 的互動. 6.. 允許個人化. 7.. 愉悅的設計. 19.

(31) Kevin 與 Chu (2001)對於解析度低的小螢幕介面設計的特性與問題中，提出了下列五項設計目標： 1.. 資訊之呈現以清楚、易懂及便利於瀏覽頁面為重點。. 2.. 協助使用者透過相關資訊進行瀏覽而不致於迷失。. 3.. 在低解析度的環境下協助使用者充分了解頁面內容。. 4.. 在不犧牲易讀性的前提下達成充分滿足精簡呈現的內容。. 5.. 維持網頁內容的單純性與優雅度，注重資訊的呈現而非展示效果。對於小型介面設計，卓良政(2000)在圖像式操作介面之研究中整理以下 :. 1.. 可以被記憶的 : 是否引人注目且鮮明 ? 是否在文件中有持續的使用性 ?. 2.. 數量 : 運用少於 20 個，且大量使用時需由熟悉的事物轉化而來。. 3.. 具使用延伸性 : 黑白情況和縮小尺寸仍可理解。圖像是否可以當作包圍其他物體的邊框。. 4.. 可以被區分的 : 對於其他可能混淆的圖像間隔是否夠大。在類似群中，區分的要素夠清楚與否。. 5.. 區分方式 : 以空格區別圖像或物體，比用顏色區別辨識較為容易，簡單的背景顏色可以突顯圖像的可識性。 Marcus(2001)將這種行動裝置的小螢幕稱為 babyface，提出介面的設計都必. 須包含以下幾個要素：1.隱喻（Metaphor）：透過文字、圖像、聲音和具體的經驗來傳達基本的概念，例如像是頁面、購物車、聊天室或網路部落格等概念；2.心智模式（Mental Model）：對於工作或休閒中的資料、功能、任務、角色的結構或組織；3.導覽（Navigation）：透過心智模式產生的動作，也就是經由內容和工具產生的動作，例如對話框、選單、圖示及視窗等；4.互動（Interaction）：輸入或是輸出，包含回饋的訊息，例如鍵盤的選項、滑鼠和麥克風等入輸入設備；5.外觀：視覺、聽覺和具體的特徵例如顏色、字體、聲音線索、語言表達形式等。 Weiss(2002)在手持設備方面有相當的設計經驗，其認為手機在選單方面最多不要超過 9 個選項，因為固定的按鍵只到數字 9 ，而螢幕的大小至少要能顯示. 20.

(32) 4x12 的字元，每個字元大小最好在 5x7 pixels 到 20x20 pixels 之間。盡量採用小寫的字型來產生更多的空間，並要擅用"_"底線以及" "空格來改善編排，不要空行，但是可以用來表示最底下的一行。另外對於螢幕上的圖示則建議 : 1.. 要小而可辨識. 2.. 採用高對比色. 3.. 盡量用黑色粗線條來強調邊緣. 4.. 避免採用立體的圖示. 5.. 保持圖示的簡潔，並且避免結合的圖像. 6.. 名詞比動詞更容易圖示化. 7.. 保持圖示的一致性. 8.. 嘗試在不同的距離下觀察圖示，讓使用者在不同的距離下操作時仍能辨別圖示. 9.. 圖示要容易記憶且具有直覺性. 10. 避免直角的邊緣 11. 避免把文字放入圖示中蘋果公司在 1992 年發表了介面設計的原則有：1. 隱喻的使用(metaphor) 2. 直接操作 (direct manipulation) 3. 觀看與指引 (see-and-point) 4. 回饋與對話 (feedback and dialog) 5. 去模式化(modeless) 6. 一致化(consistency) 7. 所見即所選(What You See Is What You Get) 8. 使用者控制(user control) 9. 容錯（ forgiveness) 10. 穩定性 (perceived stability) 11. 整體的美學 (aesthetic integrity)。 Hoober 與 Berkman 在 2012 年整理出一般的觸控互動原則 : 1.. 為了滿足一般大眾，觸發觸控的最小區域範圍是每邊 10 公釐( 一英吋的 3/8) 的正方形請見圖 2-4，可能時使用較大的目標區域，重要的目標應該比其它的大。不要依賴像素尺寸來測量觸控目標，像素尺寸會根據裝置而不同，且不是非一致的測量單位。. 21.

(33) 圖 2-4 觸發觸控的最小區域範圍(Hoober & Berkman,2012). 2.. 觸控區域絕不應該小於視覺目標。. 3.. 矩心區域跟觸控區域的比較，由於螢幕視差的關係，我們一般會以為有較大的觸控區域。. 4.. 使用螢幕邊框上的空間或螢幕周圍的邊框，可以降低實際的目標尺寸和提高互動速度。見圖 2-5。. 圖 2-5 使用螢幕邊框上的空間或螢幕周圍的邊框(Hoober & Berkman,2012). Paul M.Fitts(1912~1965)在 1954 年時，建立一個數學公式，用來決定，根據目標尺寸和距使用者的距離，使用者在螢幕上選取一個物件或實際觸控它要花多久的時間。在行動裝置裡，我們知道螢幕顯示尺寸是有限的，空間是寶貴的，此外，行動使用者需要快速存取他們正在尋找的內容，合併使用費滋定律和這些限制可改善使用者經驗 :. 22.

(34) 1.. 按鈕和可選取的控制項應該大小適中，因為點選小物件相對來說比較難，使用螢幕的邊框可以提供一個手法，目標可以比較小，但仍然容易選取，對用滑鼠或其他游標驅動的系統來說，可選取範圍的邊緣會變得「無限」深，所以選取區域在作用上大多了；對有平邊框的觸控裝置來說，使用者可能會把一部分的手指放在螢幕外，觸發比一般小多了的目標。. 2.. 既然使用者不用移動，跟下拉式選單比起來，通常可以較快開啟或觸發彈出式對話框和工具提示。. 3.. 提供表面層級的排序和篩選控制項來快速存取做了索引的資訊，減少存取內容的點擊數。. 表 2-3 介面設計原則比較介面設計原則取得一致性讓重度使用者使用捷徑提供有意義的回饋設計對話產生結束 Shneiderman (2005). 提供簡單的錯誤處理允許回到上一步滿足使用者控制的需求減少短期記憶需求設計多樣且有力的情境專為小型裝置設計. Gong 與 Tarasewich(2004). 為有限且分散的注意力做設計必須考慮速度以及回復要設計 top-down 的互動允許個人化愉悅的設計資訊之呈現以清楚、易懂及便利於瀏覽頁面為重點。協助使用者透過相關資訊進行瀏覽而不致於迷失。. Kevin 與 Chu (2001). 在低解析度的環境下協助使用者充分了解頁面內容。在不犧牲易讀性的前提下達成充分滿足精簡呈現的內容。維持網頁內容的單純性與優雅度，注重資訊的呈現而非展示效果。. 23.

(35) 可以被記憶的 : 是否引人注目且鮮明?是否在文件中有持續的使用性? 數量 : 運用少於 20 個，且大量使用時需由熟悉的事物轉化而來具使用延伸性 : 黑白情況和縮小尺寸仍可理解。圖像是否可以當作卓良政(2000). 包圍其他物體的邊框可以被區分的 : 對於其他可能混淆的圖像間隔是否夠大。在類似群中，區分的要素夠清楚與否。區分方式 : 以空格區別圖像或物體，比用顏色區別辨識較為容易，簡單的背景顏色可以突顯圖像的可識性。要小而可辨識採用高對比色盡量用黑色粗線條來強調邊緣避免採用立體的圖示保持圖示的簡潔，並且避免結合的圖像. Weiss(2002). 名詞比動詞更容易圖示化保持圖示的一致性嘗試在不同距離下觀察圖示，讓使用者操作時仍能辨別圖示圖示要容易記憶且具有直覺性避免直角的邊緣避免把文字放入圖示中隱喻的使用（metaphor）直接操作（direct manipulation）觀看與指引（see-and-point）回饋與對話（feedback and dialog）去模式化（modeless）. 蘋果公司(1992). 一致化（consistency）所見即所選（What You See Is What You Get）使用者控制（user control）容錯（forgiveness）穩定性（perceived stability）整體的美學（aesthetic integrity）. 24.

(36) 為了滿足一般大眾，觸發觸控的最小區域範圍是每邊 10 公釐( 一英吋的 3/8)的正方形請見圖 2-4，可能時使用較大的目標區域，重要的目標應該比其它的大。不要依賴像素尺寸來測量觸控目標，像素尺寸會根據裝置而不同，且不是非一致的測量單位。. Hoober 與. 觸控區域絕不應該小於視覺目標。. Berkman(2012). 矩心區域跟觸控區域的比較，由於螢幕視差的關係，我們一般會以為有較大的觸控區域。使用螢幕邊框上的空間或螢幕周圍的邊框，可以降低實際的目標尺寸和提高互動速度。. (本研究整理). 2-2.3 隱喻圖形使用者介面近年來圖像設計上常運用到詞語修辭學中的歸類整理出來的修辭格技巧 1.象徵(轉喻)2.明喻 3.暗喻(隱喻)。利用修辭格技巧可以更為清楚傳達出圖像符號所表達內容，使觀看這個圖像的人產生視覺上的聯想，加深對於表達內容的記憶點。表 2-4 為修辭格技巧運用在圖像設計整理。表 2-4 修辭格技巧運用在圖像設計象徵(轉喻). 利用象徵性的意象，動作等。轉換為代表性意義. 明喻. 直接以物件的意象或符號作為轉換方式. 暗喻(隱喻). 利用具代表的型態、物件、符號或概念作為轉換方式. (謝育仁，2000). 運用圖像隱喻介面設計開始於八十年代初期，最有名的例子就是美國蘋果電腦公司的麥金塔介面，其桌面設計概念便是由抽取桌子內的抽屜或檔案夾隱喻轉換而來，而垃圾桶圖像則以說明抽象丟棄與清除的概念。「隱喻」是介面設計中重要的一部份，好的隱喻設計能提高使用介面的友善性。. 25.

(37) 表 2-5 隱喻圖像使用者介面之隱喻範例真實環境的經驗. 隱喻的描述圖像. 應用數位化的操作環境. 房子、家. 回到首頁. 喇叭. 音樂的開啟或關閉. 信封. 撰寫信件（E-mail）. (本研究整理). 介面隱喻指的是「用非電腦領域裡所熟悉的概念或術語來描述電腦功能和使用者介面上的物體」(Hsu,2000)使用隱喻的目的，即藉由具體圖像將難以解釋的抽象概念更好地傳達其意義，而其最大特點即在於幫助使用者面對抽象思考時，能將其舊有經驗聯到相關具體領域上。「隱喻」主要是由基礎領域(Base domain)及目標領域(Target domain)兩個部分所構成。基礎領域指的是「個人所熟知的知識或專業技術領域」，而目標領域則為「個人想要學習的知識或專業領域」。隱喻之所以產生作用，即是借用人們所熟知的基礎領域中的知識，來描繪目標領域中有待學習的新知識，以增加熟悉感及學習效率(許有真，2001)。隱喻運用在圖形介面上可以讓使用者用過去經驗和現在面對事物產生聯結，它還能夠幫助使用者自然融入一種情境，將舊有經驗反應到所操作事物上。運用隱喻的技巧來進行圖形化介面設計，可以幫助使用者快速進入介面環境，借由使用者的文化、習慣、背景等連結串聯起共同的經驗，所設計出來的圖像符號與圖形化介面設計，能讓使用介面產生愉悅的互動經驗。 Richards, et al.（1994）認為隱喻在介面的設計上要符合以下幾點原則： 1.. 選擇做為介面上的隱喻必須清楚的代表象徵的意義，在隱喻的表達上，必須在有限的呈現範圍內去表現出每一個隱喻的特色，換句話說，隱喻提供了理解圖示的架構。. 2.. 可理解性（Understandability）是隱喻在介面設計上另一個重要的層面，介面 26.

(38) 的隱喻必須是目標使用者可以使用並加以理解的，如果使用者無法理解隱喻所隱含的意涵，那隱喻就失去了它的價值。尤其是在國際上通用的圖形介面，要如何設計出大家都能一致理解的隱喻是相當困難的。 3.. 可延伸性（Extensibility）也是好的隱喻如何應用在介面設計上的一個重要層面，好的隱喻可以對於改進目前的設計提供有用的想法，例如資料夾在電腦上的隱喻可能就可以繼續延伸有「分類」、「標籤」等功能。. 4.. 如果單一的隱喻不夠用來支持現有的設計，可以採用複合隱喻，例如電子書即是結合了「書本」和「導覽」兩種隱喻，我們可以從電子書提取需要的資訊，以及在電子書裡導覽探索。. 5.. 如果有現成的隱喻，就選擇採用這些隱喻，雖然目前沒有所謂標準的隱喻，但是被廣泛應用且接受的隱喻開始慢慢出現，例如電腦上的「桌面」、「電子書」等。此外，如果不同的應用上都採用同一種隱喻，則盡量使用標準的用法，不要破壞它原本的意義，才不會造成使用者對於隱喻隱含意義的混淆。. 2-3 使用者中心設計我們使用的設計對象是使用者，因此任何的設計研究和觀察分析都應以使用者的立場去思考，並且考慮到使用者的直接感受。需了解使用者對於圖像設計辨視認知過程與使用者在操作介面時所產生的認知心理。並且了解好的使用者介面設計要符合使用者經驗以外，在視覺上要有一致性。心理上要達到易學、易記的使用性。. 2-3.1 圖像設計與認知歷程在探討圖像符號所予人的視覺感受時，就必須瞭解觀者看到符號的認知情形。眼睛收集到的資訊會在視覺感知過程，在一個平行、由下往上、由上往下的過程裡，神經活動同時搭上兩波資訊驅動的高潮，第一波發生由下往上處理過程，視網膜成像收集而來資訊會以一系列開始型態辨識；第二波由下往上則是處理那些資訊在當 27.

(39) 時跟我們有關以及被目標所驅動。我們的感官收集視覺資訊後，大腦會開始接收和儲存資訊，感知涉及取得從感官經驗傳遞過來的資訊，把它跟儲存在記憶裡的先備知識作互動，我們的大腦會試著去辨識熟悉的型態，一旦我們認出一個物件，要認出接下來在視場裡任何地方相同物件就容易多了(Biederman & Cooper ,1992) 。認知心理學將「認知」(cognition)這一概念解釋為獲取知識與應用知識的功能，它包括以下三個基本功能： 1. 感知(資訊接收)：透過感知活動獲取外部世界的訊息 ; 2. 資訊儲存：將外部訊息轉化、形成一定的知識結構 ; 3. 資訊處理與決策：利用這種知識完成各種作業，如推理、決策、問題解決、言語理解等(朱新明、李亦菲，2001)。認知心理學家經過半個世紀的研究，提出一個看法，人是一個訊息傳遞、處理與決策的有機體，但卻具有相當的結構與能力的限制（limitation）。此外，人不是一個被動的（passive）接受訊息的系統，而是一個主動的（active）詮釋外來訊息的系統。個人的知識驗與知識的詮釋之後，才能達到辨識（recognition）的程度，辨識之後的訊息才具有意義，才能進而轉換成另一種訊息的形式，為記憶系統（memory system）所儲存與使用（鄭昭明，1993），這樣的過程，讓使用者在操作使用介面上時會產生認知歷程，當資訊輸入時，人腦會分成三種記憶類型分別為知覺、感知及認知，到達認知階段後就會成為長期記憶然後輸出。如圖 2-6。. 28.

(40) 圖 2-6 人機互動過程(Preece, Rogers, & Sharp/陳建雄譯，2006). 以認知心理的角度來說，既然任何資訊的傳達，最終的對象就是人類，其關鍵在於設計者所欲傳達的訊息，是否能經由很簡單的規劃方式，讓使用者充分理解而不至於有所誤解。視覺傳達是一種認知的歷程，傳達者與被傳達者兩者之間有相互的影響雙向回饋的循環關係(張繼文，1991) 。張繼文並提出圖示設計應以認知心理為基礎，如何將認知心理學的相關理論應用於圖示設計，在設計原則上，應針對人類對視覺得感覺認知、注意力、形狀辨識與記憶力等需求，以「可識性」、「顯著性」、「可讀性」與「簡潔性」等為設計原則基礎。 1.. 「可識性」: 視覺訊息可以被很容易的偵測和區分，此取決於景與物之對比和明視度的差異。. 2.. 「顯著性」: 是取決於空間、造形與色彩不同的安排方式，和其它訊息同時出現時可以被突顯出來。. 3.. 「可讀性」: 是取決於所使用文字之文法結構與語法之正確性，在有文字顯現時能提供適當之文字或句子來傳達訊息。. 4.. 「含意性」: 是指訊息被瞭解的程度，此牽涉到使用者如何賦予各種訊息的內在與外在意義，而訊息本身的相似性、適切性與使用性等等必須有周詳之考慮。. 5.. 「簡潔性」: 就是將訊息單純化，主要目標就是去除視覺上不必要的特徵，只抓住重要的視覺特徵，才能使人方便認知與記憶 (張悟非，1992)。 29.

(41) Hoober 與 Berkman(2012)說明視覺物件感知是以辨識為基礎，我們必須設計出模仿大腦感知資訊方式的視覺顯示。 1.. 自動組織顯示元素 : 接近的物件是相關的，或看起來類似的物件容易被視為一體。. 2.. 感知的組織受到知識影響 : 設計視覺顯示時，知道使用者的心智模型是必要的，這樣可能能快速辨識和找到顯示資訊的關聯。. 3.. 圖像會漸進式地轉變 : 看到一個物件漸進式移動和轉變它的形狀時，我們會比較容易了解兩個物件是相關的或相似的。. 4.. 不同的視覺面向由個別的管道處理 : 大腦會使用個別的處理管道來處理物件屬性，例如顏色、尺寸、形狀和位置。舉例來說，設計一個項目全部都是黑色圓點項目清單時，我們可以立刻辨識出它們，但如果我們多增加一個項目符號，大腦必須比較費力分辨出它們是不同的。完形心理學派成立於 1912 年，在研究人類如何感知形體，發展出來的完形法. 則可以幫助設計師，根據大腦感知物件的方式來設計視覺顯示，因為是應用到行動互動設計上，這些法則是 : 1.. 接近(Proximity) : 位置接近的物件會被視為是相關和同一群組，設計圖形顯示時，有描述文字靠近一張圖片會讓觀看者把兩個物件關聯在一起，雙重編碼圖形圖示時會很有效。. 2.. 相似(Similarity) : 共享屬性的物件會被視為是相關的，使用者會把它們放在同一群組裡，尺寸、形狀、顏色相似的導覽頁籤會被觀看者視為相關。. 3.. 連續(Continuity) : 平滑、連續的物件會暗指它們是相關的，當你在設計有節點或箭頭指向另一個物件的連結時，如果直線是平滑連續、比較沒有鋸齒的，觀看者比較容易建立兩者的關係。. 4.. 對稱(Symmetry) : 物件之間的對稱關係會暗指關係，對稱反射的物件會被視為形成一個視覺整體，這可能缺點多於優點，如果一個視覺設計網格太精確，不相關的物件可能會被誤認為相關，造成混淆。. 30.

(42) 5.. 閉合(Closure) : 閉合的實體會被視作一個物件，我們會傾向於把有缺口的輪廓閉合起來，也會把閉合的輪廓視為有兩個不同的部分：內部和外部，設計清單模式時，例如 Grid 模式，你應該要使用閉合法則來包含圖片或標籤。. 6.. 相對大小(Relative size) : 一個模式裡較小的元件會被視作物件，設計清單時，像是一組資訊裡的項目、箭頭和節點的實體會被視作個別物件，我們眼睛會受到吸引，因此，要確定這些物件跟關聯的資訊相關；另一個例子是缺了一塊的圓餅圖，缺的那一塊會引人注目，被視作一個物件。. 7.. 主題和背景(Figure and ground) : 主體是出現在前景的物件，背景是在主體後面的空間或形狀，當一個物件使用好幾個完形法則時，主體和背景會出現 (Hoober & Berkman, 2012)。. 2-3.2 使用者心智模型心智模式基本上是指個人認知系統內各概念間的互動關係。各種知識在我們的記憶中都可形成特定的輪廓，多個相關的輪廓組合而成的知識體系即被稱為心智模式（Mental-model）。（Gentner & Stevens, 1983; Rouse & Morris, 1986; Norman, 1988） Norman（1983）也認為當人們與自然環境、科技產品或科學家、學者所謂的概念世界（conceptual world）產生互動的時候，會對互動的現象形成一個內在的心智模式，這些心智模式可以作為瞭解概念世界互動關係的基礎。 Norman 進一步說明在認知科學中所使用的模式包含三種，一為心智模式（ mental model ），是人們針對某一個目標系統所建立的；其次為概念模式（conceptual model），是由科學家、工程師及教師所發明的，它的功用是作為溝通的用途；其三為推論模式（inferred mental model），它是用來反映人們在執行工作時所使用的心智模式。所以，心智模式是建立在個體對一個系統表徵的理解，而這個系統表徵乃是個人先備知識、經驗與問題情境互動的產物，而且它同時也具備. 31.

(43) 了可執行的特質。 Norman 認為「認知」可以被分割為「體驗認知」 (Experiential cognition) 與「反思認知」 (Reflective cognition) 。體驗認知就是當人類面對周遭事物或事件，能有效且毫不費力的反應與對應的一種認知模式；反思認知就是比較、比對、思考和決策事物或事件時的一種認知模式。就是這種認知模式引導出新的想法與創新回應。當使用者看見新的裝置或事物時，使用者便會認知該如何操作或控制此裝置或事物。認知科學 (cognitive science)的主要概念之一是人類的心智模型 (mental models) 。設計者將自己對系統的設計構想(即設計者的心智模式)，藉由人機介面的各組成要素來加以呈現系統畫面(稱之為系統印象) 。而使用者是在與系統互動時，透過人機介面所呈現的系統畫面，再經由觀察、預測以及認知與經驗來歸納建構對系統相關的概念。理想上，設計者希望使用者模式和設計者模式一致，可是設計者並未與使用者直接溝通，兩者間的溝通完全由系統本身在溝通。因此，系統印象格外重要，因為設計者必須確定該系統畫面都與使用者心理模式一致。如果系統畫面不能傳達清楚或有誤，就會產生使用者對人機介面之間的鴻溝問題。如圖 2-7。. 圖 2-7 設計模式、使用者模式及系統介面(Norman,1988). 32.