FLOW CHART 和 UI FLOW 的差別

發(fā)布時(shí)間：2015-05-19 09:52:48 作者：佚名

UI Designer 很熟悉 UI Flow，對(duì) Flow Chart 可能不太熟。在軟體開(kāi)發(fā)中 Flow Chart 通常是由 SA 撰寫(xiě)，重點(diǎn)在「判斷」上…沒(méi)有那麼難，把它當(dāng)成雜志附的心理測(cè)驗(yàn)，選「是」走右邊、選「否」走左邊就好了。

　　UI設(shè)計(jì)中許多概念字面看起來(lái)差別不大，但是實(shí)際上卻是千差萬(wàn)別。許久未曾發(fā)文的臺(tái)灣設(shè)計(jì)師@Akane_Lee老師，借辨析概念的機(jī)會(huì)，詳細(xì)闡述了Flow Chart 和UI Flow 的功用~

　　快一個(gè)月沒(méi)有發(fā)文了，忙著寫(xiě)企劃案、做 Prototype、跑實(shí)驗(yàn)生報(bào)告。最近要整理大量的 UI Flow，越整理腦袋越像醬糊。就來(lái)聊聊 UI Flow 和 Flow Chart 吧。Flow 就是「流程」，UI Flow 是頁(yè)面流程，而 Flow Chart 是流程圖，兩者是完全不同的圖表。

　　UI Designer 很熟悉 UI Flow，對(duì) Flow Chart 可能不太熟。在軟體開(kāi)發(fā)中 Flow Chart 通常是由 SA 撰寫(xiě)，重點(diǎn)在「判斷」上…沒(méi)有那麼難，把它當(dāng)成雜志附的心理測(cè)驗(yàn)，選「是」走右邊、選「否」走左邊就好了。

　　對(duì) RD 來(lái)說(shuō)，寫(xiě)程式前都必需先知道「邏輯」，也就是由各種「判斷」組成的操作架構(gòu)。對(duì) UI 而言邏輯也很重要，不然使用者操作后要給他什麼回應(yīng)?

　　最陽(yáng)春的會(huì)員登入

　　以「會(huì)員登入」為例，使用者輸入帳號(hào)密碼，輸入正確就自動(dòng)跳轉(zhuǎn)到會(huì)員資訊頁(yè)，輸入錯(cuò)誤就提示錯(cuò)誤…

　　光從 Functional Map 就想畫(huà) UI Flow 常常忽略「使用者操作錯(cuò)誤怎麼辦」，最后一刻才發(fā)現(xiàn)有缺就是 UI 緊急加畫(huà)漏掉的頁(yè)面、 RD 苦命塞功能不優(yōu)雅，提示錯(cuò)誤又不是放下一個(gè)階段或是有空再補(bǔ)的東西，頁(yè)面和程式也不是靠嘴巴在畫(huà)在寫(xiě)…

　　亂輸入就給你驗(yàn)證碼

　　好像很簡(jiǎn)單喔?才不只這樣。實(shí)際畫(huà)起來(lái)會(huì)發(fā)現(xiàn)很多東西在 UI Flow 上很容易忽略沒(méi)考慮到的部份。(而且怎麼可能就只有這樣不加功能?)

　　有時(shí)候使用者會(huì)一直輸入錯(cuò)誤，合理猜想是有人試著盜帳號(hào)。常見(jiàn)的阻擋方法是讓輸入多次錯(cuò)誤的使用者多填一個(gè)驗(yàn)證碼的欄位。所以 Flow Chart 就變成：

　　上圖只是簡(jiǎn)單的流程示范，不過(guò)是隨口多一句「喂、幫我加個(gè)驗(yàn)證碼功能」，F(xiàn)low Chart 就會(huì)突然肥一截。真正的會(huì)員登入驗(yàn)證還有更多花樣以及安全性考量，比如登入錯(cuò)誤 3 次就多提示一句「忘記密碼」等等，更狠的直接鎖帳號(hào)請(qǐng)使用者找客服申訴。

　　Flow Chart 和 UI Flow 相輔相成，甚至是先有 Flow Chart 才有 UI Flow 。在沒(méi)有 Flow Chart 、不知道要處理多少判斷時(shí)就產(chǎn)出 UI Flow，規(guī)劃不周掉頁(yè)面漏功能的機(jī)率非常非常高。

　　若只有 UI Flow 沒(méi)有 Flow Chart，RD 勉勉強(qiáng)強(qiáng)可以憑畫(huà)面想像 Flow Chart、判斷式怎麼下，但系統(tǒng)越大會(huì)容易出包有 Bug，依 RD 經(jīng)驗(yàn)值決定出包機(jī)率。但連 UI Flow 都沒(méi)有，光憑幾張 Wireframe 或 Mockup，根本就是瞎子摸象，看單張靜態(tài)圖 RD 不會(huì)知道頁(yè)面怎麼串，純靠腦補(bǔ)不錯(cuò)才怪。

　　如果什麼都不給，直接扔 Prototype 給 RD 叫他照抄，說(shuō)一模一樣做一個(gè)出來(lái)、很簡(jiǎn)單吧?RD 還要每個(gè)畫(huà)面每個(gè)按鈕按都戳戳看、試過(guò)各種錯(cuò)誤才會(huì)知道功能怎麼接。對(duì) RD 是有多大恨這樣整人家…

　　參考資料：

　　流程圖 – MBA智庫(kù)百科

　　流程圖說(shuō)明

　　就 UI Designer 的角度可以把 Flow Chart 看成「這個(gè)情境下使用者怎麼操作完成任務(wù)、軟體怎麼回應(yīng)」，把 UI Flow 延伸為「因?yàn)槭褂谜哌@樣操作、以及我們有這些功能和資訊要呈現(xiàn)，所以頁(yè)面和頁(yè)面之間如此串接」。

　　UI Designer 不一定要會(huì)畫(huà) Flow Chart，但一定要看得懂。常見(jiàn)流程圖符號(hào)是固定的，不要因?yàn)殚L(zhǎng)得丑就自己設(shè)計(jì)個(gè)新樣式，RD 絕對(duì)來(lái)翻桌。

　　有句名言「婚前腦袋進(jìn)的水就是婚后流的淚」，套到軟體開(kāi)發(fā)上，「開(kāi)工前少花的腦就是開(kāi)工后要傷的肝」。有多少功能前期沒(méi)想到、就有多少工時(shí)后期沒(méi)料到…