使用者介面塑模.PPT

第12章 使用者介面塑模 本章大綱 學習目標 12.1 導論 12.2 使用者介面靜態結構塑模工作與工具 12.3 使用者介面靜態結構塑模與案例 12.4 狀態圖 12.5 使用者介面狀態塑模與案例 12.6 結構化使用者介面塑模案例 12.7 結論 學習目標 詳讀本章，你至少能瞭解： 使用者介面靜態結構塑模之重要工作與工具。 使用者介面靜態結構塑模之建構步驟與準則。 以Net-PAC 模式、介面藍圖和介面詞彙進行使用者介面靜態結構塑模實例。 何謂狀態圖及其用途。 使用者介面狀態塑模之步驟與準則。 12.1 導論(1/2) 商業資訊系統包括：使用者介面、應用程式與資料庫，而使用者介面是資訊系統與使用者間的溝通橋樑。 與使用者介面相關的塑模工作包含 「使用者介面動態行為塑模」 「使用者介面靜態結構塑模」 12.1 導論(2/2) 圖形化的使用者介面(GUI)是目前資訊系統的主流，許多使用者介面開發工具皆提供多種元件與功能，以滿足使用者對使用者介面之不同需求。 本章將介紹使用者介面的靜態結構與狀態圖塑模工具和方法，說明如何以PAC 模式、介面藍圖、介面詞彙設計出介面架構與介面中細部的元件規格，再配合UI 循序圖建構出狀態圖，以表達一介面內元件與另一介面內元件間之互動行為。 12.2 使用者介面靜態結構塑模工作與工具 使用者介面靜態結構塑模工作包括使用者介面架構與介面元件的設計，此部分主要處理介面元件之選擇、設計、配置及每個元件的輸出入資訊等。 首先，系統分析師與使用者討論、安排整個畫面的配置，具體描述使用者的操作情形，並由需求塑模結果之活動圖建構「介面架構圖」。 接著，應用「介面藍圖」將使用者需要的系統功能以圖形化的介面元件，如選單、表格、按鈕、訊息視窗、影像、聲音或其他方式表現出來，再以「介面詞彙」決定每個處理中，資訊的輸出入方式和規格。 12.2.1 介面架構圖(1/4) 介面架構圖主要用於描述使用者介面之結構關係，以及介面間運作的控制流程。 PAC(Presentation-Abstraction-Control)模式是常見的介面架構表達工具。其將使用者介面細分成許多子介面，每個子介面可視為一個介面物件，每個物件主要由三個部分所組成：表達(Presentation)、摘述(Abstraction)及控制(Control)。 「表達」定義物件的外觀，並處理訊息的輸出入；「摘述」定義物件的功能及概念；「控制」則是表達與摘述間的溝通橋樑，也是與其他物件相互連繫的管道(Hussey and Carrington, 1997)。 12.2.1 介面架構圖(2/4) 圖12-2 PAC 架構圖範例 12.2.1 介面架構圖(3/4) 傳統的PAC 模式無法表達Web-based 系統中網狀的使用者介面架構，例如超連結(Hyperlink)型態等。 因此，需將PAC 模式擴充成網狀式的Net-PAC 模式，表達Web-based 系統與傳統系統介面。 Net-PAC 模式中之表達、摘述、控制可分別藉由介面藍圖、介面詞彙、循序圖與狀態圖來描述。 12.2.1 介面架構圖(4/4) 圖12-3 Net-PAC 架構圖範例 12.2.2 介面元件(1/2) 介面元件為存在介面中的基本單元物件，包含名稱及屬性，並有固定的操作方式。 其為使用者與系統應用程式間相互溝通的元件，系統中的每個工作處理，不論是資料的輸入、指令的操作或處理訊息的輸出，都需透過介面元件來完成。 12.2.2 介面元件(2/2) 表12-1 介面元件範例 12.2.3 介面藍圖及介面詞彙(1/4) 在介面架構中的每個介面（或子介面），都需以一個介面藍圖(Interface Drawing)和介面詞彙(Interface Glossary)來明確地定義及規範其設計。 介面藍圖可視為Net-PAC 之「表達」，主要應用在幫助設計師視覺化的表達介面所用的元件與元件的配置；而介面詞彙可視為Net-PAC 之「摘述」，主要應用在描述每個介面中元件之細部規格。 12.2.3 介面藍圖及介面詞彙(2/4) 圖12-4 介面藍圖範例 12.2.3 介面藍圖及介面詞彙(3/4) 每個介面藍圖會搭配一個介面詞彙以表達該介面之代號、名稱、說明、介面中各元件的名稱、類型與功能及概念說明。 若該元件可用於顯示或儲存資料庫中的資料，須說明其代表的資料表欄位、資料型態和長度。 12.2.3 介面藍圖及介面詞彙(4/4) 表12-3 介面詞彙樣板 12.3 使用者介面靜態結構塑模與案例(1/8) 使用者介面靜態節構塑模 使用者介面塑模包含了動態行為塑模與靜態結構塑模，兩者皆始於需求塑模。 需求塑模之活動圖中每一個表達輸入與輸出的註記(N