起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識線框流程圖：一款用于工作流程或APP的UX交付
線框流程圖是線框圖和流程圖的組合。當一些頁面在動態變化時，它們能夠記錄工作流程和屏幕設計。
介紹
在UX領域，線框圖是一種常見的的用來表現頁面層級布局理念的交付，然而，流程圖對于記錄復雜的工作流程和用戶任務是十分有用的。盡管這兩種交付都普遍用于UX領域，然而它們并不是交流設計想法的最佳工具，尤其是在記錄沒有很多獨特頁面，卻有一些會因用戶交互而內容（或布局）產生動態變化的多核頁面的手機、桌面、或者 Web APP 的時候。最近幾年，一種可供選擇的叫做線框流程圖的交付，作為解決這些問題的方法浮出水面，線框流程圖過去常常被用來表現普通用戶任務中使用場景的設計。
一個網頁線框圖能夠傳達那些主要是靜態頁面的網站或應用的布局想法，內容和頁面層級設計，但它在交流復雜的動態操作流程時是沒用的。
流程圖被用來描述后端進程和用戶任務流程（正如這個例子），然而，對于UX使用來說，它缺少頁面的上下環境——一個嚴重影響用戶體驗的因素。
線框流程圖作為一種工作流程交付
定義：線框流程圖是一種將線框圖式的頁面布局設計和簡化后的像和流程圖一樣的交互表達方法相結合的設計規范板式。
這個低保真線框流程圖展示了一個簡單的用戶任務。屏幕設計的使用，而不是用抽象的流程圖符號，使我們能夠持續聚焦在這個用戶將發生交互的產品上。線框流程圖能被高保真創作用于交流詳細的設計規范的同時，它們跟用來討論交流交互設計和用戶工作流程的低保真文件一樣是有用的。
線框流程圖作為一種團隊中設計移動端APP時的普通方法出現，在流程圖中的每一步都相當于一張填滿手機屏幕設計的線框圖。因為相對而言，手機屏幕尺寸較小，真實的頁面設計（如線框圖）能夠十分容易取代線框圖中的抽象符號。然而，線框流程圖不僅限于記錄移動端應用和網站——它們同樣能被用于桌面產品，典型地就是被用來展示一個屏幕或網頁因用戶交互而變化的那部分。許多電子商務購物表單和收銀臺頁面的設計，同樣適合用線框流程圖來細化。
為什么我們需要新的東西：流程圖和線框圖不能很好的記錄復雜的APP
通常說來，介紹一個規范化的新樣式是不好的，因為許多相關者不知道如何去解釋它。通常來說舊的東西更熟悉。然而，我們確實喜歡線框流程圖，因為對于之前見過線框圖和流程圖的人來說它很容易學，并且線框流程圖有足夠的優勢來克服其他同類產品中的不足之處。
線框圖是一種很好的表現布局的方法，但是它們不能很好的描述交互，它們尤其不能很好的記錄一個帶有很多動態內容的電子產品的布局，例如移動APP和Web APP。當記錄帶有很多不相關聯的、相對靜止頁面或屏幕的網站（或者其他電子產品）時，線框圖是很有用的，因為在這些頁面或屏幕上，點一個鏈接或按鈕通常會導航至一個完全不同的頁面。
然而，很多現代Web APP和移動端APP只有很少的完整頁面，但會基于用戶對產品的交互，通過AJAX（或者其他科技）相應地改變內容和布局。不論是選擇分類或過濾，產品頁面展示就會發生變化的電商產品，還是基于工具、模型、或其他控制參數之間的交互，整體布局和信息的展示就會發生強烈變化的，復雜的、創造性的或技術性的應用，它們都有涵蓋。在這些案例中，線框圖不能很好的抓住各種布局的可能性，或者內容變化的規則。除此之外，線框圖也不能夠記錄在用戶與頁面發生交互后，系統呈現給用戶的重要反饋。（和系統認證過的用戶進行交流得到的反饋，對于一個好的用戶體驗來說是至關重要的，這在十大易用性原則中被排在第一位。）
另一方面，流程圖是一個能全面記錄復雜的工作流程和帶有多重步驟或路徑的交互信息的工具，但常常會忽略交互中的使用場景以及它對用戶的影響。用流程圖作為一種主要的交付來記錄（或構思）交互設計或含有多種用戶任務步驟時，會忽視一些在表現在頁面上下環境中的信息，而那往往會影響交互的成功。
線框流程圖記錄交互信息
線框流程圖中十分經典的用例圖是用來記錄一個用戶在產品上完成一個普通任務的過程（如，在一個社交媒體APP中“直接發送一條信息給你聯系人中的某個人”）。線框流程圖中的每一步，一個簡單的線框圖，或高保真屏幕設計都表現了用戶可能用到的屏幕。
箭頭是用來表示用戶發生行為的特定UI組件（例如點擊一個按鈕，點擊一個鏈接，等等），指向另一張作為交互發生結果的線框圖。交互需求的第二個“點”的不是一個獨立的頁面或屏幕，而是，它能展示同一個頁面中的交互結果，例如內容的改變，展現了交互結果的界面反饋（例如，一個確認信息彈出來，一個顏色的改變，或者一個錯誤提示）。為了減少線框流程圖中的歧義，在流程中箭頭能夠清晰的說明點擊這個“熱點”（或者任務）會指向哪一步這是十分重要的。對于一個在單個頁面中擁有多重行為目標的復雜Apps，能夠清楚的表明熱點觸發行為尤為重要。
在這個簡單的線框圖中，展示了一系列的在一個常見的用戶任務流程中多個移動端APP 線框圖，每一個線框圖都代表同一個APP頁面，而不是代表了不同的APP頁面。每一個步驟都清楚表示了在一個任務流程中熱點所連接的下一步。除此之外，在第二步中線框流程圖展示了視覺反饋的作用（為了標記這次點擊，點擊專輯時背景顏色發生了改變）。
除了被大量頻繁用于移動端APP，線框流程圖對于記錄復雜的桌面應用和Web應用同樣是有用的。由于用一個全屏桌面線框圖來表現一個進程中的每個步驟會浪費很多空間，如果在每一個步驟中大部分的屏幕設計中會保持不變的話，所以僅僅表現屏幕在每一個步驟中變化的那部分（例如對話框，情態，過濾或者分類），就能有效的記錄界面相關的，正在改變的那部分，同時依然能提供足夠的上下環境。
對一個Web APP結構操作說明的做一個簡后的高保真桌面流程圖，不是屏幕設計的所有部分都需要呈現在每個步驟里的。由于桌面屏幕設計的尺寸更大，如果大部分能夠被看到的信息沒什么變化的話，沒必要每一步都展示整個頁面。用一種戰術上的方法來展示相關屏幕設計，一種能夠看到的只是因用戶輸入發生變化的那部分。
線框流程圖不僅能夠展示每個頁面中的內容和布局會因用戶交互而變化的APP和動態網站的工作流程，它也同樣適合于記錄在傳統靜態網站中的任務流程。然而關于用線框流程圖來記錄靜態網站需要注意的是，每張線框圖的尺寸可能過大，以至于會丟失被記錄的進程的使用場景。
線框流程圖對于合作構思
除了是一種程序相關人員和開發者之間交流的有用方法，作為一個團隊之間配合的工具，線框流程圖同樣能夠工作得很好。尤其在敏銳的環境中，跨部門團隊間能夠配合交流得好是十分重要的。
跨部門團隊之間的設計研討會能夠碰撞出一些理解上的火花，在這些平行設計工作小組之中，團隊成員構思和寫下任務流程，然后整個團隊討論這些點，為了潛在的點可視化，UX用線框流程圖的方式給每個步驟畫草圖（并且記錄下團隊已經同意的點）。
在一個配合的環境中，線框流程圖不需要視覺上打磨，這種類型的討論，用白板或者紙和筆畫草圖的方式快速的將想法和交互記錄下來是非常有效的。
在一場NN/g UX 會議中的UX交付研討，幾個團隊成員用粘上便簽條的手機，標記筆，和紙來討論一個設計環節中的流程圖。這個過程用一個白板就能容易實現，或者僅僅用紙和筆。
結論
線框流程圖是一種正在興起的用于記錄移動端和Webapps中用戶工作流程和復雜交互方式的UX交付。它們非常適合于呈現一個APP中一個或幾個頁面的動態改變，通過大量的連接在一起的相對靜止頁面來捕捉流程卻收效較差。作為一種團隊間合作與構思的方法，用來思考用戶工作流程、任務，以及構思進程中屏幕設計的每一步，線框流程圖同樣是有用的。
原文地址：https://www.nngroup.com/articles/wireflows/
本文由 @Exception 翻譯發布于人人都是產品經理。未經許可，禁止轉載。
哎呀不錯啊