目錄

第一章 基本概念／什麼是介面設計.................................一—1

第一節 新興的設計領域..................................................................一—2

活氧計劃...........................................................................一—3

『時間』要素 ...................................................................一—5

設計教育...........................................................................一—5

本書大綱...........................................................................一—7

第二節 介面設計的定義..................................................................一—9

第一項 人機系統的概念 ..........................................................一—9

第二項 人機系統的資訊處理 .................................................一—10

第三項 介面：傳遞人機之間所有的交流溝通........................一—12

第四項 互動與使用者電腦介面的定義...................................一—12

第三節 介面的演進： ...................................................................一—15

第一項 傳統介面 ...................................................................一—15

第二項 圖形使用者界面 ........................................................一—16

歷史 ................................................................................一—16

1
 GUI 定義與 WIMP ..........................................................一—18

圖形使用者界面的優點：直接操作.................................一—18

第三項 直接互動介面 ............................................................一—19

第一章課堂討論..............................................................一—22

2
第一章 基本概念／什麼是介面設計

本章摘要

本章旨在介紹介面設計的基礎觀念。希望能從不同的角度﹕比如學術界的研究、科技上實務的
進展、介面的演進來導入介面的概念。

本章第一節介紹介面設計的領域、特性、以及相關背景知識。第二節則引介系統的概念、介面、
互動的定義。第三節描述介面的演進過程。

一—1
第一節 新興的設計領域
2002 年，達創科技的行銷部門發出一封求救 e-mail，附上了一張圖檔〈圖
1-1〉，信件主旨主要是問誰懂得 HMI？

〈圖 1-1〉亞蘭-布蘭得利公司出品的 MobileView 攜帶式新型 HMI。

台灣資訊產業界一直以來擅長的便是硬體設計、製造、組裝。在 WinTel〈微
軟的軟體系統加上英代爾的硬體處理器〉固定架構之下，依循世界一級大廠
訂下的遊戲規則，進行產品規劃。充分利用經驗豐富、刻苦耐勞的設計團隊，
以幾乎是同步工程的合作方式，成為世界資訊產品的後勤兵工廠。

〈 圖 1-1 〉 介 紹 亞 蘭 - 布 蘭 得 利 公 司 〈 洛 克 威 爾 自 動 化 公 司 Rockwell
Automation〉出品的 MobileView 攜帶式新型 HMI，型錄上寫著：這是專門設

一—2
計給線上操作員的界面裝置，幫助使用者可以自由的在工廠內隨處走動，滿
足對靈活溝通的多樣化需求。它的主要功能在於作為機器與廠房的控制面板
介面，也可以教導自動化機器人、利用程式控制機器人，與測試、維修與啟
動一系列的工作程序。

這 個 字 『 HMI 』， 其 實 觸 動 到 台 灣 業 界 最 脆 弱 的 核 心 。 HMI 代 表 的 是
Human-Machine Interface，即是人-機介面。『人』指的是操作者、產品使
用者，本例是線上操作員。而『機』即是機器、產品，是硬體，指的是亞蘭
公司的攜帶式觸控面板電腦。介面常常是建於共通的平台之上，比如本例的
Window CE，或是 UNIX 其他系統。它可以是訂製的、或是套裝好的，公司
可以買回來再用程式控制它，把它改造成適合各公司的特殊使用環境。長久
以來習慣於設計代工的工程師，較難掌握的便是這個軟性的介面。習慣於關
心產品外觀造型、機能邏輯的工業設計師，對介面較缺少深入的設計經驗。

活氧計劃
在 2001 年底，台達電子的活氧計劃研究部門也發出了一封電子通告：內容是
在公司的內部電話系統裡安裝了一支測試專線電話。這支專線有別於歷史上
出現的任何語音系統，接聽的『人』是智慧型『機器人』
。公司內部的的人可
以打電話與『它』聊一
聊，比如問它長榮往舊金 〈圖 1-2〉『活氧』專案，麻省理工學院的人工智慧實

山的飛機幾點起飛，它會 驗室。

問你：什麼時候要搭飛
機？星期幾？然後再以
人類的自然語言，告訴使
用者要的答案。語音辨識

一—3
是活氧計劃的一部份，此計劃是由麻省理工學院的人工智慧實驗室主持，台
達電子是贊助者之一1。語音辨識當然也是一種介面方式之一，它連結了人類
與龐大的即時資料庫。它能適應不同的口音，不同的語法，不同使用經驗的
人。它幫助使用者搜尋資料，幫助使用者把心中所想的事藉由互動澄清清楚。
這可能就是人們一直以來夢寐以求的介面。

