為流暢的交互體驗創建完美的用戶流程

在看原文之前，閣主有幾句話說。一是外文文章一般與當地的文化有關，所以翻譯成中文很多時候都失去了它原來的味道，讓中國讀者感到有點不順暢，這個是很正常的，很多小說翻譯成中文閣主也不愛看。所以為減少這個情況的影響，閣主會在文章後加上閣主自己對文章的總結和建議~以下是原文~

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

作者：Marek Bowers

翻譯：Sophia

如果有人問你怎樣定義「流程」這個詞或者說舉一個案例來進行描述，你會怎麼說？你會馬上想到關於用戶體驗或者交互設計嗎？也許會...但是，更多的應該是不會吧。

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

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

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

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

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

交互設計怎樣涉及到流程的

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

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

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

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

在腦海中建立用戶流程

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

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

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

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

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

仔細思考目標和來源

如果你在設計一個網站的用戶體驗，在創建流程之前另一個好的建議是，查明並且畫出您的用戶從哪裡而來。基於Morgan Brown在《停止設計頁面開始設計流程》一文中的建議，我們建議您開始思考如下您的網站或者手機原型的各種用戶來源：

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

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

進行搜索功能的用戶：

• 搜索iPhone的相關介紹
• 進入亞馬遜網站
• 使用搜索框找到iPhone
• 瀏覽更多關於iPhone的介紹
• 使用搜索框去找三星Galaxy
• 瀏覽Galaxy的介紹
• 回到原來的亞馬遜iPhone的店鋪
• 購買iPhone

直接購買者：

• 進入亞馬遜網站
• 使用搜索框找到iPhone
• 購買iPhone

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

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

創建一個概念流程

在這一點，你應該知道：

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

現在你可以想想一個用戶在來自一個頁面前與後會發生什麼。就像在《交互設計最佳聯繫》所描述的，你可以將你的頁面連接起來並且創建儘可能多的你所需要的流程。

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

筆述優先的方法來概述一個流程

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

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

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

[建立自動存款]

第二步：選擇存款頻率

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

第三步：每月一次存款

[選擇日期]

第四步：選擇數量

確定數目

[建立自動存款]

概述流程的速記方法

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

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

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

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

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

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

從那裡，您可以繼續對紙上的草圖進行迭代，並將其剪切出來用於紙張原型，或者轉到像UXPin這樣的數字原型設計工具。

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

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

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

您當然需要掌握有說服力的設計藝術，以創造流動，教育用戶，同時幫助他們發現升級的優勢。

下一步

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

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

閣主的總結：

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

我想成為一個更好的人

職場設計教程搶先看～一枚愛折騰、愛健身的設計師妹紙~

詳情請關注微信公眾號：Sophia的玲瓏閣，獲取更多有關交互、健身及其它相關信息

推薦閱讀：