使用者介面

一、使用者介面定義

在資訊領域裡，介面是指兩個電腦組件（軟體或硬體）相接、彼此交互作用 之處，而人與電腦交互作用的部分，即是使用者介面（user interface）。人機介面 (Human-Computer Interface；HCI，或Man-Machine Interface；MMI)也稱為使用者 介面(User-Interface；UI)，一般而言，人機介面指的是使用者與電腦之間彼此互動 傳遞訊息、資料與符號，藉以交換資訊的介面通路與環境(龍斯雲，2000)。在人 機互動的過程中，強調以使用者導向(User-Oriented)與使用者中心(User-center)的 概念，人機介面設計的目的，在於讓使用者與電腦的溝通，以利於更順利、方便 地完成工作，提高人在使用電腦完成任務的成效(林佳蓉，2003)。然而除了一般 純文字模式的傳統介面模式之外，圖形使用者介面（Graphic User Interface，簡稱 GUI）是指在使用者螢幕上所看到的一切，以圖形顯示的方式呈現，是目前介面設 計的主流。

李世忠（1993）認為使用者介面一般是指電腦與人互動時所用的溝通符號設 計。但是以一般人們溝通的模式來說，最常見的是利用語言、聲音以及肢體的動 作來傳遞想法或訊息。所以當人與電腦互動時便可能因為介面設計的不良而造成 搜尋資料緩慢或學習挫折等問題。目前多數的電腦軟體仍主要以文字及圖示或聲 音等符號來傳送訊息，使用者們必須要利用滑鼠、鍵盤、光筆、手指、語音等輸

入工具與電腦溝通。

林淑芳、林麗娟(1995)認為，狹義的使用者介面指使用者和程式間之溝通模 式，包括交談方式、螢幕顯示、輸出輸入等裝置與使用者閱讀輔助等工具。廣義 來說，像是電腦程式語言設計、螢幕顯示、鍵盤設計和使用者的操作上的關係、

系統反應時間對使用者的影響、人機交談模式及其設計原則等主題，以及涉及到 人體工學、心理學、行為學及電腦軟硬體等相關領域。

介於使用者與電腦系統之間的媒介就是使用者介面，也是使用者使用電腦的 綜合操作系統，它主要集中呈現了電腦系統的輸入輸出功能以及使用者對系統各 個部分操作控制的能力（張凌、張鐘，1998）。使用者介面是人類與電腦系統間 的通訊媒體，它是把一個子系統的訊息輸出經過判斷、解釋和轉換，改變成另一 子系統的輸入，以及把使用者的需求訊息轉換為一種系統可接受的形式，把系統 的回饋轉換為一種使用者可以理解的形式(孫玉榮，2000)。

Patrick J. Lynch 與 Sarah Horton(2002)則認為電腦系統的圖形使用者介面包含 象徵物（metaphors）的互動、影像以及用來傳達螢幕上功能和意義的概念。包括 在圖形介面上每個組成要素的細部性視覺特徵，以及產生網頁感官特徵和超連結 的互動功能順序、圖形設計和視覺標記（signature）。在早期使用者介面是設計用 來讓使用者能操作個人電腦，經過一段時間的發展之後，使用者現在對於圖形使 用者介面的要求都希望具有更高層次、更精緻的設計，包括網站上的各個網頁。

圖形不只是用來讓網頁生動活潑，也是構成網站使用者整體經驗所必需的要素。

