第十五章 使用者介面塑模 -.pptVIP

第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 PAC 架構圖範例 圖12-3 Net-PAC 架構圖範例 表12-1 介面元件範例 圖12-4 介面藍圖範例 表12-3 介面詞彙樣板 12.3 使用者介面靜態結構塑模與案例(1/8) 使用者介面靜態節構塑模 介面架構圖塑模案例 介面藍圖與介面詞彙塑模案例 圖12-5 西子灣線上訂購系統介面架構圖 圖12-6 購物車UI 之介面藍圖 表12-5 購物車UI 之介面詞彙（部分） 12.4 狀態圖 狀態圖用於表達一個物件、一個使用個案、多個使用個案間或一個系統在其生命週期中之行為，且強調表達狀態及其轉換關係。 一個狀態是一個物件（或系統）在其生命週期中某一時點之一個條件(Condition)或情況(Situation)，在此狀態中，它滿足某條件，執行某活動或等待某事件。 超狀態圖範例 12.5 使用者介面狀態塑模與案例 在進行使用者介面狀態塑模時，建議先完成UI 循序圖和使用者介面靜態結構塑模，才可瞭解哪些介面進行互動行為，並根據介面藍圖中每個介面使用的元件與配置方式，分析一介面的何種元件啟動了另一介面而完成介面之轉換。 以下將以西子灣線上訂購系統為例，依狀態圖之建構步驟，進行使用者介面互動行為中之狀態塑模。 圖12-10 新增訂購項目使用個案之狀態圖 圖12-11 西子灣線上訂購系統之狀態圖 12.6 結構化使用者介面塑模案例(1/12) 本節以夢幻系統之送貨處理為例（請參考第6章），配合使用者介面塑模方法論，以描述送貨處理子系統之使用者介面塑模。 使用者介面塑模之過程與結果展示如下。 圖12-12a 夢幻系統階層式介面架構圖 圖12-12b 夢幻系統網狀式介面架構圖 圖12-13 介面藍圖（介面1.2.1.2） 圖12-13 2-14 介面藍圖（介面1.2.1.2.1） 圖12-15 介面1.2.1.2之介面狀態圖範例 表12-12 介面1.2.1.2之介面狀態圖轉換表 12.7 結論(1/2) 本書提供一套完整的使用者介面塑模方法論，其中包括使用者介面動態行為的UI循序圖塑模、使用者介面的靜態結構塑模以及使用者介面動態行為的狀態圖塑模。 其中介面間之轉換是以UI循序圖表達，而各介面應呈現的架構、藍圖、元件功能與細部資訊是分別以Net-PAC介面架構圖、介面藍圖和介面詞彙表達，而介面內元件運作的邏輯與狀態轉移則是以狀態圖及狀態轉換表等工具表達。 因此，使用者介面塑模需完成之文件包含UI循序圖、Net-PAC 介面架構圖、介面藍圖、介面詞彙、狀態圖和狀態轉換表。 12.7 結論(2/2) 使用者介面塑模方法能讓分析師明確且清楚地根據使用者需求，定義出系統介面，程式設計師也能根據使用者介面塑模結果的文件，完成系統使用者介面的開發，並可與系統程式互相整合。 如透過同一個使用個案的UI循序圖可與表達系統程式的AC循序圖整合。這意謂著使用者介面與程式雖被分開建構，但兩者