筆者從事設計工作的期間，也見證了產品由傳統的介面演化到電腦使用者介
面的過程。從初入社會時的配備有基本旋鈕、按鍵的小家電，到簡單的 Fuzzy
微電腦遙控器。之後轉至資訊業設計筆記型電腦，這時開始有圖像式的使用
者介面。然後是最近的板式觸控電腦〈圖 1-3〉，介面變的更直接。筆者曾嘗

〈圖 1-3〉外觀由作者所設計的平板式觸控電腦，台達電子，2001 年。

1
『活氧』」一詞意味著在未來的世界中，技術充裕且都是無所不在的人本運算，就像我們呼吸的空氣一般。
麻省理工學院的人工智慧實驗室於一九九九年九月正式推動『活氧』專案。是一件五億美元的專案，借重約兩
百五十位研究員的專長。到了二 OOO 年五月，宏碁、台達電子、惠普、諾基亞、NTT 和飛利浦等公司組成活
氧聯盟(Oxygen Alliance)，成了『活氧』專案的夥伴。

一—4
試把繪圖軟體灌至板式電腦中，像 史丹佛大學電腦人機互動課程的課程簡介

使用紙筆一般，直接用筆在螢幕上
電子計算機學系，史丹佛大學
繪製構想草圖。
CS547 電腦人機互動課程。 (人、電腦、和設
計上的研討課程)
『時間』要素
隨著電子化產品日漸增加，介面設 史丹佛大學在數個學系裡有著 HCI 相關領域研究
和程學分課程，同時在校園周遭正進行一些
計已帶來新的領域。設計活動不應
HCI 相關的研究專案。 我們核心教師由來自於
該只持續到產品上市便告結束。產 矽谷的 HCI 專家組成，職責在於教導學生、對
品的生命常常是與使用者接觸後才 學生提出建議, 並且擔任研究專案的顧問。

真正開始，產品的操控已變成必須
最大的教學課程在於電子計算機學系的碩士班，
經由多次反覆的人機溝通方能遂其 以及主修 HCI 的符號系統學系的大學部。 我
目的。因為界面是動態的，而『時 們的方法強調在介面的設計、包括 HCI 的基本

間』要素的加入甚多，故而界面設 概念課程，以及分組的專案課程(包括設計、原
型建構、測試、和分析)。 電子計算機學系的
計 過 程 有別於 傳 統 靜態的 產 品 設
博士班包括專攻 HCI 的系統設計，另外有一些
計。因為『時間』
，所以設計活動更 學生則專注於 HCI 主題的論文。
像拍攝電影，由三度空間邁進四度
空間。也因為『時間』
，必須有腳本、故事板、介面模擬等具有控制時間變數
的設計工具的加入，同時也必須開啟設計與研究人類心理活動學科的關聯，
比如認知心理學，傳播理論，符號學。

設計教育
在設計教育方面，在長久的傳統設計教育薰陶之下，介面設計的教育仍感缺
乏。學生選擇設計題目時，大多脫離不了必須運用電子技術來做操控界面的
設計。但是學生對於操作介面是否真的如所陳述的可行，大多顯示出遲疑、
信心不足的態度2。原因可能傳統設計教育或設計界中，仍脫離不了利用完成

一—5
預想圖(精描圖)，製作比例縮小模型或 1： 柏克來大學的 HCI 課程介紹

1 原寸模型等模擬方法，來做設計概念與意
CS 260: HCI 研究專題
象的檢討。也就是設計程序中只著重於探
指導老師: James Landay
討產品本身如何以正確方式呈現，做外觀
Human-Computer Interaction (HCI)
造型的陳述。較用心的學生，頂多不過製
關注於介面的設計方法、原型建構、
作一張操作介面的首頁〈主目錄〉
，只做簡 檢測評估、和實際設計的執行，而最
單地探討而已。其實傳統設計方法並不安 終的介面設計成果必須是易於學習
的、有效率的、令人愉悅去使用的。
排介面設計的階段、時間上也不易容許學
生進一步思考介面與操控的適切與否，更 資訊技術的進步帶動了我們的勞動生
遑論經由介面互動的突破，進一步引導出 產力了嗎？有人認為這是否定的，而

