目錄

第三章 界面的設計方針.......................................三—1

第一節 界面：互動對談......................................................三—2

第一項 語言原則 .........................................................三—6

第二項 句法原則 .........................................................三—6

第二節 實務設計建議 .........................................................三—7

第一項 瞭解使用者族群：...........................................三—9

第二項 現實世界的隱喻 ..............................................三—9

第三項 立即、適當的回饋...........................................三—9

第四項 使用者控制....................................................三—10

第五項 容錯與親和性................................................三—11

第六項 80%的解決方案 ............................................三—12

第七項 文化差異 .......................................................三—13

第八項 選擇對話型式................................................三—14

選單....................................................................三—14

選單深度與選單寬度 ...................................三—16

選單項目的排列方式 ...................................三—16

四種類型的選單 ..........................................三—17

三—1
 問答式對話 .........................................................三—18

填表式對話 .........................................................三—18

視窗介面.............................................................三—19

第九項 使用者輔助系統 ............................................三—21

第三節 視覺傳達設計﹕圖像與再現 .................................三—24

再現....................................................................三—24

符號與符號學 .....................................................三—24

符號的三位一體架構 ..........................................三—25

符號的分類 .........................................................三—27

符號的抽象化分類 ..............................................三—28

第一項 介面圖像設計原則.........................................三—29

立即辨識〈Immediacy〉....................................三—29

普遍性〈Generality〉 ........................................三—30

一致性〈Cohesiveness〉 ..................................三—32

特徵描述〈Characterization〉 ...........................三—33

可溝通性〈Communicability〉...........................三—34

第二項 設計技巧 .......................................................三—35

選擇正確的形式..................................................三—36

圖像或文字的選擇.......................................三—36

選擇正確形式的技巧 ...................................三—36

三—2
 藉由抽象化而改進細節.......................................三—37

互相協調以確保視覺上的一致性 ........................三—39

實務執行時之修正 ..............................................三—41

第四節 視覺傳達設計﹕組織與視覺架構 ..........................三—43

第一項 視覺架構的優點/特性 ....................................三—43

一致〈Unity〉 ....................................................三—43

完整〈Integrity〉................................................三—46

可讀性〈Readability〉 .......................................三—46

控制〈Control〉 .................................................三—46

第二項 背景：格式塔學派.........................................三—47

第三項 完形群組現象： ............................................三—47

近似〈Proximity〉..............................................三—47

相似〈Similarity〉 ..............................................三—47

連續性〈Continuity〉.........................................三—48

第四項 形狀感知的完形現象 .....................................三—48

封閉〈Closure〉 ................................................三—48

區域〈Area〉 .....................................................三—49

對稱〈Symmetry〉 ............................................三—49

第五項 設計原則 .......................................................三—49

群組....................................................................三—50

三—3
 階層〈Hierarchy〉 .............................................三—50

關係....................................................................三—51

平衡....................................................................三—53

第五節 視覺傳達設計﹕使用色彩 .....................................三—55

第一項 顏色在顯示器上的實務問題 ..........................三—55

黑白顯示的相容性 ..............................................三—55

彩色顏示的相容性 ..............................................三—55

注意色盲的使用者 ..............................................三—57

第二項 顏色的意義....................................................三—57

第三項 設計建議 .......................................................三—59

用顏色來增加易讀性 ..........................................三—59

用色彩來強調 ..............................................三—59

用相似的顏色顯示類似的有關資料 .............三—59

用對比色來分類資料 ...................................三—59

使用對比的背景色.......................................三—59

避免過度使用顏色 ..............................................三—60

第三章課堂討論..................................................三—62

第三章作業：互動介面範例優點研究 .................三—62

三—4
三—5
第三章 界面的設計方針

本章摘要

本章節著重於整理相關的文獻資料，介紹介面設計原則、方針、與技巧。

因為電腦圖形的溝通類似於使用字詞的功能，本章節前段則探討語言對談原則。另
外也包括業界公司如菲利浦、蘋果公司所提出的設計建議。

本章後段的視覺傳達設計部份包括圖像與再現、組織與視覺架構、與色彩運用三大
章節，此部份將會更進一步地介紹完形學派的理論與應用、以及介紹符號學在介面
設計的應用。「圖像與再現」著重於單獨圖像本身，或圖像之間關係的探討。而後
者則著重在整體介面架構的視覺設計討論。此兩大部份則分別包含了理論、原則的
介紹。由此引申出設計上可遵循的原則，最後則歸納出設計技巧，期能讓讀者在實
務上可以有所收穫。

三—1
 第一節 界面：互動對談
人類與電腦互動的最佳形式是自然語言，此形式如同人與人之間的溝
通交談。歷史上的預言式描述是電影大師庫布力克 1968 年執導的經
典科幻片『2001 太空漫游（2001：A Space Oddysey）〈圖 3-1〉』
中會說話的電腦 HAL。直到 2001 年的到來，人類與電腦的自然交談
在某種形式上是實現了，比如第一章所介紹的活氧計劃的語音溝通，
可以說這是人們一直以來夢寐以求的介面。
自然語言介面的觀念不應局限於語音辨識。自然語言的處理也應包含
解讀文字的能力。自然語言介面允許使用者以句子輸入指令，而非難
解的指令語言。例如電影『桃色機密〈Disclosure〉』裡男女主角侵
入公司內部資料庫時各自使用了不同的、對比的介面形式，一是傳統
指令：「C:/DELETE FILE *.*」。二是自然對話：「天使〈電腦裡 Help
功能的擬人化角色〉，你應該保護檔案不被刪除！」〈圖 3-2〉。

拉回現有科技的實務而言，關於人機的互動對談，Foley 和 Wallace
做了如下陳述：『電腦圖形溝通不是語言或甚至是文詞，而是按下按
鍵、使用光筆、移動操縱桿，這些動作都有類似於使用字詞的功能1』。

這些溝通的語言和文法類似於我們所熟悉的人類日常談話。〈圖 3-3、
3-4〉顯示出人機的互動操作與人類語言的對應關係。其中圖像或指令
就像是人類溝通的字彙，甚至有動詞與名詞之分；而操作的次序就像
人類溝通的文法，有一定的先後次序，也唯有這次序、文法正確了，
才能達到有效的溝通。

1Foley, James D and Wallace, Victor L.. The Art of Natural Graphic Man-Machine
Conversation, Proceeding of the IEEE, Vol. 62, no. 4, April 1974. Pp. 462.

三—2
〈圖 3-1〉"2001 太空漫游," MGM，1968.。

〈圖 3-2〉電影『桃色機密〈Disclosure〉』裡男女主角侵入公司內部資料庫時各自使用
了不同的、對比的介面形式。華納，1994。

三—3
 〈圖 3-3〉說明了我們的日常生活中聽與說的語言學原理如何應用於界面設計。

三—4
〈圖 3-4〉介面設計的文法：以『事先預約錄影電視節目』為例。
T=文字、S=象徵〈Symbol 、I=圖像〈Icon〉、G=圖片影像

操作任務 操作次序 指定的操作 設計元素 回饋

與文法

Selecting Verb 1. Start the Select the Two I Turn to next

(To operation of function button of overlap + "Recording" pages
accomplish a recording recording squares + T
certain arrow +
operation) text
Selecting 2. Select the Click on the number T 1. The chosen
Noun memory storage displayed number is highlighted
(Objects) number memory storage 2. The number in the
number column changes

Selecting Verb 3. Adjust the Click the Two arrow S The number in the
(To dates, hours, and up-arrow and symbols time column changes
accomplish a minutes, down-arrow to
certain adjust the
operation) numbers
Selecting 4. Select the Click on the "TV", TV, CD, I The chosen item is
Noun recording resource "CD', or "Stereo" and stereo + highlighted
(Objects) button icons T
Selecting 5. Select the Click the Two arrow S The number in the
Noun channel to be up-arrow and symbols channel column is
(Objects) recorded down-arrow to changed
adjust the
numbers
Selecting 6. Adjust the VCR
Noun mode
(Objects)
7. Confirm the Click the "OK?" Text T Message from the
previous button "OK?" information board on
operations the screen
Request more Click the "Help" Question S Turn to next "Help"
information about button Mark + pages
the operation +text T

交談式的設計原則可以增進人機介面設計有效率的溝通。這些因素包

括語言原則和句法原理則2：

2Foley, James D and Wallace, Victor L.. The Art of Natural Graphic Man-Machine
Conversation, Proceeding of the IEEE, Vol. 62, no. 4, April 1974. Pp. 462.

三—5
第一項 語言原則
介面設計時，利用人類的語言原則，設計師必須讓人機交談語法達成
以下目標：有效率的、完整的、並且具備自然文法的：

1. 有效率的語言是有效地，可以簡明地表達思想。

2. 完整的語言允許任何想法的表達。

3. 自然文法在表達思想時，極少存在笨拙的約束，而且只要使用現
有基本的方法和符號。當使用者只有極少的訓練，系統介面也能
發揮作用。

如果能夠達成以上目標，使用者便可以全神貫注於效率的人機溝通。

第二項 句法原則

介面設計師可從人類語言經驗中得出如下的句法原則：

1. 句子架構：語言應該是句子架構的。在『談話中的片語或者段落，
每個談話者的每一段獨立的思考，應該被表達成具備開始和終止
的標準模式』。
下面兩項原則能夠讓界面更具有句子架構：
1) 在終止時，機器應該回到下一次行動，或其他句子能夠重新開
始的狀態。在 HyperCard 中，"家 Home" 的概念是一個好例子，
WWW 的首頁 (Home Page) 也是〈圖 3-5〉。
2 )句子架構的重要特性應該是：思考自成獨立、不可分割的連續
動作〈圖 3-6〉、明確的 "家" 的狀態、和具有規律的 (一致性的)
模式。

2. 視覺連續性：視覺連續性想法是：在特定的句子之內，遍及全句
的表達方式，使用者的視線應該集中於單一地區範圍，以一定的
方向 (模式) 移動。在螢幕的界面上，提供視覺連續性的句子架

三—6
 〈圖 3-5〉家 Home" 的概念。

〈圖 3-6〉句子架構的不可分割的特性。

PHASE 3 -TV
RECORDING
I 1

0 3 3

MODE
CHANNEL V0LUMNE
(when recording)

構的方向，應該從上而下，從左至右。而類似的操作群組應該保
留在相同的位置中。

第二節 實務設計建議
設計建議提供一般性的實務設計設計準則，並提供普遍性的設計基礎
與特定的細部設計規則。設計建議的來源包括專業的、商業性的及學
術性的期刊、文獻，或一般性的介面設計指引手冊。此外，對某特定
電腦系統的樣式標準導引文件，比如蘋果電腦的 Inside Macintosh，
描述了如何使用麥金塔樣式的視窗、捲軸(scroll bar)及圖像等，同時
它也詳細的列出標準的使用者介面的設計規範。

