用戶流程圖工具Overflow

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

功能介紹：

方便修改和替換

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

△ Overflow上傳界面

支持的平臺

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

并且，每個對應(yīng)的平臺給出了簡易的模型，只要打開就可以給每個頁面套上對應(yīng)的外殼，使得流程圖看起來更為專業(yè)。這些外殼可以進行簡單的自定義，誠意滿滿。

△ 不只是移動端APP

梳理用戶流程

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

在這里，你不用擔心樣式的問題，Overflow 給出了幾種很棒的樣式可供選擇。

△ 幾種連接樣式

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

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

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

△ 引導(dǎo)頁示例

預(yù)覽

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

△ 預(yù)覽

輸出物

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

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

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

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

之后，就可以看到我們在軟件里預(yù)覽時的界面了。