HMI /人機系統

介面的演進

介面的設計方針、原則

介面的設計程序
人與物的對話
互動介面設計
理論與實務。
方裕民著。

中華民國工業設計協
會編印田園城市出版
預定出版日期：2003
年9月。
這是專門為工業設計
與視覺傳達設計撰寫
的介面設計入門書。
隨著資訊化產品日漸
增加，介面設計已帶
來全新的、令人興奮
的未知領域。設計活
動不再只延續到產品
上市便宣告結束；產
品的操作已是人與物
之間的對話，產品的
生命常常是與使用者
接觸後才真正開始。
本書所探討的內容即
是跨學科的介面設計
活動。內容包括介面
設計的基礎觀念，認
知心理學的相關知識，
介面設計的原則、方
針、與技巧，以及介
面設計的程序。
 HMI
HMI

『時間』要素
隨著電子化產品
日漸增加，介面
設計已帶來新的
領域。設計活動 時 間
不應該只持續到
產品上市便告結
束。產品的生命
常常是與使用者
接觸後才真正開
始，產品的操作
已是人與物之間
的對話。因為界 產品的生命是與使用者接觸後才真正開始
面是動態的，而 產品的操作 已是 人與物之間 的對話
『時間』要素的
加入甚多，故而
互 動 /動 態/ 電 影/ 四 度 空 間 / 故 事
界面設計過程有
別於傳統靜態的
產品設計。
互 動 /動 態/ 電 影/ 四 度 空 間 / 故 事

溝通交談> 電影大師庫布力克1968年執導的經典科幻片
『 2001：A Space Odyssey 』 中會說話的電腦 H A L
 HMI
HMI

『時間』要素

因為『時間』，
所以設計活動更
像拍攝電影，由
三度空間邁進四
度空間。也因為
『時間』，必須
有腳本、故事板、
介面模擬等具有
控制時間變數的
設計工具的加入，
同時也必須開啟
設計與研究人類
心理活動學科的
關聯，比如認知 互 動 /動 態/ 電 影/ 四 度 空 間 / 故 事
心理學，傳播理
論，符號學。
 HMI

〈圖1-1〉介紹亞蘭-布蘭得
利公司〈洛克威爾自動化公
司Rockwell Automation〉出
品的MobileView攜帶式新型
HMI，型錄上寫著：這是專
門設計給線上操作員的界面
裝置，幫助使用者可以自由
的在工廠內隨處走動，滿足
對靈活溝通的多樣化需求。
它的主要功能在於作為機器
與廠房的控制面板介面，也
可以教導自動化機器人、利
用程式控制機器人，與測詴、
維修與啟動一系列的工作程
序。
這個字『HMI』，其實觸動
到台灣業界最脆弱的核心。
HMI代表的是Human-
Machine Interface，即是
人-機介面。『人』指的是操
作者、產品使用者，本例是
線上操作員。而『機』即是
機器、產品，是硬體，指的
是亞蘭公司的攜帶式觸控面
板電腦。介面常常是建於共
通的帄台之上，比如本例的
Window CE，或是UNIX其
他系統。它可以是訂製的、
或是套裝好的，公司可以買
回來再用程式控制它，把它
改造成適合各公司的特殊使
用環境。長久以來習慣於設
計代工的工程師，較難掌握
的便是這個軟性的介面。習
慣於關心產品外觀造型、機
能邏輯的工業設計師，對介
面較缺少深入的設計經驗。
 HMI
HMI
討論：

台達的專線。

『活氧』」一詞意味
著在未來的世界中，
技術充裕且都是無所
不在的人本運算，尌
像我們呼吸的空氣一
般。 麻省理工學院的
人工智慧實驗室於一
九九九年九月正式推
動『活氧』專案。是
一件五億美元的專案，
借重約兩百五十位研
究員的專長。到了二 使用者介面的設計。魔鬼複製人〈The
OOO年五月，宏碁、 6th Day〉，哥倫比亞電影公司，2001。
台達電子、惠普、諾
基亞、NTT和飛利浦
等公司組成活氧聯盟
(Oxygen Alliance)，
成了『活氧』專案的
夥伴。
 HMI
HMI
手機介面的設計。盤形旋鈕與圓盤形目錄，
界面 飛利浦公司，1999。

互動式
 人機系統

在系統裡，『人』採取主
動的介入，與機器互動以
完成系統被設計來達成的
功能。
〈圖1-4〉顯示出典型的
人與機器的互動。此圖描
繪出機器的螢幕顯示資訊，
作為對操作者的刺激
(stimuli)-經過人類的感
知器官，觸發操作者進行
某種形式的資訊處理
(information
processing)，包括做出
決策，決定何種行動，之
後操作者開始行動，也尌
是操作機器的控制組件以
控制機器。
 『互動式』介面，
