行政院國家科學委員會專題研究計畫 期末報告

數位時代視覺資訊圖表的視覺思考與設計方法(I)

計 畫 類 別 ：個別型

計 畫 編 號 ： NSC 101-2410-H-011-014-

執 行 期 間 ： 101年 08 月 01 日至 102年 09 月 30 日

執 行 單 位 ：國立臺灣科技大學工商業設計系

計 畫主持人：林廷宜

計畫參與人員：碩士班研究生-兼任助理人員：黃苡蓁

碩士班研究生-兼任助理人員：賴采秀

報 告 附 件 ：出席國際會議研究心得報告及發表論文

公 開 資 訊 ：本計畫可公開查詢

中 華 民 國 102年 12 月 30 日

中 文 摘 要 ： 本研究計畫由視覺訊息設計的根本角度為視覺資訊圖表的表

現形式及使用者訊息吸收的關係尋得更為重要且實用的解

答，以有限的視覺呈現大量資訊的視覺化策略，以及實踐設

計專業能力應用的設計方法，對視覺資訊圖表的製作進行系

統式的整理、實驗與研究。第一年投入史料的蒐集整理，並

加強中文作品的蒐集和討論，研究訊息量與訊息屬性界定方

法，並探討資訊內容與視覺型態表徵以及相關視覺符號的關

係，一方面以知識管理的角度將視覺資訊圖表的視覺架構與

表現法對應訊息量與訊息屬性，二方面分別對於靜止式、動

態式、及互動式的視覺資訊圖表作系統性的整理。本階段研

究採用訊息管理方法中的分類(Cataloging)與定義

(Identification)、 設計實驗、問卷調查等方法來進行資料

蒐集與分析，訊息的分類與定義是可以讓儲存的訊息資料達

到長期管理和便於取用，訊息分類經過組織的架構便於檢索

和使用。本階段亦開始進行初步的數位化視覺視覺化應用的

測試與探討，首先對於智慧型手機基礎操作介面的圖形進行

探討與使用者介面測試，奠定數位訊息討論中圖示之設計與

研究之基礎。視覺信息無所不在，對於大量的和複雜的訊息

加以管理、萃取、與描繪，經過視覺化的方法以適當的載體

呈現。視覺資訊圖表的價值不僅將數字統整、資料管理、並

經過視覺化的程序呈現友善且優化的視覺介面。

中文關鍵詞： 視覺資訊圖表、視覺化、視覺思考、設計方法、使用者測試

英 文 摘 要 ： Visual information exits all around us. Based on a

perspective of visual information design,

Informational Graphics select, organize, depict, and

convey visualized messages to make complex ideas

clear via proper and useful media. The core value is

not only to organize the data nor to manage the

information, but create the visual in a way to be

useful and friendly. This study aims to investigate

the information architecture, the visual thinking

processes, and the methods for the representation of

informational graphics so as to see how users

interact with it. With the rapid changes of computer

technologies and multimedia creativities, the

discussion and investigations about digitalized

informational graphics is increasingly important to

many aspects of our jobs and our lives. Also,

information architecture and users＇ interactivity

are important to know in order to investigate further

on the variables that would affect users＇

recognition, understanding, and memory. To answer the

research questions, this study fuses information

design perspective with knowledge management into a

serious process of design methods for informational

graphics. In this first-year research phase, the

investigation established a systematic and a

strategic view on informational graphics for

recognition from a visual information design

perspective. More investigation and tests will be

followed in the second and the third year to find a

way to organize and to delineate complex information.

英文關鍵詞： Informational Graphics, Visualization, Visual

Thinking, Design Methods, Usability Test

1

行政院國家科學委員會補助專題研究計畫 期末成果報告

數位時代視覺資訊圖表的視覺思考與設計方法

The Visual Thinking and Design Methods for Informational Graphics in the Digital Era

計畫類別：■ 個別型計畫 □ 整合型計畫

計畫編號：NSC － 101 － 2410 － H － 011 － 014

執行期間：2012 年 8 月 1 日至 2013 年 9 月 30日

計畫主持人：林廷宜

共同主持人：

計畫參與人員：賴采秀、黃苡蓁

成果報告類型(依經費核定清單規定繳交)：■精簡報告 □完整報告

本成果報告包括以下應繳交之附件：

□赴國外出差研習心得報告一份

□赴大陸地區出差或研習心得報告一份

■出席國際學術會議心得報告一份及其他相關文件

□國際合作研究計畫國外研究報告書一份

處理方式：除產學合作研究計畫、提升產業技術及人才培育研究計畫、列管計畫及下列情

形者外，得立即公開查詢

□涉及專利或其他智慧財產權，□一年□二年後可公開查詢

執行單位：國立台灣科技大學工商業設計系

中 華 民 國 102 年 12 月 25 日

2

目錄

中文摘要 ………………………………………… p.3

英文摘要 ………………………………………… p.4

一、 前言 ………………………………………… p.5

二、 研究目的 …………………………………… p.5

三、 研究方法 …………………………………… p.6

四、 研究發現、討論與建議 …………………… p.6

五、 計畫成果自我評估 ………………………… p.12

六、 參考文獻 …………………………………… p.13

七、 附錄 ………………………………………… p.14

出席國際學術會議心得報告 …………………… p.14

3

中文摘要

本研究計畫由視覺訊息設計的根本角度為視覺資訊圖表的表現形式及使用者訊息吸收

的關係尋得更為重要且實用的解答，以有限的視覺呈現大量資訊的視覺化策略，以及實踐

設計專業能力應用的設計方法，對視覺資訊圖表的製作進行系統式的整理、實驗與研究。

第一年投入史料的蒐集整理，並加強中文作品的蒐集和討論，研究訊息量與訊息屬性界定

方法，並探討資訊內容與視覺型態表徵以及相關視覺符號的關係，一方面以知識管理的角

度將視覺資訊圖表的視覺架構與表現法對應訊息量與訊息屬性，二方面分別對於靜止式、

