交互稿是交互設計師的主要產(chǎn)出。在實際工作中泛烙，交互設計師的主要職責理卑，就是根據(jù)產(chǎn)品提出的不同需求，用交互稿的形式給出交互方案蔽氨。而且藐唠，交互方案會在產(chǎn)品、UI鹉究、開發(fā)中捆、測試同學中流轉(zhuǎn)，因此也成為他們評判一個交互設計師能力的重要依據(jù)坊饶。因此可以這樣說，交互方案質(zhì)量的高低殴蓬，會成為一個交互設計師能力高低的重要體現(xiàn)之一匿级。
要想畫出高質(zhì)量的交互稿蟋滴，一方面，要使用正確痘绎、高效的方法對需求進行設計分析津函，然后依據(jù)分析中形成的設計思路來進行設計，關于設計思路的養(yǎng)成孤页，可以參與我的小密圈“交互小殿堂_格蘭芬多”進行學習（https://t.xiaomiquan.com/Z7ieYfM）尔苦，也可以參考文末附上的“目標導向設計法”來進行；另一方面行施，交互稿中需要具備完備的結(jié)構允坚，以提現(xiàn)交互設計師的專業(yè)性。下面蛾号，我們來看看如何能保證交互稿的完備性稠项，防止信息的遺失。
交互稿的“目標用戶”
要講交互稿鲜结，我們先來看看交互設計師的工作流程：交互設計師從產(chǎn)品經(jīng)理那里接到需求展运，跟產(chǎn)品討論之后，首先需要對需求進行設計分析精刷；在分析之后拗胜，就可以開始畫交互稿了。交互稿完成之后怒允，要把它交接給UI的同學進行界面設計埂软，再然后是給開發(fā)的同學進行開發(fā)、測試的同學進行測試误算。從這里可以看出仰美，交互稿文檔的主要“目標用戶”，是產(chǎn)品儿礼、UI咖杂、開發(fā)和測試。其實仔細想想蚊夫，交互設計師的職責诉字，就是把一個功能給“說清楚”：產(chǎn)品同學需要知道這個交互稿是否包含了所有的功能點；UI同學需要知道這個功能都包含哪些界面知纷，每個界面的元素都有什么壤圃，元素的狀態(tài)都有什么；開發(fā)琅轧、測試同學需要知道功能的流程是什么伍绳，點擊了頁面的元素會有怎樣的反應。所以乍桂，以上這些信息都必須包含在交互稿中冲杀。明白交互稿的目標用戶對于畫出高質(zhì)量的交互稿十分重要效床。
交互稿的必備信息
上面我們提到交互設計師產(chǎn)出的交互稿是給誰看的。我們來總結(jié)一下权谁，上面提到的交互稿中必須包含的信息有：
- 界面展現(xiàn)完整的流程
- 界面以及界面中的元素展現(xiàn)需求的所有功能點
- 界面中元素的各種狀態(tài)
- 元素操作后的效果
對于第1點展現(xiàn)完整的流程剩檀，如果這個功能比較復雜，流程比較長或者流程中邏輯比較多旺芽，則可以附上流程圖沪猴，方便產(chǎn)品、開發(fā)采章、測試同學理解运嗜；而對于一般相對簡單的功能，依據(jù)你使用的交互稿的作圖工具共缕，分以下兩種情況：
- 如果你使用的是sketch洗出，那么可以把所有的界面都平鋪在一張圖里，UI图谷、開發(fā)的同事通過圖中的主要界面就可以get到流程翩活；
- 如果你使用的是axure，建議axure里的一個頁面只展現(xiàn)一個界面或分支流程（好處是可以充分展現(xiàn)一個界面或分支流程的各種狀態(tài)便贵，展現(xiàn)十分清晰）菠镇，此時，流程是通過axure左邊的樹狀結(jié)構來展現(xiàn)的承璃，如下圖：
對于第2利耍、3、4點盔粹，我們可以通過遍歷的方法來走查流程和界面隘梨。遍歷的方法，就是從頭到尾看一遍自己的交互稿舷嗡，注意其中是否包含了需求中所有的功能點轴猎；每個界面中的每個元素，如果用戶點擊了进萄，它會有什么反應（顏色是否改變捻脖？是否需要動效？等等）中鼠？點擊之后去到哪個頁面可婶？如果沒有網(wǎng)絡該展現(xiàn)什么？這里為大家總結(jié)一下：
- 按鈕援雇、圖標一般就包含三個狀態(tài)：默認態(tài)矛渴、點擊態(tài)和點擊之后的狀態(tài)；
- 用戶操作后可能發(fā)生的異常情況：無響應惫搏，無網(wǎng)絡具温，空數(shù)據(jù)盗舰，大量數(shù)據(jù)，網(wǎng)絡慢桂躏，是否有緩存，數(shù)據(jù)過期川陆，狀態(tài)的改變（如換城市）剂习，首次使用（新手引導）
這里給大家舉一個之前做的案例（如下圖）。在這個例子中较沪，左邊的樹狀結(jié)構反映了主要的流程鳞绕。由于該需求流程中設計的邏輯較多，因此在最后附上了【流程圖】這個模塊尸曼，方便開發(fā)和測試的同學们何。在頁面中，只展現(xiàn)了“我的宜定盈詳情”這個頁面的各種狀態(tài)和操作后的結(jié)果控轿。
交互稿的附屬信息——項目概述
在交互稿的第一頁冤竹，可以加上“項目概述”這個主題，主要展示該需求的基本信息和迭代說明茬射。增加項目概述這一頁鹦蠕，一方面可以記錄交互的修改，在發(fā)生問題的時候方便追溯在抛；另一方面讓交互稿顯得更專業(yè)钟病，是提升交互稿氣場的好方法。
交互稿的附屬信息——設計分析
有一些需求刚梭，如果需求本身比較龐大肠阱，涉及到的人員比較復雜，可以在交互稿中加入設計分析的部分朴读。這可以幫助大家更好地理解你的交互稿是如何被設計出來的屹徘。由于是放在設計稿里，而不是一個專門的需要展示設計分析的PPT磨德，因此設計分析里只需要放入最核心的信息就好缘回，包括：場景分析、產(chǎn)品目標典挑、用戶目標酥宴，比如下面這個例子：
以上為大家總結(jié)了一份完備的交互稿應該包含的要素。希望對大家有幫助您觉。
這里為大家準備了一份之前在網(wǎng)易新聞團隊做的交互稿拙寡，這份交互稿展示了作為一名交互設計師，如何用一份清晰琳水、完備的交互稿來展現(xiàn)一個需求肆糕，需要的童鞋可以在這個鏈接下載（淘寶鏈接般堆，5元購買）：交互原型范例——網(wǎng)易新聞客戶端交互源文件
這里也附上目標導向設計法的鏈接，教你如何提升設計思維：
小密圈“交互小殿堂_格蘭芬多”
交互小殿堂第二期開張啦诚啃！第二期的知識星球淮摔，我們有了更響亮的名字“交互小殿堂_格蘭芬多”。使用這個名字始赎，是希望大家可以更好的互動和橙，并且就像格蘭芬多學院精神那樣，大膽探索交互的奧秘造垛，不怕困難魔招，勇往直前。下面我來詳細介紹一下知識星球的用法五辽。設置了6個主題办斑，幫助你系統(tǒng)學習交互：
- 場景思維（2周）
- 心理模型（1周）
- 流程設計（5周）
- 正確使用控件（15周）
- 測試方案（3周）
- 用研（3周）
以上這些專題，將每周固定發(fā)布在我的小密圈“交互小殿堂_格蘭芬多”杆逗。
同時乡翅，為了讓大家更好地掌握每周的專題，安排每周的計劃如下：
- 周一在小密圈“交互小殿堂”獨家發(fā)布一篇主文髓迎，介紹本周主題峦朗；
- 周二至周五解答圈友們關于本周主題的問題；
- 周六分享優(yōu)秀交互設計案例排龄，并帶領大家解析設計亮點波势；
- 周日公布文末問題的答案。
6個專題結(jié)束后橄维，會為大家提供7個需求尺铣，供大家實戰(zhàn)，鍛煉之前學到的技能争舞。
具體的安排如下：
第一周凛忿，給出需求說明和重點提示；
第一周剩下的幾天以及第二周竞川，大家根據(jù)需求進行交互方案設計店溢；
第三周集中點評大家的方案，給出建議委乌。
歡迎加入床牧，和大家一起系統(tǒng)學習交互。
加入小密圈方法
點擊鏈接加入 http://t.xiaomiquan.com/MBiq7qV
現(xiàn)在圈子剛剛建立遭贸，實行短暫優(yōu)惠：
兩人一起報名戈咳，享8折優(yōu)惠；
三人一起報名，享7折優(yōu)惠著蛙；
四人一起報名删铃，享6折優(yōu)惠；
五人及五人以上一起報名踏堡，享5折優(yōu)惠猎唁；
感興趣的朋友請加QQ：605130227，以優(yōu)惠價加入顷蟆。