極富創意的結果。 原因是來自於拙劣的界面設計。其他
人相信最近的經濟擴張來自於資訊技
術進步的結果。 不管怎樣, 拙劣的界
所幸的是，近年來已有與介面設計有關的
面的確傷害了消費者的滿意度，並且
課程在國內教授。比如台灣科技大學陳玲
造成銷售上的損失。此外，消費只所
鈴主任的『互動式介面設計』
，以及鄧怡莘 購買的常常是為了替換舊電腦或是第
副教授在國立交通大學的應用藝術研究所 二台電腦。改進界面也許是能讓更多
的人口使用電腦的關鍵。
所教授的『系統性專題設計』與『介面設
計專題研討』
，以及早期便投入介面設計的 本課程 CS260 將致力於設計界面、分
教學與實務的黃崇彬教授所教導的『互動 析界面、導引新的界面設計技術。閱

系統設計』
，長庚大學工業設計系翁註重講 讀和講課將包括最近的 HCI 文獻所
提及的基本原理、設計工具和技術。
師所教授的『〈資訊〉傳達設計』，以及本
學生將透過執行研究專案，以獲取食
人也在台灣科技大學講授『互動式介面設 物的學習經驗，而研究的品質必須達
計』
。在業界裡的鴻友科技經理陳崇文也多 到足以公開發表的程度。 評估測試對

次講授軟體介面設計的理論與實際執行程 於成功的介面設計非常重要，因此所
有的研究專案在學期末時都將包括某
序。此外，近幾年與介面設計有關的譯文
種形式的評估測試。
與專論也陸續發表。

一—6
本書大綱 人因設計工程師的求才廣告
〈取材自 104 人力網站，2002 年〉
以上所提的跨學科的介面設計活
【求才項目】軟體人因設計工程師
動，即是本書要探討的內容。本書 【公司名稱】 xx 科技股份有限公司
【職務類別】 軟體設計工程師 、 產品企劃開發
第一章旨在引介介面設計的基礎 人員 、 工業設計
【需求人數】 1 人
觀念。本章其後第二節則介紹系統 【工作地點】台北縣中和永和
【學歷要求】大學,碩士,博士 (科系限制:資訊管理
的概念、介面、互動的定義。第三 相關,工業設計相關)
【語文條件】 英文: 聽/略懂 說/略懂 讀/精通 寫
節則描述介面的演進過程。 /精通
【工作經驗限制】 工作經驗 2 年以上
【年齡限制】 25-35
介面設計師在進入實務設計之
【工作內容】
前，心理學的相關知識是設計的根 這項職務不是行銷企劃,而是 PDA 或手持型產品
的應用軟體流程及軟體操作介面規劃,例如開軟
基。第二章希望能夠針對認知心理
體功能規格,且必須有三者經驗之一: (1)軟體撰
學提供較基礎與完整的探討以提 寫經驗(2)人機介面設計(3)軟體 UI 設計經驗,同
時有流程控制及內部溝通經驗. 也歡迎軟體工
供設計時的參考：包括認知心理學 程師轉任, 或是美工設計人員轉任..

的重要項目﹕視覺認知、注意力、 【電腦技能專長或其他工作條件限制】
PhotoImpact 本項工作挑戰極大,必須具備資訊
人類資訊處理、記憶、學習。由於 電子產業相關產品規劃工作 2-3 年以上經驗,並
具備數位電子相關知識背景,最好有軟體撰寫經
諾曼所引介的幾個觀念對設計界 驗,及 debug 經驗者,主動/積極/樂觀/能鼓舞士氣/
耐力十足,自我紀律佳者!!
影響巨大，在第二章第三節則獨立 【公司行業】電腦週邊相關業

介紹唐納‧諾曼博士所宣揚、傳述
的認知心理學原理：重要的觀念包括心智模型、預設用途、使用限制、可見
性、匹配、回饋、預防錯誤。

第三章節著重於整理相關的文獻資料，介紹介面設計原則、方針、與技巧。
因為電腦圖形的溝通類似於使用字詞的功能，本章節前段則探討語言對談原
則。另外也包括業界公司如菲利浦、蘋果公司所提出的設計建議。第三章後
段的視覺傳達設計部份包括圖像與再現、組織與視覺架構、與色彩運用三大
章節，此部份將會更進一步地介紹完形學派的理論與應用、以及介紹符號學
在介面設計的應用，由此引申出設計上可遵循的原則，最後則歸納出設計技

一—7
巧，期能讓讀者在實務上可以有所收穫。

第四章介紹介面設計程序。介面設計程序雖然植基於傳統的設計程序，但是
其人機互動的特性帶來不同的特點，本章節前段則專文介紹此特性。其後闡
述介面設計程序。作者提出八大介面設計階段，包括發展產品概念、執行研
究與需求分析、任務分析與架構路徑、構想發展、建立原型、進行細部設計、
評估測試、產品發表與提供支援。