動態式、及互動式的視覺資訊圖表作系統性的整理。本階段研究採用訊息管理方法中的分

類(Cataloging)與定義(Identification)、 設計實驗、問卷調查等方法來進行資料蒐集與分析，訊息的分類與定義是可以讓儲存的訊息資料達到長期管理和便於取用，訊息分類經過

組織的架構便於檢索和使用。本階段亦開始進行初步的數位化視覺視覺化應用的測試與探

討，首先對於智慧型手機基礎操作介面的圖形進行探討與使用者介面測試，奠定數位訊息

討論中圖示之設計與研究之基礎。視覺信息無所不在，對於大量的和複雜的訊息加以管理、

萃取、與描繪，經過視覺化的方法以適當的載體呈現。視覺資訊圖表的價值不僅將數字統

整、資料管理、並經過視覺化的程序呈現友善且優化的視覺介面。

關鍵字：視覺資訊圖表、視覺化、視覺思考、設計方法、使用者測試

4

Abstract

Visual information exits all around us. Based on a perspective of visual information design, Informational Graphics select, organize, depict, and convey visualized messages to make complex ideas clear via proper and useful media. The core value is not only to organize the data nor to manage the information, but create the visual in a way to be useful and friendly. This study aims to investigate the information architecture, the visual thinking processes, and the methods for the representation of informational graphics so as to see how users interact with it. With the rapid changes of computer technologies and multimedia creativities, the discussion and investigations about digitalized informational graphics is increasingly important to many aspects of our jobs and our lives. Also, information architecture and users’ interactivity are important to know in order to investigate further on the variables that would affect users’ recognition, understanding, and memory. To answer the research questions, this study fuses information design perspective with knowledge management into a serious process of design methods for informational graphics. In this first-year research phase, the investigation established a systematic and a strategic view on informational graphics for recognition from a visual information design perspective. More investigation and tests will be followed in the second and the third year to find a way to organize and to delineate complex information.

Keywords: Informational Graphics, Visualization, Visual Thinking, Design Methods, Usability Test

5

一、前言

視覺信息無所不在，而視覺資訊圖表(Informational Graphics)專業的呈現秉持視覺信息

資訊傳達的理念，對於大量的和複雜的訊息加以管理、萃取、與描繪，經過視覺化的方法

以適當的載體呈現，許多專業化的案例已陸續在設計論壇及出版通路中被注意，在歐美地

區亦有 Information Designer 之專職，其中對於視覺資訊圖表的製作有其專業性的態度和能

力。視覺資訊圖表的價值不僅將數字統整、資料管理、並經過視覺化的程序呈現友善且優

化的視覺介面。我們現今面對的問題已不再是資訊傳達的缺乏或擷取量的多寡，而是將正

確的訊息資料如何整理、轉化並有效的呈現予大眾。而近年來多種媒體的應用設計與相關

技術研究層出不窮，又數位化視覺信息無論在市場占有率、學習教材研發、以及生活上的

相關應用皆愈來愈重要，日新月異的科技、多種媒體的應用與數位資訊傳播帶動了更活絡

的創作動能與更多樣化與和精緻化的產出，使用者不僅在使用行為與接收訊息的習慣也隨

之更新與適應。

對於視覺資訊設計的優化表現不僅需要重視資訊架構的設計、考慮敘事的方法、注意

其載體所能表現的成像效果，亦需要了解使用者互動吸收的實際表現。現今資訊化社會中，

數位化訊息已無可避免的侵入我們的生活，視覺資訊圖表的表現形式和設計方法也隨著科

技的進程改變，使用者對於紙上視覺訊息和數位化視覺訊息的依賴依不同的環境而轉換，

互有消長。本研究以視覺思考(以簡化視覺呈現大量資訊的視覺化策略)和設計方法 (視覺

化策略的實踐與設計專業能力應用)對視覺資訊圖表的製作進行系統式的整理、實驗與研

究，由視覺訊息設計的根本角度進行為視覺資訊圖表的表現形式及使用者訊息吸收的關係

尋得更為重要且實用的解答。

二、研究目的

本研究主要承續視覺訊息的基礎理論，由使用者為導向針對視覺資訊圖表的視覺思考

和設計方法進行系統性的深入探討。視覺訊息的研究由圖像的意象結構與示意溝通切入，

從單一符號的意旨形式至複合圖像構成的敘事功能進行系統性的討論，由視覺信息設計基

礎理論延伸至積極的應用面。透過對於古今中外視覺資訊圖表專業作品的統整與歸納，應

用功能性語意學分析視覺資訊圖表中資訊量的多寡與表現形式的關係，探討媒體科技對視

覺資訊圖表設計的衝擊和影響，實驗視覺架構與使用者視覺思考過程的關係，研究視覺資

訊圖表實務產出必要與需要的製作和設計流程。藉著對視覺資訊圖表系統性的深入研究和

設計實驗，一方面以知識管理的角度將視覺資訊圖表的視覺架構與表現法對應訊息量與訊

息屬性，二方面分別對於靜止式、動態式及互動式的視覺資訊圖表作系統性的整理，三方

面應用各式訊息視覺化的方法，如心智圖法(Mind Mapping)、腦力激盪法(Brainstorming)、檢核表法(Checklist Method)以及創造思考與策略激發的方法，如創意解難法(Creative Problem-Solving)和七何檢討法(5W2H)等來處理訊息內容，以銜接視覺化的步驟，將視覺化的過程與載體應用技術展現結合，並遵循視覺設計的原則以達成專業呈現的目標。

本研究主要以視覺訊息傳達的觀點切入，探討視覺資訊圖表專業作品中的視覺思考和

設計方法，檢視視覺架構與視覺表現法對應訊息量與訊息屬性之間的關係，整理視覺資訊

6

圖表在歷史上的貢獻與地位，以及與科技媒體進化的關係，應用視覺思考與訊息視覺化方

法進行討論與實驗，作為將繁複資訊轉化為視覺訊息介面與符號應用的簡化過程，在設計

