線框流程圖是線框圖和流程圖的組合。當(dāng)一些頁面在動態(tài)變化時，它們能夠記錄工作流程和屏幕設(shè)計。

介紹

在UX領(lǐng)域，線框圖是一種常見的的用來表現(xiàn)頁面層級布局理念的交付，然而，流程圖對于記錄復(fù)雜的工作流程和用戶任務(wù)是十分有用的。盡管這兩種交付都普遍用于UX領(lǐng)域，然而它們并不是交流設(shè)計想法的最佳工具，尤其是在記錄沒有很多獨特頁面，卻有一些會因用戶交互而內(nèi)容（或布局）產(chǎn)生動態(tài)變化的多核頁面的手機、桌面、或者 Web APP 的時候。最近幾年，一種可供選擇的叫做線框流程圖的交付，作為解決這些問題的方法浮出水面，線框流程圖過去常常被用來表現(xiàn)普通用戶任務(wù)中使用場景的設(shè)計。

一個網(wǎng)頁線框圖能夠傳達(dá)那些主要是靜態(tài)頁面的網(wǎng)站或應(yīng)用的布局想法，內(nèi)容和頁面層級設(shè)計，但它在交流復(fù)雜的動態(tài)操作流程時是沒用的。

流程圖被用來描述后端進(jìn)程和用戶任務(wù)流程（正如這個例子），然而，對于UX使用來說，它缺少頁面的上下環(huán)境——一個嚴(yán)重影響用戶體驗的因素。

線框流程圖作為一種工作流程交付

定義：線框流程圖是一種將線框圖式的頁面布局設(shè)計和簡化后的像和流程圖一樣的交互表達(dá)方法相結(jié)合的設(shè)計規(guī)范板式。

這個低保真線框流程圖展示了一個簡單的用戶任務(wù)。屏幕設(shè)計的使用，而不是用抽象的流程圖符號，使我們能夠持續(xù)聚焦在這個用戶將發(fā)生交互的產(chǎn)品上。線框流程圖能被高保真創(chuàng)作用于交流詳細(xì)的設(shè)計規(guī)范的同時，它們跟用來討論交流交互設(shè)計和用戶工作流程的低保真文件一樣是有用的。

線框流程圖作為一種團隊中設(shè)計移動端APP時的普通方法出現(xiàn)，在流程圖中的每一步都相當(dāng)于一張?zhí)顫M手機屏幕設(shè)計的線框圖。因為相對而言，手機屏幕尺寸較小，真實的頁面設(shè)計（如線框圖）能夠十分容易取代線框圖中的抽象符號。然而，線框流程圖不僅限于記錄移動端應(yīng)用和網(wǎng)站——它們同樣能被用于桌面產(chǎn)品，典型地就是被用來展示一個屏幕或網(wǎng)頁因用戶交互而變化的那部分。許多電子商務(wù)購物表單和收銀臺頁面的設(shè)計，同樣適合用線框流程圖來細(xì)化。

為什么我們需要新的東西：流程圖和線框圖不能很好的記錄復(fù)雜的APP

通常說來，介紹一個規(guī)范化的新樣式是不好的，因為許多相關(guān)者不知道如何去解釋它。通常來說舊的東西更熟悉。然而，我們確實喜歡線框流程圖，因為對于之前見過線框圖和流程圖的人來說它很容易學(xué)，并且線框流程圖有足夠的優(yōu)勢來克服其他同類產(chǎn)品中的不足之處。

線框圖是一種很好的表現(xiàn)布局的方法，但是它們不能很好的描述交互，它們尤其不能很好的記錄一個帶有很多動態(tài)內(nèi)容的電子產(chǎn)品的布局，例如移動APP和Web APP。當(dāng)記錄帶有很多不相關(guān)聯(lián)的、相對靜止頁面或屏幕的網(wǎng)站（或者其他電子產(chǎn)品）時，線框圖是很有用的，因為在這些頁面或屏幕上，點一個鏈接或按鈕通常會導(dǎo)航至一個完全不同的頁面。

然而，很多現(xiàn)代Web APP和移動端APP只有很少的完整頁面，但會基于用戶對產(chǎn)品的交互，通過AJAX（或者其他科技）相應(yīng)地改變內(nèi)容和布局。不論是選擇分類或過濾，產(chǎn)品頁面展示就會發(fā)生變化的電商產(chǎn)品，還是基于工具、模型、或其他控制參數(shù)之間的交互，整體布局和信息的展示就會發(fā)生強烈變化的，復(fù)雜的、創(chuàng)造性的或技術(shù)性的應(yīng)用，它們都有涵蓋。在這些案例中，線框圖不能很好的抓住各種布局的可能性，或者內(nèi)容變化的規(guī)則。除此之外，線框圖也不能夠記錄在用戶與頁面發(fā)生交互后，系統(tǒng)呈現(xiàn)給用戶的重要反饋。（和系統(tǒng)認(rèn)證過的用戶進(jìn)行交流得到的反饋，對于一個好的用戶體驗來說是至關(guān)重要的，這在十大易用性原則中被排在第一位。）

另一方面，流程圖是一個能全面記錄復(fù)雜的工作流程和帶有多重步驟或路徑的交互信息的工具，但常常會忽略交互中的使用場景以及它對用戶的影響。用流程圖作為一種主要的交付來記錄（或構(gòu)思）交互設(shè)計或含有多種用戶任務(wù)步驟時，會忽視一些在表現(xiàn)在頁面上下環(huán)境中的信息，而那往往會影響交互的成功。

