一、用戶流程設計的現狀

在一些流程比較規范的公司中，在做 UI設計之前，通常要進行交互設計，對產品給出的原型或者需求進行分析和梳理，輸出用戶在這個需求下的用戶流程。

關于用戶流程的設計，現在市面上有很多工具，比如老牌的 Axure、瀏覽器端的墨刀、Figma、Adobe的XD、新進的 invision studio 以及現在越來越多人在用的 sketch。

我在進入交互設計領域之前，主要在做 UI設計，用的工具也是 mac端的 sketch，而且現在公司產品和技術團隊幾乎所有人都有 mac，所以很自然的就用 sketch 作為交互設計的工具。

雖然 sketch49版本更新了原型功能，可以在畫板之間進行連線，通過 preview 進行預覽，在一定程度上解決了 sketch 不能做交互的問題。

要知道，在此之前，通常的做法是使用 invision 的插件 Craft，把界面上傳到 invision 上面，然后實現頁面之間的跳轉的。

不過，即使是 Sketch 自帶的交互功能，總體上來說，使用場景是有限的，預覽模式只聚焦于一個界面，無法從全局瀏覽某個需求的整體流程，而且看不到頁面的注釋。而且這種跳轉給到開發團隊，我想他們會崩潰。

△ sketch交互流程

在 Overflow 出現之前，我司的交互輸出物是 sketch文件，在 sketch 內部手動畫箭頭對界面進行連接，然后把 sketch文件給到開發團隊。

這樣的做法有三個很嚴重的缺點：

• 箭頭樣式千奇百怪，無法統一；
• 畫箭頭浪費很多時間，效率低下；
• 每次改動都需要重新給出 sketch文件；

二、Overflow的出現

這個時候，Overflow 出現了，該應用的開發者在 Product Hunt 上是這樣說的：

The world’s first user flow diagramming tool for designers.

那么 Overflow 是如何解決上述問題的呢？

三、以設計工具為基礎

Overflow 并不是一個新的交互設計工具，他是以其他設計工具為基礎的，現在支持的只有 Sketch。不過，在官網上該團隊有其他軟件的支持計劃，以及 Windows平臺支持計劃。

△ Overflow支持軟件

Overflow 相當于 Sketch 的一個插件，安裝好他后，會在 Sketch 中自動出現選項：頂部菜單欄和右部操作面板。

△ Overflow界面

△ Overflow同步方式

四、方便修改和替換

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

△ Overflow上傳界面

五、支持的平臺

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

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

△ 不只是移動端APP

六、梳理用戶流程

接下來就是這個應用的核心內容了，那就是連接各個界面，梳理用戶流程。

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

△ 幾種連接樣式

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

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

比如下面的這個引導頁的簡單示例：

△ 引導頁示例

七、預覽

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

△ 預覽

八、輸出物

Overflow 提供了兩種輸出方式：網址和 PDF。

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

△ Overflow輸出網址步驟

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

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

總之，這個應用的體驗是很棒的，正式版一出來我司就切換到了 Overflow，大大提高了交互設計的效率和溝通效率。

希望這個軟件能幫到你，有什么問題歡迎留言。

官方的示例：https://overflow.io/s/9ST7SX/

Overflow 官網下載：https://overflow.io

歡迎訪問作者個站：http://muxin.sxl.cn

「提升效率的Sketch技巧與插件」

• 《簡單實用！七步學會用 Sketch 搭建復雜表格》
• 《學會這4大Sketch 高階技巧，讓你的效率猛翻10倍！》
• 《6個能大幅度提升 UI 設計效率的 Sketch 插件》
• 《用了這9個最強大的Sketch插件，工作效率提高了一倍！》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com