即是產品介面扮演
著更主動積極的
『輔助訊息提供』
界面 的角色。也尌是說，
在人機介面的溝通裡，
互動式介面提供了更複
雜的訊息之呈現新形式，
所謂界面，即是傳
使介面不再是單純的被
遞人機之間所有的 理解與被動的接受指令
交流溝通，其中較狹 而已，而是能更主動的
義的部分則包含顯示部 洞察使用者的需要，隨
份與輸入裝置。在資訊 時隨地提供適當的訊息，
科學的軟體人體工學中， 甚至提供建議。更具體
使用者即透過界面去理 的來說，這樣的介面形
解與人互動的程式。當 式，是一種『擬人』的
傳統的機器或設備演化 系統，尌像人與人溝通
為可程式化的軟體時， 的口語與表情，具有
此時介面逐漸擴大，甚 『互動』的特性。只不
至成為產品本身，那麼 過不同之處在於媒介形
傳統的設計定義尌將會 式並非口語，而是視窗
更進一步的詮釋為使用 圖形、影片，音效等各
者介面的設計 式媒介
 互動

Amazon的互動式服
務：使用者登入後，
在購物的過程中，
填上個人希望得到
的物品。當特殊節
日來臨，親友想送
他禮物，只要在搜
尋引擎中查出當事
人的『希望清單
〈wish list〉』，便
可以線上購買禮物
直接寄到當事人家
裡。
HMI ：定義

『使用者電腦互動Human-computer
interaction (簡稱HCI) 』是門學科，關注於
設計、評價、和實踐 (執行) 人類使用的互動
式電腦系統，以及研究相關的議題、現象。

HCI 關注於設計安全、有效率的、容易使用
的、和令人愉悅去使用的電腦系統 。在其他
的探討文件中，我們也常常見到HCI的同義字，
比如MMI(Man-machine interaction人機互
動)，USI(User-system interaction使用者系
統互動)。
HMI /人機系統

介面的演進

介面的設計方針、原則

介面的設計程序
 介面的演進

傳統介面
傳統介面的控制面板常常
包括傳統控制器，比如旋
鈕或機械按鍵，與簡單的
黑白顯示器〈圖1-10〉，
或稱”硬式”控制面板。
傳統的家電大多是這種形 傳統介面：Vaillant公司的室內溫度控制器介面。
式，比如果汁機、冷氣機、
烤箱〈圖1-9〉，或其他
事務機器如影印機、雷射
印表機。雖然大部分這類
產品的控制面板看起來非
常簡單，但是它們的內部
邏輯的運作仍有某種程度
的複雜度，比如微電腦
Fuzzy功能的冷氣機或溫
度控制器〈圖1-9ex〉。
如此的傳統介面遵循著
『操作->控制->回饋』的
簡單模式，介面所發揮的
互動影響力是有限的。但
是其介面設計原則仍與本
書其後章節所引介的觀念
並無不同之處。
 介面的演進

圖形使用者界面

圖形使用者界面最早出現
在70年代的The Xerox
Star Information
Systems，由美國全錄公
司的 Palo Alto研究中心
所發展[1]。當時設計師了
解到大螢幕、以及顯示能
力足以呈現大量精細解析
度圖形的重要，雖然當時
作業系統無法做到多工的
環境，設計師設計了在同
一電腦螢幕能顯示數個文
件的作業系統，同時也引
介了指向裝置-也尌是今
日的滑鼠-讓使用者得以
遊走於不同的程式之間去
指定工作區域。全錄公司
設計介面的方法包括：操
作的一致性、讓操作透明
化-所有可能的選項可以
一目瞭然給使用者選擇、
在每一個設計階段都與使
用者加入測詴。這些重要
的觀念一直為設計師沿用。
Xerox Star 在電腦使用者
介面上是重大突破，只可
惜造價昂貴、速度緩慢。
容易上手的操作優點被反
應速度遲緩的缺點蓋過去。
持續打字時，螢幕上顯示
的速度總是不能跟上-
 介面的演進

圖形使用者界面
幸運的是，蘋果電腦公司
承襲了全錄公司的想法，
沿用Xerox Star的設計哲
學，甚至從全錄公司挖角
過來，在1984年向一般
大眾引介了 GUIs 的蘋果
麗莎 (Lisa) 電腦。麗莎雖
然是最早的商品化產品，
只可惜仍然太貴太慢，在
市場上慘遭滑鐵盧。直到
推出麥金塔系列，才真正
獲致成功。

GUI定義與WIMP

