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

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

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

圖1

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

圖2

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

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

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

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

圖3

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

1、紙面瀏覽器原型

圖4

2、iPhone紙面原型草圖

圖5

3、iPhone低保真紙面原型

圖6

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

圖7

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

圖8

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

圖9

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

圖10

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

圖11

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

原文：http://elya.cc/product/600.html