由於「時間」要素的加入，設計的步驟及工具則有別於傳統的工業設計程序。
本章節後段則介紹了介面設計的工具，比如故事板、構想流程圖、以及製作
原型的軟體工具。

，為在 xxx 的演講稿。

最後附上獨立的兩篇文章：其一是翁註重撰文的『xxx』
翁註重先生目前任教於長庚大學工業設計系，也是台灣大學城鄉所的博士候
選人。他一直以來對工業設計史學、理論批判有相當獨到的研究，同時也充
滿著人文的關懷。本書所切入介面設計的角度是較為實務與科學理論的角
度，唯缺來自於人文、史學的觀點，相信加入此篇文章，將讓本書更為完整。

其二則商請陳冠竹先生為文，探討如何實務運用 Flash 來模擬界面。由於坊間

的 Flash 工具書大多專注在動畫或網路特效，而非介面的原型製作，相信此專
文將對本書讀者將有極大的助益。陳冠竹先生是我的學生之中的佼佼者，他
是少數幾個真正投入新經濟浪潮的設計師，曾任職於元碁、宏碁戲谷、第三
波任職多媒體設計。他精研 Flash 在動畫與網路的應用，著有上奇出版的 Flash
MX 動態網頁 easy go、十分創意 FLASH MX 及 corelDRAW11 等軟體教學書
(預計 2003 年一月出版)。

一—8
第二節 介面設計的定義

第一項 人機系統的概念

系統
一群互相關聯的物件一齊運作，行成了一個大的整體。比如郵政系統、空調系統、太陽星系系
統、電腦系統、消化系統。
- Longman dictionary of contemporary English. Longman Group UK Limited, 1987.

在了解介面設計之前，我們必須對系統的概念有初步的認識。設計中我們關
注的焦點，在於人機系統。人機系統可以被視為一個完整的組合體，這個組
合體包括人與機器組件的互動，此互動由『給予的輸入』與『期望的輸出』
所產生。這裡所謂的機器是比較狹隘的說法，其實它幾乎包括任何物體、設
備、用具，或是人們用以執行工作、達成一些預期目的、或提供任何功能的
東西。若以相對簡單的形式而言，人機系統(或直接稱為系統)可能為人與鋤
頭、鐵鎚。若以較為複雜的形式而言，系統可以是一台家庭房車、辦公室事
物機器、音響與它的操作者組成。更複雜的系統則是飛機、電信設備、自動
化的煉油設備與它的操作團隊組成。有些系統較無一定形式、較不界線分明，
比如醫院或加油站的服務系統、高速公路系統、或是由搜救失事墜海的飛機
組成的搜救任務。

一—9
在系統裡，『人』採取主動的介 〈圖 1-4〉人機系統。改繪自 Sanders, Mark S. and
McCormick, Ernest J.. Human Factors in
入，與機器互動以完成系統被設
Engineering And Design. 。
計來達成的功能。〈圖 1-4〉顯示
出典型的人與機器的互動。此圖
描繪出機器的螢幕顯示資訊，作
為對操作者的刺激(stimuli)-經過
人類的感知器官，觸發操作者進
行 某 種 形 式 的 資 訊 處 理
(information processing)，包括做
出決策，決定何種行動，之後操
作者開始行動，也就是操作機器
的控制組件以控制機器。3
〈圖 1-5〉人機系統的資訊處理。

第二項 人機系統的資訊處
理
人類在人機系統的功能大致可分
為四類：感知，資訊儲存，決策，
〈圖 1-5〉將資訊處理過程
行動。
呈現出來。由於資訊儲存與其它
的功能互相關聯，故把資訊儲存
的功能繪於所有功能之上，其他
三個功能-感知、決策、行動則依

3
改寫自 Sanders, Mark S. and McCormick, Ernest J.. Human Factors in Engineering And Design.
International Editions 1992. Part 1, Charter 1: HUMAN FACTORS AND SYSTEMS. Page 14-15.
McGraw-Hill, Inc.
一—10
序發生4： 〈圖 1-6〉範例：家用影音設備
使用者與家用影音設備之間的互動可以被

1. 感知(資訊接收)：部分進入系統 視為一個人機系統 。這是一個傳統的封閉

