當前位置:才華齋>設計>網頁設計>

如何畫互動設計流程圖

網頁設計 閱讀(2.86W)

流程圖是產品經理和互動設計師都必須掌握的技能,一張流程圖可以省去需求文件和互動設計文件的很多文字描述,本文為大家介紹有關畫互動設計流程圖的相關內容。就跟隨本站小編一起去了解下吧,想了解更多相關資訊請持續關注我們應屆畢業生考試網!

如何畫互動設計流程圖

流程圖的基本構成。

從上面幾張圖可以看到,流程圖由特定的圖形構成,但具體的樣子由圖本身的目的和閱讀者的閱讀習慣(或約定)來決定,所以使用的圖形並不是固定的,比如有人用圓形表示開端和結束,有人則用圓角矩形,有人有云團表示其他流程的引用,有人用矩形加文字來表示,形式不重要,達到描述的效果而閱讀者能讀懂才是最重要。設計流程圖也遵循這個原理。

設計流程圖。

設計流程圖長得並不特別,跟全世界流程圖都差不多,也同樣是作為一種表達工具存在。區別只在於描述的物件和組成的內容不一樣。設計流程圖的一大重點是面向表現層,也就是說,描述的是介面(或叫螢幕)的變化,是使用者看到的介面的行為流。什麼行為呢,介面之間的跳轉邏輯,也就是導航邏輯。

導航是資訊架構的一部分(教科書把資訊架構劃分為組織、導航、標籤、搜尋四個系統),當然是互動設計的重要一環,導航的'設計思路就能用流程圖表達出來(或者也可以說用流程圖來輔助設計吧),這也是個人覺得設計流程圖的最重要運用。

從圖中可以看出構成:

a 介面。

一個矩形代表一個介面,這個流程中使用者走過兩個介面(登入頁和首頁),因為表達的是介面的跳轉,介面是使用者實實在在接觸到的媒介,非介面的內容,不要出現。

b 動作。

矩形之間也就是介面之間加上一個觸發動作,比如從介面A點選下一步按鈕,到達介面B,“點選下一步”就是連線這兩個介面的關鍵動作,需要標示出來,上圖例子就是“單擊提交按鈕”。

c 條件。

一個動作之後可能有多種“是/否”的結果,則在矩形之間、動作之後加上一個或多個判斷菱形。如上圖的檢驗賬號密碼是否輸入正確。