流程圖通產(chǎn)圍繞具體任務(wù)或功能，將過程可視化狰贯。

6.1流程圖概述

目的：設(shè)計(jì)初期用于了解任務(wù)類型、如何協(xié)作完成任務(wù)、如何展現(xiàn)信息涵紊。設(shè)計(jì)過程中用于描述任務(wù)過程还绘、展示整體應(yīng)用框架。

受眾：開發(fā)栖袋、設(shè)計(jì)師拍顷、涉眾

工作量：取決于研究和計(jì)劃所要求的詳細(xì)程度和細(xì)節(jié)數(shù)量。

情境：可用于項(xiàng)目的整個(gè)過程塘幅。

格式：用各式各樣的符號(hào)來標(biāo)識(shí)過程中的不同步驟昔案。

6.2流程圖簡(jiǎn)介

站點(diǎn)地圖與流程圖的區(qū)別

站點(diǎn)地圖：代表層級(jí)體系、起點(diǎn)非常明確終點(diǎn)不明確电媳、展示目錄分類之間的關(guān)系踏揣。

流程圖：代表隨時(shí)間而變化的步驟、起點(diǎn)和終點(diǎn)都很明確匾乓、展示用戶如何與web站點(diǎn)或系統(tǒng)進(jìn)行信息交易捞稿。

流程圖面臨的挑戰(zhàn)：復(fù)雜性、完整性拼缝、綜合性

6.3流程圖解析

6.3.1 第1層：必備內(nèi)容

1娱局、步驟--包含兩部分：征求和收集部分、響應(yīng)和指示部分咧七。用帶箭頭的矩形表示衰齐。

2、起點(diǎn)和終點(diǎn)--用戶進(jìn)入和離開的位置继阻。屏幕和步驟可能不是一一對(duì)應(yīng)的耻涛。可以使用粒度描述步驟瘟檩。

3抹缕、路徑--盡量不要出現(xiàn)交叉的連線、限制修飾（帶箭頭線）墨辛、強(qiáng)調(diào)主要結(jié)構(gòu)卓研、直線與直線直角相連

4、決策點(diǎn)--菱形表示背蟆。集中排列決策點(diǎn)鉴分、按照相同的格式描述決策點(diǎn)、可接受超出yes/no的情況

5带膀、名稱--流程的標(biāo)題應(yīng)該概括這個(gè)流程的目的志珍。例如：新用戶注冊(cè)、登陸垛叨、編輯賬號(hào)首選項(xiàng)伦糯。

6.3.2 第2層：更多細(xì)節(jié)

1柜某、步驟之間的區(qū)別--視覺區(qū)別：重要步驟、主次路徑敛纲、必選可選步驟

2喂击、步驟細(xì)節(jié)--功能注釋、已有界面淤翔、線框圖翰绊、部分界面、草圖或縮略圖代替部分或全部屏幕

3旁壮、路徑的細(xì)節(jié)--通常不要給路徑增加大量細(xì)節(jié)监嗜，除非遇到：觸發(fā)點(diǎn)、狀態(tài)變化

4抡谐、泳道和其他分組--將步驟分組方法：泳道（適合展示多人協(xié)同工作分工）裁奇、背景字段（適合某些步驟集合在功能上有聯(lián)系）、設(shè)計(jì)步驟的樣式

5麦撵、錯(cuò)誤的場(chǎng)景--驗(yàn)證過程和捕獲錯(cuò)誤類型

6.3.3 第3層：更多情境信息

1刽肠、連接到其他流程中--在詳細(xì)過程圖標(biāo)附近需要一個(gè)微型綜合流程，以便了解情境

2免胃、用戶動(dòng)機(jī)--在最高級(jí)別的流程上關(guān)注用戶動(dòng)機(jī)最容易（音五？）

3、屏幕標(biāo)識(shí)符--使用字符數(shù)字的組合 唯一標(biāo)識(shí)屏幕杜秸，（要考慮修改的問題）

4放仗、其他問題--可寫下問題

6.4創(chuàng)建流程圖

6.4.1 流程圖的基本決策

1润绎、用途--必須有助于項(xiàng)目進(jìn)展撬碟。捕獲設(shè)計(jì)決策、反應(yīng)對(duì)現(xiàn)狀的理解

2莉撇、適應(yīng)過程--根據(jù)流程是在設(shè)計(jì)前還是后進(jìn)行制作呢蛤，流程圖的內(nèi)容、形式不太一樣棍郎∑湔希或者要進(jìn)行修訂流程圖

3、受眾--涉眾涂佃、其他設(shè)計(jì)人員励翼、開發(fā)人員。沒有明確優(yōu)先級(jí)情況下辜荠，優(yōu)先考慮開發(fā)人員

4汽抚、展示內(nèi)容--范圍、抽象程度（設(shè)計(jì)早期很抽象伯病，設(shè)計(jì)后期關(guān)注具體屏幕和交互）造烁、細(xì)節(jié)（確定哪些細(xì)節(jié)是必須的）。當(dāng)流程圖用于展示對(duì)比時(shí)，圖表更有用惭蟋。

5苗桂、構(gòu)建方式--單向流程（選擇非A即B，or）告组、多向流程（and）

6.4.2 使流程圖更加完美的技巧