系統，包含了一個或多個使用者、和家用影
的資訊來自於外在的系統，比如飛
音設備。家用影音設備可能包括七個元素─
機進入塔台的飛航管制區，產品的
電視，信號接收器，錄放影機，CD 放音機，
訂單，或是引起溫度感測警鈴大作 卡帶放錄音機，收音機，和喇叭(當然這些元

的突然高溫度。有些資訊則來自於 素可能因為成本的考量、或科技的演進而有
所增減)。而使用者可定義為家庭成員，或者
系統內部本身，可能是回饋(比如駕
賓客。整個系統環境位於起居室中。
駛踩下油門後的速度顯示器的指
使用者藉由按下遙控器上的按鈕，產生控制
針)，或可能是儲存在系統本身的資 信號，從而操作家用影音設備。然後，家用

料(比如目前狀態顯示)。 影音設備執行任務，從螢幕上或 LED 顯示回

饋。之後，使用者認知到設備顯示出的資訊。

2. 資訊儲存：對人類而言，資訊儲 這個封閉的系統是連續不斷運作的，需要控
制行為的加入 （例如操作錄放影機去執行
存則同義於對已學習事物的記憶。
錄畫的動作、或是調整音量的大小），並且
大部分的資訊是以編碼或符號的形
為了確認操作是否成功，不斷的來自於機器
式儲存起來。 的回饋是需要的。在連續的操作過程中，回
饋提供任何幫助使用者判斷的訊息。使用者
3. 資訊處理與決策：資訊處理包括 接收到的資訊可以看作是編碼的形式。

對不同類型資訊的操作，這些資訊
Interface
部分是感知接收到的，其他則是已 Stimuli or
Feedback
Machine Man

儲存的。當人類處理資訊時，不管 TV Monitor
signal Receiver
VCR
這個過程複雜度如何，基本上產生 CD Player
Users
Tape Recorder
選擇做出行動的決策(或是決定不 Radio
Speakers
作任何行動)。
Controlling

4
改寫自Sanders, Mark S. and McCormick, Ernest J.. Human Factors in Engineering And Design.
International Editions 1992. Part 1, Charter 1: HUMAN FACTORS AND SYSTEMS. Page 17-18.
McGraw-Hill, Inc.
一—11
4. 行動功能：系統的行動通常指的是在決策定下之後，結果產生的進一步行
動。行動功能可大略分為兩種。第一種是某種物理性質的活動或程序，比如
啟動機器的控制，或移動、修改、或對物體的改變。第二種主要是溝通活動，
經由聲音、手勢，通常伴隨著物理性質的活動。

第三項 介面：傳遞人機之間所有的交流溝通

interface（境界面）是存在於事象與事象的境界之間的『面』。探討人與機械
之間存在的『面』便是「人機介面」（man-machine interface），考慮使用者
與機器之間存在的『面』便是「使用者介面」（user interface）。而介於人與
環境之間的則為「人 環境介面」。也就是說，依「介面」一辭前面的冠語所
指的對象物，而定義其交界面。換言之，介面設計的指涉，並非依設計的對象
物而訂，而是此依此對象物與人之間發生關連的方法而來。這個交互關係的方
5
法論形成整個介面設計的中樞。（原田 昭教授，黃崇彬 譯，1996）

所謂界面，即是傳遞人機之間所有的交流溝通，其中較狹義的部分則包含
顯示部份與輸入裝置。在資訊科學的軟體人體工學中，使用者即透過界面
去理解與人互動的程式。當傳統的機器或設備演化為可程式化的軟體時，
此時介面逐漸擴大，甚至成為產品本身，那麼傳統的設計定義就將會更進
一步的詮釋為使用者介面的設計6〈圖 1-7〉
。

第四項 互動與使用者電腦介面的定義
『互動式』介面，即是產品介面扮演著更主動積極的『輔助訊息提供』的角
色。也就是說，在人機介面的溝通裡，互動式介面提供了更複雜的訊息之呈
現新形式，使介面不再是單純的被理解與被動的接受指令而已，而是能更主
動的洞察使用者的需要，隨時隨地提供適當的訊息，甚至提供建議〈次頁圖
1-8〉
。更具體的來說，這樣的介面形式，是一種『擬人』的系統，就像人與人

5
原田 昭教授，和外在世界具有反應關係的次世代操作介面。黃崇彬 譯（1996）
6
改寫自 Burdek, Bernhard E.. 胡佑宗譯。 工業設計-產品造型的歷史、理論及實務。1996。
一—12
溝通的口語與表情，具有『互動』的特性。只不過不同之處在於媒介形式並
非口語，而是視窗圖形、影片，音效等各式媒介7。

