使用者介面塑模.ppt

吳仁和、林信惠 (2004) 第十五章 使用者介面塑模 內容大綱 學習目標 第一節 導論 第二節 使用者介面塑模工作與工具 第三節 使用者介面塑模方法論 第四節 使用者介面塑模案例 第五節 結論 學習目標 詳讀本章，你至少能瞭解： 使用者介面塑模之重要工作。 使用者介面塑模之之步驟、工具與原則。 如何以Net-PAC模式進行使用者介面塑模。 導論(1/2) 一般而言，資訊系統主要包括三個部分：使用者介面、問題處理與知識子系統，其中使用者介面是資訊系統與使用者間溝通的主要橋樑。 圖形化的使用者介面已是目前資訊系統的主流，市面上許多使用者介面開發工具皆提供多種功能與元件，以滿足不同的使用者介面之不同需求。 導論(2/2) 雖然開發工具具有如此的功能，但由於GUI之複雜性，如果缺乏一有系統的設計方法，則使用者、系統分析師與程式設計師間溝通之難度將大幅增加。 本章將介紹一個使用者介面塑模方法論，該方法論整合PAC模式、藍圖與狀態圖等以改善上述問題，並以夢幻系統之案例進一步說明如何應用該方法論進行使用者介面塑模。 使用者介面塑模工作與工具(1/5) 使用者介面塑模工作包含兩個部分： 使用者介面架構與介面元件的設計，該部分主要處理介面元件之選擇或設計、介面之配置及每個元件之輸入與輸出資訊等。 介面間與介面內元件間互動的控制流程。系統分析師可依據需求塑模之處理描述，來規劃元件間的互動流程。 使用者介面塑模可應用介面架構圖、介面藍圖與元件規格、介面狀態圖與轉換表等以完成上述工作。 使用者介面塑模工作與工具(2/5) 介面架構圖 介面架構圖主要是用於表達使用者介面之結構關係，以及介面間運作之控制流 。 PAC模式是常見的介面架構表達工具（參考圖 15-1）。 表達：定義物件的外觀，並處理訊息的輸入及輸出。 摘述：定義物件的功能及概念。 控制：是表達與摘述間溝通的橋樑，同時也是與其他物件相互連繫的管道。 圖15-1 PAC 架構圖範例 使用者介面塑模工作與工具(3/5) 傳統的PAC 模式，只能用來表達樹狀的階層式系統介面架構，無法表達Web-based系統中網狀的使用者介面架構，例如超連結型態。 網狀式的PAC（稱為Net-PAC）模式，使其能呈現階層式與網狀式之使用者介面架構。擴充後之Net-PAC架構圖（如圖15-2），除了具有原來之能力外，特別是在Web-based系統的環境之下，更能充分表現系統各介面之間的關聯與互動。 圖15-2 Net-PAC 架構圖範例 使用者介面塑模工作與工具(4/5) 介面元件 介面元件是存在於介面中的基本單元物件，包含名稱及屬性，並有固定的操作方式。介面元件是使用者與系統應用程式間相互溝通的元件，系統中每個工作的處理，不論是資料的輸入、指令的操作或處理訊息的輸出，都需透過介面元件來完成。 圖形化的使用者介面已經是系統介面設計的主流。經過多年的發展，系統開發工具中已提供了許多元件可供使用。部分常被設計師使用的元件如圖15-3所示。 圖15-3 介面元件範例(1/2) 圖15-3 介面元件範例(2/2) 使用者介面塑模工作與工具(5/5) 介面藍圖及元件規格 在介面架構中的每一個介面（或子介面），都須以一個介面藍圖與元件規格來明確的定義及規範。介面藍圖可視為是Net-PAC之表達，而元件規格可視為是Net-PAC之摘述。 介面藍圖主要是用於幫助設計師視覺化的表達介面所用之元件與元件之配置，如圖15-4a。 元件規格主要是用於描述每個介面中的介面代號、名稱、說明及介面中各元件的名稱、類型與功能及概念說明等（參考圖15-4b）。 圖15-4a 介面藍圖範例 圖15-4b 元件規格樣板 使用者介面塑模方法論(1/4) 使用者介面塑模應包括使用者（介面）需求塑模、靜態結構塑模和動態行為塑模。 使用者介面需求塑模 使用者介面需求塑模之活動包括需求擷取與需求轉換，需求轉換主要須根據使用者需求（需求擷取所得之資料），以流程圖（或活動圖）與處理描述表示，必要時並建立事件列。 在使用者需求分析中，以流程圖（或活動圖）與處理描述可以進一步的描述每個處理之執行步驟、法則、控制等，並說明其資料之輸入和輸出內容與所涉及之實體。 圖15-5 使用者介面塑模方法論 使用者介面塑模方法論(2/4) 使用者介面靜態結構塑模 使用者介面架構圖：由資料流程圖搭配事件列來建構。系統之完整的資料流程圖是一個階層架構，每一個資料流程圖中的處理可以被設計成一個介面，並以Net-PAC模式來呈現使用者介面架構圖。 介面藍圖及元件規格：根據所畫出的Net-PAC介面架構圖，針對圖中的每一個介面藍圖與使用者討論，以進一步明確的定義介面中功能與資訊需求的名稱、圖像、展示位置、格線、圖表與說明等，並完成介面元件規格。 使用者介面塑模方法論(3/