過程中的使用者測試亦能檢測以視覺思考方法應用於視覺資訊圖表所產生的視覺成品是否

能更客觀的展現通用的邏輯和語彙，讓視覺溝通更為友善及易懂。

三、研究方法

為了統整視覺資訊圖表因應現階段新媒體與科技所能提供的服務與標準下所呈現的視

覺架構與視覺表現法對應訊息量與訊息屬性之間的關係，應用使用者測試檢測以視覺思考

方法應用於視覺資訊圖表所產生的視覺成品是否能客觀的展現通用的邏輯和語彙，本研究

第一階段(第一年，101)進行史料及線上資料的蒐集，以視覺資訊圖表的資料統整為基礎，一方面探討其視覺元素、視覺架構、視覺型態與表徵，另一方面探討訊息量與訊息屬性的

如何界定，藉著探討使用者與訊息內容與傳遞載體的互動關係與訊息接收的影響，發揮視

覺資訊圖表專業呈現的多元優點，讓視覺溝通的介面更為友善，訊息內容更為易懂易被接

受。未達成本階段的研究目的，我們首先蒐集並整理古今中外視覺資訊圖表在各學門的表

現與分類，一方面進行知識訊息的分類與管理，二方面讓成功案例作為未來視覺資訊圖表

發展操作介面的視覺化應用的對應。再以視覺資訊圖表的資料統整為基礎，一方面探討其

視覺元素、視覺架構、視覺型態與表徵。分析相關設計策略、圖示形象、與色彩應用，從

中進行之分析，並針對各種不同形式的訊息在視覺上的表述方式進行探討和調查，作為往

後相關圖樣辨識和視覺化應用上的參考依據。接著探討訊息量與訊息屬性界定方法與評估

方法，評估現階段具指標性的視覺資訊圖表所呈現的視覺架構與視覺表現法對應訊息量與

訊息屬性之間的關係；並整合現階段新媒體與科技所能提供的服務與標準，尋求視覺思考

不同的方法對訊息內容視覺化的協助模式，更新實務應用最新思維與以及相關視覺設計研

究的重要指標。最後由成功案例的設計中演繹其視覺思考策略及訊息視覺化的方法，研擬

下階段設計實驗的視覺模型，並邀請受測者進行前導訪談 (Pilot Interview) 與實驗測試，前導訪談用以測試訪談問題的適切性，檢討測試操作的流程與任務的準確性。此方面的研究

進行資料蒐集、歸類、與分析，整合現階段新媒體與科技所能提供的服務與標準，作為未

來視覺資訊圖表發展操作介面的視覺化應用、與以及相關視覺設計研究的重要參考。

四、研究發現、討論與建議

本階段研究採用訊息管理方法中的分類(Cataloging)與定義(Identification)、 設計實驗、問卷調查等方法來進行資料蒐集與分析，訊息的分類與定義是可以讓儲存的訊息資料

達到長期管理和便於取用，訊息分類經過組織的架構便於檢索和使用，對訊息的定義則提

供了一個獨特的密鑰或代表物以便於尋找或連結到其他相關訊息(Hodge, 2000)。進行完訊息屬性的界定，本階段亦開始進行初步的數位化視覺視覺化應用的測試與探討，首先對於

智慧型手機基礎操作介面的圖形進行探討與使用者介面測試，奠定數位訊息討論中圖示之

設計與研究之基礎。

為探討智慧型手機介面圖示之識認率與理解度，採用 ISO9186：理解性測試與半結構式訪談兩種研究方法，針對市占率前兩大的 iOS 作業系統 6.1 版本與 Android 作業系統 4.0.x

7

版本所使用官方圖示進行篩選，共選出 80 個受測圖示做為測試，並以混淆矩陣問卷結果進行分析(請見表 1 與表 2)。第二階段則因應 iOS 7 作業系統之上市，為釐清新版本作業系統之應用程式圖示與舊版本間的迥異，本研究延續對作業系統應用程式圖示之研究，透過歸

納法（Inductive Reasoning），進而蒐集 iOS 6 與 iOS 7 作業系統應用程式圖示，取樣後觀察與比較圖示之異同並加以分類，而後進行分析討論。

表 1：應用程式圖示樣本篩選結果

行動作業系統 應用程式圖示樣本

iOS 6

Android 4.0

官方

Android 4.0

手機品牌

表 2：應用程式圖示識認度之混淆矩陣分析表

8

經由上述實驗步驟後，對於智慧行動裝置常用圖示之識認度進一步的分析與整理，綜

合歸納應用程式圖示設計之設計要素，透過前階段研究結果發現：（1）圖示間的識認率其中僅有 58 圖示識認率高於國際標準組織 ISO 所訂定的 67%之標準；（2）共有 16個圖示（2個達到標準之圖示加上 14 個未達到標準之圖示）有嚴重混淆之狀況，圖示表達意義不明確，造形過於簡化或為圖示視覺複雜不易閱讀，則易造成其誤認率偏高，圖示在設計時除

了易於識認與聯想外，更需與其他圖示做出明顯區隔(請見表 3)；（3）高識認率與高理解度圖示之特性為使用者大量接觸之圖示，圖示呈現具象或為日常生活、約定成俗之造形，

且與使用者過往經驗相同易於聯想(請見表 4)；（4）低辨識率與低理解度之圖示之特性為圖示造形雷同易產生混淆狀況，或圖示造形過於簡化不易於聯想，圖示過於抽象較不為人

所接受，Facetime、Google Earth、Passbook、導航、定位等不常出現於日常生活中的圖示，則需要經由使用經驗與多次學習增加受測者記憶度（5）透過半結構式訪談過程，受測者可清楚描述圖示之造形，但因圖示本身造形未能正確傳遞欲呈現給使用者的意義，受測者混

淆其為其他意義，此部分造成受測者錯誤判讀與不當操作，圖示之設計是否正確則顯得十

分重要(請見表 5)。

