1、用戶流程設(shè)計現(xiàn)狀

在一些流程比較規(guī)范的公司，在做UI設(shè)計之前，通常需要進行交互設(shè)計，分析整理產(chǎn)品給出的原型或者需求，并輸出這個需求下的用戶流程。

關(guān)于用戶流程的設(shè)計，現(xiàn)在市面上有很多工具，比如老的Axure，瀏覽器端的Ink Knife，F(xiàn)igma，Adobe的XD，新的，還有現(xiàn)在越來越多的人在用的。

在進入交互設(shè)計領(lǐng)域之前，我主要是做UI設(shè)計，使用的工具也是基于Mac的。而現(xiàn)在公司的產(chǎn)品和技術(shù)團隊幾乎每個人都有一臺Mac，所以很自然地將其用作交互設(shè)計工具。

雖然版本更新了原型功能，但是可以在畫板和預(yù)覽之間進行連接，一定程度上解決了無法交互的問題。

要知道，在此之前，通常的做法是使用 Craft 插件，將界面上傳到其中，然后在頁面之間進行跳轉(zhuǎn)。

然而，即使內(nèi)置了交互功能，一般來說，使用場景也有限。預(yù)覽模式只關(guān)注一個界面，無法全局查看某個需求的整體流程，也看不到頁面的注釋。如果這個跳躍交給開發(fā)團隊，我認為他們會崩潰。

△互動過程

在它出現(xiàn)之前，我們公司的交互輸出是文件。我們在內(nèi)部手動畫了箭頭來連接接口sketch user flow，然后把文件交給開發(fā)團隊。

這種方法有三個嚴重的缺點：

2、外觀

這時，出現(xiàn)了，應(yīng)用程序的開發(fā)者在Hunt上說了這樣的話：

世界上第一個用戶流程工具。

那么如何解決以上問題呢？

3. 基于設(shè)計工具

它不是一個新的交互設(shè)計工具，它基于其他設(shè)計工具，目前僅支持 .不過，在官方網(wǎng)站上，團隊有其他軟件的支持計劃和平臺支持計劃。

△ 支持軟件

相當(dāng)于一個插件。安裝后，選項會自動出現(xiàn)在：頂部菜單欄和右側(cè)操作面板。

△接口

△ 同步方式

4、改裝更換方便

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

△ 上傳界面

5. 支持的平臺

許多原型設(shè)計工具都可以友好地支持移動應(yīng)用程序，但它們對其他平臺的支持卻不盡如人意。給出了針對不同平臺的幾種解決方案，不僅是移動端，還有pad端、web端、手表端。

另外，每個相應(yīng)的平臺都提供了一個簡單的模型。只要打開它，就可以在每個頁面上打上相應(yīng)的shell，讓流程圖看起來更專業(yè)。這些外殼允許進行簡單的定制sketch user flow，并且非常用心。

△ 不僅僅是一個手機APP

6. 梳理用戶流程

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

在這里，你不必擔(dān)心款式，有多種很棒的款式可供選擇。

△ 多種連接方式

這些風(fēng)格基本上可以覆蓋所有的使用場景。一般情況下，用一種風(fēng)格來表示主流程，用另一種風(fēng)格來表示分支流程就足夠了。單擊這些連接可添加一些文本提示來表示連接通向的方向。

這些樣式可以支持全局修改。修改其中一種樣式后，該樣式旁邊將出現(xiàn)“”選項，以將此更改應(yīng)用到所有樣式。

例如，以下是登陸頁面的簡單示例：

△ 啟動頁面示例

7. 預(yù)覽

當(dāng)我們完成用戶流程后，我們可以點擊右下角的預(yù)覽按鈕進行預(yù)覽。單擊該行可跳轉(zhuǎn)到該位置。

△ 預(yù)覽

8. 輸出

提供兩種輸出方式：URL 和 PDF。

我更喜歡輸出URL的方法。這種方法將允許一個項目只有一個輸出，從而保持輸出的唯一性。任何更改都必須在修改后才能進行。

△ 輸出URL的步驟

而且，這種輸出方式可以設(shè)置密碼，保證輸出結(jié)果只有必要的人才能查看。打開地址時，系統(tǒng)會提示您輸入密碼。

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

總之，這個應(yīng)用的體驗很棒，大大提高了交互設(shè)計的效率和溝通效率。

我希望這個軟件可以幫助你。如有疑問，請留言。

官方示例：

官網(wǎng)下載：

如有侵權(quán)請聯(lián)系刪除！