交互稿是交互設(shè)計(jì)師的主要產(chǎn)出。在實(shí)際工作中，交互設(shè)計(jì)師的主要職責(zé)就是根據(jù)產(chǎn)品提出的不同需求，用交互稿的形式給出交互方案。而且，交互方案會(huì)在產(chǎn)品、UI、開發(fā)、測試同學(xué)中流轉(zhuǎn)，因此也成為他們?cè)u(píng)判一個(gè)交互設(shè)計(jì)師能力的重要依據(jù)。因此可以這樣說，交互方案質(zhì)量的高低，會(huì)成為一個(gè)交互設(shè)計(jì)師能力高低的重要體現(xiàn)之一。
要想畫出高質(zhì)量的交互稿，一方面，要使用正確、高效的方法對(duì)需求進(jìn)行設(shè)計(jì)分析，然后依據(jù)分析中形成的設(shè)計(jì)思路來進(jìn)行設(shè)計(jì)；另一方面，交互稿中需要具備完備的結(jié)構(gòu)，以體現(xiàn)交互設(shè)計(jì)師的專業(yè)性。下面，我們來看看如何能保證交互稿的完備性，防止信息的遺失。
交互稿的「目標(biāo)用戶」
要講交互稿，我們先來看看交互設(shè)計(jì)師的工作流程：
交互設(shè)計(jì)師從產(chǎn)品經(jīng)理那里接到需求，跟產(chǎn)品討論之后，首先需要對(duì)需求進(jìn)行設(shè)計(jì)分析。
在分析之后，就可以開始畫交互稿了。
交互稿完成之后，要把它交接給UI的同學(xué)進(jìn)行界面設(shè)計(jì)，再然后是給開發(fā)的同學(xué)進(jìn)行開發(fā)、測試的同學(xué)進(jìn)行測試。
從這里可以看出，交互稿文檔的主要 「目標(biāo)用戶」 是產(chǎn)品、UI、開發(fā)和測試。其實(shí)仔細(xì)想想，交互設(shè)計(jì)師的職責(zé)，就是把一個(gè)功能給「說清楚」：
產(chǎn)品同學(xué)需要知道這個(gè)交互稿是否包含了所有的功能點(diǎn)。
UI同學(xué)需要知道這個(gè)功能都包含哪些界面，每個(gè)界面的元素都有什么，元素的狀態(tài)都有什么。
開發(fā)、測試同學(xué)需要知道功能的流程是什么，點(diǎn)擊了頁面的元素會(huì)有怎樣的反應(yīng)。
所以，以上這些信息都必須包含在交互稿中。明白交互稿的目標(biāo)用戶對(duì)于畫出高質(zhì)量的交互稿十分重要。
交互稿的必備信息
上面我們提到交互設(shè)計(jì)師產(chǎn)出的交互稿是給誰看的。我們來總結(jié)一下，上面提到的交互稿中必須包含的信息有：
界面展現(xiàn)完整的流程。
界面以及界面中的元素展現(xiàn)需求的所有功能點(diǎn)。
界面中元素的各種狀態(tài)。
元素操作后的效果。
對(duì)于第1點(diǎn)展現(xiàn)完整的流程，如果這個(gè)功能比較復(fù)雜，流程比較長或者流程中邏輯比較多，則可以附上流程圖，方便產(chǎn)品、開發(fā)、測試同學(xué)理解；而對(duì)于一般相對(duì)簡單的功能，依據(jù)你使用的交互稿的作圖工具，分以下兩種情況：
如果你使用的是Sketch，那么可以把所有的界面都平鋪在一張圖里，UI、開發(fā)的同事通過圖中的主要界面就可以get到流程；如果你使用的是Axure，建議Axure里的一個(gè)頁面只展現(xiàn)一個(gè)界面或分支流程（好處是可以充分展現(xiàn)一個(gè)界面或分支流程的各種狀態(tài)，展現(xiàn)十分清晰），此時(shí)，流程是通過Axure左邊的樹狀結(jié)構(gòu)來展現(xiàn)的，如下圖：
△ 樹狀結(jié)構(gòu)示例
對(duì)于第2、3、4點(diǎn)，我們可以通過遍歷的方法來走查流程和界面。遍歷的方法，就是從頭到尾看一遍自己的交互稿，注意其中是否包含了需求中所有的功能點(diǎn)；每個(gè)界面中的每個(gè)元素，如果用戶點(diǎn)擊了，它會(huì)有什么反應(yīng)（顏色是否改變？是否需要?jiǎng)有?？等等）？點(diǎn)擊之后去到哪個(gè)頁面？如果沒有網(wǎng)絡(luò)該展現(xiàn)什么？這里為大家總結(jié)一下：
按鈕、圖標(biāo)一般就包含三個(gè)狀態(tài)：默認(rèn)態(tài)、點(diǎn)擊態(tài)和點(diǎn)擊之后的狀態(tài)。
用戶操作后可能發(fā)生的異常情況：無響應(yīng)、無網(wǎng)絡(luò)、空數(shù)據(jù)、大量數(shù)據(jù)、網(wǎng)絡(luò)慢、是否有緩存、數(shù)據(jù)過期、狀態(tài)的改變（如換城市）、首次使用（新手引導(dǎo)）。
這里給大家舉一個(gè)之前做的案例（如下圖）。在這個(gè)例子中，左邊的樹狀結(jié)構(gòu)反映了主要的流程。由于該需求流程中設(shè)計(jì)的邏輯較多，因此在最后附上了「流程圖」這個(gè)模塊，方便開發(fā)和測試的同學(xué)。在頁面中，只展現(xiàn)了 「我的宜定盈詳情」 這個(gè)頁面的各種狀態(tài)和操作后的結(jié)果。
交互稿的附屬信息——項(xiàng)目概述
在交互稿的第一頁，可以加上「項(xiàng)目概述」這個(gè)主題，主要展示該需求的基本信息和迭代說明。增加項(xiàng)目概述這一頁，一方面可以記錄交互的修改，在發(fā)生問題的時(shí)候方便追溯；另一方面讓交互稿顯得更專業(yè)，是提升交互稿氣場的好方法。
△ 項(xiàng)目概述示例
交互稿的附屬信息——設(shè)計(jì)分析
有一些需求，如果需求本身比較龐大，涉及到的人員比較復(fù)雜，可以在交互稿中加入設(shè)計(jì)分析的部分。這可以幫助大家更好地理解你的交互稿是如何被設(shè)計(jì)出來的。由于是放在設(shè)計(jì)稿里，而不是一個(gè)專門的需要展示設(shè)計(jì)分析的PPT，因此設(shè)計(jì)分析里只需要放入最核心的信息就好，包括：場景分析、產(chǎn)品目標(biāo)、用戶目標(biāo)，比如下面這個(gè)例子：
△ 設(shè)計(jì)分析示例
以上為大家總結(jié)了一份完備的交互稿應(yīng)該包含的要素，希望對(duì)大家有幫助。
本文轉(zhuǎn)載自網(wǎng)絡(luò)，版權(quán)歸原作者所有！
文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址：http://16qt59sf.cn/news/industry/1938.html