線框流程圖記錄交互信息

線框流程圖中十分經(jīng)典的用例圖是用來記錄一個用戶在產(chǎn)品上完成一個普通任務(wù)的過程（如，在一個社交媒體APP中“直接發(fā)送一條信息給你聯(lián)系人中的某個人”）。線框流程圖中的每一步，一個簡單的線框圖，或高保真屏幕設(shè)計都表現(xiàn)了用戶可能用到的屏幕。

箭頭是用來表示用戶發(fā)生行為的特定UI組件（例如點擊一個按鈕，點擊一個鏈接，等等），指向另一張作為交互發(fā)生結(jié)果的線框圖。交互需求的第二個“點”的不是一個獨立的頁面或屏幕，而是，它能展示同一個頁面中的交互結(jié)果，例如內(nèi)容的改變，展現(xiàn)了交互結(jié)果的界面反饋（例如，一個確認(rèn)信息彈出來，一個顏色的改變，或者一個錯誤提示）。為了減少線框流程圖中的歧義，在流程中箭頭能夠清晰的說明點擊這個“熱點”（或者任務(wù)）會指向哪一步這是十分重要的。對于一個在單個頁面中擁有多重行為目標(biāo)的復(fù)雜Apps，能夠清楚的表明熱點觸發(fā)行為尤為重要。

在這個簡單的線框圖中，展示了一系列的在一個常見的用戶任務(wù)流程中多個移動端APP 線框圖，每一個線框圖都代表同一個APP頁面，而不是代表了不同的APP頁面。每一個步驟都清楚表示了在一個任務(wù)流程中熱點所連接的下一步。除此之外，在第二步中線框流程圖展示了視覺反饋的作用（為了標(biāo)記這次點擊，點擊專輯時背景顏色發(fā)生了改變）。

除了被大量頻繁用于移動端APP，線框流程圖對于記錄復(fù)雜的桌面應(yīng)用和Web應(yīng)用同樣是有用的。由于用一個全屏桌面線框圖來表現(xiàn)一個進(jìn)程中的每個步驟會浪費很多空間，如果在每一個步驟中大部分的屏幕設(shè)計中會保持不變的話，所以僅僅表現(xiàn)屏幕在每一個步驟中變化的那部分（例如對話框，情態(tài)，過濾或者分類），就能有效的記錄界面相關(guān)的，正在改變的那部分，同時依然能提供足夠的上下環(huán)境。

對一個Web APP結(jié)構(gòu)操作說明的做一個簡后的高保真桌面流程圖，不是屏幕設(shè)計的所有部分都需要呈現(xiàn)在每個步驟里的。由于桌面屏幕設(shè)計的尺寸更大，如果大部分能夠被看到的信息沒什么變化的話，沒必要每一步都展示整個頁面。用一種戰(zhàn)術(shù)上的方法來展示相關(guān)屏幕設(shè)計，一種能夠看到的只是因用戶輸入發(fā)生變化的那部分。

線框流程圖不僅能夠展示每個頁面中的內(nèi)容和布局會因用戶交互而變化的APP和動態(tài)網(wǎng)站的工作流程，它也同樣適合于記錄在傳統(tǒng)靜態(tài)網(wǎng)站中的任務(wù)流程。然而關(guān)于用線框流程圖來記錄靜態(tài)網(wǎng)站需要注意的是，每張線框圖的尺寸可能過大，以至于會丟失被記錄的進(jìn)程的使用場景。

線框流程圖對于合作構(gòu)思

除了是一種程序相關(guān)人員和開發(fā)者之間交流的有用方法，作為一個團隊之間配合的工具，線框流程圖同樣能夠工作得很好。尤其在敏銳的環(huán)境中，跨部門團隊間能夠配合交流得好是十分重要的。

跨部門團隊之間的設(shè)計研討會能夠碰撞出一些理解上的火花，在這些平行設(shè)計工作小組之中，團隊成員構(gòu)思和寫下任務(wù)流程，然后整個團隊討論這些點，為了潛在的點可視化，UX用線框流程圖的方式給每個步驟畫草圖（并且記錄下團隊已經(jīng)同意的點）。

在一個配合的環(huán)境中，線框流程圖不需要視覺上打磨，這種類型的討論，用白板或者紙和筆畫草圖的方式快速的將想法和交互記錄下來是非常有效的。

在一場NN/g UX 會議中的UX交付研討，幾個團隊成員用粘上便簽條的手機，標(biāo)記筆，和紙來討論一個設(shè)計環(huán)節(jié)中的流程圖。這個過程用一個白板就能容易實現(xiàn)，或者僅僅用紙和筆。

結(jié)論

線框流程圖是一種正在興起的用于記錄移動端和Webapps中用戶工作流程和復(fù)雜交互方式的UX交付。它們非常適合于呈現(xiàn)一個APP中一個或幾個頁面的動態(tài)改變，通過大量的連接在一起的相對靜止頁面來捕捉流程卻收效較差。作為一種團隊間合作與構(gòu)思的方法，用來思考用戶工作流程、任務(wù)，以及構(gòu)思進(jìn)程中屏幕設(shè)計的每一步，線框流程圖同樣是有用的。

原文地址：https://www.nngroup.com/articles/wireflows/

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