Pac 模式

1. PAC(Presentation-Abstraction-Control)模式
PAC是常見的介面架構表達工具。其將使用者介面細分成許多子介面，每個子介面可視為一個介面物件，
每個物件主要由三個部分所組成：表達(Presentation)、摘述(Abstraction)及控制(Control)。
「表達」定義物件的外觀，並處理訊息的輸出入；「摘述」定義物件的功能及概念；「控制」則是表達與
摘述間的溝通橋樑，也是與其他物件相互連繫的管道(Hussey and Carrington, 1997)。
PAC 架構圖範例
需將 PAC 模式擴充成網狀式的 Net-PAC 模式，表達 Web-based 系統與傳統系統介面。 Net-PAC 模
式中之表達、摘述、控制可分別藉由介面藍圖、介面詞彙、循序圖與狀態圖來描述。
Net-PAC 架構圖範例
 介面元件為存在介面中的基本單元物件，包含名稱及屬性，並有固定的操作方式。其為使用者與
系統應用程式間相互溝通的元件，系統中的每個工作處理，不論是資料的輸入、指令的操作或處
理訊息的輸出，都需透過介面元件來完成。
Abstraction Control Presentation
A1 C1 P1 A2 C2 P2
Abstraction Control Presentation
A11 C11 P11
A12 C12 P12
A14 C14 P14
A13 C13 P13
A15 C15 P15
A21 C21 P21
A22 C22 P22
A24 C24 P24
A23 C23 P23
A25 C25 P25

2. 介面元件範例
 在介面架構中的每個介面（或子介面），都需以一個介面藍圖 (Interface Drawing) 和介面詞彙
(Interface Glossary) 來明確地定義及規範其設計。
 介面藍圖可視為 Net-PAC 之「表達」，主要應用在幫助設計師視覺化的表達介面所用的元件與元
件的配置；而介面詞彙可視為 Net-PAC 之「摘述」，主要應用在描述每個介面中元件之細部規格。
介面藍圖範例

3.  每個介面藍圖會搭配一個介面詞彙以表達該介面之代號、名稱、說明、介面中各元件的名稱、類
型與功能及概念說明。
 若該元件可用於顯示或儲存資料庫中的資料，須說明其代表的資料表欄位、資料型態和長度。
介面詞彙樣版
 使用者介面塑模包含了動態行為塑模與靜態結構塑模，兩者皆始於需求塑模，但動態行為塑模是以
介面間之轉換及介面內元件運作的邏輯與狀態轉移為主 (Wu et al., 2005; 2007)；靜態結構塑模則是
以介面所應呈現的架構、藍圖、元件的功能與細部資訊為主，可瞭解每個介面所使用之元件與元件
之配置。
 動態行為塑模過程又可分為 UI 循序圖和狀態圖塑模；而靜態結構塑模則為 Net-PAC 模式之介面架
構圖、介面藍圖及介面詞彙塑模，這些塑模活動皆需反覆進行才能漸趨完美。
 需求塑模的活動圖是塑模企業流程的重要工具，活動圖中的每一個註記 (Note) 都可設計成一個介
面。因此，進行介面架構圖塑模時，可檢視需求塑模結果之活動圖註記，依活動執行順序建構出該
系統的介面架構圖。
 此外，UI 循序圖之塑模有助於釐清介面架構圖中之控制部分，因此若於需求塑模完成後先進行 UI 循
序圖塑模，再進行介面架構圖、介面藍圖和介面詞彙的塑模，會是一個較佳的做法。
– 進行使用者介面靜態結構塑模時，可以 Net-PAC 模式來建構使用者介面架構圖，每一個介面需表達
其「表達」、「摘述」和「控制」(P、A、C)，且給予一個唯一的介面編號與名稱。
– 接著，可根據 Net-PAC 介面架構圖，與使用者討論圖中的每一個介面藍圖，進一步定義介面中的功
能與資訊需求名稱、圖像、展示位置、格線、圖表與說明，並完成介面詞彙的描述。
– 分析過程中，系統分析師可利用介面藍圖記錄使用者心中對介面的想法，作為雙方互動的橋樑。
 以便當王網路訂購系統為例，首先將需求塑模的五個使用個案（新增訂購項目、修改訂購數量、刪