三—7
本節收錄了飛利浦、蘋果電腦公司、及相關學者3等所提出的實務設計
建議。原有這些設計建議是針對電腦圖形介面，資訊系統介面設計、
以及教學光碟介面所提出的共同規範。本節的設計建議往往根據的是
專家們的共識，而不是實證的資料。因此每項設計的運用都必須經過
測試、修定及再測試的過程，直到滿意為止。由於各個實務設計建議
甚有互相矛盾的情形，必須靠設計師的判斷力去取捨、妥協，所以介
面設計建議的運用與其說是科學，倒不如說更像是一種藝術。

3讀者可以進一步參照下列四本書：1) Philips IMS. The CD-I Design handbook.

Addison-Wesley publishing company, 1992. 2) Human interface guidelines: The Apple
desktop interface. Apple company. Addison-Wesley publishing company, 1987. 3) Human
Factors in Product Design. 產品設計的人因工程。 Cushman, William H.,著。蔡登傳，宋同正
譯。六合出版社。八十五年八月。

三—8
第一項 瞭解使用者族群：
本書在第四章提出的介面設計第一階段裡的第一步驟便是『定義使用
者』＜第四章圖４–3＞，此時必須透過會議、文件紀錄，將使用者
描述出來，也就是由設計團隊初步討論、形成共識，決定目標使用者
是誰。

當使用者的族群包含地非常地廣泛，比如對象為網際網路一般大眾使
用者時，目標使用者的定義可能不易達成。此時應將使用者依特性分
類，個別瞭解不同的使用者的需求，例如對有經驗的使用者提供捷徑
(short-cuts)，對個別的使用者提供個人化的相關資訊，以及對於較無
經驗的使用者提供 Training Wheels(因材施教的漸進輔助式學習，詳
見第二章)。

第二項 現實世界的隱喻
當介面缺乏具體的模式、以便使用者進行類比推理時，『隱喻』也可
以擔負起引導使用者的任務。設計師須要注意的是：不該使用太難理
解的隱喻，或需要太多想像的隱喻。設計師應該使用現實世界的隱喻
〈第二章圖 2-13、圖 2-14、圖 2-15〉，以帶給使用者熟悉的環境，
協助使用者建立起可以運作的心智模型〈詳見第二章：在使用者介面
中使用隱喻〉。

第三項 立即、適當的回饋
回饋能幫助發送訊息的一方監視訊息的接收、據此作出必要的修正。
也就是說，當執行某一個功能時，必須讓使用者知道他們剛剛做了什
麼操作，這個操作是否已經確定執行完畢了、得到了什麼樣的結果、

三—9
或是根本沒有執行成功〈詳見第二章第三節第六項：回饋〉。立即回
饋提供使用者有價值的和適時的資訊，實務的設計建議請參考以下幾
點：

1. 對於使用者的任何輸入〈從鍵入指令到按下滑鼠〉有所回應，並
且應該立即在顯示上有所改變。

2. 使用者選擇任一項目執行操作時，最好能突顯該項目。

3. 盡可能在螢幕上顯示系統的現階段狀態訊息，尤其有任何明顯的
延遲產生時。

4. 提供使用者其訊息已被傳遞或接收的確認。

5. 使用者執行任何關鍵性的動作時（如刪除目錄、永久性地修改檔
案或未儲存資料便跳出軟體）
，都應有一個或多個確認性的輸入。

6. 在要求確認重要決策前，警告使用者此操作執行之後可能產生的
後果。

第四項 使用者控制4
使用者控制就是容許使用者啟動操作介面的行動，而非讓電腦完全掌
控。當使用者積極地投入與介面互動時，學習的效果最好。然而事實
上在一般介面的設計中，電腦經常啟動操作介面的行動，而使用者被
動的作出回應。比如電腦常常太『過分小心的保護』使用者，僅顯示
出被判斷為『好』的選項，或不讓使用者作更詳細的進階設定。這種
方法可能會錯誤的箝制住使用者，而非協助電腦。

設計的關鍵在於設計師必須在下列兩項原則之間達到平衡：提供使用

4Apple company. Human interface guidelines: The Apple desktop interface.

Addison-Wesley publishing company. 1987.

三—10
者足夠的功能讓他們可以把工作完成，以及阻止使用者不小心毀損資
料。為了防止使用者意外地毀損資料，設計師可以提供彈出式的警示
視窗，警告使用者假如如此做的話，可能會有無法挽回、或不想要的
後果，假如使用者仍然確認這是他們想要的，他們便能夠繼續執行此
一步驟〈請看下列的問答對話式功能表〉。此方法可以適度" 保護" 使
用者，但是仍然讓他們能夠保有完全的控制權。

第五項 容錯與親和性
容錯意味著使用者對電腦做出的操作通常是可以後悔的、可以變更
的，可以倒回上一個步驟的，最好的例子就是大家通用的 UNDO 功能
〈圖 3-7〉，或有歷史紀錄〈History〉的功能〈圖 3-8〉：使用者可以
檢視他到底做過哪些操作？可以倒回哪一個步驟。

人們需要安全感，覺得並不會因為自己嘗試去操作介面而損壞系統。
假若介面的操作能容許使用者犯錯，讓使用者感到舒適的心理狀況下
去學習、去操作介面，便能帶給使用者親和感，更進一步鼓勵人們無
後顧之憂地探索學習所設計的介面。假若某個步驟執行後將會產生無
法挽回的資料刪除，一開始便要警告使用者，比如畫面跳出警示視窗。
然而，計師必須注意到：

三—11
當設計師提供了清楚的選 〈圖 3-7〉一套半百萬的高階軟體竟然沒有
項、適時與恰當的回饋之 UNDO 功能？Pro-E 在 2000i 版才逐漸的加進

下，使用者學習操作介面應 UNDO 的功能，Pro-E 大概是少數幾個竟然在

介面上長期忽視顧客的要求的軟體之一。此
該是不易發生錯誤的。假若
外，若使用者跳出軟體忘記存檔，Pro-E 至今
警示視窗經常從畫面彈出， 仍然不會警告使用者。
這代表著介面的設計可能出
了問題。

第六項 80%的解決方
案5
在設計過程中，設計師可以
運用『80%的解決方案』原
則以解決一些產品設計的問
題。80%的解決方案意味著
〈圖 3-8〉PhotoShop 的歷史紀錄〈History〉
設計至少必須滿足百分之 80
的功能。使用者可以倒回任何已經做過的步
的使用者的需要。除非當初 驟。
產品定義在特殊的使用族
群，假若設計師只致力於為
佔 20%的 Power User 提供
解決方案，那麼便會失去其
他大多數的用戶。即使佔
20%的高階使用者很可能充
滿創意，或像設計師一樣有
著周詳的思考能力，但是大

5Apple company. Human interface guidelines: The Apple desktop interface.

Addison-Wesley publishing company. 1987.

三—12
多數人們卻不是用戶中的菁英，而且思考能力絕不是如此。在設計過
程中考慮較為廣大、普遍的使用者將會有助於 80%問題的解決。

第七項 文化差異
設計師必須確信其所設計的視覺界面元素，能夠在全世界被接受、並
可以被地域化。設計界面時，必須考慮在世界各地區使用顏色、文字、
圖形、曆法、和時間表達方式的差別。例如不同文化的使用者用不同
的方法來存放文件。在美國文化裡，文件夾是平的，上方有標籤，記
載著文件的內容。在歐洲，文件夾倒是像狹長的紙板盒。設計師可以
將不同地域的介面視覺元素地區化，比如為不同的國家設計不同的文
字、顏色、與圖像版本。

某些圖形可能有助於介面操作， 〈圖 3-9〉NIKE 在 1997 年發表售的鞋款。

但是他們也可能在文化上是攻擊 此款當時推出時，因為鞋後跟的火燄〔AIR〕
字形看起來很像回教的〔阿拉〕文字，引發
性的。 除了顏色以外，文化對於
回教徒的抗議，在國外並引起回收的事件。
生物、植物、和無生物賦予不同
不過因為文化差異性使然，在台灣一樣賣的
的價值和特性〈圖 3-9〉。例如 很好，似乎不受影響。

在美國，貓頭鷹是智慧和知識的
象徵，而在中美洲，貓頭鷹則表
示巫術和黑暗魔法。假如你的軟
體想要行銷全世界，應該避開使
用代表季節，傳統假期的圖形，
比如聖誕節樹、南瓜、或雪。除
非你能肯定這些符號能夠地區化。

由於文化差異也影響著視覺傳達的溝通性，讀者可同時參閱本章第三
節第一項的可溝通性。

三—13
第八項 選擇對話型式
使用者介面的對話互動型式指的是使用者與電腦間的溝通協定的方
式。對話型式依許多因素而有不同，如使用簡易度、學習簡易度、使
用者與電腦互動、顯示的外觀及效率等。最適當的對話型式通常決定
於使用者的技巧程度及介面的使用頻率〈圖表 3-10〉。

〈圖表 3-10〉使用者與電腦的對話型式及適用的使用者技巧。

對話型式 適合的使用者

自然語言 適合所有使用者。不需訓練。

指令 受過相當訓練的經常使用者。

功能表 受過極少訓練的不經常使用者。

問答式對話 未經訓練的不經常使用者。

填表式對話 經過某些訓練的中度經常使用者

使用者介面通常為了促進互動、及配合不同程度的使用者，常常併用
多種對話型式。下列則針對各個對話形式詳細敘述：

選單
選單 (Menu，或譯功能表)是一個顯示於介面上、有限的項目選擇之
集合。使用者所需的操作是去辨識清單中的某個項目、選擇其中的項
目即可。不像指令式的系統，使用者需要去記憶指令的名稱或縮寫而
輸入介面。

選單的選項通常是簡單的文字描述，然而它們也可以包含圖像、按鈕，
或核取方塊(Checkbox)等。實質上，任何可以允許在一個有限項目的
集合中進行選擇的機制都可以被視為選單。然而，要使得選單在使用

三—14
上變得有效率，其選項的名稱、圖像的內容，或按鈕的描述說明等都
必須對使用者而言
是明白清楚的〈圖 〈圖 3-11〉Nike 網站的選單，www.nike.com，2002。
3-11〉。

選單中的項目常常
包括動詞與物件的
組合。使用者必須選
取某一物件（如圖
像、文字或數目，或
是選取某一區域），
然後從選單中的項
目選擇可被應用於
該物件的動作（亦即動詞，如複製、刪除、移動、或濾鏡特效）。此
項操作的次序則是先前所述的文法，有些軟體必須先選物件、再選動
作，有些軟體則相反，當然最好的情況是兩者皆可，如此可以讓操作
更為彈性。

