超周全！一個(gè)完備的交互設(shè)計(jì)稿有哪些必備元素？

交互稿是交互設(shè)計(jì)師的重要產(chǎn)出。在現(xiàn)實(shí)工作中，交互設(shè)計(jì)師的重要職責(zé)就是根據(jù)產(chǎn)品提出的不同需求，用交互稿的情勢(shì)給出交互方案。而且，交互方案會(huì)在產(chǎn)品、UI、開(kāi)發(fā)、測(cè)試同窗中流轉(zhuǎn)，因此也成為他們?cè)u(píng)判一個(gè)交互設(shè)計(jì)師能力的緊張依據(jù)。因此可以如許說(shuō)，交互方案質(zhì)量的高低，會(huì)成為一個(gè)交互設(shè)計(jì)師能力高低的緊張表現(xiàn)之一。

要想畫(huà)出高質(zhì)量的交互稿，一方面，要使用精確、高效的方法對(duì)需求進(jìn)行設(shè)計(jì)分析，然后依據(jù)分析中形成的設(shè)計(jì)思路來(lái)進(jìn)行設(shè)計(jì)；另一方面，交互稿中必要具備完整的結(jié)構(gòu)，以表現(xiàn)交互設(shè)計(jì)師的專業(yè)性。下面，我們來(lái)看看如何能保證交互稿的完整性，防止信息的遺失。

交互稿的「目標(biāo)用戶」

• 要講交互稿，我們先來(lái)看看交互設(shè)計(jì)師的工作流程：
• 交互設(shè)計(jì)師從產(chǎn)品經(jīng)理那里接到需求，跟產(chǎn)品討論之后，首先必要對(duì)需求進(jìn)行設(shè)計(jì)分析。
• 在分析之后，就可以開(kāi)始畫(huà)交互稿了。
• 交互稿完成之后，要把它交接給UI的同窗進(jìn)行界面設(shè)計(jì)，再然后是給開(kāi)發(fā)的同窗進(jìn)行開(kāi)發(fā)、測(cè)試的同窗進(jìn)行測(cè)試。

從這里可以看出，交互稿文檔的重要「目標(biāo)用戶」是產(chǎn)品、UI、開(kāi)發(fā)和測(cè)試。其實(shí)細(xì)心想想，交互設(shè)計(jì)師的職責(zé)，就是把一個(gè)功能給「說(shuō)清楚」：

• 產(chǎn)品同窗必要知道這個(gè)交互稿是否包含了所有的功能點(diǎn)。
• UI同窗必要知道這個(gè)功能都包含哪些界面，每個(gè)界面的元素都有什么，元素的狀況都有什么。
• 開(kāi)發(fā)、測(cè)試同窗必要知道功能的流程是什么，點(diǎn)擊了網(wǎng)頁(yè)的元素會(huì)有怎樣的反應(yīng)。

所以，以上這些信息都必須包含在交互稿中。曉暢交互稿的目標(biāo)用戶對(duì)于畫(huà)出高質(zhì)量的交互稿十分緊張。

交互稿的必備信息

上面我們提到交互設(shè)計(jì)師產(chǎn)出的交互稿是給誰(shuí)看的。我們來(lái)總結(jié)一下，上面提到的交互稿中必須包含的信息有：

• 界面顯現(xiàn)完備的流程。
• 界面以及界面中的元素顯現(xiàn)需求的所有功能點(diǎn)。
• 界面中元素的各種狀況。
• 元素操作后的結(jié)果。

對(duì)于第1點(diǎn)顯現(xiàn)完備的流程，假如這個(gè)功能比較復(fù)雜，流程比較長(zhǎng)或者流程中邏輯比較多，則可以附上流程圖，方便產(chǎn)品、開(kāi)發(fā)、測(cè)試同窗理解；而對(duì)于一樣平常相對(duì)簡(jiǎn)單的功能，依據(jù)你使用的交互稿的作圖工具，分以下兩種情況：

假如你使用的是Sketch，那么可以把所有的界面都平鋪在一張圖里，UI、開(kāi)發(fā)的同事通過(guò)圖中的重要界面就可以get到流程；假如你使用的是Axure，建議Axure里的一個(gè)網(wǎng)頁(yè)只顯現(xiàn)一個(gè)界面或分支流程（益處是可以充分顯現(xiàn)一個(gè)界面或分支流程的各種狀況，顯現(xiàn)十分清晰），此時(shí)，流程是通過(guò)Axure左邊的樹(shù)狀結(jié)構(gòu)來(lái)顯現(xiàn)的，如下圖：

