流程圖(task flow)是指用圖形語言的方式畫出用戶在使用這個產品的方法和達到具體功能的步驟。通常會把產品的使用流程作為某些任務去完成，用語言描述出想要達到的目的，每一個步驟用一個節點來表示，用線和箭頭指示出每一步驟的方向和所要到達的下一個步驟。流程圖意在幫助設計師很好的了解產品的功能結構和用戶每一步的操作而達到白己的使用日的。
但是流程圖也分為兩大類：
- 一類是產品經理或者技術人員在開發過程中使用的邏輯流程圖，如圖1：
圖1
- 另一類是產品設計或用戶體驗人員輸出的頁面流程圖，如圖2：
圖2
頁面流程圖除了用Photoshop、 Illustrator等繪圖工具實現的流程圖之外，還可以是用flash、catalyst實現的帶交互效果的流程，也可以是用axure、Balsamiq等原型工具實現的頁面跳轉邏輯流程。
線框圖(wireframe)是在邏輯流程圖的基礎上，用線框的形式細化界面的主要功能和基本布局定位，包括導航、標題、圖片，圖標，文字內容，按紐，各種控制器和形式等，從而確定各個界面之間具體的交互關系。
可以按照實現形式分成如下幾類：
- 最簡單的方式就是用紙和筆簡單繪制實現的紙質線框圖，如圖3
圖3
這里提供幾個可打印的互聯網產品設計線框圖模板：
1、紙面瀏覽器原型
圖4
圖5
圖6
圖7
5、帶網格的網站原型
圖8
- 復雜一點的可以用Axure、Balsamiq等原型工具實現HTML線框圖，可以參考《使用線框圖來簡化你的產品設計流程》一文，如圖9：
圖9
不要忘記用戶界面設計版式－－用戶界面設計版式對設計用戶界面是很有幫助的。版式往往能解決常見問題，合理的版式可以方便用戶熟悉界面，盡快閱讀應用。因此，要在設計流程的初期階段就考慮版式，最好在草圖（UE）階段就開始，如圖10：
一些基本的頁面布局也需要熟悉，或者自己制定一套具有延展性的頁面布局標準，如圖11：
圖11
最后總結一下，流程圖分為邏輯流程圖和頁面流程圖，線框圖分為紙質線框圖和HTML線框圖，線框圖加上了操作步驟、交互邏輯可以叫做流程線框圖。這些在理清產品架構，梳理產品邏輯時至關重要。但是流程圖和線框圖都是為了輔助產品開發，而不能本末倒置，在流程和原型階段花費太多的時間和精力，只要能便于溝通，盡量選擇最簡單最高效的方式。