在第二章中我們曾提及在人類認知上：記憶比辨識困難，人類的短期
記憶相當有限。因此，選單的優點在於使用者不須受太多訓練、不須
死背回答的選項、可以減輕使用者的記憶負荷而學習容易。此外，選
單卻有其缺點：選單中可選的的項數若太多則造成操作的時間拉長，
尤其對熟練的使用者稍嫌緩慢，此問題可以由提供快速鍵(Shortcut
Keys)來解決。

選單需要謹慎的設計，否則可能會變得相當複雜。設計師需要考慮的
事項包括選單深度與選單寬度，以及選單項目的排列方式。詳述如下：

三—15
 選單深度與選單寬度
通常功能表為階層式的(Hierarchical)選單結構，使用者由主選單選擇
進入子選單(Submenu)，再進入次一層的選單，如此直到找到所要的
選單項目。設計師應該關注的是如何去引導使用者去導覽(Navigate)
整個系列的選單，觀察選單深度與選單寬度的關係是非常有用的。選
單深度意指階層數，選單寬度則指每一層的選項數。一般而言，尋找
時間與錯誤隨選單深度而增加。另一方面，選單的寬度不可太大，以
免分類太細太多而導致使用者不易找到選項。

一般功能表採用兩階層的選單，可能比採用過寬的單一階層選單來得
適當。不過超過兩階層以上的選單容易造成混淆，是必須要謹慎小心
的做法。若使用者選擇了錯誤的子選單，系統應該提供簡易的方式讓
使用者能夠回到先前一層的選單。

選單項目的排列方式
另一影響選單可用性的重要因素是選單項目的排列方式，可以依據字
母或筆劃的次序、依種類、或依使用率。在多數情況下，設計師可以
依照使用率排列項目，而以相似功能的類似性分組。以使用率排列時，
將最常被選到的項目安排在最靠選單頂端。以相似性分類時，可利用
兩層式的選單或給每一組相似的選項提供不同的選單。例如所有與列
印有關的選項可將之歸類於同一組選單之下。

為了減少錯誤，有些意義完全相反的選單項目應該互相區隔，例如：
『建立(create)』這個選單項目就不應置於『刪除(delete)』這個項目
的旁邊。

三—16
 四種類型的選 〈圖 3-12〉蘋果電腦麥金塔系統之的下拉式選單及
單 各種快速鍵。

選單有四種主要的類型：

1. 固定式(fixed)選單：不
管滑鼠是否移往其上
或移開，直到選單項目
被選取，但是清單仍會
一直停留在螢幕上。

2. 下拉式(pull-down)選
〈圖 3- 13〉微軟 Word 中的彈出式選單。
單：它通常是由使用者
自螢幕上方拉下某個
單一的選單標題
(title，或選單列
(menubar))，在某個項
目被選取後，次選單會
自動的消失而只剩下
標題〈圖 3-12〉。

3. 彈出式 (pop-up)選 〈圖 3- 14〉微軟 Word 中漫遊式選單。

單：當使用者按了螢幕
的某一區域(如可能是
某個圖像)快顯選單會
被顯示出來。此選單會
一直停留在螢幕上直
到選項被選取後，或者
是使用者選擇了關閉選單(通常是使用者按了選單的邊界外圍或點

三—17
 選其它區域)才消失。比如在微軟視窗環境中，在螢幕上任一區域
按滑鼠的右鍵便有彈出式選單的顯示〈圖 3- 13〉。

4. 漫遊式(walk-through)或階層式(cascading)選單：是在選擇某一選
項後會列出其所有的次選項〈圖 3- 14〉。

問答式對話6
問答對話的介面形式為：電腦問問題，使用者回答問題，之後對話才
會進入下一步驟。其優點在於：使用者只需少許的訓練，適合於沒經
驗的使用者。每個問題的 〈圖 3- 15〉PhotoShop 中問答對話的介面形式。
內定答案或可選答案，可
以容易地列出來。但是其
更大缺點在於：通常比其
他形式速度緩慢，使用者
對對話的控制有限，不夠
靈活，因而問答式對話已
不再廣泛使用在介面上，只用於特殊用途。

問答式對話非常適合用在使用者可能做出重大破壞性動作前的再次確
認〈圖 3- 15〉。例如，當使用者執行刪除的指令時，為了防止失誤，
系統應跳出問答式對話的以供確認：「你真的要刪除你所有的檔案嗎
（Y 或 N）?」。

填表式對話
填表式對話就像填寫表格的動作，使用者將所須的資料填入空欄內，
適合用於整組資料、或一連串指令的輸入〈圖 3- 16〉。填表式對話型

6 Cushman, William H.,著。蔡登傳，宋同正譯。Human Factors in Product Design. 產品設計

的人因工程。六合出版社。八十五年八月。

三—18
式可在適當情況下與其他對話型式併用。

填表式對話對於相當熟悉
〈圖 3- 16〉EPSON 印表機中問答對話的介面形
紙張表格的使用者頗具直
式。
覺性，其優點是使用者只
需極少的訓練即能熟練。
此外，此對話型式可提供
預設值，假若表格內的預
設值與使用者期望相同，
使用者便可略去不填，讓
操作加速。其缺點則在
於：使用者對於人機對話
的控制極其有限，因此填
表式對話對資料輸入或數
值設定非常有用，卻不適
合系統的操作。

視窗介面7
圖形使用者介面的電腦系統通常是『視窗』的操作環境。視窗通常以
長方形的區塊為界，內含一組相關的資料或操作。視窗以「桌面」作
為隱喻，模仿傳統辦公室的環境。在多工環境下，電腦系統可以同時
顯示一個以上的視窗，並提供使用者控制視窗組態的功能。

7 改寫自Cushman, William H.,著。蔡登傳，宋同正譯。Human Factors in Product Design. 產

品設計的人因工程。六合出版社。八十五年八月。

三—19
視窗型式分為兩種， 〈圖 3-17〉格子形視窗。

一是格子形視窗，所
有視窗如同馬賽克地
磚地共同呈現於同一
螢幕（見圖 3-17）。
每新開啟一個視窗即
減少其他視窗的空
間，如此限制了可同
時開啟的有用的視窗
數。 〈圖 3-18〉重疊式視窗，蘋果電腦麥金塔系統。

其二是重疊式視窗
〈圖 3-18〉，視窗可
重疊出現在螢幕上，
並將其後面的視窗的
部分內容隱藏，為今
天大多個人電腦系統
所用的形式。重疊的
視窗使用者必須使用
視窗管理鈕〈圖 〈圖 3-19〉蘋果電腦麥金塔系統的視窗管理。

3-19〉以調整視窗的
大小與位置。並使用
水平或垂直的「捲動
軸」來移動資料。

雖然視窗支持者認
為，視窗在電腦中提

三—20
供了溝通的直覺性介面。但是相較於非視窗環境，使用者在視窗環境
中花費更多時間執行操作。原因在於，使用者耗費太多時間在諸如開
關視窗及捲動尋找資料等展示管理操作上。

第九項 使用者輔助系統
使用者輔助系統（HELP systems，求助系統）即是：當使用者在操
作上遇到困難時，提供諮詢的輔助軟體，其功能用以排除障礙、提升
操作績效〈圖 3-20，圖 3-21〉。由於較無經驗的使用者的增多，電腦
系統的線上作業求助需求也因而增加。

在建立求助系統前，設計師必須先決定下列三項方式8：

1. 啟動的方式（使用者提出要求或是電腦自動介入）。

2. 選擇相關資訊的方式（由使用者選擇或由電腦提供）。

3. 表現的方式（線上的電子輔助或是離線的印刷手冊）。

根據上述，若為新手所設計的較佳求助系統可能是由使用者控制啟動
的時機、並親自選擇求助的項目，同時附上產品使用手冊。

探索教師如何與求助者互動的研究有助於使用者輔助系統的建立。在
電腦輔助教學中，有以下四個輔助使用者的基本步驟：

1. 推論使用者對問題與產品的了解。推論使用者的計畫與目標。

2. 推論使用者的問題的正確本質。

3. 提供使用者解答。

4. 使用者回應是否了解、滿意此解答。

8 Cushman, William H.,著。蔡登傳，宋同正譯。Human Factors in Product Design. 產品設計

的人因工程。六合出版社。八十五年八月。

三—21
設計師必須了解以上的過程仍 〈圖 3-20〉引起爭議的『微軟小幫手』，是
一個擬人化的虛擬『輔助說明代理人(help
有實務上必須注意的地方：比
agent)』。它的理論基礎是透過社會角色
如當使用者嘗試開始解決問題
(social agent)的溝通方式可以增進使用者與
時，大部分並沒有清楚的目 軟體系統的社會性互動。

標。此外，許多使用者常常只
是在整個程序中，以嘗試錯
誤、反復修正的方式來尋求解
答。

當同時要協助沒有經驗的新手 〈圖 3-21〉電影『桃色機密〈Disclosure〉』
與專業級使用者時，設計師可 裡 HELP 是一個天使，程式設計師幽了一默，

以考慮使用調適型求助系統。 把自己的臉孔鑲進天使。

由於使用者介面本身並無二
致，調適型求助系統允許使用
者能調整輔助說明系統的程度
等級，以配合他們的需要。例
如一位專家級使用者可能僅需
要對某些功能的簡單提示，但
對初學使用者而言可能就需要更進一步的詳細解釋。

適合新手的求助系統可以提供簡單標準的啟動輔助動作（如按 F1），
在對話中的任何時點設計 HELP 的功能，讓電腦能自行決定使用者的
問題，並提供明確的解決問題的建議。

當使用者已有部份的系統使用經驗，並能獨立的操作系統時，線上
〈on-line〉輔助說明系統或線上使用手冊就成為持續支援使用者的方
法。線上輔助說明系統提供快速、簡易的方式，通常包括輔助說明選
單標題，超連結的內容，以及關鍵字搜尋功能。

三—22
三—23
本章後段第三、四、五節主要把焦點針對視覺傳達設計，包括圖像的
設計、版面構成、與色彩建議三大章節。本章第三、四節部分改寫自

Mullet, Kevin & Sano, Darrell 的 Designing Visual Interfaces9，讀者

若對介面設計的視覺部份有更深一層的興趣，請參閱原著。

第三節 視覺傳達設計﹕圖像與再現
圖形使用者介面本身是一套符號系統，符號扮演著介於使用者與介面
設計師之間的媒介物，而『再現』則提供了所有溝通的基礎

再現

