人機介面之設計

分為下列五點分別介紹：

縮小設計者與使用者認知之差異

人機介面可以決定電腦系統是否能具備可用性 (Usability)

人機介面之設計原則

如何開始設計一個人機介面

圖形使用者界面 (GUI) 介紹

　縮小設計者與使用者認知之差異：

設計者之認知模型直接地表達在人機介面中軟體的操作互動模型中，如果與使用者的認知模型不一致的話，介面所表達的意象很容易被使用者誤解，使用者因而無法了解電腦系統究竟如何反應他的命令，當然也就沒辦法預期電腦系統如何來反應他的操作，也就無法順利地找出達成目的的一種操作方法了。

設計者必須要清楚地掌握其各種使用者的個別差異，包括年齡、性別、認知及學習的習慣、經驗與知識、教育背景、文化等等因素，才能將使用者做適當的分類，針對不同族群的使用者，設身處地去了解他們的生活與工作，設法去縮小認知上的差異。

　

人機介面可以決定電腦系統是否能具備可用性 (Usability)：

一個電腦系統的終極目標是要輔助使用者完成其工作，因此從實用性的角度來看人機介面，是否可以讓使用者輕鬆地達成其工作目標就是衡量人機介面最清楚的準則，一般情形下對於人機介面是否可以使電腦系統具有較高的可用性，我們可以由以下列人機介面的特性來觀察：

a. 清楚性

i. 界面文字、圖示、語音、影像

ii. 功能列示

iii. 隱喻

上面三大類不管在表達上 (是否能夠吸引操作者的注意力，會不會很容易忽略它的存在。) 或是在邏輯思考上都必須很清楚。

b. 容易學習

通常包括熟悉度、單純性、一致性、容易預測等等特質，使用者必須知道他在操作的過程中該注意看什麼、該做什麼反應、什麼時候該反應、為什麼要這樣子反應，這些都是他必須很容易學到的，當然最好是不需要學就已經知道的。

c. 直接操弄

操作界面的直覺性很重要，盡可能地讓界面物件可以直接地被使用者操弄。

d. 操作簡單

不見得一定步驟少才叫做操作簡單，其實設計者的心智模型如果和使用者的心智模型一致的話操作就會簡單。

e. 多樣性、完善之功能

f. 健全之操作輔助，充足的樣本

g. 容易記憶或是不須記憶

適當的隱喻、與其他軟體界面一致、邏輯性完整、提供預設範例才能幫助使用者記憶，不要以為使用者只需要使用這一套系統而已，使用者可能常常需要在很多不同的系統中換來換去，如何使他見景生情? 自然地回憶起該如何操作?

h. 使用者設定 (Configurability)

容許使用者修改部份設定以儘量符合使用者個人的心智模型，讓使用者能夠更容易以系統的外觀或是邏輯來提醒他自己如何有效率地操作系統，增加使用者控制系統的感覺。

i. 使用者友善性

以使用者的邏輯來思考操作方法還是以設計者的邏輯來思考? 比如說把一個檔案拷貝到另一個相同檔名的檔案時，由系統的觀點來看我們知道原來的資料就不見了，但是由使用者的觀點來看，他一定覺得很不可思議，怎麼會把資料蓋掉了呢? 不是只是重疊在一起而以嗎? 一定可以再分開來吧!

j. 控制性

使用者必須掌控互動，所有系統的動作必須是源自使用者的動作，每一個系統的功能必須要很快速地達成，否則至少需要很清楚地告訴使用者目前的完成的百分比，使用者必須能夠中斷系統的任何動作，可以回復，系統不能隨便中斷使用者的動作

k. 資料安全性

l. 容許使用者犯錯

錯誤都是可以回復的

m. 界面彈性與適應性

人機界面是否可隨著使用者的狀況來調整?

n. 高效率

o. 低錯誤

p. 整體美感

q. 透通性 (transparency)

界面本身的表現不應該讓使用者由他的工作內容分心來注意，界面是讓使用者完全投入在他要完成的工作上。

　

人機介面之設計原則：

