流程圖和線框圖的關系 - 網頁設計

http://webdesign.zoapcon.com

流程圖(task flow)是指用圖形語言的方式畫出用戶在使用這個產品的方法和達到具體功能的步驟。通常會把產品的使用流程作為某些任務去完成,用語言描述出想要達到的目的,每一個步驟用一個節點來表示,用線和箭頭指示出每一步驟的方向和所要到達的下一個步驟。流程圖意在幫助設計師很好的了解產品的功能結構和用戶每一步的操作而達到白己的使用日的。

但是流程圖也分為兩大類:

一類是產品經理或者技術人員在開發過程中使用的邏輯流程圖,如圖1:


圖1

另一類是產品設計或用戶體驗人員輸出的頁面流程圖,如圖2:


圖2

頁面流程圖除了用Photoshop、 Illustrator等繪圖工具實現的流程圖之外,還可以是用flash、catalyst實現的帶交互效果的流程,也可以是用axure、Balsamiq等原型工具實現的頁面跳轉邏輯流程。

線框圖(wireframe)是在邏輯流程圖的基礎上,用線框的形式細化界面的主要功能和基本布局定位,包括導航、標題、圖片,圖標,文字內容,按紐,各種控制器和形式等,從而確定各個界面之間具體的交互關系。

可以按照實現形式分成如下幾類:

最簡單的方式就是用紙和筆簡單繪制實現的紙質線框圖,如圖3


圖3

 


arrow
arrow
    文章標籤
    網頁設計 web design
    全站熱搜

    inspirr 發表在 痞客邦 留言(0) 人氣()