再現〈Representation〉就字面上的意義而言，就是再次呈現。只要
在腦海中、在心智上喚起適當的圖像再現，我們可以思考、或甚至傳
達一個在物質上不存在的概念。在溝通的系統中，再現被參與者解讀，
用以創造可以互相分享的意義。

符號與符號學
符號〈Sign，也譯為記號〉用以象徵某人或某事，可由我們的感官接
收，它指涉它本身以外的某事物：符號依賴它的使用者將其辨識出它
是符號。舉例來說：在網頁的溝通裡，設計師以房子的圖像作為符號，
呈現給介面使用者。其中房子的圖像指涉『Home』的概念，設計師
和使用者都能辨識出這項指涉，知道它代表著『回到首頁』；設計師
創造可以互相分享的意義，傳遞給使用者，這就是再現的過程。至於
要研究是什麼使得文字、圖像或聲音能變成訊息，就必須研究符號：

9 Mullet, Kevin & Sano, Darrell. Designing Visual Interfaces – Communication Oriented
Techniques. Sun Microsystems, Inc. 1995.

三—24
而研究符號和符號的運作的學問就是符號學10。

符號學(Semiotics)，也譯為記號學，為研究符號、符號系統和意義的
社會形成的一門跨學科研究領域，由瑞士語言學家索緒爾〈Saussure,
Ferdinand de〉和美國符號學之父皮爾斯〈Peirce, Charles S.〉所首

先研究開創11。符號學研究符號的普遍性學說與實務運用，其範疇包
括任何被人類解讀為符號的事物，以及任何為了讓符號更容易被了
解、或為了改進符號的使用而把事物當作符號去定義的情況。

符號的三位一體架構
為了進一步了解符號，讀者
可以研究皮爾斯的『符號的 〈圖 3-22〉在皮爾斯對記號的定義中，『再現者』
使用符號傳達、呈現著被指涉的物件〈即是『客
三位一體架構〈圖 3 –
體』〉，『解釋義』則是符號在使用者的心裏產
22 〉』。此架構解釋了符 生的作用。
號處理過程的三個要素：再
現者、客體、與解釋義。在
三位一體架構中，任一要素
與另二要素緊密相連，而且
只有與另二者『相提並論』
時才能被理解。再現者即是
記號的生產者，是進行再現
的人。而符號所代表的、被

10 Fiske, John. Introduction to Communication Studies. 傳播符號學理論。張錦華等譯。遠流

出版，1995。
11 劍橋百科全書，2002。符號學研究的重點是交際傳播系統(書面和口頭語言、手勢、服飾等)
的隨意性質。符號的蘊意大多產生自成套的單個符號之間的關係與差異,而非直接表示外界實
體。符號系統雖然本身很不穩定,但可以由慣例規定,而慣例在一定的文化中自有其來源和作用。
符號學通常分為三個分支:語法學,研究語言成分怎樣才能轉變為其他語言成分;語義學,研究符號
的意義和參照關係;語用學,研究上下文如何影響語言解釋。

三—25
指涉的事物，即是客體。符 〈圖 3-23〉在皮爾斯對記號的定義中，『再現者』
使用符號傳達、呈現著被指涉的物件〈即是『客
號能在使用者的心裏產生
體』〉，『解釋義』。
作用，這作用我們稱它為解
釋義〈也就是心智的解釋義
mental interpretant〉。解
釋義並不是指符號的使用
者，而是皮爾斯所謂的『適
當的指意作用』，是一個心
理上的概念，由符號和使用
者對物體的經驗所共同製
造產生。

以筆記型電腦的『電池』這
個符號為例〈圖 3-23〉：
電池實體本身即是客體，是被符號所代表的、被指涉的事物。而再現
者即是記號的生產者，是進行再現的人，可能是設計師，或 CIS 標準
的制定組織，他們決定使用電池的外觀輪廓，加上正負極符號或閃電
圖樣來呈現『電池』這個符號。至於解釋義則是『電池』符號在使用
者心理上、精神上的概念。然而這些概念儘管有一些個別的差異〈比
如使用者心中所想的大小、形狀〉，我的概念和你的概念會大致相同
〈可能都可以提供電力、可以用電腦介面檢視電量多少〉。『電池』
這個字在任何一個情境中的解釋義，都會是使用者對這個字的經驗結
果，或是他對被稱為『電池』的這些物體的經驗結果(他不會用這個字
來指涉電源供給器)。因此，解釋義並不是固定不變的，也不是由字典
所定義的，而是隨著使用者經驗範圍之下同而有所差異。雖然這些概
念和一組真實世界裏的實體相連，這關聯是如此直接，似乎是顯而易
見，但還是有問題存在。比如，使用者在進一步了解此例的筆 記型電

三—26
腦之前，可能會爭辯這種電池是內建式、看不到的，或者是可以拔出
的、單獨充電的。我們用相同的語言，我們看見的是同一件真實存在
的東西，而差異就存在於我們對電池的『概念』，使語言和真實相連
的解釋義不同。

符號的分類
皮爾斯和索緒爾都嘗試解釋符號藉以傳遞意義的各種方式。皮爾斯認

為符號可以分為三類12：圖示符號、指示符號、記號類符號。每一類
符號與指涉物之間都有不同的關係〈圖 3-24〉。

圖示符號〈Icon、或譯為肖像類符號〉是形似、神似、酷似其所指涉
的事物。符號擁有客體的某種特質或特徵。這在視覺符號裏尤其明顯：

〈圖 3-24〉符號的分類。

Image Function Icon Index Symbol

Representational Abstract
Design Style (Image-related) Arbirary
(Concept-related) 任意的
肖像式的 抽象的
(與圖像相關的)
(與概念相關的)

or
Example

12Fiske, John. Introduction to Communication Studies. 傳播符號學理論。張錦華等譯。遠流出

版，1995。皮爾斯認為符號可以分為上述三類，符號的形式，可以肖似(iconic)的關係或以任意
(arbitrary)的關係來連結。在肖似關係裏，以聲或形相似。在任意關係裏，二者的關聯全靠使用
者彼此的同意。所以索緒爾理論中的肖似關係和任意關係，與皮爾斯的肖像和記號，事實上是相
呼應的。
在此三類符號為icon, index, symbol. 在其它的文獻裡，也看到不同名稱的分類：Picture, Symbol,
Sign.不過講述的內容依序是相同的〈Lin, Rungtai and Kreifeldt, John G.. Understanding the

三—27
相片是一種圖示，地圖是一種圖示，男洗手間和女洗手問門上的菸斗
和高跟鞋也是一種圖示。〈圖 3-24〉的電視與喇叭都是圖示的符號。
在普遍的用法裡，圖示已經成為圖形使用者介面裡顯示出來的任何小
圖像，通常用來做為介面中的隱喻。例如：以桌面（desktop）隱喻辦
公桌、以檔案、檔案夾、印表機等圖像隱喻人們辦公室桌子的作業環
境，我們可以說，此隱喻藉由對辦公室環境的語意的類比式思考，使
用圖像的再現形式，而傳達出軟體的功能。

指示符號〈Index、或譯為指標類符號〉與其所指涉的事物間有直接的、
認知概念的相關，但是並不直接提及它所要代表的物體，而是藉由鄰
近事物的聯想〈類比，而非相似性〉，或是藉由被要代表的物體影響
或改變的特質。比如煙是火的指示符號，發出音波的梯形是喇叭的指
示符號。

而記號類符號〈symbol、或譯為象徵符號〉與其所指涉的事物之間既
不相似，也無直接關係。記號和其指涉的物體的關係，經過時間的考
驗，是一種慣例、約定或規則。一般而言，文字是記號，紅十字是記
號，數字也是記號。『2』這個形狀為什麼代表『雙』，是沒有什麼
道理的，只是在我們的文化裏約定俗成的一個規則。

符號的抽象化分類 〈圖 3-25〉記號的再現可由將其特徵抽象化的程
度來分類。電池的符號，由左至右越抽象。
符號的再現可由將其特徵
抽象化的程度來分類：對於
所要代表的物體的主要特
徵保持的越多，細節越少，

Image Functions for Icon Designing, Proceedings of the Human Factors Society 36th Annual
Meeting -1992. Volume 1. Human Factors Society, Santa Monica, CA. 1992.。〉

三—28
則越抽象〈圖 3-25〉。一張照片或物體的精描圖對代表的物體保有著
高度的精確度，則越容易被辨認出來。越概念化、圖案化，也就是選
擇性的對細節忽略，則越可以代表更廣闊的物體類別，或可以更把焦
點放在物體的特徵上，而非特定個人所感知到的真實感。

第一項 介面圖像設計原則
在圖形使用者介面裡，有效的圖像必須在視覺上具有令人第一眼看到
就能辨識出來的特質。但是實務上，將要指涉的物件『畫出來』其實
是不容易的。對於大部分的圖像而言，畫出圖像的過程包括謹慎的去
除細節而抽象化。當同時處理數個圖像時，設計師必須小心的保持圖
像間的一致性，而且必須考慮圖像最終呈現時物質上的、視覺上、以
及文化脈絡的特性。發展有效的圖像時，考慮下述事項遠比具有天生
的藝術天份更為重要：

立即辨識〈Immediacy〉

有效的視覺再現應該可以能夠被毫不費力，本能地被辨識出來。辨識
者能夠如此主要是因為當看到
〈圖 3-26〉視窗左方的符號的立即辨識性提
圖像的極短時間之內，並不需要 供了重要的視覺線索。
有意識的詳細分析圖像，便有能
力在驚鴻一撇所的的瞬間影像
中，自動的從整體中過濾出有用
的資訊，如此的作用，稱之為『圖
形力 graphical power』，主要
來自於認知上對視覺記號的立
即辨識力。視覺上的立即辨識性
讓設計師得以利用適當的圖像
設計來引起使用者的注意。經由

三—29
小心謹慎的處理圖像記號的重量、平衡、與對稱性，設計師可以設計
出令人印象深刻、容易記憶的產品商標、公司標誌、企業識別、與記
號系統。

人機使用者介面設計師應該考慮：使用者的注意力應該被掌握、某些
前後文的指涉應該被傳達出去。舉例而言，在微軟視窗的標準的設計
裡，在彈跳出來的視窗〈圖 3-26〉的左方，都有一個符號，功能類似
於交通號誌，傳達出這是屬於哪一級的對話框或是哪一種警告訊息。
符號的立即辨識形性提供了重要的視覺線索：在使用者進一步閱讀文
字描述之前，告訴使用者這個訊息的屬性、以及警告訊息的嚴重性。
這簡潔的符號本身的大小與顏色能夠在背景中突顯出來，與其他的對
話視窗內容有著對比的效果，符合了符號的立即辨識形性的要求。

普遍性〈Generality〉