整體而言，人機介面設計的目標是希望讓使用者能夠選用此電腦系統作為他完成某一項工作的工具，要能夠使得使用者很容易學習，很容易上手，很容易掌控工作的進度或是資料的處理狀況，時時充滿使用此系統的動機，使得軟體與硬體能夠充分地與操作者進行適當的互動來提昇工作的效率、品質、與樂趣。

以下我們分為多個方向來討論一些客觀的設計原則：

應該要儘量具體化、生活化，不要使用太抽象的概念，儘量使用顯而易見的方式來表達資訊；

必須以使用者的角度及可能的生活經驗來觀看、模擬操作系統，避免以設計者自己的經驗來套用在使用者身上，盡可能以使用者的語言來表達資訊，來思考操作的動作；

盡可能提供預期發生的狀況，以供挑選使用者挑選，或是在使用者操作的過程中，提供使用者多種預設的範例以供使用者模仿學習或是複製，避免讓使用者在不熟悉電腦系統操作的狀況下又需要發揮他的創造力來完成他的工作；

在可以採用選項的地方儘量用選擇的方式來取代填空這種不特定答案的方式，如果一定要使用者填入資料的話，也應該有預設的範例來教導使用者填入正確的資訊，如此可以減輕使用者記憶和盲目猜測的負擔；

以所見即所得 (WYSIWYG, What you see is what you get) 的方式來設計使用者操作的流程，使用者每一個操作的動作都要顯示適當的回應 (feedback)，讓使用者知道系統正在處理他的要求，同時如果有任何部份的結果也最好以顯而易見的方式讓使用者能夠感覺 (看或聽) 到，讓使用者覺得電腦系統在他的掌控之下操作，避免使用需要很多電腦使用經驗的 "命令方式" 或是 "程式控制方式" 來設計使用者界面；

以往使用控制命令的方式來操作電腦系統最主要的使用者是專業性的使用者，例如電腦專家或是電腦操作員，其所考慮的重點是操作的便捷性，希望藉由適當專業性的指令記憶，來減少人與機器不必要之互動，以盡量利用電腦快速處理之特性，因此在設計人機介面時也應該要考慮到熟練的操作者的需求，可以在適當的地方讓操作者建立自己便捷的命令，錄製巨集 (Macro)。

在設計互動的操作方式時如果可以用生活化的譬喻來將參予動作的資料、軟體、或是硬體物件擬人化的話，也是能夠使操作者快一點進入狀況的方式，在這種方式當中，操作者就算是第一次使用此電腦系統，他還是可以用你所比喻的生活化動作之經驗來模擬操作，而不是全盤接受一個新的工作方式；

在一台電腦的各個應用系統中，盡量保持各個應用系統的使用者界面一致，包括電腦系統表達資訊的方式、和使用者互動的動態關係、第一眼的印象、使用者實際操作時所有的選項表達之方式、還有選項所代表之實際動作都應該保持一致，讓使用者的經驗模式可以盡可能地延續發揮，由操作其他系統的經驗能夠轉移來操作此系統，降低使用者生疏的感覺，加速使用者的學習，因此在現在大部分的電腦系統中都有所謂的標準化界面元件，應該盡量採用這些界面元件以維持使用者界面的一致性；

對於潛在的使用者，必須去分析他們的能力 (不同的使用年齡層、工作族群、教育層度、生理障礙等等) 與可能的經驗，在系統操作的過程中最好能夠依照使用者的能力來提供不同的操作方式與流程，並且自動地提示使用者；

應用系統的人機介面在設計時不可避免地一定會有所謂的操作狀態的產生，例如開始時的設定狀態、資料讀取及準備狀態、資料處理的狀態．．．，這些系統的狀態一定會影響使用者的操作，例如在開始執行時的設定狀態下，使用者可能因為還沒把資料準備好，無法立即啟動資料的處理；這些應用系統的狀態一定要清楚地告知使用者，以簡單明瞭的文字、語音來通知使用者，並給予適當的操作說明來告知使用者目前可以進行的操作，程式要避免私下維持某些使用者無法察覺的狀態；

防止使用者發生錯誤，節省使用者操作的精力，以明顯的圖示，清楚的提示，適當的選項，適當的輔助說明及狀態說明來防止使用者發生錯誤；

