用戶流程圖工具Overflow

Overflow是一款為設(shè)計(jì)師們提供的用戶流程圖工具，這款插件可以大大提高交互設(shè)計(jì)的效率和溝通效率。除了完成設(shè)計(jì)稿，設(shè)計(jì)思路溝通也是設(shè)計(jì)師的必修課。這里介紹一款用戶流程展示工具 Overflow，希望能夠幫助各位設(shè)計(jì)師去更優(yōu)雅的講故事。

功能介紹：

方便修改和替換

Overflow 中的界面和 sketch 中的畫(huà)板是一一對(duì)應(yīng)的，如果在 Sketch 對(duì)某個(gè)畫(huà)板進(jìn)行了修改，導(dǎo)入 overflow 中時(shí)，會(huì)自動(dòng)替換掉相應(yīng)的界面。

△ Overflow上傳界面

支持的平臺(tái)

很多原型工具對(duì)于移動(dòng)端應(yīng)用的支持很友好，但是對(duì)其他平臺(tái)的支持卻是不盡如人意的。而 Overflow 給出了幾種不同平臺(tái)的解決方案，不僅僅有移動(dòng)端，還有pad端、網(wǎng)頁(yè)端、手表端。

并且，每個(gè)對(duì)應(yīng)的平臺(tái)給出了簡(jiǎn)易的模型，只要打開(kāi)就可以給每個(gè)頁(yè)面套上對(duì)應(yīng)的外殼，使得流程圖看起來(lái)更為專(zhuān)業(yè)。這些外殼可以進(jìn)行簡(jiǎn)單的自定義，誠(chéng)意滿滿。

△ 不只是移動(dòng)端APP

梳理用戶流程

接下來(lái)就是這個(gè)應(yīng)用的核心內(nèi)容了，那就是連接各個(gè)界面，梳理用戶流程。

在這里，你不用擔(dān)心樣式的問(wèn)題，Overflow 給出了幾種很棒的樣式可供選擇。

△ 幾種連接樣式

這幾種樣式基本可以覆蓋所有的使用場(chǎng)景，一般用一種樣式表示主流程，另一種樣式表示分支流程也就夠了。點(diǎn)擊這些連線，可以在其中加入一些文字提示，代表這個(gè)連線通往的方向。

這些樣式是可以支持全局修改，一旦修改了其中的一個(gè)樣式，會(huì)在該樣式的旁邊出現(xiàn)「Update」的選項(xiàng)，將這種改變應(yīng)用到所有的該樣式中。

比如下面的這個(gè)引導(dǎo)頁(yè)的簡(jiǎn)單示例：

△ 引導(dǎo)頁(yè)示例

預(yù)覽

在我們完成了用戶流程之后，可以點(diǎn)擊右下角的預(yù)覽按鈕進(jìn)行預(yù)覽。點(diǎn)擊線條就可以進(jìn)行跳轉(zhuǎn)定位。

△ 預(yù)覽

輸出物

Overflow 提供了兩種輸出方式：網(wǎng)址和 PDF。

我更傾向于輸出網(wǎng)址的方式，這樣的方式會(huì)使得一個(gè)項(xiàng)目只有一個(gè)輸出物，保持了輸出物的唯一性，任何更改只要修改后進(jìn)行 update 就好。

△ Overflow輸出網(wǎng)址步驟

而且這個(gè)輸出方式可以設(shè)置密碼，保證了輸出物只給必要的人去看。當(dāng)打開(kāi)地址時(shí)，會(huì)提示輸入密碼。

之后，就可以看到我們?cè)谲浖�里預(yù)覽時(shí)的界面了。