表 3：應用程式圖示理解測試之樣本分類(n=80)

層級 1：識認度最高（n=15，100%）

音樂 Music

天氣 Weather

相機 Camera

YouTube

行事曆Calendar

資料夾 Ol File Manager

時鐘Clock

時間Clock

電話Phone

訊息Messenges

9

計算機 Calculator

計算機 Calculator

郵件Mail

電子郵件Gmail

Google 瀏覽器Google Chrome

層級 2：識認度較高（n=27，90-99.9%）

書報攤、書櫃Newsstand

股市Stocks

音樂 Apollo

音樂 Music

新聞與氣象News and Weather

Flash Player

照片Photos

相機 Camera

視訊 Videos

視訊、電影工作室Play Movies

91.7% 96.7% 96.7% 95% 98.3% 95% 93.3% 96.7%

95% 96.7%

備忘曆Notes

電子郵件 Email

電話Phone

訊息、簡訊 Messenger

訊息、簡訊 Messenger

Google+ 搜尋Google Search

下載內容 Downloads

語音備忘曆、語音查詢 Voice Memos Recording

一般、設定 Dev Tools

95% 98.3% 98.3% 98.3% 98.3% 96.7% 91.7% 96.7%

96.7% 98.3%

一般、設定Settings

資料夾 File

地圖 Maps

地圖 Google Maps

地圖 Maps

聯絡資訊Contacts

遊戲中心Game Center

98.3% 98.3% 91.7% 98.3% 93.3% 98.3% 90% 層級 3：識認度普通（n=6，80-89.9%）

FM 收音機、廣播 FM Radio

Play 商店 Google Play

圖片庫Gallery

電影工作室 Movie Studio

指南針Compass

搜索 Search

88.3% 87% 81.7% 83.3% 85% 88.3% 層級 4：識認度較低（n=8，70-79.9%）

書報攤、書櫃Books

行事曆Calendar

提醒事項Reminders

雲端iCloud

訊息、簡訊Google+ Chat

瀏覽器 Safari

瀏覽器 Browser

喇叭、音量 Voice

75% 73.3% 75% 78.3% 76.7% 78.3% 73.3% 78.3% 層級 5：識認度最低（n=24，69.9%以下）

程式商店 App Store

資料夾 、曆案瀏覽器 ES File Explorer

iTunes 視訊電話 Facetime

語音撥號 Voice Dialer

Google Earth

手機效能測試Quadrant Standard

性能測試工具NenaMark2

DSP Manager

AnTuTu硬件性能測試AnTuTu Benchmark

68.3% 68.3% 43.3% 28.3% 23.3% 10% 2% 0% 5% 8.3%

固件管理器ROM Manager

資料夾File Manager

google定位Google Latitude

本地搜索 地方資訊 Places

Passbook

手電筒 Flashlight

聯絡資訊、通訊曆 People

ROOT 管理器ROOT Explorer R.E.

應用程式 apps

定位Latitude

10% 41.7% 8% 63.3% 51.7% 35% 65% 46.7% 25% 58.3%

10

本地搜索 地方資訊 Places

導航、定位Navigation Latitude

Polaris Office

設定Settings

65% 65% 11.7% 30%

表 4：應用程式圖示理解測試識認度最高（100%）之圖示

分類方式 識認度最高（100%）之圖示樣本（n=15）

具象 (Object)

天氣 Weather

相機 Camera

行事曆

Calendar 電話 Phone 時鐘

Clock 時間 Clock

資料夾 Ol File Manager

抽象 (Abstract)

音樂 Music

計算機 Calculator

計算機 Calculator

訊息

Messenges

網路 (Web)

YouTube 郵件 Mail

電子郵件

Gmail Google 瀏覽器

Google Chrome

表 5：圖示理解測試識認度最低且具混淆之圖示（n=12）混淆狀況打*者，該文字意義不包含在混淆矩陣

Y 軸內

圖示 圖示意義 混淆圖示 圖示意義

視訊電話 Facetime 28.3%

*影片 (40%)

Polaris Office 11.7%

曆案、資料夾(63.3%)

Google Earth 10%

瀏覽器 (48.3%)

google 定位 Google Latitude 8%

聯絡資訊、通訊曆 Contacts, People (46.7%)

訊息、簡訊 Messages(35%)

固件管理器 ROM Manager 10％

遊戲中心 Game (18.3%)

設定 Settings (28.3%)

AnTuTu Benchmark 8.3%

遊戲中心 Game (51.7%)

性能測試工具 NenaMark2 0%

遊戲中心 Game (26.7%)

相片、圖片庫 Gallery (36.7%)

手機效能測試 Quadrant Standard 2%

股市 Stock (RS=25)

*圖表 Chart (71.7％)

11

iTunes 43.3%

音樂 Music (56.7%)

DSP Manager 5%

音樂 Music (41.7%)

喇叭、音量 Voice (33.3%)

語音撥號 Voice Dialer 23.3%

喇叭、音量 Voice (31.7%)

設定 Settings 30%

喇叭、音量 Voice (38.3%)

後階段再以歸納法將 iOS 6 作業系統與 iOS 7 作業系統之應用程式圖示分類，經由分析與比較後，研究結果發現：（1）色彩相似之圖示平面化圖示與色彩相異之圖示平面化圖示在新版本圖示中的視覺表現皆去除複雜多層次陰影而轉為簡單化漸層，並且去除材質感，

使其成為簡約之平面化風格，並將整體色調提亮，讓圖示之色彩更為鮮豔繽紛(請見圖 1 與圖 2)。（2）色彩相似之圖示平面化圖示與色彩相異之圖示平面化圖示的差異為圖示色彩色系改變的程度不同，在 iOS 7 圖示中色彩相似之圖示平面化圖示，明度提高，彩度相似；而色彩相異之圖示平面化圖示，明度提高，彩度相異(請見圖 1 與圖 2)。（3）在 iOS 7 圖示中相同視覺取樣之相異圖示，簡化圖示造形，增加新元素，並調整線條為纖細銳利(請見圖

3)。（4）在 iOS 7 圖示中相異視覺取樣之相異圖示，視覺表現更為多彩，而且使用新造形去除具象化細節，使用簡約幾何造形呈現(請見圖 4)。