除訂購項目、取消採購訂單與確認採購訂單）分別編號為 1~5。
 接著分析每個使用個案活動圖之註記，將各註記設計成一個介面，並依活動順序決定介面的操作流
程。例如，「新增訂購項目使用個案」活動圖有註記 1.1~1.4，可設計出四種介面。且註記 1.1 為「登
入」活動之輸入；註記 1.2 為「瀏覽」活動之輸出，「瀏覽」活動在「登入」活動之後，因此執行程

4. 序是介面 1.1 出現後才看到介面 1.2。
 完成之便當王網路訂購系統介面架構圖，如圖 8-4 所示；而其部分 PAC 表可表達如表 8-4。
便當王網路訂購系統介面架構圖
 完成便當王網路訂購系統之 Net-PAC 介面架構圖後，便可詳細描繪每個介面的表達與摘述，其中前
者以介面藍圖表達，而後者以介面詞彙表達。使用者介面之設計可參考需求塑模之活動圖中，有關
進行活動時所須顯示之輸入與輸出內容。
 「便當型錄 UI」之完整介面藍圖，介面詞彙。而新增訂購項目等五個使用個案之其他介面藍圖與介
面詞彙。
1.1
客戶登入UI
P C A
1.2
便當型錄UI
P C A
1.4/2.1/3.1/4.1/5.1
便當袋UI
P C A
5.2
交貨資料UI
P C A
5.3
確認訂單UI
P C A
4.2
清空訊息UI
P C A
1.3
細部說明UI
P C A
5.4
感謝惠顧UI
P C A

5. 便當型錄 UI 之介面藍圖
便當型錄 UI 之介面詞彙
 完成各使用者介面靜態結構塑模後，便可進一步以循序圖表達使用者介面間之訊息傳遞與執行程
序。
 使用者介面互動行為的 UI 循序圖塑模和使用者介面靜態結構塑模的資訊皆來自需求塑模，因此兩者
在塑模時無一定的先後順序。
 然而在進行使用者介面狀態塑模時，建議先完成 UI 循序圖和使用者介面靜態結構塑模，才可瞭解哪
些介面進行互動行為，並根據介面藍圖中每個介面使用的元件與配置方式，分析一介面的何種元件

6. 啟動了另一介面而完成介面之轉換。
 狀態圖用於使用者介面狀態塑模之建構步驟為：(1) 找出介面狀態與介面狀態間之轉換、(2) 繪製狀
態圖和 (3) 精煉狀態圖。
(1) 找出介面狀態與介面狀態間之轉換
每個使用者介面皆處於一個狀態，某事件的發生才可能造成其狀態之轉換，因此可將介面架構圖中
的每個介面直接轉為狀態，狀態的階層架構也如介面架構圖所示。介面狀態間之轉換均由該介面內的元
件觸發，如按下「按鈕」元件，因此介面狀態間之轉換可由介面藍圖配合 UI 循序圖找出。
(2) 繪製狀態圖
完成步驟 (1) 後即可依狀態與其相關轉換繪製初步的狀態圖。為方便狀態圖的表達，建議將狀態圖
中之詳細轉換邏輯另以狀態轉換表描述，在狀態圖中僅簡述或不用描述。
(3) 精煉狀態圖
完成初步狀態圖後，即可依每一介面上之功能複雜度考慮進行細化或群集，以精煉介面狀態圖，或
從一些線索找出須改善之處。例如，若狀態中還包括子狀態的轉移，表示狀態內還存在某些功能處理，
所以子狀態可由功能處理描述中找出。