在圖形使用者介面裡，圖像常常用於表現某一類別的物品；而非某種
類別的單一特定物品。『普遍性』描述了單一的符號可以代表更高層
次類別的物品群。只要抽離某種類別的單一物品的細節特徵，符號變
得更抽象，便可代表普遍的、類似的物品群。符號的普遍性程度，決
定符號是否本身代表者更廣義的某種類別〈比如繪圖工具〉，或藉由
更細節的描繪、或甚至是物體的精描，則更侷限於某種類別的單一物
品〈比如二號筆刷〉。符號可易藉由光影、光源、一致的方向─而不
是提供多餘的細節描述、或輪廓的相關資料─來傳達所欲指涉的物品
的重要核心特質。

在人機介面裡，一般的、約定俗成的記號事到處可見的〈也就是上述
的記號類符號、或譯為象徵符號〉，圖形使用者介面裡同時也有同樣
的情況。

三—30
大家早已熟悉的撥放符號 〈圖-27〉約定俗成的記號：撥放符號。

〈撥放、暫停、快轉‧‧等
等〉已普遍見於各型的消費
性家電產品，如今圖形使用
者介面裡也大量運用〈圖
27〉。最早時這些符號必
須搭配文字標示才能被使
用者理解其功能，如今因為
大家都已熟悉它的意義，故
它能獨立的使用而不需要
文字標示的幫忙了。這是一 〈圖-28〉視窗管理符號 〈Win〉。
個非常好的例子，證明普遍
性的視覺語言可以直接地
引用至電腦使用者介面裡。

視窗管理符號 〈Mac Os〉。

當然許多的狀況是：真實世
界並沒有可以參考的語
彙，所以設計師必須自己發
明視覺語言。視窗管理符號
〈圖 3-28〉是一個抽象符
號的好例子。由於空間十分
狹小，像素不足以提供精細
的圖形再現。雖然使用者一
開始無法精確的了解其涵
義，但是由於視窗管理符號
幾乎在所有的視窗裡隨時
可見，所以使用者可以逐步

三—31
的去學習、去熟悉它。設計師雖然在此例裡喪失了使用者直覺的辨識
性，卻妥協地設計出有效的、抽象的普遍性符號。

一致性〈Cohesiveness〉

圖像很少獨立存在，尤其是使用者介面裡，每個圖像通常都是大系統
其中的小部份，也就是說，每個獨立的視覺元素必須與其它元素共同
有效率的像個團隊一般的合作。當圖像本身的共享特質得以在最初的
視覺感知時毫不費力地被辨識出來，這時具有協調一致性的介面就形
成了。雖然每個圖像個體不同於其它的共屬同一整體之下的圖像，共
同的視覺特徵仍然可以讓使用者辨識出這是共屬於同一群組的圖像。

持續的使用協調一致的視覺語言對於圖形使用者介面是非常重要的。
〈圖 3-29〉顯示出 Corel Draw 繪圖軟體的檢視工具，每個符號設計
必須是清楚的，且能於與其他的符號區別出來。放大鏡的圖像不只可
以幫助使用者便是出這是檢視功能的符號，同時也可以藉著相同的大
小、顏色、線條的粗細、與密度來形成協調一致的視覺語言，以便可
以讓使用者將其歸類為類
似功能的同一群組符號。 〈圖 3-29〉Corel Draw 繪圖軟體的檢視工具，每
個符號設計必須是清楚的，且能與其他的符號區
圖形介面軟體也可以常常
別出來。
受惠於一致性的圖像設
計。〈圖 3-30〉提供了幾個
非常好的例子。個人助理軟
體裡，檢視選項的符號使用
〈圖 3-30〉個人助理軟體裡，檢視選項的符號使
了清楚的、簡潔的圖案來表
用了清楚的、簡潔的圖案〈左〉。同樣的手法也
示當天、週、月的檢視狀態
應用於文書處理軟體慣用的左右對齊功能〈右〉。
〈左上方〉。大家熟悉的月
曆編排的方式被轉化成類
似的小方格以構成檢視符

三—32
 〈圖 3-31〉Adobe 公司購併了不同繪圖軟體之
號。重複出現的視覺元素構
後，重要的一件事是將各不同軟體的選單一致
成協調一致、同一群組的視
化。PhotoShop 與 Illustrator。
覺符號。同樣的手法也應用
於文書處理軟體慣用的左右
對齊功能〈右方〉。

界面設計的一致性，允許使
用者將他們現有的知識和技
術，從熟悉的介面轉移到任
何其他未碰觸過的介面。界
面中視覺元素的一致性容易
幫助人們去學習，因而較容
易辨識界面的圖像語言。一
般而言，一致性有益於一般
使用者，通常他們經常同時
使用不同的套裝軟體。比如
一旦使用者熟悉 Adobe 公 〈圖 3-31〉是 Cook & Shanosky 公司設計的
U.S.. DOT’S 符號系統。
司的 PhotoShop，他們便較
容易學習 Illustrator，因為
Adobe 公司把選單一致化
了〈圖 3-31〉。

特徵描述
〈Characterization〉

藉由喚起使用者心中對於欲指涉的物體的重要特徵，圖像記號便得以
達到再現的功能。有效的特徵描述必須要把焦點放在如何去找出特殊
的特質。〈圖 3-31〉是 Cook & Shanosky 公司設計的 U.S. DOT’S 符
號系統。成功的特徵描述可以來自於正確的視角、減少非特徵的細節、
與誇大其特色。設計師在〈圖 3-31〉符號裡所選擇描繪的視角都是使

三—33
用者日常生活較易看到的角度，同時也是較易強調出特徵的視角。就
像卡通漫畫一樣，超出真實精確的誇大重要部位則有助於成功的溝
通，比如 DOT’S 符號系裡直昇機的螺旋槳與計程車上方的廣告牌的比
例都被誇張地加大了。

良好的物體特徵描述〈視覺 〈圖 3-32〉誇大特徵的符號。

再現〉對於加強介面的活潑
性非常有幫助。將真實世界
的視覺細節加進符號設計
則有助於辨識：比如〈圖
3-32〉的文件摺角，磁片的
右上方導角，此設計都比沿
用長方形輪廓還要更令人容易辨識。這些設計在於強調特徵，也就是
卡通化，比精確的描繪更令人信服。搭配誇張的動態符號也能創造出
虛擬的、更令人信服的世界，比如〈圖 3-205〉的撐飽的垃圾桶，像
吹熄蛋糕那樣有趣的視窗關閉符號，或是的兩個狀態的圖釘。

可溝通性〈Communicability〉

符號溝通建立於符號發送 〈圖 3-33〉郵筒的符號，由左至右，美國，丹麥，

者與接收者有著共通的脈 法國，義大利。

絡〈context〉，此共享的脈
絡讓符號得以辨識，只要兩
者之間的語用架構是互相
相容、互相可溝通的。符號
的經驗不只被其他互屬於同一整體之下的符號所影響，同時也被物理
的、文化的、與視覺的環境所控制。溝通性必須小心的處理在特定的
語境中的問題。我們都在潛意識裡帶著生活經驗，脈絡影響著我們對
世界的了解，而此影響卻不易被察覺。比如某些文化裡是“顯而易見”
的郵筒，在另一個文化裡人們卻不熟悉，這是由於文化的獨立性影響

三—34
著郵筒的符號。比如美國〈圖 3-33 由左至右〉，丹麥，法國，義大利，
每個郵筒都有可能在不同的文化裡因為不熟悉而被誤認為垃圾桶或電
氣箱。由上可知，設計給跨國使用者的視覺符號必須考慮：目標市場
的使用者是否熟悉、能夠理解指涉的記號物。

視覺的隱喻可以幫助使用者了解介面環境如何運作，但是只存在於以
下狀況：『視覺的意義』與『使用者對真實世界的理解』的類比能互
相匹配〈mapping，見第二章第三節第五項〉，也就是必須具有成功
的溝通性。如果在圖形使用者介面裡囫圇吞棗地加入熟悉的圖形，如
此的隱喻運用可能都會太不合宜而無法被
〈圖 3-34〉隱喻失敗的例
辨識，而溝通也會失敗。比如〈圖 3-34〉
子：油箱指標/硬碟空間。
的油箱指標與里程計數器，原意是想隱喻記
憶體或硬碟空間的使用率，但是由於指涉物
與系統的印象之間的類比相差太遠，故算是
失敗的例子。隨處可見的美國鄉村家庭郵件
箱符號〈圖 3-35〉，其實真正的意義是： 〈圖 3-35〉美國鄉村家庭郵
當旗標升起，代表著此家庭有郵件等著被寄 件箱符號。當旗標升起，不

出，郵差會依旗標來拿取，而不是一般誤認 是代表著此家庭有新到的郵

的郵件箱裡有新到的郵件。隱喻的符號通常 件；而是有郵件等著被寄出。

牽涉到指涉物與解釋義之間的關係，或可以
說，記號所代表的物體與系統功能之間的解
讀。只有當雙方的語意關係是清楚的狀況
下，溝通才能成功。

第二項 設計技巧

設計師經過多年的練習才可以擁有良好的繪圖技巧，但是電子數位媒
體卻將手繪能力的重要性降低。比技巧更重要的是，敏銳的雙眼與懂
得如何將正確的視覺圖像化的知識。以下簡單的設計技巧可以幫助設

三—35
 〈圖 3-36〉有時文字仍然較圖像能夠傳達
計師改進圖像的品質。
較微妙的差別。
選擇正確的形式

圖像或文字的選擇
圖像較能有效率的表達具體
的、或使用者熟悉的事物。比如
滑鼠、美術畫筆，或是與空間、
〈圖 3-37〉視窗軟體的工具列〈toolbar〉
方向有關的指示，比如交通標
符號。
誌，岔路、左彎。但是若是表達
較抽象的動作、文化意義則較可
能讓使用者產生誤解。

有時文字較能表達細微差別的
意義、或抽象的操作程序。比如
『SAVE』、『CUT』。舉例來
說，〈圖 3-36〉圖中的酒吧、 〈圖 3-38〉影像處理或繪圖軟體的工具功

餐飲店、自助式餐廳、正式餐館 能板〈tool palette〉

的微妙差別實在很難用圖像來
表現，雖然圖像設計的非常具體
清楚。

選擇正確形式的技巧

視窗軟體的工具列〈toolbar，
圖 3-37〉符號設計常常造成混
淆，但是相反地，影像處理或繪
圖軟體的工具功能板〈tool
palette，圖 3-38〉便較成功。