1煤伟、從關(guān)鍵里程碑開始--可在紙上快速創(chuàng)建 ?流程中的主要步驟或屏幕，然后在旁邊增加小方框或者注釋木缝，加入決策點(diǎn)和新步驟持偏，完善流程圖

2、保持布局簡(jiǎn)單--從紙上轉(zhuǎn)移到軟件中（一開始就可以在軟件中吧氨肌，用omnigraffle還能自動(dòng)布局）

3鸿秆、確定視覺語言--區(qū)分好：主次要路徑、標(biāo)準(zhǔn)步驟和錯(cuò)誤場(chǎng)景步驟怎囚、現(xiàn)有屏幕和新屏幕卿叽、用戶1和2、用戶任務(wù)和系統(tǒng)任務(wù)

4恳守、簡(jiǎn)化復(fù)雜流程圖--當(dāng)流程失去內(nèi)聚性時(shí)：

更多內(nèi)容可借鑒統(tǒng)一建模語言UML

5考婴、構(gòu)建框架--屏幕可同時(shí)支持多個(gè)場(chǎng)景，允許用戶完成多個(gè)任務(wù)催烘。一個(gè)框架就是一個(gè)所有屏幕組成的網(wǎng)絡(luò)沥阱。用于預(yù)測(cè)關(guān)鍵或者頻繁出現(xiàn)的場(chǎng)景。

下圖為例子：

6.4.3 提高繪制流程圖的技巧

1伊群、捕獲所有細(xì)節(jié)問題--方法：讓其他人查看流程考杉、嘗試設(shè)計(jì)不同的流程。

2舰始、表達(dá)實(shí)際情況--將流程與需求聯(lián)系起來崇棠、在流程中嵌入人物角色、繼續(xù)前進(jìn)（不要糾結(jié)于流程圖）

3丸卷、更新文檔--先判斷是否有必要更新流程圖枕稀。更新過程中應(yīng)該考慮：保持簡(jiǎn)單、保留原貌（最新版和原始版都保留）

6.5推介流程圖

6.5.1 確立會(huì)議目標(biāo)

1谜嫉、設(shè)計(jì)反饋會(huì)議--討論內(nèi)容：設(shè)計(jì)原則萎坷、需求、用戶的工作負(fù)荷沐兰、技術(shù)風(fēng)險(xiǎn)

2哆档、技術(shù)可行性會(huì)議--討論內(nèi)容：基本的假設(shè)、復(fù)雜的交互僧鲁、有什么變化虐呻、什么是重要的

3象泵、操作驗(yàn)證會(huì)議--討論內(nèi)容：差異、操作的工作負(fù)荷斟叼、來源

6.5.2 調(diào)整基本的會(huì)議結(jié)構(gòu)

1偶惠、建立情境--會(huì)議開始，用1朗涩、2句話闡明流程的主要內(nèi)容：用戶需求忽孽、業(yè)務(wù)目標(biāo)、技術(shù)需求谢床、澄清問題兄一、公司的需要。

2识腿、描述視覺規(guī)則

3出革、強(qiáng)調(diào)主要設(shè)計(jì)決策--交互模型、高級(jí)過程

4渡讼、提供基本原理和確定限制條件

5骂束、指出細(xì)節(jié)信息--從頭到尾沿著沒有分支的主要路徑遍歷整個(gè)流程。

6成箫、表達(dá)的含義--除了常見的技術(shù)約束和設(shè)計(jì)挑戰(zhàn)之外展箱，還可以詳述有效性和額外需求。

7蹬昌、征求意見--邏輯正確嗎混驰？步驟有遺漏嗎？有沒有辦法提高效率皂贩？

8栖榨、提供評(píng)審框架--技術(shù)人員和開發(fā)人員（擅長(zhǎng)邏輯）、業(yè)務(wù)涉眾（擅長(zhǎng)將流程與需求比較）

6.5.3 避免新手錯(cuò)誤

方法：

1先紫、將抽象內(nèi)容具體化--現(xiàn)場(chǎng)創(chuàng)建流程圖治泥、把焦點(diǎn)從文檔轉(zhuǎn)移到對(duì)話、了解下一步工作

2遮精、保持靈活性--對(duì)新增需求演示相關(guān)風(fēng)險(xiǎn)

6.6 運(yùn)用流程圖

6.6.1 規(guī)劃型流程圖

規(guī)劃型流程圖應(yīng)滿足：

1、避免挖掘邏輯上過多的細(xì)節(jié)

2败潦、展示用戶體驗(yàn)來調(diào)整項(xiàng)目安排

6.6.2 流程圖與線框圖

本章前面提到的“線框式流程圖”可能會(huì)忽視流程過多關(guān)注屏幕切換本冲。

省略式線框圖和流程圖的混搭會(huì)彌補(bǔ)這個(gè)缺點(diǎn)。降低線框圖的精確度和縮減屏幕尺寸來對(duì)線框圖進(jìn)行壓縮劫扒。

6.6.3 流程圖與人物角色

可以在每個(gè)屏幕旁邊顯示人物角色檬洞，并描述用戶的印象和期望。

6.7過程的深層次

網(wǎng)站交互性越強(qiáng)沟饥，流程圖就越重要添怔。