當使用者發生操作的錯誤時，必須允許使用者回復到前面正確的狀態去，應用系統本身以及人機介面在設計時必須考慮到回復的動作，不應該讓使用者自行擔負處理錯誤的後果，甚至應該允許使用者在任何時候改變主意，而不應該限制使用者的思緒，如此可以達成應用系統與使用者之間良好的互動，應用系統比較具有使用者親和力，使用者在使用時也能夠時時具有信心；

盡量維持整體一致性的美感：這包括在使用各種媒體來呈現資訊時使用媒體本身的美感以及整體的和諧性，通常需要由專業的藝術工作者來加以評定，但是應該遵守最基本的要求，例如色彩的選擇，就應該避免互補不協調的色系來刺激使用者，在聲音的使用上也不要過度地使用嘈雜或是奇異的音效，如果需要提醒使用者而使用一些能夠引發使用者注意力的效果時必須小心地評估其正反面的影響；

完整的說明文件是使用者選用此電腦系統的一個充分條件，一個系統能夠具有完整的說明文件通常代表此系統不管是在軟體或是硬體本身以及人機介面的開發上都有遵循一定的流程，這是 ISO 9000 系列品質保證的最基本要求；要維持使用者清楚應用系統的反應與動作的話，除了依照上面的原則來設計系統的個個環節之外，也需要由整體的角度來描述各個環節的功能性質，說明文件傳統上是使用印製的文件，但是目前許多的系統也都同時提供線上的參考文件，最主要是讓電腦系統快速的搜尋特性來輔助使用者查詢參考文件；

撰寫良好的線上教材 (online tutorial) 也是一個使用者在初次學習某一項功能時非常需要的工具，可以迅速地讓使用者熟悉必要基本的操作，建立正確的心智模型。

　

如何開始設計一個人機介面?

完整良好的人機介面設計需要心理學家、教育學家、電腦介面設計師、電腦系統分析師、電腦軟體工程師、美工設計師、動畫及媒體設計師、以及各種目標層次的使用者來共同參與才能夠完成，這是一件包括認知心理學、學習理論、多種媒體呈現、人性因素、電腦系統設計、電腦介面設計、軟體工程、美工、電腦系統測試等等各種技術的工作，一般較小型的電腦系統通常會因為成本的因素而在許多方面採取較為經濟的方法來製作，例如套用某些已經設計完成的學習模式，或是使用一些固定標準化的介面元件，或是簡化媒體的呈現．．．等等，以下我們僅由引導一個初次使用系統的操作者，讓他快速正確地開始使用系統來著手，這可以說是一個介面的核心，是不應該省略的部份：

a. 設計隱喻 (metaphor)

所謂設計隱喻就是用已知的事物來暗指所要操作的電腦系統中的步驟以及參予操作的所有抽象或是實體的元件。這是希望運用熟悉的事物來學習未知的事物，希望藉由所謂的學習轉移的過程來加速使用者建立正確心智模型的學習過程，降低過程中新的觀念以及方法的衝擊。

人的潛力非常的大，但是沒有適當的啟發的狀況下，人的慣性是常常是佔上風的，喜歡求新求變通常是少數人學習的習性，這種人我們稱他的學習習慣是場景獨立型 (Field Independence)，比較喜歡嘗試新的方法，新的事物，能夠接受嘗試錯誤的考驗，能夠由此過程中學習到正確的方法，喜歡主動獨立地進行思考與學習；但是另外一大部分人的學習模式我們稱為場景依賴型 (Field dependence) 的學習習慣，這種學習模式比較喜歡團體合作的學習，喜歡明確的引導，我們在設計隱喻時其實就是希望能夠給予生手一些經驗轉移的引導，希望初學者能夠維持其基本的使用信心。

舉例來說，微軟公司的 Windows 作業系統以及 Office 套裝軟體 (WORD, EXCEL, POWERPOINT, ACCESS) 基本的運作模型就是把整個電腦螢幕上所有呈現的東西和資料記憶媒體 (硬碟) 比擬為一張辦公桌上的相關用具，有筆記本、小算盤、小時鐘、公事包、桌面、垃圾桶、檔案夾、檔案資料．．．等等，這對於一般坐辦公桌的工作人員來講就是一個很好的隱喻，當你有一個不要的文件時你當然是要找到垃圾桶來把他丟掉，這是在相關情境中幾乎不須學習就可以想到的概念；

