一．使用故事板（Storyboard）技術，建模網上訂機票、車票，或訂旅店的過程。

故事前提：你是註冊使用者，並已登陸。

故事起點：發起目標查詢

故事終點：確認訂單（不包含支付）

描述手法：參考 “建模練習” 文件

用“藝龍網”的網上訂酒店來模仿建模：（更多資訊在藝龍網官網http://www.elong.com/）

圖1顯示了進入網站後的首頁，首先需要客戶輸入目的地（預設為國內酒店，也可以選擇國際酒店）、選擇入住日期以及退房日期，而關鍵詞為可選項。

圖1

圖2顯示了點選關鍵詞一欄的空白處會出現的關鍵詞選項，客戶可以根據自己的旅程或個人喜好選擇，也可以直接鍵入相關內容。

圖2

點選圖1的搜尋鍵後，會進入如圖3的介面。這裡的目的地可以供客戶重新選擇，入住、離開日期也可以重新選擇。顯示出的酒店列表頁可以根據提示詞如“位置”、“房價”、“星級”等進行多重篩選

圖3

在篩選出來滿足條件的酒店列表中（如圖4所示），客戶可以選擇排列順序：口碑（評分）、距離、價格分別可以從高到低或從低到高排序。另外，在列表右邊還有一個區域交通圖，供客戶在不確定酒店具體位置的情況下選擇酒店。

圖4

若挑選中心宜的酒店，點選圖4中的“檢視詳情”後，客戶會進入該酒店的詳細情況頁面。該頁面如圖5所示，有“房型”供不同客戶選擇自己喜好的不同價格的房型，有“酒店資訊”按鍵供客戶檢視酒店詳情，也有“交通”按鍵檢視該酒店的具體位置以及交通路線，有“點評”一欄檢視歷史使用者對該酒店的住後點評供客戶參考。

圖5

在點選圖5的“預訂”後，進入圖6頁面，會有“預訂資訊”和“入住資訊”供客戶修改並確認預訂資訊。另外，還需要填寫聯絡電話並接受確認簡訊，填寫個人郵件供預訂成功後的酒店商家傳送確認預訂郵件給客戶。

圖6

畫出介面流圖： 建議工具 PPT 。 注意：介面是不同使用者操作的，請使用不同色彩。例如，請 XX 代支付操作介面。

圖7

畫出最少三個 UI 原型： 建議工具 PPT， 注意：選擇與下訂單相關的互動元素，廣告、推薦等元素就免了。

每個原型UI有解釋，說明其中關鍵資料和操作要點。

UI1：選擇酒店首頁

UI2：點選“Search”後的頁面

UI3：點選“More Details”後跳入的酒店頁面

二．使用 UML UseCase Diagram 建模

建模物件： “建模練習” 文件

建模工具： UMLet 14.1.1 stand-alone

Use case: Reserve Hotel

Actors: Customer, System

Type: Primary

Description: A customer enter the Reserve Hotel website and prepare to book a room. The customer type in the destination city, select the check in and out date and press the Search button to submit the request to the system to find available hotels. The successful website informs a list of hotels with their major information. The customer choose room type, and confirm reservation.