圖 1 色彩相似之圖示平面化圖示之比較

圖 2 色彩相異之圖示平面化圖示之比較

12

圖 3 相同視覺取樣之相異圖示之比較

圖 4 相異視覺取樣之相異圖示之比較

本研究第一年將奠定往後兩年深入研究的基礎，本系列研究的成果兼具學理與應用的

多重價值。在學理上，本研究將建立起視覺訊息之應用構成的系統性研究與使用者設計思

維的結合，將有助於視覺設計師更進一步了解視覺資訊圖表應用視覺思考與視覺資訊設計

策略在傳統與數位內容呈現上如何引導使用者的思維，如何影響使用者的認知與記憶；在

設計實務上，本研究將整合傳統與現階段新媒體與科技所能支援的服務，作為未來視覺資

訊圖表發展操作介面的視覺化應用參考，整理設計思考與設計方法於視覺資訊圖表的實務

製作生產中；在實際應用上，本研究之成果亦可對發展視覺資訊設計概念提出建議，並與

硬體商及出版業合作或結合，提供最佳視覺化服務。

五、 計畫成果自我評估

本年度的研究計畫由視覺訊息設計的角度開始進行第一階段的初步研究，為視覺資訊

的表現形式及使用者訊息吸收的關係尋得更為重要且實用的解答，第一年以知識管理的角

度將視覺資訊圖表的視覺架構與表現法對應訊息量與訊息屬性，對於多樣性的視覺資訊圖

表作一系統性整理，並著手進行現階段數位介面圖示的初步研究，以為後續對於資訊內容

與視覺型態表徵以及相關視覺符號的關係探討奠定基礎。本研究第一年所投入的史料蒐集

整理以及對於現有作品的蒐集和討論，進行資料文獻分類法、訊息量與訊息屬性界定方法

的討論，並以有限的視覺呈現大量資訊的視覺化策略觀點下思考實踐設計專業能力應用的

設計方法，對視覺資訊圖表的製作進行系統式的整理、實驗與研究。本年度為視覺資訊圖

表的表現形式及使用者訊息吸收的關係尋得基礎且實用的解答，提供以簡化視覺呈現大量

資訊的視覺化策略與設計方法，以知識管理的角度將視覺資訊圖表的視覺架構與表現法對

應訊息量與訊息屬性，進行視覺思考與訊息視覺化方法的設計實驗與使用者測試，確定圖

示設計與視覺語言應用的有效性，探討以視覺資訊設計概念下二維表現和數位化的視覺訊

13

息透過視覺資訊圖表對使用者辨識與聯想之影響，對視覺訊息的設計進行系統式的整理、

實驗與研究以期對接續研究立下良好的基礎。本研究計畫主持人於今年五月參與 2013 ICSSI (International Conference on Service Science and Innovation)國際研討會並發表論文(Attraction and Action: User types for blending aesthetical and functional design) (Lin, 2013) (附錄 B-C)；於八月赴中國天津美術學院參加 2013 亞洲基礎造形聯合學會天津大會，並發表論文(夢想空間：創意養成教育之協作與實務創作)(林廷宜，2013) (附錄 D-G)；隨後再赴日本東京參與 5th IASDR 2013 Tokyo (5th International Congress of International Association of Societies of Design Research：Consilience and Innovation in Design )，並發表論文(The Recognition and Comprehension on Application Icons on Mobile Devices) (Lin & Lai, 2013) (附錄 H-I)。並分別於 ICSSI 2013 及 IASDR 2013 兩次大規模的國際研討會中分別擔任 track chair/session chair (ICSSI 2013)和 Reviewer/session chair (IASDR 201)的工作；主持人更因國科會計畫的支持，在中國天津參與研討會及發表文章時即受到中國清華大學美術學院的邀

請赴中國北京演講。 本研究團隊積極進行視覺訊息相關設計與應用之探索，同步著重於使用者對視覺語言

與符號之認知研究等方面的分析與整理，並對於視覺設計相關教育的關心和論述。今年除

了參與三場國際會議，與國際學者保持聯繫與交流，瞭解現今藝術與設計領域中活躍的議

題討論，並積極參與多項論述與實務的分享。主持人亦於今年暑期受邀至日本九州工業大

學(Kyu Tech：Kyushu Institute of Technology)暑期密集課程授課，將設計教育的理念與其他學校分享，並將設計影響力延伸至海外(附錄 J-K)。除了國際上的隱性影響力，論述成果也陸續發表於相關學術期刊及國內外研討會中：今年度的成果中已有 1 篇論文被國際期刊所接受，2 篇論文被國科會所列之國內特優期刊所接受刊登，1 篇論文於學報期刊所接受刊登；已發表之國際研討會論文 3 篇，已發表之國內研討會論文 3 篇。本研究在所有成員熱情努力的投入設計研究與視覺創作下奠定了對視覺訊息設計的各式呈現與使用者互動與理

解上的影響，並陸續在學術舞台建立國際性的交流與合作。

六、參考資料

Hodge, G. (2000). Best Practices for Digital Archiving; An Information Life Cycle Approach. D-Lib Magazine 6:1 (January 2000). Retrieved December 24, 2011, from http://dlib.org/dlib/january00/01hodge.html

Lin, T. S. (2013). Attention and action: User types for blending aesthetical and functional

design. ICSSI 2013: International Conference on Service Science and Innovation.

Session S-A: Affective Design. Kaohsiung, Taiwan. May 29-31, 2013. (IEEE)

林廷宜 (2013)。夢想空間：創意養成教育之協作與實務創作。2013亞洲基礎造形聯合學

會天津大會。中國天津美術學院。August 19-20, 2013.