不過每一個隱喻通常也都有其適用的範圍，例如上面辦公桌的隱喻對於家庭主婦、藍領階級、或是兒童等等就不是一個好的隱喻，對於家庭主婦而言最好電腦系統中能夠有所有家庭中熟悉的物件和操作的方法，這樣才是一個適當的隱喻。

另外舉一個例子：我們常常把電腦中的中央處理器 (CPU) 比喻為人的心臟或是大腦，如果比喻為人的心臟時，我們是希望使用者能夠藉由一般生活上的經驗曉得一個人沒有心臟是不能存活的，電腦沒有中央處理器也是一樣不能工作的，一個人的心臟有一個固定的跳動速率，電腦的中央處理器也是有一個固定的操作速率，但是每一個隱喻通常也有它不能顧及的一面，比如說上面這個隱喻雖然大家都可以了解，但是進一步的推想卻常常遭遇阻礙，例如：電腦的中央處理器是可以很容易就更換的，有時在必要的情況下我們也會調整中央處理器的運作頻率，可是心臟在人體內通常都不會有這樣子的處理，另外電腦中的中央處理器可以說是站在一種總指揮的角色，操作命令所有的週邊裝置及記憶裝置來完成一些工作，在人體內心臟卻沒有這種指揮的功能，反而是大腦才具有這樣子的功能，這有一點顧此失彼，因此適當的選擇隱喻必須要考慮到使用者的層次、族群，應用系統的目標等等盡量讓不一致的推論機會減少到最低。

一般隱喻可以分為外形上的隱喻，功能上的隱喻，以及結構上的隱喻，分別由電腦系統的外形、功能、以及架構上來尋找使用者族群中熟悉的事物作為隱喻，有時相同的隱喻對於不同背景的人會有不同的複雜度，需要藉由其他的輔助隱喻或是輔助說明來引導才能夠達到學習轉移的目標，因此隱喻也可以結合在一起使用，例如前面對於中央處理器的隱喻就必須在介紹不同的功能時引用正確的隱喻，並且對使用者強調其功能性，以免使用者誤將不適當的隱喻套用在不同性質的工作及學習過程中。

再舉一個例子：一般的繪圖軟體通常的使用對象都是從事美工或是設計工作的人，因此繪圖軟體所使用的隱喻通常是用畫室或是工作室，其中會用到畫室中的許多熟悉的用品，例如畫筆、水彩、油畫、鉛筆、炭筆、毛筆、蠟筆、顏料、橡皮、圖畫紙、描圖紙、顏料罐、調色盤、彩度、色調、色彩飽和度、光線強度、亮度、反差、光源位置、陰影、景深、投影等等。

b. 邏輯上供給性的思量

一套電腦系統及其界面最主要的功能是要輔助使用者來完成某些使用者定義好的工作，說實在的，使用者應該已經完全地了解到這個工作的目的、特性、要完成這項工作所需要的資源、所需要的程序、如果說還有什麼是不知道的話，那麼使用者他就沒有辦法自己獨立完成他的工作了，那他應該要學習一些他所不知道的事情。可是如果上面所提到的他都清楚的話，那麼使用電腦這個輔助工具不應該對他造成困難，應該只要運用他所知道的東西再加上適當的推理就足夠了，不需要再度學習才對。

上面這樣子的推論，就是希望將一個電腦系統界面的使用推回到他所需要完成的工作上，所有使用者需要的操作，在沒有電腦的情況下一定都會出現，在有電腦系統輔助的情形下也應該都有適當的對應，不應該有一些額外不相干或是需要很多電腦知識才能夠操作的東西出現，這些都是會使得界面不容易學習，不容易上手的。

所謂的供給性就是說介面中任何一個物件所具備的屬性本身要可以決定它的使用方法。使用者只需看到這個介面物件在原始應用中所扮演的角色，就可以自然而然地想到應該如何來使用它，這樣子使用者就可以在不需要說明的狀況下自然地去使用這個介面來完成使用者的工作了。

