上篇寫到業(yè)務(wù)流程圖捺萌，那么業(yè)務(wù)流程圖做完是不是就可以愉快的畫原型圖了呢档冬？聰明的你從標(biāo)題上你已經(jīng)得出答案，中間應(yīng)該還有點什么互婿，是的那就是頁面流程圖捣郊，那么頁面流程圖是又是個什么鬼。從度娘上找來的圖慈参。
頁面流程圖是什么呛牲？
首先：上文中提到過業(yè)務(wù)流程圖是從產(chǎn)品視角來看產(chǎn)品或功能，交互原型圖是以用戶的視角來看產(chǎn)品或功能驮配，從這點上劃分頁面流程圖也是以用戶的視角來看產(chǎn)品或功能娘扩。
其次：上文打過比方說如果業(yè)務(wù)流程圖好比房子的圖紙，那么頁面流程圖可以比作骨架壮锻，而交互原型圖是填充骨架的每個細小的部分琐旁，頁面流程圖重點描述頁面之間元素與邏輯關(guān)系。
開篇是一個頁面流程圖的基本做法事例猜绣，我們通過這張圖可以一目了然的看清楚用戶是如何用我們的產(chǎn)品的灰殴，而我們的交互原型圖大家都知道更多的細節(jié)用axure或sketch做的一個模塊一個模塊，你很難以用戶的視角看清楚一個產(chǎn)品或功能的全貌掰邢，直接從業(yè)務(wù)流程圖到原型就會面臨很多點抓不準(zhǔn)牺陶，也就會改改改。
也許有小伙伴還是沒太看懂頁面流程圖是啥辣之，那么我畫也個微信的頁面流程圖吧（只畫一部分了掰伸，而且是簡單的畫了下，下面會舉詳細的例子）
從這個圖是否能清晰的看到整個產(chǎn)品的全貌怀估，看產(chǎn)品的每個流程是怎么走的狮鸭，交互原型圖是做不到這點的，而且這里可以快速體驗檢測哪里有問題多搀，發(fā)現(xiàn)問題做調(diào)整比在交互原型里去調(diào)整方便的很多歧蕉，這就是頁面流程圖。
頁面流程圖VS信息架構(gòu)圖
對于頁面流程圖有些小伙伴可能沒怎么做過康铭，但是對于信息架構(gòu)圖可能大多數(shù)小伙伴都接觸過廊谓，還是以微信舉例畫個簡單的信息架構(gòu)圖
和上面的頁面流程圖對比有什么區(qū)別呢？
一麻削、信息架構(gòu)圖是以產(chǎn)品的視角來看產(chǎn)品或功能的蒸痹，頁面流程圖是以用戶的視角，視角不同呛哟。
二叠荠、如果一個很復(fù)雜的產(chǎn)品如淘寶、微信很難從信息架構(gòu)圖中看用戶使用流程的扫责。
我們來看下上篇文章中的業(yè)務(wù)流程圖例子頁面流程圖中包含什么/怎么做榛鼎？
聰明的你應(yīng)該發(fā)現(xiàn)了，頁面流程圖就是業(yè)務(wù)流程圖中四方形的部分以及菱形的異常鳖孤，不過在頁面流程圖中給用戶看的異常和給后臺看的異常是不同的者娱，給用戶看的異常就是彈窗。
所以頁面流程圖中包含：
（1）主干流向清晰
（2）功能頁面中苏揣，有哪些需要表現(xiàn)的元素
（3）明確表示異常的處理邏輯
（4）考慮下個頁面的觸發(fā)點
（1）主干流向清晰：從登錄-注冊-登錄-忘記密碼流向清晰。
（2）有哪些需要變現(xiàn)的元素：登錄頁如（輸入賬號平匈、輸入密碼框沟、登錄按鈕、注冊按鈕增炭、忘記密碼按鈕）
（3）異常處理：有哪些異常忍燥，會有什么表現(xiàn)（賬號與密碼不符、用戶名格式不對等）隙姿。
（4）考慮下個頁面的觸發(fā)點：如登錄頁面的下個頁面的觸發(fā)點就是三個按鈕分別是（登錄梅垄、到注冊頁、到忘記密碼）输玷。
無論是評審還是交付，業(yè)務(wù)流程圖饲嗽、頁面流程圖炭玫、交互原型圖，都是一個層級一個層級做下來的貌虾，編好號方便給團隊小伙伴講解吞加，也方便查找。
關(guān)于工具和團隊協(xié)作
我個人習(xí)慣用axure尽狠，當(dāng)然sketch和其它的軟件都木有問題了衔憨，怎么方便怎么做，有利于團隊溝通快速推進項目袄膏，管他黑貓白貓能抓到耗子就是好貓践图。
關(guān)于團隊協(xié)作，這個老生常談的問題了沉馆，原則上團隊人員配備完善的情況下码党，業(yè)務(wù)流程圖是PM輸出德崭，頁面流程圖和交互原型圖是UX輸出，之后對接UI揖盘、研發(fā)眉厨、測試等，但是一些團隊人員配備不全的UI之前的都是PM來完成兽狭，也有頁面流程圖和交互原型圖UI來做的憾股，這個不同團隊情況不同。
做頁面流程的核心是先做加法再做減法箕慧，就是說先把能想到的都想到服球，之后再去優(yōu)化體驗過程減掉一些不必要的。
優(yōu)點就是修改方便定位颠焦，不容易迷失斩熊；邏輯條理清晰，方便團隊成員查看溝通蒸健。