Lin, T. S. & Lai, C. (2013). The recognition and comprehension on application icons on mobile

devices. 5th IASDR 2013 Tokyo (5th International Congress of International Association of

Society of Design Research): “Consilience and Innovation in Design”. August 26-30,

2013

14

七、附錄

(Appendix A-K) Appendix A: 國際研討會發表與交流相關資料及心得報告

一、

會議名稱：Asia Society of Basic Design and Art 2013

發表論文：Dream Space：Creative design curricula

發表地點：Tien-Jin, China

發表時間：August 19-20, 2013

二、

會議名稱：the 5th International Congress of International Association of Societies of Design Research

發表論文：The Recognition and Comprehension on Application Icons on Mobile Devices 發表地點：Tokyo, Japan 發表時間：August 24-30, 2013

三、

其他相關資料 ----------------------------------------------------

A Note on International Conferences and Meetings: the year of 2013

Tingyi S. Lin This is a fruitful year connecting and participating international academia, by attending several leading conferences in design practice and research, design education and design management related fields. Besides presenting a research paper (Attraction and Action: User types for blending aesthetical and functional design) at the International Conference on Service Science and Innovation (2013 ICSSI) on May 29-31, 2013, I also participated in international conferences in Tien-Jin, China, and Tokyo, Japan, this year. The conference of 2013 ICSSI has drawn scholars worldwide to exchange ideas and deepen the connections for future collaboration. The paper, Dream Space, was presented at 2013 Conference on Asia Society of Basic Design and Art in Tien-Jin, China. It is one of the characteristic courses of basic design showcase in this conference.

15

Going to the next international conference afterward, I presented the paper, The Recognition and Comprehension on Application Icons on Mobile Devices, at the 5th International Congress of International Association of Societies of Design Research: Consilience and Innovation in Design (5th IASDR 2013) in Tokyo, Japan. Those gatherings brought scholars, researchers, practitioners from designed related and academic fields for intellectual exchanges, research collaboration and professional development. I also served as a track chair and session chair at the ICSSI 2013, and as a reviewer and session chair at IASDR 2013. Those participation and services allowed me to experience excellent networking opportunities where I shared research ideas and met old and new friends. The presentation and discussion of my work created tremendous interactions between not only the presenters and the audience, but also between those attendances and scholars in the same session. Presenters shared varieties of research, case studies, and design projects. I received lots of feedbacks and interesting attentions during and after my presentation. Other sessions, speeches, various open galleries, poster session, and social activities created great opportunities for participants to interact. Those were fabulous experience in which everyone shared ideas and exchange works in a formal conference time, as well as in a casual setting in the galleries and other gatherings. Those formal and informal interactions with other speakers, researchers, scholars and participants broadened my view more globally in the field of design and arts. Those were excellent experiences participating in the worldwide leading conferences where gathered many intelligent people from all over the world. The commerce with academicians and professionals enriched my field of vision inside and outside of my discipline. Not only had I learned a lot from this high ranked conferences, but I gained an unforgettable experience to have personal contact with other professionals, to explore magnificent architectures, and to experience various culture. With a sound result in attending 2013 ICSSI, ASBD Art: Tien-Jin and IASDR 2013, I would very much like to have more opportunities to present my work globally by which not only share my ideas with other scholars from all over the world but also learn a great amount of experiences from them. Even though my travel funding was short from two trips in a row, I found it was worth going to going aboard to share experiences and to interact with other excellent scholars globally. For this coming academic year, I plan to share my research results at AMA SERVSIG 2014 to be held at the University of Macedonia, Thessaloniki, Greece, from June 13-15, 2014, and at Human Computer Interaction International 2014 at Creta Maris, Heraklion, Crete, Greece, from June 22-27, 2014. I am sure those experiences will enrich my professional development much more. Moreover, I am glad to spread our Taiwan experiences overseas and to take precious perceptions back to share with my colleagues, students, friends, and communities. Finally, I would like to take this opportunity to express my gratitude for the kind support from National Science Council in assisting me with attending those conferences. Those are excellent

16

opportunities for me to contribute the mission of visual design research by sharing the latest ideas, technical information, and research findings. I look forward to having more opportunities to present my work internationally.

Appendix B: ICSSI 2013 Accepted Latter

17

Appendix C: Abstract for the conference (ICSSI 2013)

18

Appendix D: ASBDA 2013 Invitation Letter

19

Appendix E: ASBDA 2013 Exhibition Certificate

20

Appendix F: Abstract for the conference (ASBDA 2013)

21

Appendix G: Attendance & Presentation (ASBDA 2013)

22

Appendix H: IASDR 2013 Presentation Certificate

23

Appendix I: Abstract for the conference (IASDR 2013)

24

Appendix J: Kyu Tech Invitation Letter

25

Appendix K: Kyu Tech Press

1

出席國際學術會議心得報告

一、

會議名稱：Asia Society of Basic Design and Art 2013

發表論文：Dream Space：Creative design curricula

發表地點：Tien-Jin, China

發表時間：August 19-20, 2013

二、

會議名稱：the 5th International Congress of International Association of Societies of Design Research

發表論文：The Recognition and Comprehension on Application Icons on Mobile Devices 發表地點：Tokyo, Japan 發表時間：August 24-30, 2013

三、

其他相關資料 ----------------------------------------------------

A Note on International Conferences and Meetings: the year of 2013

Tingyi S. Lin This is a fruitful year connecting and participating international academia, by attending several leading conferences in design practice and research, design education and design management related fields. Besides presenting a research paper (Attraction and Action: User types for blending aesthetical and functional design) at the International Conference on Service Science and Innovation (2013 ICSSI) on May 29-31, 2013, I also participated in international conferences in Tien-Jin, China, and Tokyo, Japan, this year. The conference of 2013 ICSSI has drawn scholars worldwide to exchange ideas and deepen the connections for future collaboration. The paper, Dream Space, was presented at 2013 Conference on Asia Society of Basic Design and Art in Tien-Jin, China. It is one of the characteristic courses of basic design showcase in this conference. Going to the next international conference afterward, I presented the paper, The Recognition and Comprehension on Application Icons on Mobile Devices, at the 5th International Congress of International Association of Societies of Design Research: Consilience and Innovation in Design (5th IASDR 2013) in Tokyo, Japan. Those gatherings brought scholars, researchers, practitioners from designed related and academic fields for intellectual exchanges, research collaboration and professional development. I also served as a track chair and session chair at the ICSSI 2013, and

