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

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

• 一類是產(chǎn)品經(jīng)理或者技術(shù)人員在開發(fā)過程中使用的邏輯流程圖，如圖1：

圖1

• 另一類是產(chǎn)品設(shè)計或用戶體驗人員輸出的頁面流程圖，如圖2：

圖2

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

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

可以按照實現(xiàn)形式分成如下幾類：

• 最簡單的方式就是用紙和筆簡單繪制實現(xiàn)的紙質(zhì)線框圖，如圖3

圖3

這里提供幾個可打印的互聯(lián)網(wǎng)產(chǎn)品設(shè)計線框圖模板：

1、紙面瀏覽器原型

圖4

2、iPhone紙面原型草圖

圖5

3、iPhone低保真紙面原型

圖6

4、還是iPhone高保真紙面原型

圖7

5、帶網(wǎng)格的網(wǎng)站原型

圖8

• 復(fù)雜一點的可以用Axure、Balsamiq等原型工具實現(xiàn)HTML線框圖，可以參考《使用線框圖來簡化你的產(chǎn)品設(shè)計流程》一文，如圖9：

圖9

不要忘記用戶界面設(shè)計版式－－用戶界面設(shè)計版式對設(shè)計用戶界面是很有幫助的。版式往往能解決常見問題，合理的版式可以方便用戶熟悉界面，盡快閱讀應(yīng)用。因此，要在設(shè)計流程的初期階段就考慮版式，最好在草圖（UE）階段就開始，如圖10：

圖10

一些基本的頁面布局也需要熟悉，或者自己制定一套具有延展性的頁面布局標(biāo)準(zhǔn)，如圖11：

圖11

最后總結(jié)一下，流程圖分為邏輯流程圖和頁面流程圖，線框圖分為紙質(zhì)線框圖和HTML線框圖，線框圖加上了操作步驟、交互邏輯可以叫做流程線框圖。這些在理清產(chǎn)品架構(gòu)，梳理產(chǎn)品邏輯時至關(guān)重要。但是流程圖和線框圖都是為了輔助產(chǎn)品開發(fā)，而不能本末倒置，在流程和原型階段花費太多的時間和精力，只要能便于溝通，盡量選擇最簡單最高效的方式。

來源：http://elya.cc/product/600.html