△ 樹(shù)狀結(jié)構(gòu)示例

對(duì)于第2、3、4點(diǎn)，我們可以通過(guò)遍歷的方法來(lái)走查流程和界面。遍歷的方法，就是從頭到尾看一遍本身的交互稿，細(xì)致其中是否包含了需求中所有的功能點(diǎn)；每個(gè)界面中的每個(gè)元素，假如用戶點(diǎn)擊了，它會(huì)有什么反應(yīng)（顏色是否改變？是否必要?jiǎng)有В康鹊龋?？點(diǎn)擊之后去到哪個(gè)網(wǎng)頁(yè)？假如沒(méi)有網(wǎng)絡(luò)該顯現(xiàn)什么？這里為大家總結(jié)一下：

• 按鈕、圖標(biāo)一樣平常就包含三個(gè)狀況：默認(rèn)態(tài)、點(diǎn)擊態(tài)和點(diǎn)擊之后的狀況。
• 用戶操作后可能發(fā)生的非常情況：無(wú)相應(yīng)、無(wú)網(wǎng)絡(luò)、空數(shù)據(jù)、大量數(shù)據(jù)、網(wǎng)絡(luò)慢、是否有緩存、數(shù)據(jù)過(guò)期、狀況的改變（如換城市）、首次使用（新手指導(dǎo)）。

這里給大家舉一個(gè)之前做的案例（如下圖）。在這個(gè)例子中，左邊的樹(shù)狀結(jié)構(gòu)反映了重要的流程。因?yàn)樵撔枨罅鞒讨性O(shè)計(jì)的邏輯較多，因此在最后附上了「流程圖」這個(gè)模塊，方便開(kāi)發(fā)和測(cè)試的同窗。在網(wǎng)頁(yè)中，只顯現(xiàn)了「我的宜定盈詳情」這個(gè)網(wǎng)頁(yè)的各種狀況和操作后的效果。

交互稿的附屬信息——項(xiàng)目概述

在交互稿的第一頁(yè)，可以加上「項(xiàng)目概述」這個(gè)主題，重要展示該需求的基本信息和迭代說(shuō)明。增長(zhǎng)項(xiàng)目概述這一頁(yè)，一方面可以記錄交互的修改，在發(fā)生題目的時(shí)候方便追溯；另一方面讓交互稿顯得更專業(yè)，是提拔交互稿氣場(chǎng)的好方法。

△ 項(xiàng)目概述示例

交互稿的附屬信息——設(shè)計(jì)分析

有一些需求，假如需求自己比較重大，涉及到的人員比較復(fù)雜，可以在交互稿中加入設(shè)計(jì)分析的部分。這可以幫助大家更好地理解你的交互稿是如何被設(shè)計(jì)出來(lái)的。因?yàn)槭欠旁谠O(shè)計(jì)稿里，而不是一個(gè)專門(mén)的必要展示設(shè)計(jì)分析的PPT，因此設(shè)計(jì)分析里只必要放入最核心的信息就好，包括：場(chǎng)景分析、產(chǎn)品目標(biāo)、用戶目標(biāo)，比如下面這個(gè)例子：

△ 設(shè)計(jì)分析示例

以上為大家總結(jié)了一份完整的交互稿應(yīng)該包含的要素，盼望對(duì)大家有幫助。

這里也附上目標(biāo)導(dǎo)向設(shè)計(jì)法的鏈接，教你如何提拔設(shè)計(jì)思維：《一招教你讓交互方案更靠譜！超好用的目標(biāo)導(dǎo)向設(shè)計(jì)法》。

作者最近開(kāi)了一個(gè)小密圈，與通俗的小密圈不同，博主的小密圈不僅有問(wèn)答功能，還有6個(gè)專題分享，幫助你體系學(xué)習(xí)交互：

都是他從近5年工作經(jīng)驗(yàn)中總結(jié)的比較實(shí)用的知識(shí)點(diǎn)，適合入門(mén)一兩年的交互設(shè)計(jì)師進(jìn)階學(xué)習(xí)。除此以外，他會(huì)為大家提供7個(gè)需求，供大家實(shí)戰(zhàn)，鍛煉之前學(xué)到的知識(shí)。實(shí)戰(zhàn)后的點(diǎn)評(píng)和建議都是他親自上手的，這么知心的引導(dǎo)，感愛(ài)好的抓緊咯 ：）

迎接關(guān)注作者微信公眾號(hào)：「新設(shè)計(jì)青年」