『使用者電腦互動 Human-computer interaction (簡稱 HCI) 』是門學科，關

注於設計、評價、和實踐 (執行) 人類使用的互動式電腦系統，以及研究相關
的議題、現象8。HCI 關注於設計安全、有效率的、容易使用的、和令人愉悅
去使用的電腦系統 。在其他的探討文件中，我們也常常見到 HCI 的同義字，
比如 MMI(Man-machine interaction 人機互動)，USI(User-system interaction
使用者系統互動)。

〈圖 1-7〉使用者介面的設計。魔鬼複製人〈The 6th Day〉，哥倫比亞電影公司，2001。

7
改寫自張悟非，洪偉肯。視覺化概念發展在人機互動界面原型設計的探討。工業設計，第二十七卷第二期，
一九九九年。
8
改寫自Preece, Jenny. A Guide to Usability - Human Factors in Computing. Addison Wesley. 1993.
一—13
平面設計及工業設計如今也逐 互動式界面特點

漸踏入入介面設計的領域。介面
作者發表之互動式界面特點，「GUI 界面設計理論
設計也包括電腦程式視覺上的 與實務」，1999 中日設計教育研討會論文集。

呈現以及規劃使用者如何與產
1.新界面理論模型與傳統人機介面之間的差別在於
品互動的設計工作，因而介面設
更強調界面所扮演的角色。
計的工作也可視為『互動設計 2.GUI 界面格式不是線性的、文字形式的，而是以

〈Interactive Design〉
』。以前設 圖形為主的模式。
3.日常的人類語言應用於人機器界面 - 有容易溝通
計師的工作比較像雕塑家，賦予
的文法、易於理解的 icons、取材於現實世界的隱喻。
物體造型。一直到了後現代社會
4.設計者應設計出語義架構以幫助使用者構築對界
在數位化浪潮的的推波助瀾 面的心智模型。

下、以及透過電腦圖像界面的引 5. 在顯示和操作機器的裝置上，應利用更多符合使
用者需要的技術，將偵測、選擇決策交由軟體本身
介，『圖像社會』已經來臨。人
而減少使用者負擔。
們吸收資訊的方式越來越傾向
視覺化，有 24 小時不停撥放音
樂影帶的 MTV 電台，無時不在
〈圖 1-8〉Amazon 的互動式服務：使用者登入後，
的廣告、數位工業音樂，充斥大 在購物的過程中，填上個人希望得到的物品。當

量的符號、圖像、影像片段。因 特殊節日來臨，親友想送他禮物，只要在搜尋引
擎中查出當事人的『希望清單〈wish list〉』，便
此在多元傳播的後現代，產品、
可以線上購買禮物直接寄到當事人家裡。
媒體放射出去的是文化的、功能
的、社會的、或市場行銷的訊
息，導致設計師及產品之間的關
係也改變了。而介面設計也逐漸
成型，設計程序也延伸至使用者
與產品互動過程的設定，朝向了
去微小化、物質化、去形體的溝

一—14
通。

第三節 介 面 的
演進： 〈圖 1-9〉作者設計之烤箱面板，嘗試用 icon 來指引操作，聲寶
公司，1991。
第一項 傳統介面
傳統介面的控制面板
常常包括傳統控制
器，比如旋鈕或機械按
鍵，與簡單的黑白顯示
器〈圖 1-10〉，或稱”
硬式”控制面板。傳統的
家電大多是這種形 〈圖 1-10〉SANYO PH-Z9 手提收錄音機介面。使用者接收到的
資訊可以看作是編碼的形式。而來自於傳統的手提收錄音機介
式，比如果汁機、冷氣
面的回饋和顯示皆是線性的、文字形式的編碼。由於沒有視覺
機、烤箱〈圖 1-9〉
，或 符號 (icons) 的輔助，使用者必須花上更多時間在理解和模式
其他事務機器如影印 辨識中。此外，目前家用影音設備界面提供許多文字界面 (例

機、雷射印表機。雖然 如 "站台掃描"、" AMPS "、或者 " APSS ")，並不是可以幫助

使用者理解的編碼。當較無經驗的使用者初次接觸用家用影音
大部分這類產品的控
設備，常常無法構築一致性的記憶，和產生對系統合理的假設
制面板看起來非常簡 認知，以對資訊解譯。
單，但是它們的內部邏
輯的運作仍有某種程 Stereo
APT kHz
MHz

度的複雜度，比如微電 ST PG
123456789

腦 Fuzzy 功能的冷氣 Audio

deck B
Record
機或洗衣機。
side B PLAY REC
3456

