相信不少人都看過網(wǎng)上各種酷炫的動態(tài)交互原型秉溉，筆者也是很欣賞的琅攘，以前也學著用flash和AE做過類似的高逼格動態(tài)原型，但是個人感覺在實際項目中银觅，動態(tài)原型圖的性價比并不高礼饱。動態(tài)高保真原型坏为，更適合用于公開展示，需要有對原型相當了解的人來講解镊绪。而我下面要說的這種全流程交互圖匀伏，在需求評審，方案傳遞時更為實用蝴韭，視覺設計師够颠，程序員只要看圖，就能快速理解產(chǎn)品功能榄鉴，比起文字型文檔履磨，交互流程圖極大降低理解成本蛉抓，提高溝通效率，制作成起來也比較快速剃诅。
下面是筆者以前畫的交互流程圖巷送，用的工具是Photoshop，比較注重細節(jié)∶現(xiàn)在由于時間問題笑跛，多用axure，無法像Photoshop 那樣扣細節(jié)了聊品，也沒辦法畫斜線飞蹂，但好處是快，導出動態(tài)demo比較方便翻屈。我個人還是比較推薦用Axure的陈哑。
接下來進入正題，說說畫出易懂伸眶，美觀的交互流程圖的5個技巧
一芥颈、完整的主干閉環(huán)+可能出現(xiàn)異常反饋
1、確定一個目標赚抡，例如：新用戶注冊爬坑，從第一步開始，按用戶頁面跳轉(zhuǎn)順序擺放界面涂臣。
2盾计、針對新用戶注冊這個功能，完整的功能交互流程圖赁遗，必須包含：新用戶開啟APP署辉，觸發(fā)注冊，注冊流程岩四，完成注冊哭尝，進入游戲這幾個關鍵步驟的完整閉環(huán)。
3剖煌、在關鍵步驟的主干閉環(huán)之外材鹦，需要將所有的異常提示展示出來，如：手機號無效耕姊，手機號已注冊桶唐，網(wǎng)絡超時等主干流程中可能遇到的異常提示，以及對應處理反饋茉兰。
二尤泽、按鈕點擊效果+頁面跳轉(zhuǎn)邏輯
1、主干流程的按鈕，均要描述點擊后的處理坯约，以及可能出現(xiàn)的異常反饋熊咽。
2、觸發(fā)頁面跳轉(zhuǎn)后闹丐，需要用箭頭標注跳轉(zhuǎn)邏輯网棍，兩條流程線之間，盡量不要有十字交疊妇智。
三滥玷、標題和注解
1、交互流程圖中巍棱，主要包含四類注解：模塊標題惑畴、界面標題、界面注解航徙、流程箭頭注解如贷。
2、模塊標題：一般是主干流程的功能名稱到踏，如新用戶注冊流程杠袱、充值流程等。
3窝稿、界面標題：即每個界面的名稱楣富，如啟動頁、登錄頁等伴榔，可展示在每個界面上方纹蝴，并附帶編號。
4踪少、界面注解：是交互圖中最重要的文字內(nèi)容塘安，一般展示在對應界面下方，可包含頁面動態(tài)描述援奢，頁面異常情況描述兼犯，頁面簡要邏輯描述等。
5集漾、流程箭頭注解：一般是展示在箭頭線上的切黔，對于頁面跳轉(zhuǎn)的描述，如：點擊注冊跳轉(zhuǎn)帆竹。
四绕娘、視覺相關要素
1脓规、視覺焦點：一個界面栽连，盡量只展示一個重點信息，并且使其成為視覺焦點，從面積秒紧，放置位置绢陌，顏色，字號等元素熔恢，都做強化脐湾，其他非焦點信息，則弱化叙淌。
2秤掌、圖像：在交互圖中，每個模塊盡可能用塊狀底色區(qū)分鹰霍，避免使用過多線框闻鉴，否則容易使交互圖變得復雜，加重視覺負擔茂洒。
3孟岛、配色：建議交互圖中，使用一種基準色督勺，如藍色或灰色渠羞，疊放層級靠后的模塊，用深藍色智哀，靠前的模塊次询，用淺藍色。同時瓷叫，按鈕可單獨使用一種顏色渗蟹，如綠色。部分需重點突出的元素可用提醒色赞辩，如橘色雌芽。箭頭可用半透明的黃色等。
4辨嗽、擺放：所有界面上下對齊世落，間隔一致，保證工整的視覺效果糟需。
再附上一張關于手勢操作的描述圖屉佳，每個操作細節(jié)都要清楚描述
附錄：如何提升互聯(lián)網(wǎng)產(chǎn)品體驗：
1、把用戶假設成一個聰明但是很忙的人洲押，不要指望讓用戶記住任何操作流程武花，而是隨時提供清晰的指引和盡可能自由的頁面跳轉(zhuǎn)入口。
2杈帐、用戶的高頻操作体箕，應盡量減少操作步驟专钉，而低頻操作，則無需刻意關注步驟數(shù)累铅，更應該關注的是每一步的操作難度和界面信息是否易于理解跃须。應盡量降低選擇難度，別讓用戶花時間去理解娃兽。
3菇民、一個頁面只突出一個重點，用大小投储，顏色第练，形狀來做分類，讓用戶一眼可分辨到重要信息玛荞。
4复旬、扁平化和漸進披露相結(jié)合，視場景而定冲泥，而不是機械地執(zhí)行扁平化驹碍。流程扁平化的好處是，可以讓用戶提前感知流程凡恍，頁面跳轉(zhuǎn)的成本也比較低志秃，但是比較考驗對頁面信息的整合處理，漸進披露是預先把次要信息隱藏嚼酝，當用戶觸發(fā)了對應操作浮还，進入對應流程，才給出相應反饋或指引闽巩，好處是讓用戶更專注钧舌，減少理解成本。
5涎跨、頁面一致性也是這個道理洼冻，就我理解，一致性的是為了讓用戶形成習慣隅很，進而減少理解成本撞牢。比如，確定操作永遠在右側(cè)，選中狀態(tài)永遠高亮，紅色代表嚴重警告等等芬膝。當用戶已經(jīng)形成統(tǒng)一認知，則會大大降低每一次操作的理解成本畜挥。但有時候設計師會過于信仰一致性，導致失去個性婴谱，我建議在不影響習慣的前提下蟹但，可適時打破所謂一致性的束縛躯泰，讓設計更加出彩。
6矮湘、讓用戶有反悔機會斟冕。誤操作后口糕，可恢復缅阳，且重要操作需二次確認，并強化感知嚴重性景描。
7十办、避免依賴文字說明，多用圖形化的方式讓用戶直接感知超棺，而不是通過理解文字來感知向族。且文案使用的格式、主語建議統(tǒng)一棠绘，這有助于營造整體調(diào)性件相。另外一點，即按鈕文案的使用氧苍，建議明確告訴用戶該頁面的目的和功能夜矗，同時引導行為，而不是陳述性文案让虐。用動詞+賓語的格式來引導用戶操作紊撕，如：“去購買”比“商城”更清楚，“去玩牌”比“游戲”更清楚赡突。
8对扶、需同時考慮多平臺的用戶操作習慣，如ios系統(tǒng)上的應用惭缰，頁面需提供返回按鈕浪南，而安卓上的應用，按鈕應避免過于靠近手機底部操作欄漱受，以防誤操作逞泄。