2

as a reviewer and session chair at IASDR 2013. Those participation and services allowed me to experience excellent networking opportunities where I shared research ideas and met old and new friends. The presentation and discussion of my work created tremendous interactions between not only the presenters and the audience, but also between those attendances and scholars in the same session. Presenters shared varieties of research, case studies, and design projects. I received lots of feedbacks and interesting attentions during and after my presentation. Other sessions, speeches, various open galleries, poster session, and social activities created great opportunities for participants to interact. Those were fabulous experience in which everyone shared ideas and exchange works in a formal conference time, as well as in a casual setting in the galleries and other gatherings. Those formal and informal interactions with other speakers, researchers, scholars and participants broadened my view more globally in the field of design and arts. Those were excellent experiences participating in the worldwide leading conferences where gathered many intelligent people from all over the world. The commerce with academicians and professionals enriched my field of vision inside and outside of my discipline. Not only had I learned a lot from this high ranked conferences, but I gained an unforgettable experience to have personal contact with other professionals, to explore magnificent architectures, and to experience various culture. With a sound result in attending 2013 ICSSI, ASBD Art: Tien-Jin and IASDR 2013, I would very much like to have more opportunities to present my work globally by which not only share my ideas with other scholars from all over the world but also learn a great amount of experiences from them. Even though my travel funding was short from two trips in a row, I found it was worth going to going aboard to share experiences and to interact with other excellent scholars globally. For this coming academic year, I plan to share my research results at AMA SERVSIG 2014 to be held at the University of Macedonia, Thessaloniki, Greece, from June 13-15, 2014, and at Human Computer Interaction International 2014 at Creta Maris, Heraklion, Crete, Greece, from June 22-27, 2014. I am sure those experiences will enrich my professional development much more. Moreover, I am glad to spread our Taiwan experiences overseas and to take precious perceptions back to share with my colleagues, students, friends, and communities. Finally, I would like to take this opportunity to express my gratitude for the kind support from National Science Council in assisting me with attending those conferences. Those are excellent opportunities for me to contribute the mission of visual design research by sharing the latest ideas, technical information, and research findings. I look forward to having more opportunities to present my work internationally.

3

Appendix B: ICSSI 2013 Accepted Latter

4

Appendix C: Abstract for the conference (ICSSI 2013)

5

Appendix D: ASBDA 2013 Invitation Letter

6

Appendix E: ASBDA 2013 Exhibition Certificate

7

Appendix F: Abstract for the conference (ASBDA 2013)

8

Appendix G: Attendance & Presentation (ASBDA 2013)

9

Appendix H: IASDR 2013 Presentation Certificate

10

Appendix I: Abstract for the conference (IASDR 2013)

11

Appendix J: Kyu Tech Invitation Letter

12

Appendix K: Kyu Tech Press

國科會補助計畫衍生研發成果推廣資料表日期:2013/12/31

國科會補助計畫

計畫名稱: 數位時代視覺資訊圖表的視覺思考與設計方法(I)

計畫主持人: 林廷宜

計畫編號: 101-2410-H-011-014- 學門領域: 環境藝術與設計

無研發成果推廣資料

101年度專題研究計畫研究成果彙整表

計畫主持人：林廷宜 計畫編號：101-2410-H-011-014- 計畫名稱：數位時代視覺資訊圖表的視覺思考與設計方法(I)

量化

成果項目 實際已達成數（被接受

或已發表）

預期總達成數(含實際已達成數)

本計畫實

際貢獻百分比

單位

備 註 （ 質 化 說

明：如數個計畫共同成果、成果列 為 該 期 刊 之封 面 故 事 ...等）

期刊論文 2 1 100% 研究報告/技術報告 0 0 100% 研討會論文 3 2 100%

篇

論文著作

專書 0 0 100% 申請中件數 0 0 100%

專利 已獲得件數 0 0 100%

件

件數 0 0 100% 件 技術移轉

權利金 0 0 100% 千元

碩士生 2 2 100% 博士生 0 0 100% 博士後研究員 0 0 100%

國內

參與計畫人力 （本國籍）

專任助理 0 0 100%

人次

期刊論文 1 0 100% 研究報告/技術報告 0 0 100% 研討會論文 3 1 100%

篇

論文著作

專書 0 0 100% 章/本 申請中件數 0 0 100%

專利 已獲得件數 0 0 100%

件

件數 0 0 100% 件 技術移轉

權利金 0 0 100% 千元 碩士生 0 0 100% 博士生 0 0 100% 博士後研究員 0 0 100%

國外

參與計畫人力 （外國籍）

專任助理 0 0 100%

人次

其他成果 (無法以量化表達之成果如辦理學術活動、獲得獎項、重要國際合作、研究成果國際影響力及其他協助產業技術發展之具體效益事項等，請以文字敘述填列。)

本研究團隊積極進行視覺訊息相關設計與應用之探索，同步著重於使用者對視

覺語言與符號之認知研究等方面的分析與整理，並對於視覺設計相關教育的關心和論述。除了學術論文的發表，並在國際設計競賽中獲得 International Design Award(IDA)和 Adobe Design Achievement Awards(ADAA)等共 8個獎項。主持人亦於今年暑期受邀至日本九州工業大學(Kyu Tech：Kyushu Institute of Technology)暑期密集課程授課，將設計教育的理念與其他學校分享，並將設計影響力延伸至海外。本研究團隊持續與國際保持聯繫與交流，瞭解現今藝術與設計領域中活躍的議題討論，積極參與多項論述與實務的分享。

