在UX領(lǐng)域彬呻，線框圖是一種常見的用來表現(xiàn)頁面層級(jí)布局理念的設(shè)計(jì)溝通工具承桥，同樣流程圖對(duì)于記錄復(fù)雜的工作流程和用戶任務(wù)是十分有用的费薄。盡管這兩種溝通工具都普遍用于UX領(lǐng)域坷檩，但是它們并不是交流設(shè)計(jì)想法的最好的工具，尤其是在記錄沒有很多獨(dú)特頁面赡艰，卻有一些會(huì)因用戶交互而內(nèi)容（或布局）產(chǎn)生動(dòng)態(tài)變化的多頁面的手機(jī)售淡、桌面、或者 Web APP 的時(shí)候慷垮。最近幾年揖闸，一種叫線框流程圖的溝通工具，作為解決這些問題的方法浮出水面料身，線框流程圖過去常常被用來表現(xiàn)普通用戶任務(wù)中使用場景的設(shè)計(jì)汤纸。
線框流程圖的定義
線框流程圖是一種將線框圖式的頁面布局設(shè)計(jì)和簡化后的像和流程圖一樣的交互表達(dá)方法相結(jié)合的設(shè)計(jì)溝通工具。
這個(gè)低保真線框流程圖展示了一個(gè)簡單的用戶任務(wù)议惰。屏幕設(shè)計(jì)的使用慎颗，而不是用抽象的流程圖符號(hào)，使我們能夠持續(xù)聚焦在這個(gè)用戶將發(fā)生交互的產(chǎn)品上言询。線框流程圖能被高保真創(chuàng)作用于交流詳細(xì)的設(shè)計(jì)規(guī)范的同時(shí)俯萎，它們跟用來討論交流交互設(shè)計(jì)和用戶工作流程的低保真文件一樣是有用的。
線框流程圖作為一種團(tuán)隊(duì)中設(shè)計(jì)移動(dòng)端APP時(shí)的普通方法出現(xiàn)运杭，在流程圖中的每一步都相當(dāng)于一張?zhí)顫M手機(jī)屏幕設(shè)計(jì)的線框圖夫啊。因?yàn)橄鄬?duì)而言，手機(jī)屏幕尺寸較小辆憔，真實(shí)的頁面設(shè)計(jì)（如線框圖）能夠十分容易取代線框圖中的抽象符號(hào)撇眯。然而，線框流程圖不僅限于記錄移動(dòng)端應(yīng)用和網(wǎng)站——它們同樣能被用于桌面產(chǎn)品虱咧，典型地就是被用來展示一個(gè)屏幕或網(wǎng)頁因用戶交互而變化的那部分熊榛。許多電子商務(wù)購物表單和收銀臺(tái)頁面的設(shè)計(jì)，同樣適合用線框流程圖來細(xì)化腕巡。
為什么我們需要新的東西：流程圖和線框圖不能很好的記錄復(fù)雜的APP
通常說來玄坦，介紹一個(gè)規(guī)范化的新樣式是不好的，因?yàn)樵S多相關(guān)者不知道如何去解釋它绘沉。通常來說舊的東西更熟悉煎楣。然而，我們確實(shí)喜歡線框流程圖梆砸，因?yàn)閷?duì)于之前見過線框圖和流程圖的人來說它很容易學(xué)转质，并且線框流程圖有足夠的優(yōu)勢(shì)來克服其他同類產(chǎn)品中的不足之處。
線框圖是一種很好的表現(xiàn)布局的方法帖世，但是它們不能很好的描述交互，它們尤其不能很好的記錄一個(gè)帶有很多動(dòng)態(tài)內(nèi)容的電子產(chǎn)品的布局沸枯，例如移動(dòng)APP和Web APP日矫。當(dāng)記錄帶有很多不相關(guān)聯(lián)的、相對(duì)靜止頁面或屏幕的網(wǎng)站（或者其他電子產(chǎn)品）時(shí)绑榴，線框圖是很有用的哪轿，因?yàn)樵谶@些頁面或屏幕上，點(diǎn)一個(gè)鏈接或按鈕通常會(huì)導(dǎo)航至一個(gè)完全不同的頁面翔怎。
然而窃诉，很多現(xiàn)代Web APP和移動(dòng)端APP只有很少的完整頁面杨耙，但會(huì)基于用戶對(duì)產(chǎn)品的交互，通過AJAX（或者其他科技）相應(yīng)地改變內(nèi)容和布局飘痛。不論是選擇分類或過濾珊膜，產(chǎn)品頁面展示就會(huì)發(fā)生變化的電商產(chǎn)品，還是基于工具宣脉、模型车柠、或其他控制參數(shù)之間的交互，整體布局和信息的展示就會(huì)發(fā)生強(qiáng)烈變化的塑猖，復(fù)雜的竹祷、創(chuàng)造性的或技術(shù)性的應(yīng)用，它們都有涵蓋羊苟。在這些案例中塑陵，線框圖不能很好的抓住各種布局的可能性，或者內(nèi)容變化的規(guī)則蜡励。除此之外令花，線框圖也不能夠記錄在用戶與頁面發(fā)生交互后，系統(tǒng)呈現(xiàn)給用戶的重要反饋巍虫。（和系統(tǒng)認(rèn)證過的用戶進(jìn)行交流得到的反饋彭则，對(duì)于一個(gè)好的用戶體驗(yàn)來說是至關(guān)重要的，這在十大易用性原則中被排在第一位占遥。）
另一方面俯抖，流程圖是一個(gè)能全面記錄復(fù)雜的工作流程和帶有多重步驟或路徑的交互信息的工具，但常常會(huì)忽略交互中的使用場景以及它對(duì)用戶的影響瓦胎。用流程圖作為一種主要的交付來記錄（或構(gòu)思）交互設(shè)計(jì)或含有多種用戶任務(wù)步驟時(shí)芬萍，會(huì)忽視一些在表現(xiàn)在頁面上下環(huán)境中的信息，而那往往會(huì)影響交互的成功搔啊。
線框流程圖記錄交互信息
線框流程圖中十分經(jīng)典的用例圖是用來記錄一個(gè)用戶在產(chǎn)品上完成一個(gè)普通任務(wù)的過程（如柬祠，在一個(gè)社交媒體APP中“直接發(fā)送一條信息給你聯(lián)系人中的某個(gè)人”）。線框流程圖中的每一步负芋，一個(gè)簡單的線框圖漫蛔，或高保真屏幕設(shè)計(jì)都表現(xiàn)了用戶可能用到的屏幕。
箭頭是用來表示用戶發(fā)生行為的特定UI組件（例如點(diǎn)擊一個(gè)按鈕旧蛾，點(diǎn)擊一個(gè)鏈接莽龟，等等），指向另一張作為交互發(fā)生結(jié)果的線框圖锨天。交互需求的第二個(gè)“點(diǎn)”的不是一個(gè)獨(dú)立的頁面或屏幕毯盈，而是，它能展示同一個(gè)頁面中的交互結(jié)果病袄，例如內(nèi)容的改變搂赋，展現(xiàn)了交互結(jié)果的界面反饋（例如赘阀，一個(gè)確認(rèn)信息彈出來，一個(gè)顏色的改變脑奠，或者一個(gè)錯(cuò)誤提示）基公。為了減少線框流程圖中的歧義，在流程中箭頭能夠清晰的說明點(diǎn)擊這個(gè)“熱點(diǎn)”（或者任務(wù)）會(huì)指向哪一步這是十分重要的捺信。對(duì)于一個(gè)在單個(gè)頁面中擁有多重行為目標(biāo)的復(fù)雜Apps酌媒，能夠清楚的表明熱點(diǎn)觸發(fā)行為尤為重要。
在這個(gè)簡單的線框圖中迄靠，展示了一系列的在一個(gè)常見的用戶任務(wù)流程中多個(gè)移動(dòng)端APP 線框圖秒咨，每一個(gè)線框圖都代表同一個(gè)APP頁面，而不是代表了不同的APP頁面掌挚。每一個(gè)步驟都清楚表示了在一個(gè)任務(wù)流程中熱點(diǎn)所連接的下一步雨席。除此之外，在第二步中線框流程圖展示了視覺反饋的作用（為了標(biāo)記這次點(diǎn)擊吠式，點(diǎn)擊專輯時(shí)背景顏色發(fā)生了改變）陡厘。
除了被大量頻繁用于移動(dòng)端APP，線框流程圖對(duì)于記錄復(fù)雜的桌面應(yīng)用和Web應(yīng)用同樣是有用的特占。由于用一個(gè)全屏桌面線框圖來表現(xiàn)一個(gè)進(jìn)程中的每個(gè)步驟會(huì)浪費(fèi)很多空間糙置，如果在每一個(gè)步驟中大部分的屏幕設(shè)計(jì)中會(huì)保持不變的話，所以僅僅表現(xiàn)屏幕在每一個(gè)步驟中變化的那部分（例如對(duì)話框是目，情態(tài)谤饭，過濾或者分類），就能有效的記錄界面相關(guān)的懊纳，正在改變的那部分揉抵，同時(shí)依然能提供足夠的上下環(huán)境。
對(duì)一個(gè)Web APP結(jié)構(gòu)操作說明的做一個(gè)簡后的高保真桌面流程圖嗤疯，不是屏幕設(shè)計(jì)的所有部分都需要呈現(xiàn)在每個(gè)步驟里的冤今。由于桌面屏幕設(shè)計(jì)的尺寸更大，如果大部分能夠被看到的信息沒什么變化的話茂缚，沒必要每一步都展示整個(gè)頁面戏罢。用一種戰(zhàn)術(shù)上的方法來展示相關(guān)屏幕設(shè)計(jì)，一種能夠看到的只是因用戶輸入發(fā)生變化的那部分脚囊。
線框流程圖不僅能夠展示每個(gè)頁面中的內(nèi)容和布局會(huì)因用戶交互而變化的APP和動(dòng)態(tài)網(wǎng)站的工作流程帖汞，它也同樣適合于記錄在傳統(tǒng)靜態(tài)網(wǎng)站中的任務(wù)流程。然而關(guān)于用線框流程圖來記錄靜態(tài)網(wǎng)站需要注意的是凑术，每張線框圖的尺寸可能過大，以至于會(huì)丟失被記錄的進(jìn)程的使用場景所意。
線框流程圖對(duì)于合作構(gòu)思
除了是一種程序相關(guān)人員和開發(fā)者之間交流的有用方法淮逊，作為一個(gè)團(tuán)隊(duì)之間配合的工具催首，線框流程圖同樣能夠工作得很好。尤其在敏銳的環(huán)境中泄鹏，跨部門團(tuán)隊(duì)間能夠配合交流得好是十分重要的郎任。
跨部門團(tuán)隊(duì)之間的設(shè)計(jì)研討會(huì)能夠碰撞出一些理解上的火花，在這些平行設(shè)計(jì)工作小組之中备籽，團(tuán)隊(duì)成員構(gòu)思和寫下任務(wù)流程舶治，然后整個(gè)團(tuán)隊(duì)討論這些點(diǎn)，為了潛在的點(diǎn)可視化车猬，UX用線框流程圖的方式給每個(gè)步驟畫草圖（并且記錄下團(tuán)隊(duì)已經(jīng)同意的點(diǎn)）霉猛。
在一個(gè)配合的環(huán)境中，線框流程圖不需要視覺上打磨珠闰，這種類型的討論惜浅，用白板或者紙和筆畫草圖的方式快速的將想法和交互記錄下來是非常有效的。
在一場NN/g UX 會(huì)議中的UX交付研討伏嗜，幾個(gè)團(tuán)隊(duì)成員用粘上便簽條的手機(jī)坛悉，標(biāo)記筆，和紙來討論一個(gè)設(shè)計(jì)環(huán)節(jié)中的流程圖承绸。這個(gè)過程用一個(gè)白板就能容易實(shí)現(xiàn)裸影，或者僅僅用紙和筆。
結(jié)論
線框流程圖是一種正在興起的用于記錄移動(dòng)端和Webapps中用戶工作流程和復(fù)雜交互方式的UX交付军熏。它們非常適合于呈現(xiàn)一個(gè)APP中一個(gè)或幾個(gè)頁面的動(dòng)態(tài)改變轩猩，通過大量的連接在一起的相對(duì)靜止頁面來捕捉流程卻收效較差。作為一種團(tuán)隊(duì)間合作與構(gòu)思的方法羞迷，用來思考用戶工作流程界轩、任務(wù)，以及構(gòu)思進(jìn)程中屏幕設(shè)計(jì)的每一步衔瓮，線框流程圖同樣是有用的浊猾。
