如果有人問你：你怎樣定義“流程”這個詞，或者說舉一個案例來進行描述，你會怎么說？這篇譯文，作者給出了詳細的解答。

在看原文之前，閣主有幾句話說：

一是外文文章一般與當?shù)氐奈幕嘘P(guān)，所以翻譯成中文很多時候都失去了它原來的味道，讓中國讀者感到有點不順暢，這個是很正常的，很多小說翻譯成中文閣主也不愛看。所以為減少這個情況的影響，閣主會在文章后加上閣主自己對文章的總結(jié)和建議~以下是原文~

如果有人問你怎樣定義“流程”這個詞或者說舉一個案例來進行描述，你會怎么說？你會馬上想到關(guān)于用戶體驗或者交互設(shè)計嗎？也許會…但是，更多的應該是不會吧。

在這篇文章里面，我將依據(jù)作為一個交互設(shè)計師的經(jīng)驗，來描述怎樣創(chuàng)建順暢的用戶流程。你可能想到水的流動。比方說，雪水流進水流和小溪，然后匯聚到一起，融匯到水庫，湖泊和海洋。

你可能也會想到空氣的流動。你知道高爾夫球表面的凹槽是讓空氣呈旋渦狀圍繞在身邊（用來減少阻力），比光滑的球飛得更遠一些。

您還可以在效率方面，去衡量流程的成功率。 來看看美國宇航局和波音公司，今年四月在風洞合作解決的一個流程問題。

這些隊伍配備了一架在尾部，可以使飛行流程更有效率的特殊技術(shù)波音757。 這有什么影響？ 它可以降低燃料燃燒的使用數(shù)量，可能會節(jié)省數(shù)百萬美元的航空費用，反過來可以節(jié)省機票費用的數(shù)百甚至數(shù)千美元。

聽起來對我們普通大眾也是極好的！

交互設(shè)計怎樣涉及到流程的

所以，這些“流程”的概念有哪些共性呢？

• 流程描繪運動：運動通過水，通過空氣，通過網(wǎng)站，通過APP等進行體現(xiàn)。
• 流程是多種多樣的：流程的多樣性可以導致一個高爾夫球飛得更遠（或者落得更短）；一個飛機飛得更快（或者有更多的阻力）；并且使一個在線購物者更容易付賬（或者說導致更不愿意付賬）

長話短說，流程的概念很重要。您網(wǎng)站或者APP的成功往往取決于您模型流如何滿足您的目標用戶（或者用戶畫像）的需求，同樣以及您商業(yè)的需求。

因為低保真原型缺少視覺細節(jié)，用戶流程是原型的核心。低保真原型幫助你聚焦在創(chuàng)造對用戶來說完成他們目標的最順利流程。

在腦海中建立用戶流程

當你建立了一個用戶流程，你應該想的第一件事是什么？

這很顯然…當然是你的用戶！

比方說，如果你在設(shè)計一個商業(yè)智力工具，它可以讓用戶創(chuàng)建報告并且分享他們，將至少有兩個流程：一個是為用戶數(shù)據(jù)（比方說用戶接收/反復查看報告）設(shè)計的流程，和整個數(shù)據(jù)分析（比方說用戶建立/分享報告）的流程。

編者建議：如果你想建立你自己的用戶畫像，你可以在UXPin進行免費試用。在你開始創(chuàng)建原型流程之前，你應該清楚地知道你目標用戶的動機和需要。問問你自己，是什么在驅(qū)動我的用戶以及他們正在試著完成什么？

一旦你創(chuàng)建了你的用戶畫像，你可以更好地捕捉到用戶的目標。指出目標的兩面需求，這樣就知道你的原型需要做哪些進行完成。

仔細思考目標和來源

如果你在設(shè)計一個網(wǎng)站的用戶體驗，在創(chuàng)建流程之前另一個好的建議是：查明并且畫出您的用戶從哪里而來?；贛organ Brown在《停止設(shè)計頁面開始設(shè)計流程》一文中的建議，我們建議您開始思考如下您的網(wǎng)站或者手機原型的各種用戶來源：

• 直接流量
• 有機搜索
• 付費廣告
• 社會媒體
• 推薦網(wǎng)站
• 電子郵箱

不同的入口決定不同的用戶行為。查看如下如果某人準備在亞馬遜買一部智能手機的假想場景的不同之處。

進行搜索功能的用戶：

• 搜索iPhone的相關(guān)介紹
• 進入亞馬遜網(wǎng)站
• 使用搜索框找到iPhone
• 瀏覽更多關(guān)于iPhone的介紹
• 使用搜索框去找三星Galaxy
• 瀏覽Galaxy的介紹
• 回到原來的亞馬遜iPhone的店鋪
• 購買iPhone

直接購買者：

• 進入亞馬遜網(wǎng)站
• 使用搜索框找到iPhone
• 購買iPhone

現(xiàn)在，我們不是在說購買經(jīng)驗的簡單比較（直接購買和進行搜索行為的用戶，它們之間總是來來回回穿插著進行的）。我們在說，可是，你必須畫出這些不同的流程，為了去做出一個更讓人理解的流暢體驗。

為查看一些基于這些入口的樣例流程，請查看文章《將用戶放在心里去建設(shè)：怎樣設(shè)計用戶流程》。作者，Peep Laja，建立了三種不同的用戶流程，每個流程起源于不同的入口，并且符合具體用戶和商業(yè)目標。