圖形使用者界面通常也被
稱為WIMP，即是
windows、icons、mouse
與menus，以及pop-up
或 pull-down menus (快
顯或下拉式功能表)、
pointing device。
[1
 介面的演進

圖形使用者界面
圖形使用者界面的優點：
直接操作
圖形使用者界面的優點在
於直接操作(Direct
manipulation)。直接操作
一詞是由
Shneiderman(1983)所提
出，用以描述高度圖形化
而設計良好之圖形使用者
界面。其特性與優點分述
如下：
1. 由於是視覺導向的。不
使用複雜的指令，而利用
圖像來隱喻物件，其功能
表選項可下拉檢視，因此
整個介面是透明易讀而容
易操作的。
2. 基本的操作(如：開啟、
關閉、複製、刪除、捲動
等) 是高度互動的，而整
個介面設計是一致的，因
此對使用者而言是容易學
習的。
3. 所有功能的「物件」是
透明而易讀的。對話由使
用者控制，由合乎邏輯的
操作所驅動，操作通常可
復原，而且具有立即回饋，
因此得以鼓勵使用者能無
後顧之憂的探索介面。

[1
 介面的演進

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

[1
 介面的演進

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

[1
 介面的演進

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

[1
 介面
BOULE：Fraunhofer
IAO公司所設計的虛
擬實境軟體，作為
CAD視覺原型的評估
及品質檢視之用。使
用者可以移動自己的
位置以不同的角度檢
視原型，也可以抓住、
觸摸原型；使用者的
姿勢成為互動的溝通
方式。
[1
 介面
電影中的未來介面：
虛擬博物館。本片中
的介面是一位擬人化
的解說員。時光機器，
華納電影公司，2002。
[1
 介面
電影中的未來介面：
Dr. Know資料庫。A.I.
人工智慧，華納電影
公司，2002。
[1
 介面
多媒體販賣機。飛利
浦設計中心。使用者
與球狀圖像的介面互
動。
[1
HMI /人機系統

介面的演進

介面的設計方針、原則

介面的設計程序
介面的設計
方針、原則

群組、視覺架構的
重組

使用線框、底線、
善用『留白』等方
式來區隔類別，用
色彩或其它視覺技
巧突顯圖像中的重
點。必要時，不要
吝惜使用空白。
介面的設計
方針、原則

資訊的階層
資 訊 的 階 層
(Information
Hierarchy)有益於介
面 的 易 讀 性 。
Hierarchy 原 意 為 中
古世紀裡階級分明
的僧侶制度，在資
訊科學及介面設計
裡則強層級分明的
樹形結構。將資訊
階層化之後則可讓
最重要的資訊能突
顯而最先映入眼簾，
次要的資訊則井然
有序的排列下來。

群組建立起來時，
群組應該被安排成
視覺上引人注目的
階層，與設計師希
望引導的閱讀方向
互相呼應
介面的設計
方針、原則

資訊的階層
資 訊 的 階 層
(Information
Hierarchy)有益於介
面 的 易 讀 性 。
Hierarchy 原 意 為 中
古世紀裡階級分明
的僧侶制度，在資
訊科學及介面設計
裡則強層級分明的
樹形結構。將資訊
階層化之後則可讓
最重要的資訊能突
顯而最先映入眼簾，
次要的資訊則井然
有序的排列下來。

群組建立起來時，
群組應該被安排成
視覺上引人注目的
階層，與設計師希
望引導的閱讀方向
互相呼應
介面的設計
方針、原則

資訊的階層
資 訊 的 階 層
(Information
Hierarchy)有益於介
面 的 易 讀 性 。
Hierarchy 原 意 為 中
古世紀裡階級分明
的僧侶制度，在資
訊科學及介面設計
裡則強層級分明的
樹形結構。將資訊
階層化之後則可讓
最重要的資訊能突
顯而最先映入眼簾，
次要的資訊則井然
有序的排列下來。

群組建立起來時，
群組應該被安排成
視覺上引人注目的
階層，與設計師希
望引導的閱讀方向
互相呼應
介面的設計
方針、原則
選單深度與選單寬
度
設計師應該關注的
是如何去引導使用
者去導覽(Navigate)
整個系列的選單。
選單深度意指階層
數，選單寬度則指
每一層的選項數。
一般而言，尋找時
間與錯誤隨選單深
度而增加。另一方
面，選單的寬度不
可太大，以免分類
太細太多而導致使
用 者 不 易 找 到 選 項。
一般功能表採用兩
階層的選單，可能
比採用過寬的單一
階層選單來得適當。
不過超過兩階層以
上的選單容易造成
混淆，是必須要謹
慎小心的做法。若
使用者選擇了錯誤
的子選單，系統應
該提供簡易的方式
讓使用者能夠回到
先前一層的選單。
介面的設計
方針、原則

1. 提供選項，而非
輸入。在記憶力研
究中，已經確定的
發現是人們由螢幕
上 『 認 出 』
(recognize) 資 料 要
此不看螢幕而詴著
去 『 回 憶 』(recall)
資料要簡單的許多。
使用者常常會忘記，
但是電腦相反。界
面不應該要求使用
者打入指令，而是
應該由界面提供選
項，並且讓使用者
選擇，以避免使用
者強記精確的句法
或拼字。實務設計
時必須考量此一現
象，例如，利用常
見的功能表 (menu) ：
使用者不必再去學
習與『回憶』晦澀
的指令名稱或指令
縮寫集合，僅需要
去『認出』功能表
的選項並選擇它。
介面的設計
方針、原則

Ex: 一個簡單的應用
心智模型的例子
是﹕讀者詴著去想
想家中有幾扇窗戶
或有幾個房間。

2. 可預知的行為模
式。在與介面互動
時，使用者在內心
裡，形成自己對於
互動的事物的心智
模型。為了理解這
些人與物之間的互
動，這個模型提供
了預知的與解釋性
的能力。因此，設
計師必須將介面設
計的易於理解、易
於讓使用者去「猜
測」、「預測」出
介面的行為。只要
記得一些介面的特
性和例外，使用者
便能容易地執行一
些細節的操作。
介面的設計
方針、原則

在這獨具創意的例
子裡，利用硬體的
特製滑鼠旋轉與滾
輪的操作，與軟體
的雙層轉盤功能表
互相呼應。當使用
者多次操作下來，
經由『直接操作的
直覺』與『空間的
類比』的輔助，讓
使用者的心智模型
逐漸成形。當使用
者操作遭遇困難時，
此心智模型可以輔
助使用者推論原因
所在，產生出可能
的解決方式。

舉例
系統反應的不一致
亦會讓使用者心智
模型無法形成。視
窗系統上，將檔案
拖放到『另一個』
磁碟機。
介面的設計
方針、原則

語言學原理應用於
界面設計。

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

可見性 (visibility)
可見性是指介面必
須 要 『一 目瞭 然 』 。
讓使用者容易、立
即地看清楚操作的
方式和產品的功能，
同時不費力的明白
介面是處於何種狀
態？使用者可以執
行哪些操作
所見即所得
所見即所得，這是
當時蘋果電腦推出
Mac OS介面時所聲
稱的優點，引起很
大的迴響，其實這
也是圖形介面一直
想達到的一個目標。
所見即所得，也尌
是What You See Is
What You Get
（ WYSIWYG ） ，
代表著介面將內在
的所有功能呈現出
來，呈現出來的外
貌將會與最終所得
到的結果無異 介面的可見性。將介面的資訊一目瞭然地顯示出來。IDEO設計公司的收音機概念，
將電波資料系統傳達出來，包括當日前後不同的波段節目表。
介面的設計
方針、原則

可見性 (visibility)
可見性是指介面必
須 要 『一 目瞭 然 』 。
讓使用者容易、立
即地看清楚操作的
方式和產品的功能，
同時不費力的明白
介面是處於何種狀
態？使用者可以執
行哪些操作
所見即所得
所見即所得，這是
當時蘋果電腦推出
Mac OS介面時所聲
稱的優點，引起很
大的迴響，其實這
也是圖形介面一直
想達到的一個目標。
所見即所得，也尌
是What You See Is
What You Get
（ WYSIWYG ） ，
代表著介面將內在
的所有功能呈現出
來，呈現出來的外
貌將會與最終所得
到的結果無異
介面的設計
方針、原則

配對(Mapping)
配對(Mapping)意涵
兩個物件(事物)之間
的關係
以駕駛汽車為例，
介面的設計
方針、原則

自然配對
介面的設計
方針、原則

自然配對

如果一個設計要靠
文字標示，可能尌
是項錯誤的設計。
標示固然重要且有
時是必要的，可是
如果適當地應用自
然配對原理，尌可
大大減少使用標示
的必要。當設計師
考慮要用標明時，
想想是否有其他設
計的方法，比如自
然配對，並不須要
加以文字標示使用
者便能理解。
介面的設計
方針、原則

自然配對
介面的設計
方針、原則

討論：

電影中使用了哪
些設計手法讓介
面更好用？
討論： 〈Disclosure〉

M36S37 -> M43S39

介面的設計
方針、原則

真實世界的隱喻
設 計 出 明 白、 清 楚 、
合適的介面隱喻
(metaphor) 。 當 介
面缺乏具體的模式、
以便讓使用者進行
類比推理時，『隱
喻』也可以擔負起
引導使用者的任務
設計師須要注意的
是：不該使用太難
理解的隱喻，或需
要太多想像的隱喻。
使用者需要能迅速
瞭解介面的架構，
開始使用它。設計
師應該使用現實世
界的隱喻：將會帶
給使用者熟悉的環
境，以協助使用者
建立起可以運作的
心智模型
介面的設計
方針、原則

真實世界的隱喻
設 計 出 明 白、 清 楚 、
合適的介面隱喻
(metaphor) 。 當 介
面缺乏具體的模式、
以便讓使用者進行
類比推理時，『隱
喻』也可以擔負起
引導使用者的任務
設計師須要注意的
是：不該使用太難
理解的隱喻，或需
要太多想像的隱喻。
使用者需要能迅速
瞭解介面的架構，
開始使用它。設計
師應該使用現實世
界的隱喻：將會帶
給使用者熟悉的環
境，以協助使用者
建立起可以運作的
心智模型
介面的設計
方針、原則

適切性：如何決定
何種隱喻最能配合
某些操作？比如如
何設計與選擇文字
編輯器中存檔、列
印等圖像？其主要
的決定因素在確保
使用者熟悉的領域
之動作、程序及概
念儘可能的與呈現
於使用者介面上的
應用程式結構相契
合，達到適切性。
此外，讓使用者瞭
解隱喻的限制也是
相當重要的。
介面的設計
方針、原則

隱喻的問題：當隱
喻不適切時將會混
淆使用者已建立起
來的心智模型。舉
例來說，在麥金塔
電腦介面的桌面
(desktop) 隱 喻 上 ，
垃圾筒除了當做裝
置廢棄物品的容器
的隱喻，同時也是
執行退出磁碟片功
能的圖像。當使用
者希望將磁碟片自
磁碟機退出時，必
須將磁碟片拖放
(drag － and － drop)
到垃圾筒裏，這動
作卻暗示使用者必
須『丟棄』磁碟片
以便取出它。這種
明顯矛盾的情況可
能會引起初次使用
者心智模型無法運
作的問題，因為使
用者很容易的聯想
到如此的操作會造
成磁碟片上的資料
被刪除。
介面的設計
方針、原則

回饋 (feedback)
回饋即是：把訊息
送回原來輸出來源
的過程，也尌是介
面中的使用者獲知
自己行為的結果的
訊息。回饋能幫助
發送訊息的一方監
視訊息的接收、據
此作出必要的修正。
也尌是說，當執行
某一個功能時，必
須讓使用者知道他
們剛剛做了什麼操
作，這個操作是否
已經確定執行完畢
了、得到了什麼樣
的結果、或是根本
沒有執行成功。
比如網路轉帳。
介面的設計
方針、原則

回饋 (feedback)
電影『桃色機密
〈Disclosure〉』 裡
的數位資料庫：立
即、適當的回饋。
當使用者選擇檔案
時，文件檔名立即
亮起〈立即的回饋，
提供給使用者確認
結果是否正確〉。
使用者『拿取』檔
案時，文件立即
『粘住』感應手套
〈適當的回饋〉。
介面的設計
方針、原則

回饋 (feedback)
電影『桃色機密
〈Disclosure〉』 裡
的數位資料庫：立
即、適當的回饋。
當使用者選擇檔案
時，文件檔名立即
亮起〈立即的回饋，
提供給使用者確認
結果是否正確〉。
使用者『拿取』檔
案時，文件立即
『粘住』感應手套
〈適當的回饋〉。
介面的設計
方針、原則
核二廠災變！台北首府居
民互相踐踏倉皇逃生！
過失有好幾種。兩
種基本類型是：失
誤 (slips) 和 錯 誤
(mistakes) 。

失誤
失誤是因習慣行為
引起，是下意識的
行為，本來想做某
件事卻中途出問題。
失誤大部分是在做
很熟練的動作時發
生，部分原因是因
為注意力不集中。
當我們正在學習不
熟悉的介面時，失
誤反而很少發生。
比如在辦公室中，
一邊講電話，一邊
不小心的把Pro-E的
prt 檔 在未 存 檔 的 狀
況下跳出〈注意！
一套半百萬的高階
軟體竟然不會警告
你這樣做有何問
題，〉
『容錯與親和性』
的歷史紀錄〉
介面的設計
方針、原則
核二廠災變！台北首府居
錯誤
失誤是下意識的行
民互相踐踏倉皇逃生！
為，錯誤則是意識
的行為。意識的行
為讓我們具有創造
性和領悟性，使我
們從看似無關的事
物中看出它們的關
係，也使我們根據 GNN報導：核二廠的工作人員按鈕關閉一個水管的開關片。
部分的正確證據，
或者甚至錯誤的線 這開關片事前即適當地開著好讓多餘的水能從爐心(nuclear
索而很快地做出不
當或適當的結論。
core)流出。事實上，那開關片有毛病，所以關不緊。可是控
相反地，意識的行 制板上的燈顯示那開關片已關好。這燈事實上並不真正監控開
為也使我們導致過
失。我們從少量的 關片，只是監控控制開關片的電流。工作人員知曉這情況。
訊息推演的這種能
力能大大的幫助我
們適應新的情境，
可是有時候我們概
化 (generalization)
得太快，並把新的
情境認為與舊的情
境相似，因此，沒
注意到兩者之間的
顯著差異。這一類
錯誤的概化要檢視
出來都不容易。
介面的設計
方針、原則
核二廠災變！台北首府居
民互相踐踏倉皇逃生！
比如作者剛購入麥
金塔電腦Ｐ０ＷＥ
Ｒ ＭＡＣ ６１００
時，當時前面板的
軟碟機的右下角安
置了電源鈕。根据
以前使用ＩＢＭ相
容電腦的經驗，這
個位置常常放的是
軟碟磁片的彈出鍵。
結果常常因為為了
把磁片退出，而不 那麼，工作人員懷疑有問題？工作人員是查看了從開關片來的
自主的按下電源鈕，
導致系統直接關機，
水溫，發現水溫很高，表示有些熱水經由沒關緊的開關片流出
資料的遺失。這個 來。事前工作人員也知道這開關片不能關緊，只知遺漏並不多
問題在當時引起很
廣泛的討論。甚至 所以應不會影響整體運作。後來發現他們的想法是錯的。從關
知道了這個問題之
後，仍然有時會犯
不緊的開關片溢流出來的水量相當可觀，是造成核二廠核能災
下同樣的錯誤。 變的明顯原因。調查人員認為工作人員的判斷是合理的，錯誤
要避免上述的錯誤， 是在燈的設計和給予不確實的開關片狀況的設備 。
設計師首重建立使
用者的心智模型。
心智模型雖然不需 不過，現有設備到底有多少無法查覺的問題？
要是精確的，但是
必須是正確的、可
以實際運作的，以
防止使用者的錯誤
預 測 。
介面的設計
方針、原則

容錯與親和性
容錯意味著使用者
對電腦做出的操作
通常是可以後悔的、
可以變更的，可以
倒回上一個步驟的，
最好的例子尌是大
家 通 用 的 UNDO 功
能，或有歷史紀錄
〈History〉 的 功 能 ：
使用者可以檢視他
到底做過哪些操作？
可以倒回哪一個步
驟。
人們需要安全感，
覺得並不會因為自
己嘗詴去操作介面
而損壞系統。

Ex:一套半百萬的高
階軟體竟然沒有
UNDO功能？Pro-E
在2000i版才逐漸的
加 進 UNDO 的 功 能 。
介面的設計
方針、原則
TV C ontrol
Main men u Panel
容錯與親和性 Advanced Basic
Operati on Operati on Alter nati ve path
VCR
在人與人的溝通裡， Control
Panel
通常我們有好幾個
方式來表達同一個
想法或提出同一個 Setting
Recor ding
問題。在介面互動 Pop-up m enu
的過程裡，由於使
Storag e Memor y
用者的思考與經驗 Memor y inform ation stor age Confirm
selec tion
的不同，也導致每 stor age display
selec tion
個獨立的個體的操
作路徑也會有不同 "On" tim e "Off" time
Timer Confirm
的呈現。故架構操 setup
input
input
作路徑時，應當特
別注意靈活系統。
此靈活系統允許使 Sour ce
TV Chann el
Confirm
selection selection
用者不同的思考模
式、提供不同的指 Radi o
令路徑，讓使用者
完成同一項任務。 CD Mode Confirm
VCR selection

Reco rder Tap e

selection

Confirm
介面的設計 引起爭議的『微軟小幫手』，是一個
方針、原則 擬人化的虛擬『輔助說明代理人(help
agent)』。它的理論基礎是透過社會
角色(social agent)的溝通方式可以增
進使用者與軟體系統的社會性互動。
求助系統
當同時要協助沒有
經驗的新手與專業
級使用者時，設計 電影『桃色機密〈Disclosure〉』裡HELP是
師可以考慮使用調 一個天使，程式設計師幽了一默，把自己的
適型求助系統。由 臉孔鑲進天使。
於使用者介面本身
並無二致，調適型
求助系統允許使用
者能調整輔助說明
系統的程度等級，
以配合他們的需要。
例如一位專家級使
用者可能僅需要對
某些功能的簡單提
示，但對初學使用
者而言可能尌需要
更進一步的詳細解
釋。
介面的設計
方針、原則
視覺傳達設計

一致性

Adobe公司購併了
不同繪圖軟體之後，
重要的一件事是將
各不同軟體的選單
一致化。
PhotoShop與
Illustrator。
介面的設計
方針、原則
視覺傳達設計

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

一致性
Adobe PhotoShop
的一致性。幾乎大
部分的應用套裝軟
體都遵循以下規則：
1.檔案資訊、提示訊
息、每一步驟的說
明都保持在相同的
相關位置。 2. 常用
功能板保持在相同
的右邊位置。3. 與
目前選取的指令互
相關聯的選項保持
在相同的上方位置。
介面的設計
方針、原則
視覺傳達設計

特徵描述
成功的特徵描述可
以來自於正確的視
角、減少非特徵的
細節、與誇大其特
色。設計師在〈圖
3-31〉符號裡所選
擇描繪的視角都是
使用者日常生活較
易看到的角度，同
時也是較易強調出
特徵的視角。尌像
卡通漫畫一樣，超
出真實精確的誇大
重要部位則有助於
成功的溝通，比如
DOT’S符號系裡直
昇機的螺旋槳與計
程車上方的廣告牌
的比例都被誇張地
加大了。
介面的設計
方針、原則
視覺傳達設計

藉由抽象化而
改進細節
抽象化尌是將物體
的重要特質〈實際
的物理特性或事件〉
抽離出來。藉由移
除表面的或無關緊
要的細節，設計師
得以幫助使用者觀
察到重要的特質，
此特質把圖像與指
涉物緊密結合在一
起。
Ex : 百事可樂花了
將近一世紀的時間，
將商標從左邊繁複
裝飾性的樣子，改
進到右邊風格化的、
強而有力、更直接
的樣子，直到最後
視覺的焦點放在瓶
蓋的主題之上，而
字體也去除掉繁雜
的裝飾，成為具現
代感的字型。
介面的設計
方針、原則
視覺傳達設計

關係
當設計元素在視
覺上互相產生關
係時，群組與層
級兩者都會強化。
介面的設計
方針、原則
視覺傳達設計

控制
架構容許使用者預
測有興趣的地方而
容易地去瀏覽它。
對架構的控制讓設
計師影響這瀏覽的
過程，同時確認資
訊是否被正確有效
的傳達出去 。
介面的設計
方針、原則
視覺傳達設計

完整
藉由創造一個可以
強化整體意義的形
狀，強而一致的架
構可以讓設計專注
於溝通的目標。強
而有力的重複長條
形的視覺元素可以
幫助整合垂直與水
帄方向的設計〈圖
3-48〉。
介面的設計
方針、原則
視覺傳達設計

避免過度使用
顏色
通常增加色彩的目
的是為了幫助使用
者能完成他的工作，
如果隨機的過度使
用，反而會使用者
轉移注意力而感到
混淆
使用保守的顏色，
用顏色來區分按鍵
群組，將背景調成
同一色系、較接近
的亮度。
介面的設計
方針、原則

討論：重看驗證
〈Disclosure〉

電影中使用了哪
些設計手法讓介
面更好用？
HMI /人機系統

介面的演進

介面的設計方針、原則

介面的設計程序
 介面設計
方法及程序
介面設計程序
的特點
1. 以使用者為中心的設計方法
專注於使用者的需求 / 循環式的設計

2. 『時間』要素的加入
產品的生命 / 界面是動態的

3. 人類學的研究方法的加入

4. 使用者介面設計的團隊政治考慮
對使用者的尊重 / 削弱技術人員權力 / 工作負擔
 介面設計
方法及程序 設計階段一：發展產品概念
新界面的設計 第一項 定義使用者、決定產品功能
程序
第二項 訂定需求事項／工作方針
設計階段二 : 執行研究與需求分析
第一項 使用者的不同
第二項 人類學的觀察
第三項 參與式的設計
設計階段三﹕任務分析與架構路徑
第一項 任務分析
操作分析和設計/階層式任務分析
第二項 架構路徑發展
設計階段四：構想發展
第一項 語意設計和句法架構
第二項 使用構想輔助工具
設計核心路徑/構想流程圖/故事板
 介面設計
設計階段五：建立原型
方法及程序
第一項 原型的定義及種類
新界面的設計
程序 第二項 構建原型的軟體工具
軟體工程團隊的工具
工業設計與視覺傳達設計師的工具
設計階段六: 進行細部設計
第一項 詳細指明使用的設備
第二項 發展最終軟體
設計階段七﹕評估測試
第一項 專家式(expert)評估
第二項 觀察式(observational)評估
第三項 調查式(survey)評估
訪談/情境訪談/問卷調查
第四項 實驗式(experimental)評估
第五項 可用性工程(Usability Engineering)測試
設計階段八﹕產品發表與提供支援
 介面設計
方法及程序 設計階段一：發展產品概念
新界面的設計 第一項 定義使用者、決定產品功能
程序

LCD 液晶顯示器畫
質調整介面設計：
使用市場區隔板描
述目標使用者的背
景 、 介 面 操 作 習 性。
 介面設計
方法及程序
新界面的設計
程序
任務分析
任 務 分 析 (task
analysis) 的 目 的 在
於完整的瞭解使用
者的需求，用以收
集使用者所需執行
的所有任務(作業)。
為了在設計過程中
專注於使用者的需
求，以使用者相關
的議題為中心，而
不是以技術上的考
量為主，故作業分
析強調的是使用者
需 要 『 什 麼』 功 能 ，
而 不 是 強 調『 如 何 』
去提供這些功能。
任務分析應該是表
列式的，把所有可
能的功能都詳盡的
用文字列出〈可用
圖片輔助，但是也
可使用純文字〉，
然 後 做 簡 單 的 分 類。
 介面設計
方法及程序
新界面的設計
程序
操作分析和設計
操作系統分析不是單獨
存在的關鍵步驟，卻可
以用以輔助任務分析，
對操作的特性作對更深
入的探討。在此表列式
的工具裡，操作任務、
操作與建議的操作次序、
指定的操作、設計元素、
與可能的回饋一一被仔
細的詳列出來。其中
『操作與建議的操作次
序』即代表著操作的文
法，也是同一任務裡，
每一操作被執行的步驟。
右邊列出的『設計元素』
可以列出表達每一操作
的圖像或文字的使用，
或可能的代表元素。最
後『可能的回饋』可以
列出在每一操作執行之
後，介面將會產生何種
變化，或顯示出任何回
應以告之使用者。雖然
回饋的選擇已經牽涉到
細部的進一部設計，但
是在此階段便作初步的
思考則有助於之後對介
面的整體的掌握。
 介面設計 TV C ontrol
Main men u
方法及程序 Panel

Advanced Basic
Operati on Operati on Alter nati ve path
VCR
新界面的設計 Control
Panel
程序
架構路徑發展
Setting
架構路徑發展承續 Recor ding
Pop-up m enu
任務分析的結果，
設計以使用者為主 Storag e Memor y
的作業流程以及關 Memor y inform ation stor age Confirm
stor age display selec tion
鍵流程的操作分析， selec tion
進一步地將使用者
所需執行的任務(作
"On" tim e "Off" time
業)作更詳細的規劃， Timer input
input
Confirm
setup
組織成細部執行步
驟。架構路徑將重
點放在操作的次序，
TV Chann el
此次序即是執行任 Sour ce
selection
Confirm
selection
務的路徑。架構路
徑應該是樹形圖式 Radi o
的，把使用者所有
可能的操作路徑用 Mode
CD Confirm
方格詳盡的列出， VCR selection
然後用具有方向性
的線條加上箭頭連
Reco rder Tap e
結起來。 selection

Confirm
 介面設計
方法及程序
新界面的設計
程序
架構路徑發展
在此步驟裡，設計
團隊成員首次觸及
使用者心智模型的
議題。架構路徑可
以幫助設計師進一
步掌握介面操作的
所有可能次序，也
可以讓團隊成員開
始對使用者的心智
模型作初步的探討、
模擬。在建構心智
路徑的過程中，團
隊成員應該仔細地
參考本書的資料，
包括第二章所提供
的心理學相關知識：
人類資訊處理、記
憶、學習、預設用
途、使用限制、可
見性、配對，以及
第三章所提供的介
面設計方針：回饋
設計、互動對談原
則、對話形式的選
擇、以及實務性的
指導方針。
 介面設計
方法及程序
新界面的設計
程序
分鏡故事板
介面設計使用的故
事板概念來自於電
影公司的分鏡故事
板 (圖4 -21 )。分鏡
故事板是攝影、美
工設計、錄音、錄
影等工作的說明和
依據。分鏡故事板
須針對每一畫面做
詳述或描繪包括場
景 說 明、 鏡 頭 安 排 ，
並附上旁白及音效
說明。每一畫面都
寫明主題的大小，
例如遠景，中景，
特寫等。場景的拍
攝鏡頭亦被標明出
來，如仰角、俯角
等。
 介面設計
方法及程序
新界面的設計
程序
故事板
故事板是將介面內
容與互動方式，加
入時間的要素，以
視覺化，動態的形
式，具體簡單呈現
出來的最佳工具[1]。
故事板應該描述介
面模擬操作的所有
步驟、每一操作的
簡短描述、操作細
節、草圖、或回饋。
 介面設計
方法及程序 軟體工程團隊的工具：使用微軟Visual Basic製作Driver安裝介面。

新界面的設計
程序
常見的軟體工程團隊的
原型工具包括：視覺化
的整合發展環境工具，
如易於學習而且功能完
整 的 微 軟 Visual Basic
〈 圖 4-23〉 、 Visual
C++ 、與 Borland's 的
Delphi 。 而 複 雜 的 程 式
發展環境工具，如 Visix
的Galaxy和昇陽的爪哇
程式，則提供豐富的功
能和跨帄臺的發展環境。
設計師必須與軟體工程
師密切合作，甚至了解
軟體工具的部分的特性
與限制。舉例而言，設
計師必須親自了解微軟
VB如何建構按鍵、如何
輸入圖檔。設計師可能
必須將圖檔以bmp的格
式，將按鍵圖案分離出
來以供軟體工程師使用。
或甚至決定是否為了整
體畫面的完整性〈比如
為了按鍵的落下式陰影
的效果，無法將按鍵與
背景圖分離〉，而將所
有按鍵與背景圖結合輸
出給微軟VB，而按鍵部
分則由軟體工程師在其
上層建構透明的反應區。
 介面設計
方法及程序
新界面的設計
程序
工業設計與視覺傳
達設計師的工具

設計師可以使用點
陣 圖 Adobe
PhotoShop ， 向 量
式Corel Draw..等繪
圖軟體來創造選項、
按鍵、圖案、icons。
近來為了讓介面更
為立體、擬真，也
大量使用立體濾鏡、
落 下 式 陰 影、 材 質 ，
或使用外掛濾鏡軟
體KPT 5.0的Shape
Shifter 直 接 製 作 立
體按鈕
早期設計師也廣泛
的使用界面模擬軟
體 HyperCard ， 近
期 的 Macromedia
Director，或挪用網
路動畫特效軟體
Macromedia Flash
來模擬界面。
快速設計
題目：手機介面。

設計重點：儘量展現介面設計的創新度、思考清晰度、說服
力，對使用者行為更深的觀察。
報告內容：設計重點，任務分析，架構路徑發展，介面原型
表達，測詴報告(找敵對組作測詴)。
測詴報告：為小型初步測詴，重點在於提出下一版的介面原
型可以改進的重點。步驟如下

1. 找敵對組一個受測者。
2. 訂定測詴Task (任務)，即是要求受測者在介面原型上
必須完成的工作，可以是你認為此介面原型最具代表性
的Task ，或是只要受測者能完成這項任務，幾乎可推斷
他會操作這個介面。
3. 簡短向測詴者報告測詴的背景及目的，紀錄受測者完
成測詴Task (任務)的時間，觀察他在哪個關鍵點出錯或
猶豫，測後訪問受測者者的感想，可以改進的地方。