當然一個介面要能夠具有良好供給性，介面必須要能夠清楚地顯示所有使用者操作所引發的動作，同時所有的系統反應應該都要符合在適當的應用環境下基本的邏輯推理。

c. 具備直接操作性

直接操作性和圖形化介面的設計幾乎已經合為一體，如果你的系統沒有圖形化介面的話，使用者就沒法子直接操作你的系統或是你系統所處理的資料，使用者因此會覺得電腦系統在做一些抽象不清楚的事，因而會有不信任及焦慮的感覺，因此在設計介面的時候你必須將所處理的物件、處理的工具、以及處理的程序都想辦法具象化，讓它們都有一個實體的代表，並利用圖形介面的設計，替每一個物件製作一個圖示，讓使用者可以直接操作 (在視窗介面中這最主要是指運用滑鼠進行點、按、選、及拖放等動作)，當然這個具象化的動作和前面尋找隱喻的步驟是息息相關的，通常介面設計者對於某一個特殊使用群設計出一個輔助學習的隱喻後，也就一併決定了具象化的方向。

　

人機介面設計的基本流程

a. 了解使用者本身以及他們使用之目的

我們在設計一個軟體系統的時候，第一件事就是要把這個軟體的使用者刻劃出來，沒有一樣產品是真正老少咸宜的，就說電視這個產品好了，應該是大部分人都可以使用的東西了吧，可是嬰兒幼兒在使用時也有它的限制，視力不佳的人在使用時也有它的限制，除此之外，就是因為它設計時的野心太大，希望能一網打盡全人類，所以它的功能有缺失，比方說電視機不能夠清楚地顯示電腦螢幕上所看到的畫面，電視機不能當作影像電話的終端，電視機不能自動去找我喜歡的節目，電視機很少有包括錄放影機或是雷射影碟機的，電視機不能　 ...，太多了，因為它的對象太廣，所以只能提供最基本的功能，東西就這樣了，要買就買，不買拉倒...

你希望你設計的軟體系統或是網頁要有人來使用、希望對使用的人有很大幫助的話，你必須要針對使用者的需求來設計功能與界面，所以替自己的系統定位是很重要的，然後必須好好地研究一下使用者的背景、操作電腦系統的經驗、記憶性或是結構性問題的反應能力、組織能力、打字能力、教育程度等等使用族群本身的特性。

接下來需要研究使用者使用這個系統到底為了什麼? (人是有惰性、喜歡接觸熟悉的東西的，也許可以說大部分的人不會吃飽了撐著來使用一個對他沒有用途的電腦系統)，是不是他需要去完成什麼樣子的任務，等你了解他的使用目的以後，你就可以去推敲出使用的時機、使用的環境以及互動的方式了，例如：是不是有時間上的壓力，是不是用過一次以後就不會再用了，還是必須常常使用，是不是在嘈雜的環境下使用，是不是在有指導員的情況下使用，使用者希望一個指令一個動作還是希望盡量多給一些指示後一次操作，使用者自己有沒有能力在沒有電腦的情形下完成工作，使用者還有沒有其它的輔助工具...，這些都會影響到界面設計所要著重的方向，當然也就影響到你尋找隱喻的過程，因為你需要去親身想像使用者的環境，才有可能找到他最熟悉的隱喻。

　

b. 設定可用性 (Usability) 的目標

就像我們在一開始的時候所說到的，電腦軟體有各種不同的用途，他們需要的使用者界面都是不一樣的，不可一概而論，因此我們在了解使用者的使用目的以後，我們必須要想辦法來達成他們的目的，設定適當的可用性目標，這些可用性目標的最終目的當然是讓軟體可被順利地使用，前面我們在談到可用性目標的時候，我們談到了很多甚至有一點衝突的目標，比方說 "操作簡單" 和 "直接操弄" 就有一點衝突，最簡單的操作就是使用者不太需要干預，可是又可以達到使用者想要的功能，直接操作則又要求每一個物件使用者都可以操作得到，如果每一個物件使用者都要處理的話，那操作起來就不簡單了，不是嗎?