三—36
原因在於工具功能板符號代表著實質上可以執行的功能〈比如：拿起
了噴槍〉，它同時也保持著明確清楚的特性，同時也提供立即的回饋
〈比如在畫面上按下立即噴出顏料來，或是按下符號後符號會反白、
滑鼠游標也會變形〉。而有些視窗軟體的工具列符號則非如此，抽象
的指令執行之後，卻是沒有直接的、顯而易見的影響結果，因此必須
把這些指令同時放在下拉式選項裡。

下列四項技巧可以幫助選擇正確的表現形式：

1. 假若某概念傳達著具體的、熟悉的物體或實際的、非常顯而易見
的狀態，則使用圖像符號。

2. 假若欲傳達的將會反覆的在軟體環境裡出現，如此可考慮設計建
立圖像化的記號、或聯想概念的記號，尤其假如這符號可以從真
實世界〝借用〞過來更好。

3. 在其他的情況，尤其當這要傳達的概念是一個抽象的過程、或在
不同狀態之間微妙的轉換時，則使用文字標示。

4. 在一系列的同屬於同一群組的符號裡，盡量避免使用純粹的文
字、純粹的圖像。

藉由抽象化而改進細節
〈圖 3-39〉百事可樂的商標改進歷程。
抽象化就是將物體的重要特
質〈實際的物理特性或事件〉
抽離出來。藉由移除表面的或
無關緊要的細節，設計師得以
幫助使用者觀察到重要的特
質，此特質把圖像與指涉物緊
密結合在一起。好圖像就像一
篇好文章，通常是謹慎小心的修正、改進的結果。圖像的改進經常藉

三—37
由持續簡化的過程、把多餘的細節去除、把不規則的元素規則化。如
此的過程可能要重複好幾次，然後再從其中選出最好的結果。

比如〈圖 3-39〉，百事可樂的商標改進歷史反映出上述不斷精進的過
程。百事可樂花了將近一世紀的時間，將商標從左邊繁複裝飾性的樣
子，改進到右邊風格化的、強而有力、更直接的樣子，直到最後視覺
的焦點放在瓶蓋的主題之上，而字體也去除掉繁雜的裝飾，成為具現
代感的字型。

高度簡化的、經由細節改 〈圖 3-40〉1964 年東京奧林匹克運動會的圖案。

進的圖像可以增進對符
號立即的辨識。另一個修
正細節的技巧可以參考
完形心理學的圖/地〈圖形
與背景〉反轉的現象。設
計師可以操控圖形與背
景的關係，如 1964 年東京奧林匹克運動會的圖案〈圖 3-40〉。藉由
正空間與負空間〈留白〉的設計，來表現物體的重要特徵，如此也可
以把圖案簡化。觀看者同時也享受到把〝遺漏〞的輪廓填補起來的樂
趣。

下列五項技巧可以將細節改進：

1. 依據主題、目標使用者、顯示螢幕的解析度，來為符號組合決定
適當的抽象化程度。

2. 從包含最多輪廓特徵的視角開始著手。來源可能是相片、圖畫、
或物體的草圖，視角要調到適宜的角度。

3. 嘗試用描圖紙快速的勾勒出原圖的輪廓，多畫一些草圖。把細節
去除，直到最重要的特徵留下。試驗性的嘗試不同的元素組合來
決定哪一種方式最能夠表現原圖的特質。

三—38
4. 盡量將複雜的圖形簡化成幾何符號。重複的、一層一層地描繪出
原圖的輪廓直到可以把圖形簡化成規則的形狀。

5. 減少無助於辨識的輪廓，試著用完形學的負空間〈留白〉來表現
輪廓。

互相協調以確保視覺上的一致性

為了讓同一組的圖像能夠有效率的運作，圖像必須共享協調一致的語
言形式，如此可讓群組中的每一個圖像之間的關係立即的呈現出來。
這些整合可以藉由持續地操控每一個圖形的視覺特質而達到，讓同屬
一個整體之下的共通性與差異性達到平衡。為了達到標準化而可以調
整的最重要視覺變數為：尺寸大小、量〈符號的視覺〝重量〞〉。此
外，保持一致的視角與統一的抽象化程度，以持續的使用一致的視覺
變數。

大致而言，大多數的圖形使用者介面軟體的圖像大小是一致的，除非
設計師可能較喜歡將圖像依照像素點的大小來構成〝自然形成〞的點
陣圖形。但是我們仍然必須小心地確認這些圖形在視覺上、物理性質
上是均等的，大部分的問題常常出現在視覺重量的不均等與抽象化程
度的不一致。這些特性通常在同一組圖像裡有很大的差別，而且是持
續的有這種現象。當整個軟體無可避免的缺乏一致性的協調時，風格
的統一與跨平台的標準圖形則有助於訂下一致性的方向。

三—39
〈圖 3-41〉與〈圖 3-42〉顯 〈圖 3-41〉SMART 電話黃皮書。Richard Saul

示出使用同一規則的語彙可 Wurman and The Understanding Business 設

計。
以將一群符號整合起來。
〈圖
3-41〉電話簿裡的一組圖形
裡，使用了同樣的抽象化程
度、同樣的傾斜視角、以及
方向一致的光源。〈圖 3-42〉
雖然與〈圖 3-41〉的圖形有
著對比的視覺規則，比如正
視角度〈而不是傾斜視角〉、
更抽象化的圖形，但是一致 〈圖 3-42〉電話簿裡的一組圖形。設計者同上。
性的語彙仍然將這群符號整
合起來：統一的線寬、一致
的線條描繪的風格、最少的
細節、正視平面化的視角、
以及 90 或 45 度的方向。

〈圖 3-43〉是為了搭配
OpenWindows 3 的符號而
設計的。而且為了能夠一起合作無間的並存，使用了同一方向的傾斜
角作為視覺語彙，同時也採用類似的大小與線寬。

下列五項技巧可以幫助設
計師確保視覺上的一致 〈圖 3-43〉為了搭配 OpenWindows 3 的

性： 符號而同時設計。

1. 首先開始重畫一些已
發展完整、已建立起
視覺特徵的整組符號
的草圖。

三—40
2. 使用相似、或不同的視角以及透視的方法。決定最終的視角，重
繪任何與此視角不同的圖像。

3. 使用相似的形式與同一程度的抽象化。

4. 使用一致的大小、方向、編排、顏色、與視覺的重量。使用對齊
輔助線來幫助所有的圖形能保持一致的內在架構。

5. 假如可能的話，使用相同的視覺元素：比如線寬、圓角、質感、
形狀。事實上，一旦規則的語彙被建立起來時，使用標準的元素
去重繪每一個符號便不難了。

實務執行時之修正
將以上設計技巧慎重執行時，仍需注意實務上的問題。首先，圖像最
終若是在螢幕顯示時，解析度就成為必須要考量的要素之一。設計師
除了必須訂定圖像的大小外，也需要同時了解最後格點的格式，比如
10 點 X10 點，24 點 X24 點〈圖 3-44〉。此時設計師必須將構想在此
格式下試著描繪，看看會不會遇到細節太多而『擠不下』的問題。若
是為了符合網頁瀏覽之設定，也必須小心是否最後為了排版或其他因
素，而將圖像縮小而導致細節模糊或辨識不易的問題。

其次，若是最終圖像是使用網版印刷於產品之上時，必須小心是否過
細的線條導致印刷模糊，或過窄小的空間與印刷之溢墨問題結合導致
細節消失。以筆者的經驗而言，線條與留白盡量不要小於 0.3mm 之
下，最好所有平均線寬與線距保持在 0.4mm 以上〈圖 3-45〉。當最
終圖像是凹刻與凸刻於產品之上時，也需考慮模具放電時之精密度，
設計原則大致如同上述。

最後必須要提醒設計師的是：因為大多數設計師進行細部設計時，大
半時間都把圖像放大處理描繪，所以應當隨時以 1:1 的比例印出、或

三—41
顯示於銀幕之上，檢視整體 〈圖 3-44〉
的平衡是否不均勻〈或留白
不均〉、部分圖像是否太緊
密而導致細節不易辨識。

〈圖 3-45〉

三—42
第四節 視覺傳達設計﹕組織與視覺架構
組織與視覺架構以系統化的方式，提供讓使用者的視覺可以遵循的路
徑。當使用者去體驗介面時，視覺的路徑是一大助力。架構影響了視
覺經驗，原因在於當使用者看到介面第一眼時，螢幕顯示出被淬取出
來的、同時可以提供引導使用者與之對話的先後次序的資訊。由於使
用者可以毫不費力的、自動的體驗出視覺架構，這種現象可以提供重
要的溝通通道，設計師可以利用這個溝通通道來幫助或中斷使用者的
操作。

人造物並不會自然地提供有組織的架構，所以藉由建立起設計元素之
間的關係，有組織的架構才也辦法被謹慎小心的引導出來。有效率的
利用架構，如此一來便得以讓獨立的元素共同合作，而仍保有各自的
主體性。假若一項設計並沒有提供清楚的架構，使用者便會自己尋找
出架構、並把自己所組織出來的架構強加於設計之上。如此的錯誤導
致溝通的失敗，因為設計師無法控制它所傳達的訊息。

第一項 視覺架構的優點/特性
若缺乏完整、前後協調一至的視覺架構，設計便立即變得無法解釋與
理解。因為嘗試溝通的努力不斷地被阻撓，付出的代價不只是功能上
的、同時也是美學上的，甚至對專業使用者造成困擾。架構提供了以
下數個主要好處：

一致〈Unity〉
視覺架構可將極不相同的設計元素綁在一起，而且幫助它們合作無間
的運作、朝向共通的溝通目標前進。最佳的範例是麥金塔電腦的設計

三—43
手冊裡，清楚的規範共 〈圖 3-46〉麥金塔界面裡『桌面』的概念，設計師定
義了一些一致性的視覺元素 (選單、視窗等等)。
通的標準界面元素，以
確保使用者得利於不
同介面之間的一致
性。麥金塔界面提供了
『桌面』的概念，在這
二度空間的介面裡有
條不紊地擺置了各式
物件，設計師定義了一
些一致性的視覺元素
(選單、視窗等等)，在
視覺上因而呈現出穩定一致的感覺〈圖 3-46〉。

當考慮設計一致性的介面時，設計師可以問自己下列的問題，設計完
成的介面產品是否：

1. 介面本身具一致性?

2. 與更早的版本相比是否具一致性?

3. 與更其它的標準介面相比是否具一致性?

4. 隱喻的使用是否具一致性?

5. 是否一致地合乎人們的期望?

最艱難的部分是最後一項：是達成人們一致性的期望。與此矛盾的是
第一項設計建議，因為設計師經常面對專業程度不同、需求不同的使
用者，要合乎每個人的期望是不容易的。所以設計師必須在介面的一
致性與目標使用者的需求之間去權衡輕重與妥協。

一致性的實務設計建議，請參考以下幾點：