創(chuàng)建一個概念流程

在這一點，你應該知道：

• 您將為哪些用戶或者用戶畫像進行設(shè)計你的流程
• 哪些用戶和商業(yè)目標需要去完成
• 你的用戶來自于哪里（等等觀點）

現(xiàn)在你可以想想一個用戶在來自一個頁面前與后會發(fā)生什么。就像在《交互設(shè)計最佳聯(lián)系》所描述的，你可以將你的頁面連接起來并且創(chuàng)建盡可能多的你所需要的流程。

一個快速的方法你可以體驗不同的頁面流程就是創(chuàng)建一個簡單的概念流程。在搭建原型之前進行打草稿，用筆畫一個草稿可以幫助你體驗你APP或者網(wǎng)站最重要的部分 ——即內(nèi)容。圍繞著內(nèi)容搭建流程將給你一個用戶體驗所需頁面總數(shù)更準確的估算。

筆述優(yōu)先的方法來概述一個流程：

你可以使用筆述優(yōu)先的方法，Jessica Downey在她的文章《Jumpstarting Your App Conception Without Sketching UI.》中寫到過。 這個概述方法可以幫助您了解應用程序或站點每個頁面的想法并構(gòu)建一個“共識”。

讓我們創(chuàng)建一個，例如，一個銀行APP。場景：有人想打開自動存款功能。注意在下面的大綱中，[括號]里面的內(nèi)容代表著行動按鈕或者鏈接。

第一步：您想建立自動存款？

[建立自動存款]

第二步：選擇存款頻率

[每月一次][每月兩次][每隔一個星期][每個星期]

第三步：每月一次存款

[選擇日期]

第四步：選擇數(shù)量

確定數(shù)目

[建立自動存款]

概述流程的速記方法

你也可以使用Ryan Singer在Basecamp上使用的一種速記方法。Ryan的方法將流程作為持續(xù)性的對話。

對于上面的銀行APP的例子，我們可以在第二步和第三步的時候創(chuàng)建一個案例，就像這樣：

為了知道Singer是怎樣展示為Basecamp速記的方式以及他是怎樣用這個概述過程說明復雜的流程的，查看這篇文章《?A Shorthand for Designing UI Flows》

畫出草稿并且做出一個流程原型

現(xiàn)在我們已經(jīng)準備好為我們框架流程或者速記流程中的每一個頁面，創(chuàng)建一個低保真草稿。這些草稿將是你的想法，用更多頁面的細節(jié)和結(jié)構(gòu)活生生地展現(xiàn)在你的面前。只要你創(chuàng)建了草稿，一個簡單的低保真原型可以幫助你使用這些想法去與用戶進行溝通。

你可以使用很多種方法草稿出用戶流程，就像這些文章所示，比方說《these examples of user flows》和在Wireframes Magazine發(fā)表的《wire flows》。然而，在承諾任何特定流程之前，請創(chuàng)建一個簡單的原型來驗證其與用戶和商業(yè)目標的一致性。 它不需要任何想象力 – 你的原型可以在紙上完成，所以你可以開始了解用戶如何在內(nèi)容和動作之間流動。

從那里，您可以繼續(xù)對紙上的草圖進行迭代，并將其剪切出來用于紙張原型，或者轉(zhuǎn)到像UXPin這樣的數(shù)字原型設(shè)計工具。

流程的真實案例和他們的拆卸

現(xiàn)在，我們向您展示了創(chuàng)建自己的用戶流程并將其轉(zhuǎn)換為草圖和低保真原型的過程，我們將為您展示一些用戶登錄的真實交互流程有趣案例。

用戶登錄是一個很好的場景，它需要特殊的技能來平衡用戶需求和商業(yè)需求。 用戶希望直接進入應用程序，越簡單越好。 商業(yè)顯然也希望用戶登入，但他們也希望輕輕推動用戶升級他們的計劃。為查看我們正在討論的解構(gòu)示例，我們強烈建議您使用查看這篇文章《User Onboarding》。

您當然需要掌握有說服力的設(shè)計藝術(shù)，以創(chuàng)造流動，教育用戶，同時幫助他們發(fā)現(xiàn)升級的優(yōu)勢。

下一步

掌握用戶體驗方面，絕對不能代替實踐。

我建議您從基本流程開始，如思維導圖（使每個框代表用戶操作中的一個步驟）。 一旦您感到滿意，請隨時為每個頁面構(gòu)建線框，然后添加交互，使你的流程用原型進行生動起來。

閣主的總結(jié)：

文章交代了流程的概念和共性，以及在建立流程前先要想到用戶。考慮用戶的不同來源，以及這些來源可能會產(chǎn)生的不同使用場景用戶的不同目的與行為。然后再介紹了，創(chuàng)建流程的時候最好先用筆去打草稿，然后再用文字進行過程描述，最后用登錄流程來進行了舉例，以及建議大家要開始動手開始實踐。

原文地址：https://www.uxpin.com/studio/blog/creating-perfect-user-flows-for-smooth-ux/

作者：Marek Bowers

專欄作家

Sophiallg，微信公眾號：Sophia的玲瓏閣，人人都是產(chǎn)品經(jīng)理專欄作家。一枚愛折騰，愛健身的交互設(shè)計妹紙。

本文翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載