還好，因為使用者的目的不一樣，軟體的屬性也就不一樣，使用者界面的可用性的定義當然也就不一樣，所以在了解系統功能的定位以後，在這一步驟裡就是要訂出到底要具有哪些特性來吸引使用者使用。

　

c. 分析與設計

在設計人機界面時，我們要能夠根據使用者的目的來找出使用者可能的操作互動方式，把所有可能的操作一項一項地列舉出來，分析這些操作是不是能夠達到使用者所希望達到的工作目的，是不是能夠達到我們在上一個階段設立的可用性指標。

有時短短的一個概念，比方說在文書處理軟體中想要更改幾個字的顏色時，需要的操作步驟就有好幾個，需要先將文字選擇起來，然後由選單或是工具列上打開色盤，選擇或是調出所要的顏色，再按確定按鈕。(哇! 真複雜，這樣子對嗎? 有沒有辦法簡化?) 這些動作都要用適當的表列工具將可能的操作與系統可能的反應列出來，仔細地分析看看會不會有衝突或是模稜兩可的狀況。

比較著名的分析方法有 GOMS (Goals, Operators, Method, and Selection)，UAN (User-Action-Notation)，和 STN (State Transition Network)，請參考 Dix, etal, Human-Computer Interaction, Prentice Hall, 1993 這本書的說明，這些方式和軟體製作方法中的物件導向方法有很多的共同點。

再做了適當的分析工作之後，可以進入真正的設計階段了，首先，必須先發展出整個系統所要模擬的隱喻，由此隱喻來設計系統內部支援的所有物件，以及螢幕上和使用者互動的所有物件，定義這些物件的基本屬性以及其相互之間的互動行為，使用者本身也是一個物件，和所有的螢幕上物件都會有直接的互動，螢幕上的圖形物件再和系統內部的物件有適當的互動，改變系統內物件的狀態就是使用者任何一個操作的目的，另外這些互動的過程都是藉由所謂的訊息傳遞來達成的，例如螢幕上的圖形物件常常要給使用者一些文字的訊息，使用者也會用鍵盤或是滑鼠給圖形物件一些操作的訊息，這些訊息都要一一列出，並且評估文義上是否清晰不會造成誤解，也不會造成使用者的反感。

在這個階段一定要讓使用者反覆的測試設計出來的模型，使用者的要求是不斷地在修改的，使用者是不斷地在進步的，必須讓使用者加入分析與設計的步驟，我們的目標是設計人機界面，人指的是使用者，因此一定要以使用者為中心點來考量。

在 1950 年到 1980 年之間，電腦系統的人機界面主要是所謂的系統為中心或是科技為中心 (System and Technology Driven) 的設計方式，因為當時系統的價格很高，技術上離要讓使用者方便的目的也還很遠，只要你用夠新穎的科技，大概就是使用者最大的要求了。由 1980 年到現在，電腦進步的速度很快，逐漸大家要求以使用者為中心 (User Centered) 來設計人機界面，最主要的就是要使用者擔負一些界面互動設計及基礎功能需求的工作，最近則有所謂的以學習者為中心 (Learner Centered) 的界面設計方法，或說是使用者介入 (User Involved) 的界面設計方法，最主要是希望使用者能夠以系統的一份子的態度主動地參予實際界面互動模型的設計，如此才能夠設計出真正好用的人機界面。

　

d. 製作

最主要是軟體應用系統的製作，包括程式、畫面配置、美工等等。

　

e. 測試

這一步驟最主要是在看看實際製作的系統是否有滿足分析與設計所定義出來的各項目標。

　

f. 評估

這一個步驟最主要是由許多不同的使用者來實際測試看看這個軟體的功能性以及界面是否合乎他的要求，雖然我們在設計的階段希望使用者能夠加入來驗證設計者的構想，提供設計者一些意見，但是有時候使用者沒有看到實體的系統，沒有在正確的環境中操作，使用者和設計者的思考誤差可能非常的大，因此在使用者真正在評估的時候常常會發現他的評估結果和設計的時候的評估結果差異很大。