三—44
〈圖 3-47〉Adobe PhotoShop 的一致性。幾乎大部分的應用套裝軟體都遵循以下
規則： 1.檔案資訊、提示訊息、每一步驟的說明都保持在相同的相關位置。 2. 常
用功能板保持在相同的右邊位置。3. 與目前選取的指令互相關聯的選項保持在相同
的上方位置。

1. 在所有結構下，功能區域（如軟鍵的標示與視窗標頭）都應保持
在相同的相關位置。這樣可以容許使用者發展出空間上的預期性
〈圖 3-47 的第二、三區塊〉。

2. 常用的訊息與提示的顯示位置必須一致。設計師可以在接近螢幕
底處，保留特別的列或區域，顯示狀態及錯誤的訊息〈圖 3-47 的
第一區塊〉。

3. 上下捲軸或上下頁的控制程序予以標準化。大多使用者偏愛移動
式視窗的類比，即 UP 指令顯現出在上方的訊息（即訊息看似往
下捲動）。

4. 中斷程序（如按 BREAK 鍵）、系統對中斷的反應及給使用者的

回饋等予以標準化。回饋應告訴使用者如何繼續操作。

5. 視窗、表格、選單、圖表等必須有個標題或其他形式的識別，以

三—45
 指出內容或目的。

完整〈Integrity〉
藉由創造一個可以強化整 〈圖 3-48〉產品型錄的規格表。淺藍色水平長條形

體意義的形狀，強而一致的 把列上的內容緊緊的綁在一起，同時也讓欄與欄之
間的資料易於比對。作者設計，2002 年。
架構可以讓設計專注於溝
通的目標。強而有力的重複
長條形的視覺元素可以幫
助整合垂直與水平方向的
設計〈圖 3-48〉。水平方
向而言，淺藍色長條形把列
上的內容緊緊的綁在一
起，同時也讓欄與欄之間的
資料易於比對。垂直方向而
言，長條形創造出韻律，引
導使用者往下看，容易事先預瞄一下知道有多少列。

可讀性〈Readability〉
根據設計師的期望，架構可以增進可讀性。藉由把所有螢幕上的資訊
內容分成易於處理的小部份，這些部分可以分別或同時處理。把時間
表上的間隔的長條形移除可以創造出不連續的強烈的架構元素〈圖
3-48〉。
〈圖 3-49〉家庭影音系統介面，架構控制。

控制〈Control〉
架構容許使用者預測有興趣的
地方而容易地去瀏覽它。對架
構的控制讓設計師影響這瀏覽

三—46
的過程，同時確認資訊是否被正確有效的傳達出去〈圖 3-49〉。

第二項 背景：格式塔學派
在 1920 年代，格式塔學派的心理學家首次描述在人類在最初的視覺
感知下〈看到介面第一眼時〉，獨立的的視覺元素如何被群組化而成
為整體〈也就是完形〉的過程〈請參考第二章圖 2-2〉。藉由描述整
體架構如何從更細緻的部分元素架構中浮現出來，完形原則可以成功
的解釋以下許多視覺設計的技巧。包括完形群組現象、形狀感知的完
形現象，以下分述之： 〈圖 3-50〉近似原則。

第三項 完形群組現象：

近似〈Proximity〉
所謂近似，字面上而言是接近、鄰近、
親近。而近似原則，即是『距離較近的
獨立的視覺元素』比『較遠的視覺元素』更能夠緊密的關聯在一起。
從〈圖 3-50〉中，讀者可以觀察兩個現象：由於水平方向的距離比垂
直方向的距離較大，人們看到這數個點所構成的圖形，最初便將之視
為四欄垂直的群組。其次，由於中間兩欄水平方向的距離比其他垂直
欄的距離較大，人們便將此圖視為分為兩群，每群各有兩欄的整體圖
形。
〈圖 3-51〉相似原則。

相似〈Similarity〉
當基本視覺元素『較相似時』(比如形
狀、顏色、大小、材質、方向)，雖然此
視覺元素『比較不相近』，卻仍然能夠
緊密的關聯在一起。因此在〈圖 3-51〉

三—47
中，儘管垂直欄的距離較大，但是看起來仍然像是分為水平方向的兩
群交錯的整體圖形。

連續性〈Continuity〉 〈圖 3-52a〉連續性。
人類偏愛辨認較容易解釋成功的
簡單輪廓，只要這輪廓是連續的、
完整的。相對而言，人們較不易辨
認雖然複雜、但同樣相似的不規則
的圖形。人們較易將〈圖 3-52a〉
〈圖 3-52b〉 〈圖 3-52c〉
的圖形辨認為兩條交叉的線條，而
不是四條相接的短直線〈圖
3-52b〉，也不是兩個或四個相對
的 L 形〈圖 3-52c〉。

第四項 形狀感知的完形現
象

封閉〈Closure〉
與連續性相關的是封閉性，人們傾向解釋視覺的圖案為完整的、封閉
的圖形，甚至當一些必要的輪廓線 〈圖 3-53〉封閉性的運用。作者為駱可

也付之闕如也有如此傾向。〈圖 公司設計的 LOGO 提案之一，2002。

3-53〉很容易的被視為一個三角形
疊在三個完整的圓圈之上，雖然技
術上而言，這些圖案的輪廓線事實
上是不見了。

三—48
區域〈Area〉 〈圖 3-54〉形狀感知的完形現象：
區域性。
假若有兩個圖形重疊時，較小的圖形
容易被解釋為前景的圖案，而較大的
圖形容易被解釋為背景。如〈圖
3-54〉，裡面的小正方形容易被解釋
為疊在大正方形前面的圖案，而非大
正方形裡面的洞。由於這些現象幾乎
〈圖 3-55〉區域性的實務運用。
在所有的設計瑕疵上出現，所以成功
作者為印象公司設計的 LOGO 提
的設計必須小心地確認浮現出來的視 案之一，2001。

覺架構是否能強化顯示出來的資訊的
功能〈圖 3-55、3-56〉。

對稱〈Symmetry〉
最後，對稱現象描述出群組較依賴浮
〈圖 3-56〉區域性的實務運用：
現的適當形體，而非其組合元素的特
開啟抽取式電池的圖像。作者繪，
徵。當圖形可能的對稱性較大，我們 大眾電腦，1997。

越易於將其用於解釋完整的圖形。
〈圖
3-57〉較易於被視為兩個互相重疊、
上下對稱的正方形，而非三個正方
形。有著高度『完善造型〈figural
〈圖 3-57〉對稱：較易於被視為
goodness〉』的形狀較易被辨識出來， 兩個互相重疊的正方形，而非三個

但是較弱的、模糊的形狀則較不易被 正方形。

辨識出來。

第五項 設計原則
組織與視覺架構對成功的介面溝通設

三—49
計而言是主要的構成元素。雖然尺度、對比、比例可能是較難捉摸、
無法預測、或甚至是善變的，但是組織與視覺架構卻是建立於穩定的、
可信賴的方法之上，而這些方法可以一而再的使用而不變〈參考圖
3-58〉。建立組織可以從分類著手，也就是將相關的元素『群組』起
來、找出物件與群組的重要性的次序而建立『層級〈Hierarchy〉』。
當層級是清楚的，介面的顯示自己便能形成架構以反映各元素之間的
相對『關係』，而最終的編排能保有令人愉悅的『平衡』感，以下詳
述之：

群組
建立起視覺架構的第一個方法就是將介面上的顯示元素群組起來，以
形成更有秩序的單位。比如書本的文字編排，應該將之依序群組成列、
段落、頁等等。藉由將相似的元素群組起來，縮減至容易處理的單元，
設計師便可以幫助使用者面對複雜的資訊。更上層的架構可以導引使
用者、幫助他們把注意力移至有興趣的部分，進行更進一步的詳細閱
讀。〈圖 3-59〉顯示出如何運用留白與色塊，將相似的元素群組起來。

階層〈Hierarchy〉

三—50
當群組建立起來時，群組應該被安排成視覺上引人注目的階層，與設
計師希望引導的閱讀方向互相呼應〈圖 3-60〉。美國亞歷桑那中央報
的網頁顯示出清楚的字型階層，而強烈的迎面元素〈照片，標題〉強
化了這階層感〈讀者可以參考第二章：資訊的階層〉。

關係
當設計元素在視覺上互相產生關係時，群組與層級兩者都會強化。元

〈圖 3-58〉美國亞歷桑那中央報的網頁。在作者於當地就學期間，每天閱讀時依群組
原則將頭版頭條找出。其次依照日復一日不變的層級〈除非報紙改版〉，找出自己喜
愛的關心類別：比如藝術->大鳳凰城->ASU 校內活動->Gammage 音樂廳。

〈圖 3-59〉上層架構將介面元素群組起來。 〈圖 3-60〉建立『層級〈hierarchy〉』

三—51
素之間的關係可以根據任何視覺上的變數，其中位置、大小、與明暗
度則扮演最重要的角色。在所有的變數裡面，位置是最有效的。眼睛
對於『對齊〈Alignment〉』非常敏感，這種現象對完形現象來說，稱
之為『良好的延續性〈Good Continuation〉』、『共同的特徵〈Common
Fate〉』。
〈圖 3-61〉視窗軟體的檔案儲存視窗，操控元素
圖形使用者介面裡視窗的
的次序運用不當的設計：操控元素的次序與電腦
編排可以充分利用視覺關
資料管理的檔案架構正好相反。
係的原則，也就是根據對
齊與形狀的相似性原則。
使用介面設計軟體時就會
自動的提供較低階的原
則，比如下拉式選項，設
計程式便會自動的將選項
互相對齊。設計者必須要
自己控制較高階的元素關
〈圖 3-62〉的例子則使用了較簡單，更合乎自然
係。當設計師小心謹慎的
的安排：所有的元素以對應於位階層級的位置次
處理視覺的關係時，版面
序排列，檔案位置、內容、檔名與空間關係有著
的空間邏輯可以幫助使用 正確的對應。

者了解到潛藏於各個獨立
元素之間的相對關係。當
以上的原則適當的引用
後，每個元素的意義則決
定於與四周元素的相對位
置關係，詳盡的文字標示
便可以減少。

三—52
當架構關係必須以邏輯合理的次序呈現時，設計師必須小心地處理配
對的問題。〈圖 3-61，視窗軟體的檔案儲存視窗〉是空間類比運用不
當的範例：操控元素的次序〈由上而下，由左至右閱讀〉與電腦資料
管理的檔案架構 〈相對應於邏輯上的資訊層級次序：硬碟-> 目錄路
徑-> 目錄內容-> 檔名〉有著相反的關係。

