流程圖（Flow Chart）這個(gè)概念對(duì)很多人來(lái)說(shuō)并不陌生猫胁，但如果讓你定義或者舉例說(shuō)明什么是產(chǎn)品流程圖箱亿，恐怕還是有難度的∑眩或許諸如“用戶體驗(yàn)”届惋、“交互設(shè)計(jì)”、“邏輯關(guān)系”等詞會(huì)像走馬燈般閃現(xiàn)在你的腦海中菠赚，但這是流程圖的全部?jī)?nèi)容嗎脑豹？很顯然并不是。

作為流經(jīng)整個(gè)系統(tǒng)的信息流的圖形代表衡查，流程圖說(shuō)白了就是表示先做什么瘩欺、后做什么，也就是“開(kāi)始拌牲，結(jié)束击碗，行動(dòng)，狀態(tài)與判斷”的組合们拙。根據(jù)核心業(yè)務(wù)及達(dá)成目標(biāo)的不同，又可以將流程圖分為四種類型：產(chǎn)品流程圖阁吝、業(yè)務(wù)流程圖砚婆、操作流程圖及頁(yè)面跳轉(zhuǎn)流程圖。在幾乎所有的產(chǎn)品設(shè)計(jì)中突勇，頁(yè)面流程圖都發(fā)揮著關(guān)鍵且不可替代的作用装盯。

一、關(guān)于頁(yè)面流程圖

顧名思義甲馋，頁(yè)面流程圖是用來(lái)展示頁(yè)面之間的跳轉(zhuǎn)邏輯關(guān)系埂奈，描述在什么條件下、做了什么事情以及所帶來(lái)的后續(xù)操作定躏。對(duì)設(shè)計(jì)師及產(chǎn)品經(jīng)理而言账磺，頁(yè)面流程圖是細(xì)化工作量的基礎(chǔ)，不僅能直觀地發(fā)現(xiàn)潛在的“地雷”痊远、進(jìn)行全局/系統(tǒng)化的思考垮抗，而且能幫助聚焦于用戶目標(biāo)與任務(wù)的完成，制作及調(diào)整修改的成本也低碧聪。

相較于單純的功能列表冒版，頁(yè)面流程圖也更易被你的開(kāi)發(fā)工程師所接受，它在評(píng)估工作量逞姿、開(kāi)展代碼工作及反射功能邏輯等方面辞嗡，都可以作為重要的參考依據(jù)捆等。那如何才能繪制出既能把事情講清楚，也能把頁(yè)面交代清楚续室，同時(shí)又讓大家感覺(jué)舒服的頁(yè)面流程圖呢栋烤？下面小編總結(jié)了一些技巧及心得，不妨一起來(lái)看看猎贴。

二班缎、繪制頁(yè)面流程圖

總體來(lái)講，大致能分為以下三個(gè)步驟：

第一步：驗(yàn)證idea并優(yōu)化功能她渴、優(yōu)先級(jí)｜開(kāi)始前

俗話說(shuō)“好的開(kāi)始是成功的一半”达址。同理在流程圖繪制中，也需要提前做好“思想”準(zhǔn)備趁耗，其中驗(yàn)證自己的idea是否靠譜以及明確用戶將如何參與使用十分重要沉唠。設(shè)計(jì)想法的靠譜程度，可以結(jié)合目標(biāo)用戶群體苛败、用戶價(jià)值以及用戶體驗(yàn)來(lái)進(jìn)行驗(yàn)證满葛。同時(shí)，需要對(duì)用戶的實(shí)際操作進(jìn)行預(yù)想罢屈，從而優(yōu)化功能點(diǎn)及其中的流程嘀韧。最終明白我們要做什么，為哪些人做缠捌，主要的功能是哪些锄贷，功能之間是怎么樣的流程。這里以國(guó)外作品集網(wǎng)站Behance上的設(shè)計(jì)師Anny Zhang的設(shè)計(jì)為例：

第二步：從第一個(gè)初始頁(yè)面繪制｜進(jìn)行中

在知道了系統(tǒng)應(yīng)該具有的功能曼月、提供的內(nèi)容之后谊却，現(xiàn)在需要將這些功能及內(nèi)容巧妙地分配到不同的頁(yè)面中去。頁(yè)面中會(huì)包含鏈接哑芹、按鈕炎辨、表單等元素，在經(jīng)過(guò)用戶的觸發(fā)后聪姿，會(huì)跳轉(zhuǎn)到其他的頁(yè)面上碴萧。同時(shí)，頁(yè)面之間會(huì)有鏈接線進(jìn)行連接末购，具有不同的狀態(tài)及屬性勿决，最終表現(xiàn)用戶不同的操作指令下、不同頁(yè)面的流轉(zhuǎn)關(guān)系招盲。

可能聽(tīng)起來(lái)會(huì)比較復(fù)雜低缩，但其實(shí)就像講故事一樣，繪制流程圖最簡(jiǎn)單的方式是從第一個(gè)初始頁(yè)面開(kāi)始。過(guò)程中咆繁，不必糾結(jié)于細(xì)分用戶的類型讳推、猜想用戶也許根本用不到哪些操作，而是根據(jù)窮舉各項(xiàng)操作玩般，假設(shè)判斷用戶若點(diǎn)擊什么就會(huì)到哪里银觅。這里以一個(gè)叫做Gogobot的原型例子為例，它便是以Home頁(yè)為初始頁(yè)開(kāi)始頁(yè)面的流程展示：

古人有云“君子善假于物也”坏为。無(wú)論你是專業(yè)知識(shí)過(guò)硬究驴、即使用Word也能隨手畫出amazing的流程圖的設(shè)計(jì)大咖，還是尚且處于懵懂中的設(shè)計(jì)菜鳥匀伏，一款好用的工具能起到錦上添花或雪中送炭的作用洒忧。這里小編提的兩個(gè)精美的頁(yè)面流程圖例子，都是用Mockplus這款原型工具制作出來(lái)的够颠，除了提供精美的外觀外熙侍，它還可以做到：

－即時(shí)生成（點(diǎn)擊軟件頂部工具欄的“流程圖”圖標(biāo)，即可一鍵快速生成）履磨；

－展示全部或任意多個(gè)頁(yè)面的流程圖蛉抓；

－智能生成流程鏈接線，展示頁(yè)面的批注信息剃诅；

－支持一次導(dǎo)出頁(yè)面流程圖巷送，方便快捷。

第三步：頁(yè)面結(jié)構(gòu)及內(nèi)容的反復(fù)調(diào)整｜結(jié)束后

完成了初步的繪制后矛辕，還需要通過(guò)自己不斷審查惩系、團(tuán)隊(duì)內(nèi)部反復(fù)確認(rèn)，將最符合用戶如筛、團(tuán)隊(duì)及自己預(yù)期的設(shè)計(jì)idea落地。除了邏輯及交互關(guān)系外抒抬，頁(yè)面的整體結(jié)構(gòu)是否合理也很關(guān)鍵杨刨。這里Mockplus也提供了一鍵切換腦圖設(shè)計(jì)模式的功能，可以快速規(guī)劃及調(diào)整需要的模塊擦剑，對(duì)于項(xiàng)目的整體功能進(jìn)行演示講解妖胀，同時(shí)支持導(dǎo)出基于圖表的圖片，便于PRD文檔的籌劃惠勒。

作者：蟲蟲飛

著作權(quán)歸作者所有赚抡。