上面的問題也就反應出為什麼現在很流行快速雛型發展法 (Fast Prototyping) 的原因了，使用者需要看到實體才能夠建立正確的使用模型。

一個軟體系統經過評鑑以後，如果發現設計上的錯誤，可以儘速思考修改的辦法，也可以調整可用性指標來反應使用者的意見。

　

圖形使用者界面 (GUI) 介紹

1. GUI 的起源與沿革

電腦系統採用圖形作為輸出的起源很早，也就是最早的電腦繪圖 (Computer Graphics) 發展的最大目的，早在 1962 年 Evan Sutherland 在 MIT 的 Sketchpad 計畫就開始發展如何以圖形方式顯示資訊，一般電腦的界面由文字的操作方式改為以圖形來操作則是在 1970 年代初期在 Palo Alto 的 Xerox 公司內部設計出來的 Alto 系統，該系統採用重疊的視窗、彈出式的選單和滑鼠裝置來讓使用者操作電腦不過那時候的滑鼠和現在大家使用的稍有不同，在 1976 年圖示也加入此系統中成為界面的一部分，在 1981 年終於推出第一套具有 GUI 的商用系統 Xerox Star，Star 中更提出使用重疊式及瓷磚式並排的視窗以及選單列作為使用者互動工具的概念，Star 這套系統也是第一套使用辦公桌面為隱喻的電腦系統，(這些和 SmallTalk 這個物件導向的程式設計語言也有著密切的關係)，很可惜 Star 系統商品化後並沒有成功，但是在這兩個系統中已經使用到了現在所謂 GUI 界面中的四大要件，WIMP (視窗，圖示，選單，和游標)，並且以物件導向式的方式來設計人機之間的互動關係，可以說是 GUI 人機界面的開山鼻祖。

1983 年蘋果電腦公司基於 STAR 這樣子概念技術移轉所發展出來的 LISA 隨然也沒有得到市場上的認同，但是到了 1984 年的麥金塔 (MAC) 系列的電腦，在商場上終於大受歡迎，才使得圖形電腦界面成為新一代人機界面的主流。 LISA 和 MAC 第一次使用到下拉式的選單，蘋果電腦公司並且還得到這個專利呢!

2. GUI 的定義

WIMP

視窗 (Window)

圖示 (Icon)

選單 (Menu)

游標 (Pointer)

在 STAR 系統發展的 30 年漫長過程中，有一些設計的基本原則在引導著界面的設計：

顯示可以操作的物件

必須把原本抽象的電腦操作概念再度地具象化，並且賦予它操作的基本功能選項。

被操作的物件，以及操作的動作必須吸引使用者的注意

有所謂的點選物件的動作，有所謂的對焦 (Focus) 這種得到使用者注意的概念，而且被選到的物件就是下一個操作動作的操作對象。

直接透露系統運作的狀況

使用者的預期和系統的表現之間的差距要盡量縮小。

界面的一致性

需要考慮顯示界面硬體的能力

這幾個基本原則其實也透露了 STAR 系統中所謂的 GUI 的定義。

GUI 實在沒有一個明確的定義可以囊括它所有的特性，所以各大電腦公司以及協會也都對 GUI 系統做了一些定性的定義，以便在某一個 GUI 系統上研發的所有應用軟體可以遵循某一個準則，藉由這些定義及研發的準則，大家可以對 GUI 有比較完整的認識，例如：

微軟公司在 1992 及 1995 分別發行了 The Windows Interface 及 The Windows Interface Guidelines for Software Design, MicroSoft Press。

蘋果電腦公司在 1992 發表了 Macintoch Human Interface Guidelines, Addison Wesley.

Open Software Fundation (OSF) 在 1993 年發行了 OSF/MOTIF Style Guide, Prentice Hall.

3. 視窗系統簡介

a. 視窗的定義與基本功能

螢幕上一塊獨立的矩形區域，一般會包括下列幾個區域

邊界

標題列

選單

狀態列

內容區

捲動軸

每一個區域對於使用者的操作的反應都不太一樣。

視窗的基本動作包括開啟、移動、重疊、最大化/最小化、關閉等等。

視窗在螢幕上可以不規則地重疊，也可以用階梯式的方式重疊在螢幕上，也可以規則地像瓷磚一樣排列在螢幕上。