黃如足(2002，p84）指出圖形使用者介面顯示的方式就是以圖形化呈現。讓 使用者能在螢幕上看見一切，而其構成元素具有四個部分：視窗（window）、圖 像（icon）、功能表（menu）及指標（pointer），分述如下：

(一)視窗：

如同平面空間紙張的尺寸，其基本的概念相似於一個框的邊界限制，主要呈 現於螢幕之內，其視覺顯示區域通常是長方形並各有邊界，其內容不包含特定的 文件資料。其基本要素分為外圍區（邊界、標題、選單和狀態區）和內容外框區

（捲動桿、工作所在區域）。

至於視窗呈現的類型有主要視窗與次要視窗（母子視窗）、分割視窗、對話 視窗、彈出視窗等。另一方面，視窗的排列組成又有瓷磚式、重疊式、階梯式等 之。就介面設計師而言，何種視窗形式適合藝術進修網站的使用者，必須思考到 使用者使用各種不同的瀏覽器，並且現今瀏覽器的功能不斷更新，對於螢幕設計 則必須考慮到資訊呈現的樣式與適用性（某些資訊在某種瀏覽器呈現出其固有的 特性，而在某些瀏覽器上所呈現的卻是有異常的表現）。

相關原因包括電腦螢幕的解析程度，所使用的解析度也具有影響資訊呈現的 樣貌。另一面，專家級的電腦可支援聲音、影像，以及相關虛擬實境的檔案

（VVRML），也有採用個人電腦或麥金塔電腦上瀏覽網頁的效果也不全然相近，

而這些視窗的設計上則必須加以考量與計畫。

(二)圖像：

關於圖像符號的傳播與譯碼的活動，從史前文化至今就寓含著傳達效應與溝 通的媒介。無可否認的是圖像符號比起語言、文字符號的傳達，富有直覺性的感 受且具有不受教育背景、種族差異的限制性；可透過直覺性的思考，達成情感意 象的感受效果。然而藝術領域的圖像符號包羅甚廣，有認知型的標誌圖像（如交 通號誌、國旗、商品標籤，氣象標誌等）；而情意型的圖像（如漫畫、插畫、寫 實繪畫、抽象畫、雕塑造型等）。

因此，在網頁圖示設計中對認知型的圖示，有其既定的意義象徵和約定俗成 的內涵，例如各網站的logo 產品標誌，只要通過圖像認知學習的過程，就可以形 成共識與辨認。至於情意的圖像，隱含多元性的象徵寓意的文化符號，如美術館

內的繪畫、插畫、雕塑等圖畫（畫像），則須涉及美術史、美學、美術創作的層 次意象。

由於網頁圖示的外觀包含大小、顏色、形狀、角度或方向、空間感、幾何圖 形，其細部還涉及邊界、圖案、背景和標籤等。不管靜態或動態的圖示設計皆具 有其含意性與實用性；其設計小到視窗上的一些命令、選擇或告知等小圖示（如 視窗右上角的控制圖示：縮放、還原及關閉，或觀看視訊軟體的面板控制鍵）。

因此，優良圖示的品質要求是熟悉的、簡潔的、清晰的、大小一致的、容易記憶 的、吸引人的、特徵明顯的。圖示在一般網頁呈現時，最常見到圖示不只是標點 小圖案，甚至是一幅藝術品的大圖像，在這些易於混淆和被瀏覽者誤會的圖示符 碼，介面設計師必須提高警覺避免符號傳達錯誤的訊息，而不至於產生圖像介面 操作上的不便。

(三)選單：

一般網頁最常見的選單，通常是指具有功能選項的一串表單，通常每個軟體 視窗所顯示的螢幕標題列（title bar－如【檔案】、【編輯】、【檢視】等欄位），

都有下拉式的功能表選單（pull-down menus），另一方面是由下拉選單延伸的平 鋪式功能表（cascade menus），這種選單常造成使用者不知如何控制，因為它需 要靠著滑鼠指標移動到選單上才會出現選項。還有一種彈出式功能表（pop-up menu），它較省版面的空間，可依使用者的需要，隨時出現與消失，故又稱快顯 功能表，其精簡性就像一些廣告小視窗不會有太多的選項。還有一種少見的脫離 式選單，它可以停留在螢幕四周移動，而脫離原始位置，讓使用者自己調配適合 的位置上。

(四)指標：

一般點選工具的類型有直接操作（螢幕操作如手指、光筆）和間接操作（桌 上操作如軌跡球、滑鼠），而滑鼠仍是目前主要的點選工具之一。因此透過滑鼠 點選後會出現游標（cursors）的資訊區，必須了解這些指標或游標的意圖。設計者

可採用一般通行較標準化的游標樣式，並注意指標大小的顯示程度，以免造成某 些使用者在視覺上或思維上的誤判及選擇困難，因此有效的點選工具和清楚的指 標影像才能協助使用和正確地操作。

二、使用者介面設計原則

「易於使用」（user friendly）是使用者介面設計的最高原則，最早是由 Xerox 公 司的Palo Alto 研究中心所提出，1978 年 Golfstein 與 Ford 發表“The User Cordial Interface＂一文後，「易於使用」便成為相當受人注目的詞彙，所有的電腦資訊系 統皆強調介面所帶給使用者的親和性。

林淑芳、林麗娟(1995)將學者們對使用者介面設計原則的探討歸納如下：

(一)提供一致性的設計，以利於彼此間之溝通。

(二)簡化互動時複雜的步驟。

(三)採用具體的例子解說要傳達的概念(熟悉的事物)。

(四)利用直覺性的互動方式，以減少工作記憶之負荷，

(五)提供簡單的錯誤處理。

(六)提供必須及適當的回饋。

(七)提供內在的激勵，鼓勵使用者採取主動的行動，

(八)提供使用與掌控的彈性。

(九)隨時提供指引的方向，並且告知進度。

龍斯雲（2000）整理相關使用者介面原則如下：

(一)一致性：

人機介面在不同的軟體或是相同的軟體內，有著相似的操作環境與方式。介 面一致性的操作模式，讓使用者能使用一致的操作方法，有效的運用及操作系統 功能。

(二)使用者擁有主控權：

使用者最清楚知道自己想要完成的工作目的為何，給予使用者適度的主控 權，讓使用者能較有彈性的按照自己的需求來主導操控電腦系統，以完成工作，

在資料檔案安全完好無顧慮下，可由使用者依照自己喜歡的方式進行。

(三)清晰與簡單：

資訊內容的呈現必須清晰，但是又不失簡單，任何使用者不論程度、背景為 何都能一目瞭然，並避免出現繁瑣的說明與複雜的名詞，系統功能操作能夠單純 化，盡量不讓介面提供太多的選擇與複雜的使用方式，避免讓使用者感到困惑與 降低學習興趣。

(四)減輕記憶負擔：

使用者的操控方式盡量以選單的方式呈現，在螢幕上將常使用的項目放在選 單的上層，讓使用者直接點選，免除使用者記憶指令的負擔。

(五)所見即所得：

所見即所得可以提高使用者的使用動機，因為當使用者能在螢幕上看到所處

所見即所得可以提高使用者的使用動機，因為當使用者能在螢幕上看到所處