〈圖 3-62〉的例子則使用了較簡單，更合乎自然的安排：所有的元素
以對應於位階層級的位置次序排列，檔案位置、內容、檔名與空間關
係有著正確的對應。反白的檔名部分形成了視覺焦點，導引視線由上
而下依循層級次序至文字輸入區。同時設計師也把 SAVE 指令與其參
數、目錄路徑的內容相關聯起來。

平衡
上述的原則必須要在整體的編排上，不減損構成元素的和諧協調的情
況下才能達成。均等平衡可以讓介面顯示保持穩定感。使用對稱〈圖
3-63〉或非對稱的手法都可達成平衡感。〈圖 3-64〉介面編排的平衡
感與可以類比於物理上的重量平衡。當把較小的設計元素擺離中線較
遠，或高一點的位置，便可以與較大的圖案達成平衡〈圖 3-65：USB
Flash Disc 附贈的檔案管理程式〉。

組織與視覺架構取決於周詳的的計劃與小心地執行。總結以上重要的
設計技巧有助於達成建構有組織的視覺架構：使用群組以達成架構分
類、使用對稱以達成平衡、使用對齊與類比以建立視覺關係。

三—53
〈圖 3-63〉使用對稱手法可達成平衡感。

〈圖 3-64〉介面編排的平衡感與可以類比於物理上的重量平衡。

〈圖 3-65〉USB Flash Disc 附贈的檔案管理程式。作者為駱可公司設計的檔案管理程

式提案之一，2002。

三—54
 第五節 視覺傳達設計﹕使用色彩
對於介面設計而言，色彩是高度強烈的視覺元素，也是傳遞資訊的高
度有效的非語言方法。對於介面使用者來說，色彩能否在介面的操作
上增加助力或造成阻力，完全取決於其色彩是否規劃良好。比如在一
介面中，色彩可以讓使用者立即清楚的了解其所需要注意的資訊，而
提高介面的滿意度；反之，色彩卻也可能干擾使用者，造成誤解、或
錯過重要之資訊。

要有效的在介面中運用顏色，必須要考慮下列因素：

第一項 顏色在顯示器上的實務問題

黑白顯示的相容性
當硬體只有黑白色〈或灰階〉顯示時，可以使用亮度。亮度的不同仍
可以輔助設計者將資訊分類，或是界定資料間之關係。設計者可以充
分利用反白、劃底線、框線、或閃爍的方式，來讓資訊突出。

彩色顏示的相容性
現存的系統能夠在色彩的色調及飽和度產生豐富的變化。因此設計師
幾乎能夠任意從調色板中選擇需要的顏色，如此反而造成一些問題。
比如各產品的顯示色階不同，不同的系統應用環境也有不同的色彩內
定值，設計必須容許任何用戶可以使用的最少的顯示裝置。因此設計
師在規格訂定階段，必須注意最後介面的顯示模式及色表〈圖 3-66〉。
若設計者一開始沒有依照最後顯示模式的色表設計，在最後轉檔的過
程中，色彩將會有部分被扭曲、被其它顏色替代抽換的問題。

三—55
〈圖 3-66〉注意下列在不同的顯示模式不同的色表，若設計者一開始沒有依照最後
顯示模式的色表設計，在最後轉檔的過程中，色彩將會有部分被扭曲、被其它顏色
替代抽換的問題。

Web 標準顯示模式。 Window 標準顯示模式。

Mac 標準顯示模式。

此外，設計者所使用的電腦事實上大多未經過校正，甚至有設計師將
電腦的彩度與亮度調低以保護眼睛。所以設計師必須小心的確認最終
在使用者端所顯示的色彩是否與預期的一致，較好的做法是在定案前
測試特定的顏色，以發覺問題。

三—56
注意色盲的使用者
實務設計上必須注意色盲的使用者。對於色盲的人來說，不同色相但
彩度相同的色彩（如使用紅色於藍色上），在他們的視覺中是相同而
無法分辨的。設計者可以調整相同色相之明度或彩度，使其產生不同
的色階，如此色盲者便可以分辨出來，增加介面操作的助力。

此外，設計師必須理解：絕大部份具有不正常色彩視覺的人只對某幾
種顏色無法知覺，而完全對任何色彩皆無知覺的人是極少數的，因此
有人主張不用色盲，而使用不正常的色彩視覺一詞。而大約百分之八
的男性族群是擁有不正常的色彩知覺的，而女性族群具有不正常使用

色彩視覺的比率，遠比估計的數目少13。

第二項 顏色的意義
顏色的本身就可以傳達訊息，正如紅色表示停止，黃色表示注意，綠
色表示繼續，這些意義已經深植於使用者的腦中〈圖表3-67〉。

如果顏色要表示特別的意義，而且有可能被使用者誤解，就必須要告
訴使用者。比如在某些行程管理軟體裡顏色有特別的指定意義：紅色
的資料代表「過期的」，黃色的資料是「待決的」，那麼在資料顯示
區下面必須標示：「紅色=過期的」的紅色顯示，以及「黃色=待決的」
的黃色顯示。

此外，顏色的意義可以用來表示狀態，舉例來說，一個變數的數值可
以用顏色來表示，當他在安全的範圍內，以綠色表示，在安全的範圍
內轉變時可以黃色表示，而超出安全限度時則以紅色表示。

13 Brown, C. Marlin. Human-Computer Interface Design Guidelines. Xerox Corporation.

Ablex Publishing Corp., 1988.

三—57
〈圖表 3-67〉顏色的約定俗成的意義14 （% 顏色與意義的相關度百分比）

(相關度百分比取材自 Bergum and Bergum, 1981)

相關
顏色 意義 說明
度

停 100% 在資料的顯示上，運用紅色來表示警告、錯誤、危
險、立刻注意等。當使用者發生錯誤的操作可以使
熱 94% 用紅包來警告，直到錯誤被更正為止。如果使用者
紅
的螢幕是黑白顯示器，則可以使用亮度來表示。
危險 80%
紅色有熱的意思，所以可以使用紅色來表示高溫。

用黃色表示警告。
黃 小心、注意 81% 當顯示較次要的警示訊息、或一些未來可能發生的
後果警告訊息時，可以使用黃色。

前進 99% 用綠色表示情況正常

綠色適用於傳達正常情況、或狀態尚在可接受範圍
綠 內的訊息。
安全的 61%
由於紅綠燈使用綠代表可通行的意義，因此造成綠
色與可繼續、或可通行擁有強烈的聯想。

如果可以解決藍色的易讀性問題，則藍色可以被用
來指示低溫。它通常被使用在高科技產品上，有冷
藍 冷 96%
冽科技的感覺。若用在地圖上，藍色是很好的水的
指標。

14改寫、取材自 Brown, C. Marlin. Human-Computer Interface Design Guidelines. Xerox

Corporation. Ablex Publishing Corp., 1988.

三—58
第三項 設計建議

用顏色來增加易讀性
在介面設計中，如果顏色能被小心謹慎運用，便能有效地增強易讀性：
包括利用顏色去強調資料，分類資訊。

用色彩來強調
由於顏色的改變會引起注意，所以利用顏色來突顯在螢幕顯示的某些
我們想要強調的訊息是非常有用的，這些強調性的色彩可以使用在標
題的位置，多出來的資料，新加的資料和需要注意的資料。

用相似的顏色顯示類似的有關資料
如果需要用好幾種顏色分別一堆資料時，相似的顏色可以被用來群組
出相似的資料〈圖3-13〉。盡量選用不具有強烈的意思的顏色，像藍
綠色、白色、粉紅色，此外若不考慮其意義，可以選用相似的顏色：
包括紅-粉紅、黃-橘黃、紅-橘紅、藍-紫以及藍-綠藍。

用對比色來分類資料
可以用對比色來分別不同的資料。對比色有紅-藍綠（或是青色）、藍
-黃、綠-粉紅（或洋紅）；三種色的對比色可使用紅-藍-綠；四種色的
對比色可使用紅-藍-綠-白。

使用對比的背景色
當在彩色的背景下顯示彩色的字時，必須選擇背景與前景配對的顏
色。通常可以淺色的前景配合深色的背景，或是相反。比如可以在藍
色的背景上顯示黃色的字，而不是在白色的背景上顯示黃色的字。在

三—59
背景部分，設計師可以考慮使用相同色系但是深淺不一的顏色，而非
徹底對比的顏色。比如讓顯示於螢幕上的文字該有著和緩漸層的背
景，那麼文字便會凸顯出來。

避免過度使用顏色
通常增加色彩的目的是為了幫助使用者能完成他的工作，如果隨機的
過度使用，反而會使用者轉移注意力而感到混淆〈圖 3-68〉。介面設
計上，要使用保守的顏色。任意的使用多樣的顏色，會導致顯示幕顯

〈圖 3-68〉顏色的過度使用。

〈圖 3-69〉使用保守的顏色，用顏色來區分按鍵群組，將背景調成同一色系、較接近
的亮度。平板式電腦的 Driver 安裝介面，作者設計，台達電子，2001 年。

三—60
得擁擠雜亂，並且可能減低對資料的正確及快速的判讀。因為顏色的
改變會引起注意，如果顏色的變化對使用者要作的工作是無關的，那
麼就可能使其分心而無幫助。

此外，設計師必須謹慎的使用亮度，如果顏色被用來強調特別的部份，
不要過度的使用亮度。

三—61
第三章課堂討論
學生共同觀看電影桃色機密〈Disclosure〉裡最後第四段男主角進入
了 3D 虛擬實境。

分組討論：DigiCom 介面到底運用了哪些介面設計原則？20 分鐘。

報告：各組同時於展示板詳細地分類列出其中運用的介面設計原則。
可用圖示，比賽哪一組找出的原則較為完整。教師可同時檢視學生吸
收的觀念是否正確，是否遺漏。

第三章作業：互動介面範例優點研究
讀完這一章，學生應該己吸收足夠的知識、足以尋找出目前市面上產
品的介面設計優點及其運用的設計原則，並能評論之〈範例請見圖
3-70、圖 3-71〉。

題目： 自選市售產品適合分析、研討之互動介面作為範例。

內容： 分析、研討此範例，並反映本章所述之設計原則，與自己之
心得。

格式: 網路發表：800X600 網路頁面，最少兩頁，視同繳交報告。

課堂發表：設計簡短發表（每人五分鐘），互相觀摩，檢討。

評分標準：

1. 表達(明瞭、活潑、創意、圖示化)：20%

2. 是否了解本章之知識，是否正確引用本次授課之心理學相關知
識，是否評析出範例介面所運用之設計原則：50%

3. 自己之心得(深度、創見)：30%

三—62
 〈圖 3-70〉互動介面優點範例研究，台灣科技大學，古珮甄。

〈圖 3-71〉互動介面優點範例研究，台灣科技大學，林子修。

三—63
三—64