b. 桌面

是一個容納所有視窗的大視窗，通常不可以將它由螢幕上關閉。

c. 視窗的分類

父視窗/子視窗 (有從屬關係的視窗)

對話視窗

分割視窗

彈出視窗

控制元件視窗

d. 圖示

使用圖示的目的包括：

1. 以視覺化的方法呈現抽象概念

2. 節省顯示的空間

3. 加快尋找指令或是資料

4. 輔助記憶

一個圖示一定包含下列幾個重點：

1. 邊界

2. 圖案

3. 背景

4. 標題

5. 含意 (指令、動作或資料)

設計一個圖示應該要達到使用者可以見圖生意：除此之外還需要是熟悉的圖像、簡化的圖像線條、清晰的內容、不容易和別的圖示混淆特徵明顯的、大小一致的、美觀的。

e. 選單的功能與分類

選單式的界面就是希望把可能的操作方式用表列的方法呈現給使用者，希望使用者可以不去記憶操作的指令，減輕使用者的負擔，這種功能其實在視窗界面出現之前就已經存在了，在 GUI 圖形視窗界面中這種方式更是順理成章地用來表達系統希望使用者做的動作，可以降低使用者記憶的負擔，同時也可以稍微限制能夠進行的動作，使得使用者和系統不至背道而馳，各說各話，各自想做各自的事，在視窗系統中選單的內容也可以用圖片或是圖示來表現，並不限於文字。

選單由其表現的方式大致可以分為：

i. 選單列：

在微軟視窗系統中每一個標準的最上層視窗都可以有選單列，或是在 MAC OS 中桌面也有選單列。

ii. 下拉式選單：

標準視窗選單列都可以帶出下拉式的選單視窗。

iii. 彈出式的選單：

例如：微軟視窗中的右鍵可以帶出右鍵選單視窗

iv. 浮動式的選單列：

在微軟 Office 97 或是 Visual Studio 中選單列可以是浮動式的視窗如下圖，使用者可以依其方便性來移動此表單視窗，也可以將此視窗依附在主視窗的任何一邊：

v. 階層式展開的選單：

上面這幾種選單中都可以再包含下一層的表單

f. 游標 (Pointer)

在視窗系統中游標是滑鼠控制的對象，使用者藉由滑鼠可以操作游標的位置，並且滑鼠上按鍵及拖曳的動作都是針對游標所指到的物件來操作的，使用者必須有相當的手眼協調能力才能夠依所看到的游標位置來操作滑鼠。

游標同時也可以用不同的形狀甚至動畫來表現系統的狀態，例如：我們常常見到沙漏形狀的滑鼠就是代表目前該視窗的應用程式正在執行中，如果看到一個禁止符號則代表不可以操作的動作，如果看到左右或是上下箭號則代表使用者可以改變視窗或是物件的大小。

g. 物件化模型的操作 (訊息驅動的操作模型)

在視窗的操作上由於使用者希望以直接操弄的模式來使用系統，而不希望根據程式的要求被動地配合系統，因此程式內所有的界面元件都被模型化為獨立的物件，可以接受使用者的操作，也可以接受界面上其他的元件的訊息，也可以接受程式內部的控制訊息，但是這三者都使用一致的訊息驅動模型。

h. 標準化的介面元件

各個作業系統為了儘量統一在其上各個應用程式的界面，讓使用者可以用一致的方式來操作不同的軟體，作業系統中訂定了很多一般性的界面元件，提供給每一個應用程式來使用，例如：

   選單列
   捲動軸
   按鍵
   Radio Button
   Check Box
   表列盒
   編輯區
   複合編輯區
   工具列
   檔案選取對話盒
   字型選取對話盒
   顏色選取對話盒
   印表設定對話盒
   尋找與取代對話盒

等等。

4. 市面上現有的電腦系統之圖形界面

Macintosh

NeXTStep

OPENLOOK

DECwindows

OSF/Motif

Microsoft Windows 3.1

OS/2 Presentation Manager

OS/2 Workplace Shell

Microsoft Windows 95

Microsoft Windows 98

Microsoft Windows NT