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

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

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

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

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

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

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

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

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

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

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

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

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

因?yàn)榈捅Ｕ嬖腿鄙僖曈X細(xì)節(jié)，用戶流程是原型的核心。低保真原型幫助你聚焦在創(chuàng)造對用戶來說完成他們目標(biāo)的最順利流程。

在腦海中建立用戶流程

當(dāng)你建立了一個用戶流程，你應(yīng)該想的第一件事是什么？

這很顯然…當(dāng)然是你的用戶！

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

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

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

仔細(xì)思考目標(biāo)和來源

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

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

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

進(jìn)行搜索功能的用戶：

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

直接購買者：

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

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

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

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

在這一點(diǎn)，你應(yīng)該知道：

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

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

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

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

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

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

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

[建立自動存款]

第二步：選擇存款頻率

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

第三步：每月一次存款

[選擇日期]

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

確定數(shù)目

[建立自動存款]

概述流程的速記方法

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

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

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

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

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

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

從那里，您可以繼續(xù)對紙上的草圖進(jìn)行迭代，并將其剪切出來用于紙張?jiān)停蛘咿D(zhuǎn)到像UXPin這樣的數(shù)字原型設(shè)計(jì)工具。

流程的真實(shí)案例和他們的拆卸

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

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

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

下一步

掌握用戶體驗(yàn)方面，絕對不能代替實(shí)踐。

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

閣主的總結(jié)：

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

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

作者：Marek Bowers

專欄作家

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

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