如此的傳統介面遵循
著『操作->控制->回饋』
的簡單模式，介面所發揮的互動影響力是有限的。但是其介面設計原則仍與
一—15
本書其後章節所引介的觀念並無不同之處。

第二項 圖形使用者界面
圖形使用者界面(Graphic User Interface)以圖形的方式顯示使用者在螢幕上
看見的一切。整個圖形使用者界面包含圖形的物件〈通常是我們熟悉的物體
、下拉式選單、和指向裝置 (例如滑鼠)。界面允許使用者
與事件的簡化圖形〉
藉由敲擊 icons、拖拉 icons 到螢幕上的適當位置、按壓及放開滑鼠來控制電
腦。這種介面假定使用者不想要 (或者不需要) 知道關於界面後面機械和電子
的架構。

歷史
圖形使用者界面最早出現在 70 年代的 The Xerox Star Information Systems，
由美國全錄公司的 Palo Alto 研究中心所發展9。當時設計師了解到大螢幕、
以及顯示能力足以呈現大量精細解析度圖形的重要，雖然當時作業系統無法
做到多工的環境，設計師設計了在同一電腦螢幕能顯示數個文件的作業系
統，同時也引介了指向裝置-也就是今日的滑鼠-讓使用者得以遊走於不同的程
式之間去指定工作區域。全錄公司設計介面的方法包括：操作的一致性、讓
操作透明化-所有可能的選項可以一目瞭然給使用者選擇、在每一個設計階段
都與使用者加入測試。這些重要的觀念一直為設計師沿用。

Xerox Star 在電腦使用者介面上是重大突破，只可惜造價昂貴、速度緩慢。

容易上手的操作優點被反應速度遲緩的缺點蓋過去。持續打字時，螢幕上顯
示的速度總是不能跟上，甚至簡單的『輔助說明(help)』必須等到使用者拿完
咖啡回來才會顯示出來。Xerox 開啟了新視野，只可惜受制於先鋒者共有的問
題：意志堅強卻執行力薄弱。

9
Norman, Donald A. The Design of Everyday Things. Chapter 6:The Design Challenge. P.181. Basic
Books Inc., New York, 1988.
一—16
幸運的是，蘋果電腦公司承 〈圖 1-11〉圖形使用者界面。麥金塔電腦系統 OS X。蘋果
公司，2001。
襲了全錄公司的想法，沿用
Xerox Star 的設計哲學，甚
至從全錄公司挖角過來，在
1984 年向一般大眾引介了
GUIs 的 蘋 果 麗 莎 (Lisa)
電腦。麗莎雖然是最早的商
品化產品，只可惜仍然太貴
太慢，在市場上慘遭滑鐵
盧。直到推出麥金塔系列，
才真正獲致成功。 〈圖 1-12〉界面的演進改變了素描課的形態。網路流傳的
圖片，2002。

蘋果公司的麥金塔電腦大
量的沿用視覺化的顯示〈圖
1-11〉，提供好的回饋。大

多數的操作由移動滑鼠完
成，它對於操作與結果提供
了良好的配對(mapping)，
選項攤開來列於螢幕之上 〈圖 1-13〉Driver 安裝的界面設計，作者設計。台達電子，

讓使用者可以看到其它的 2001。

可能，也操作易於執行。麥
金塔電腦同時也把操作程
序標準化，讓操作者只要學
習一樣軟體便能應用到大
多數其它的軟體。

自 Xerox 公司對資訊產品

一—17
的使用者界面展開探討以來，這個領域的研究已成為資訊產品最重要的設計
議題之一。圖形使用者界面如今已經由許多公司廣泛採用，例如微軟
Window，Next 電腦，電腦輔助繪圖軟體公司等等〈圖 1-12、1-13〉。

GUI 定義與 WIMP

圖形使用者界面〈GUI〉如上述，以圖形的方式顯示使用者在螢幕上看見的一
切，允許使用者藉由敲擊圖像、拖拉圖像到螢幕上的適當位置、按壓及放開
滑鼠來控制電腦。圖形使用者界面具有以下構成元素：

1. 視窗(windows)：將螢幕畫分為不同的區域。

2. 圖像(icons)：用以代表物件，圖像可以在螢幕上被任意的移動。

3. 滑鼠(mouse，或其它指標裝置 pointing device)：用以在螢幕顯示區域

操作物件的裝置。

4. 功能表 (menu)：顯示可供選擇、使用的功能項目。

由於上述的組合，圖形使用者界面通常也被稱為 WIMP，即是 windows、

