用戶界面流程圖(故事板)

用戶界面原型 (User Interface Prototype) 是一個很好的方法來探索你的用戶界面 (User Interface or UI),但不幸的是,你會很容易被用戶界面的細節迷住,而忽略了大局。因此,你往往看不到系統 UI 裡高層次的關係和相互作用。用戶界面流程圖 (User Interface Flow Diagram) – 又稱為故事板 (Storyboard) 、界面流程圖 (Interface Flow Diagram) 、視窗導覽圖 (Window Navigation Diagram) 、和内容導覽圖 (Context Navigation Map) – 讓你能夠模擬主要用戶界面元素之間的高層次關係,因此能夠問到基本的可用性問題。

在圖一裡,你會看到為一個大學系統的用戶界面流程圖的開始部分,在 RUP 裡是稱為導航圖。每個框代表主要用戶界面元素,正如你模擬實例 (Instance) / 對象 (Object) 一樣。箭嘴代表它們之間可能的流動,正如你模擬在活動圖 (Activity Diagram) 裡的轉換一樣。例如,當你在桌面的畫面裡,你可以利用學生圖指示帶你到搜索學生的畫面。當你在那裡,你可以回到桌面的畫面或到學生檔案的畫面。

圖一. UI 流程圖
用戶界面流程圖

用戶界面的流程圖有兩個用途。第一個是,它們被用來模擬用戶與軟件之間的相互作用,一切都定義在一個用例 (User Case) 裡。例如,一個用例可以指幾個屏幕,並提供它們如何使用的解釋。根據這些資料,你可以開發一個用戶界面流程圖能夠反映出在一個用例裡的行為視圖 (Behavioral View)。第二個是,正如你在圖一中所看到的,它們可以讓你得到一個高層次的概述。這個概述有效地組合了你所有用例裡得出來的行為視圖,它被稱為體系 用戶界面的結構視圖 (Architectural View) (Constantine and Lockwood 1999)。我比較喜歡採取高層次概述的方法,又稱為結構方法 (Architectural Approach),因為它讓我明白到整個系統的用戶界面。

由於用戶界面流程圖提供一個高層次的角度來看系統界面,你可以很快就了解到系統是應該如何運作的。它讓你能夠確認到應用程式界面的整體流程。例如,它的流程是否合理?我不是那麼肯定。為什麼我不能由課程詳情去到教授資料?當你在查看課程資料時候,是不是有可能你會想查看教授的資料?此外,使用用戶界面的流程圖可以用來確定用戶界面是否可用的。如果有太多框和箭嘴,你的系統可能太大,對用者來說,是難以學習和了解的。

【原文】
http://www.agilemodeling.com/artifacts/uiFlowDiagram.htm

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s