成果項目 量化 名稱或內容性質簡述 測驗工具(含質性與量性) 0 課程/模組 0 電腦及網路系統或工具 0 教材 0 舉辦之活動/競賽 0 研討會/工作坊 0 電子報、網站 0

科 教 處 計 畫 加 填 項 目 計畫成果推廣之參與（閱聽）人數 0

國科會補助專題研究計畫成果報告自評表

請就研究內容與原計畫相符程度、達成預期目標情況、研究成果之學術或應用價

值（簡要敘述成果所代表之意義、價值、影響或進一步發展之可能性）、是否適

合在學術期刊發表或申請專利、主要發現或其他有關價值等，作一綜合評估。

1. 請就研究內容與原計畫相符程度、達成預期目標情況作一綜合評估 ■達成目標 □未達成目標（請說明，以 100字為限）

□實驗失敗

□因故實驗中斷 □其他原因

說明：

2. 研究成果在學術期刊發表或申請專利等情形： 論文：■已發表 □未發表之文稿 □撰寫中 □無

專利：□已獲得 □申請中 ■無

技轉：□已技轉 □洽談中 ■無

其他：（以 100字為限） 本研究團隊積極進行視覺訊息相關設計與應用之探索，同步著重於使用者對視覺語言與符

號之認知研究等方面的分析與整理，並對於視覺設計相關教育的關心和論述。除了國際上的

隱性影響力，論述成果也陸續發表於相關學術期刊及國內外研討會中：今年度的成果中已有 1

篇論文被國際期刊所接受，2篇論文被國科會所列之國內特優期刊所接受刊登，1篇論文於學

報期刊所接受刊登；已發表之國際研討會論文 3篇，已發表之國內研討會論文 3篇。本研究

在所有成員熱情努力的投入設計研究與視覺創作下奠定了對視覺訊息設計的各式呈現與使用

者互動與理解上的影響，並陸續在學術舞台建立國際性的交流與合作。 3. 請依學術成就、技術創新、社會影響等方面，評估研究成果之學術或應用價值（簡要敘述成果所代表之意義、價值、影響或進一步發展之可能性）（以

500字為限） 今年本研究團隊除了參與三場國際會議，與國際學者保持聯繫與交流，瞭解現今藝術與設

計領域中活躍的議題討論，並積極參與多項論述與實務的分享。主持人亦於今年暑期受邀

至日本九州工業大學(Kyu Tech：Kyushu Institute of Technology)暑期密集課程授課，

將設計教育的理念與其他學校分享，並將設計影響力延伸至海外。除了積極投入設計研究

與視覺創作的實驗和產出，並持續在學術舞台建立國際性的交流與合作，希望能再度累積

能量，繼續強化跨地域性的設計研究和創作的影響力。

一、 前言 ………………………………………… p.5二、 研究目的 …………………………………… p.5三、 研究方法 …………………………………… p.6四、 研究發現、討論與建議 …………………… p.6五、 計畫成果自我評估 ………………………… p.12六、 參考文獻 …………………………………… p.13七、 附錄 ………………………………………… p.14AbstractKeywords: Informational Graphics, Visualization, Visual Thinking, Design Methods, Usability Test一、前言二、研究目的三、研究方法四、研究發現、討論與建議為探討智慧型手機介面圖示之識認率與理解度，採用ISO9186：理解性測試與半結構式訪談兩種研究方法，針對市占率前兩大的iOS作業系統6.1版本與Android作業系統4.0.x版本所使用官方圖示進行篩選，共選出80個受測圖示做為測試，並以混淆矩陣問卷結果進行分析(請見表1與表2)。第二階段則因應iOS 7作業系統之上市，為釐清新版本作業系統之應用程式圖示與舊版本間的迥異，本研究延續對作業系統應用程式圖示之研究，透過歸納法（Inductive Reasoning），進而蒐集iOS 6與iOS 7作業...經由上述實驗步驟後，對於智慧行動裝置常用圖示之識認度進一步的分析與整理，綜合歸納應用程式圖示設計之設計要素，透過前階段研究結果發現：（1）圖示間的識認率其中僅有58圖示識認率高於國際標準組織ISO所訂定的67%之標準；（2）共有16個圖示（2個達到標準之圖示加上14個未達到標準之圖示）有嚴重混淆之狀況，圖示表達意義不明確，造形過於簡化或為圖示視覺複雜不易閱讀，則易造成其誤認率偏高，圖示在設計時除了易於識認與聯想外，更需與其他圖示做出明顯區隔(請見表3)；（3）高識認率與高理解度圖示之特性為使用者大...後階段再以歸納法將iOS 6作業系統與iOS 7作業系統之應用程式圖示分類，經由分析與比較後，研究結果發現：（1）色彩相似之圖示平面化圖示與色彩相異之圖示平面化圖示在新版本圖示中的視覺表現皆去除複雜多層次陰影而轉為簡單化漸層，並且去除材質感，使其成為簡約之平面化風格，並將整體色調提亮，讓圖示之色彩更為鮮豔繽紛(請見圖1與圖2)。（2）色彩相似之圖示平面化圖示與色彩相異之圖示平面化圖示的差異為圖示色彩色系改變的程度不同，在iOS 7圖示中色彩相似之圖示平面化圖示，明度提高，彩度相似；而色彩相異之圖示...五、 計畫成果自我評估六、參考資料七、附錄(Appendix A-K)Appendix D: ASBDA 2013 Invitation LetterAppendix E: ASBDA 2013 Exhibition CertificateAppendix H: IASDR 2013 Presentation CertificateAppendix J: Kyu Tech Invitation LetterAppendix K: Kyu Tech PressAppendix D: ASBDA 2013 Invitation LetterAppendix E: ASBDA 2013 Exhibition CertificateAppendix H: IASDR 2013 Presentation CertificateAppendix J: Kyu Tech Invitation LetterAppendix K: Kyu Tech Press