icons、mouse 與 menus，以及 pop-up 或 pull-down menus (快顯或下拉式
功能表)、pointing device。
〈圖 1-8〉即是一個典型的 WIMP 介面。第三章的
『選擇對話型式』將會進一步探討其構成元素的設計原則。

圖形使用者界面的優點：直接操作
圖形使用者界面的優點在於直接操作(Direct manipulation)。直接操作一詞是
由 Shneiderman(1983)所提出，用以描述高度圖形化而設計良好之圖形使用
者界面。其特性與優點分述如下：

1. 由於是視覺導向的。不使用複雜的指令，而利用圖像來隱喻物件，其功

一—18
 能表選項可下拉檢視，因此整個介面是透明易讀而容易操作的。

2. 基本的操作(如：開啟、關閉、複製、刪除、捲動等) 是高度互動的，而
整個介面設計是一致的，因此對使用者而言是容易學習的。

3. 所有功能的「物件」是透明而易讀的。對話由使用者控制，由合乎邏輯
的操作所驅動，操作通常可復原，而且具有立即回饋，因此得以鼓勵使用者
能無後顧之憂的探索介面。

第三項 直接互動介面
直接互動介面在某種程度上延續了圖形使用者界面的優點，只是它的互動性
更強，操作方式因硬體的進步而更直接。

比如平板式觸控式電腦〈Tablet PC〉利用觸控式面板，將介面演化為較直接
的手寫輸入。同時語音科技的進步，比如活氧計劃的成果，或 3D 虛擬實境的
逐漸商品化〈圖 1-14、圖 1-15 圖、1-16 圖〉，都顯示各領域的設計師，從
不同的方向，朝向更直接的互動介面邁進。

一—19
〈圖 1-14〉作者所繪的 PDA 與液晶顯示鏡，台達電子，2001 年。

千禧年時對 Tablet PC 的預測【2000/11/14 經濟日報】

台灣微軟昨 (13)日表示，台灣主要的筆記本型電腦廠商如廣達、華宇、宏碁及英業達等對發展
Tablet PC 相當感興趣，目前國內廠商已製造出 Tablet PC 的原型機種，預估到 2002 年，Tablet
PC 將成為筆記本型電腦的主流。
台灣微軟 DEM 事業處副總經理吳勝雄指出，有人把 Tablet PC 翻譯成寫字板電腦，但手寫輸入
只是 Tab let PC 的一種輸入方式，語音輸入也是 Tablet PC 的特色之一，Tablet PC 可以將手寫
或語音輸入自動轉為數位的資訊，並內建無線通訊裝置，可以隨時與網路連結。
例如醫生可以拿著 Tablet PC 到病房查房不需帶著病人的病歷，醫生只需運用 Tablet PC 就可以
連上網路當場查詢病歷，並隨時在 Tablet PC 更改病歷，比目前的筆記本型電腦更具移動性及方
便性，可望繼筆記本型電腦之後成為電腦市場的主流。
他強調，有人認為，個人電腦的時代已經過去，未來是資訊家電(IA)的時代，事實上，Tablet PC
不僅是 IA 產品也是個人電腦的延伸，因為他具備 IA 隨時連網的特性及筆記本型電腦一切功能，
所以 PC 與資訊家電結合才是未來趨勢。
目前國內外製造出來的 Tablet PC 是以微軟的視窗 2000 作業系統為平台，未來則將以視窗 2000
的下一版本-Whistler 為發展藍圖。
至於 Tablet PC 的售價如何，吳勝雄說，目前筆記本型電腦的價格大約在 1,500 到 3,000 美元之
間，Tablet PC 的價格應該也會在這個範圍之內。

一—20
〈圖 1-15〉電影中的未來介面：Dr. Know 資料庫。A.I.人工智慧，華納電影公司，2002。

〈圖 1-16〉電影中的未來介面：虛擬博物館。本片中的介面是一位擬人化的解說員。時光機器，
華納電影公司，2002。

一—21
第一章課堂討論
讀完這一章，學生應該己吸收介面的初步知識，並能應用。

觀看桃色機密〈Disclosure〉裡最後第四段男女主角侵入公司內部資料庫時的
片段，其中男主角進入了 3D 虛擬實境。

討論：

1. 他們到底分別使用了哪些不同的介面形式？

2. 3D 虛擬實境裡系統輸入的工具為何？輸出的工具為何？

3. 以此例而言，人機系統包含哪些元素？介面是什麼？

4. 此介面的優點與缺點為何？

一—22