作為交互設(shè)計(jì)師，天天畫的就是交互稿了。而對(duì)于很多新手交互設(shè)計(jì)師以及想轉(zhuǎn)行做交互的同學(xué)們來說，一定都非常想知道大廠的交互設(shè)計(jì)師畫出來的交互稿具體是什么樣子的。

但和視覺稿不同，交互稿里面體現(xiàn)了太多產(chǎn)品本身的邏輯，難免涉及到一些敏感內(nèi)容，所以具體的交互稿不太適合直接分享，這就是比較尷尬的問題了。

不過，這不妨礙我為你們做一份交互稿模板。一來我自己也在用，二來可以幫助大家，何樂而不為。

但我必須重點(diǎn)強(qiáng)調(diào)一句話：框架是死的，人是活的，不一定要拘泥于某種形式，你可以根據(jù)自己的需要自由修改。

模版一：PPT 型的分頁交互稿

第一個(gè)是 PPT 型的分頁交互稿，這個(gè)樣式最早是從騰訊 CDC 團(tuán)隊(duì)流傳下來的，我在第二家公司的時(shí)候就從他們的博客中看到過，當(dāng)時(shí)還用 InDesign 做過一個(gè)模板。而我現(xiàn)在所在的團(tuán)隊(duì)用的也是這個(gè)，因此我過來后就自己重新用 Sketch 做了一版，方便以后使用。

1. 封面

封面很簡(jiǎn)單，就是文檔標(biāo)題和作者，頂部有一個(gè)通用的文檔標(biāo)題欄，上面的內(nèi)容包括：

? 項(xiàng)目名稱：阿爾法項(xiàng)目（示意）

? 頁面標(biāo)題：iOS 主界面框架（示意，根據(jù)每頁的內(nèi)容進(jìn)行變化）

? 版本號(hào)：1.0（每修改一次都要 + 0.1，當(dāng)然你也可以直接變成 2.0、3.0）

? 修改日期：2018-07-24

? 頁碼：分為當(dāng)前頁碼和總頁數(shù)

我在 Sketch 中為這個(gè)模板中需要改動(dòng)的內(nèi)容都定義了 Symbol，比如這個(gè)標(biāo)題欄，你只要選中之后，就可以在右邊的屬性面板中自定義里面的內(nèi)容。

2. 修訂記錄

修訂記錄這頁，記錄了從文檔建立開始，每次更新的主要內(nèi)容，以及相關(guān)人員，方便后期交接的時(shí)候給對(duì)應(yīng)的產(chǎn)品經(jīng)理、游戲策劃和設(shè)計(jì)師查看。有時(shí)候交互稿更新一次只是修改一小處地方，如果不備注對(duì)方就會(huì)很難找到，可能以后你自己都會(huì)遺忘。

這一塊我也定義了 Symbol 元件，你可以直接復(fù)制一行，然后修改里面的內(nèi)容，「更新內(nèi)容」的文本支持多行輸入。

3. 目錄

這種分頁型的文檔一定要有目錄，備注好每個(gè)模塊對(duì)應(yīng)的頁碼，否則十幾頁看下來都暈了，每次想找到對(duì)應(yīng)的界面還得重新翻一遍。

4. 內(nèi)容頁面

具體的內(nèi)容頁面才是交互稿的核心，一般會(huì)用小氣泡和箭頭進(jìn)行標(biāo)注，然后在右側(cè)用對(duì)應(yīng)的數(shù)字和它們對(duì)應(yīng)，寫下詳細(xì)的交互說明。

結(jié)構(gòu)可以有很多種，比如上面這種豎屏的界面可以是左右結(jié)構(gòu)，如果是橫屏界面還可以是上下結(jié)構(gòu)等等，根據(jù)情況自由調(diào)整。文字段落的樣式我已經(jīng)定義好了，直接修改套用就行。

其中最重要的氣泡我也做了元件，選中之后直接在右邊修改數(shù)字即可。

5. 導(dǎo)出方式

使用這套模板做好交互稿后，使用 Sketch 的 File -> Export Artboards to PDF 即可將交互稿導(dǎo)出成 PDF 文檔。我很喜歡這個(gè)格式，與 PPT 相比，PDF 在任何平臺(tái)都可以通用，包括手機(jī)、Mac，不用特地裝什么軟件都能很好地打開。

模版二：長(zhǎng)圖型的流程交互稿

另一種是更常見的交互稿形式，這也是我這幾年進(jìn)騰訊后一直使用的格式。

如果你曾經(jīng)用過上文介紹的 PPT 型模板，你一定會(huì)發(fā)現(xiàn)：它的好處是 PDF 分頁格式非常整齊，比較適合一次性做一個(gè)大產(chǎn)品的交互功能介紹，而不適合小功能的頻繁修改。

今天介紹的這第二種，則是更加輕便快捷的類型。

1. 內(nèi)容模塊

這種長(zhǎng)圖型的交互稿，優(yōu)點(diǎn)很明顯：

? 發(fā)揮空間大，可以直接在一片空白上盡情地闡釋每個(gè)界面、每個(gè)流程，展開說各種細(xì)節(jié)。

? 分享和閱讀都很方便，最終格式是一張 PNG 長(zhǎng)圖，能隨手發(fā)給老板、產(chǎn)品經(jīng)理和其他相關(guān)同事，電腦手機(jī)都能看。

? 不存在分頁和各種格式限制，所以畫起來和修改起來都很快，小迭代要的就是效率。

來看一張基本樣例：

它的結(jié)構(gòu)分為：

? 交互稿標(biāo)題、日期

按照項(xiàng)目、模塊和功能的方式命名（如：電腦管家 V12 -清理垃圾-深度清理圖標(biāo)化改版），可以最大程度地規(guī)范交互稿名稱，讓其他人很容易理解交互稿涉及的是什么內(nèi)容。

? 相關(guān)負(fù)責(zé)人

對(duì)應(yīng)的產(chǎn)品經(jīng)理，交互稿的作者，方便評(píng)審時(shí)或者交接后找人。

? 需求背景

簡(jiǎn)單介紹為什么要做這次設(shè)計(jì)，出發(fā)點(diǎn)是什么，遇到了什么問題。

? 主要界面

這次設(shè)計(jì)中，涉及到的所有主要界面，先陳列出來方便大家快速評(píng)審和討論，視覺接手后可以根據(jù)這些來進(jìn)行風(fēng)格設(shè)計(jì)。

? 流程說明

有了主要界面后，我們還可能需要對(duì)一些操作流程進(jìn)行說明，比如怎樣發(fā)送一條語音消息，怎樣刪除一條會(huì)話等等。

? 異常狀態(tài)

最后還要記得檢查一下，每個(gè)界面在沒有內(nèi)容時(shí)的空狀態(tài)、斷網(wǎng)時(shí)的異常狀態(tài)，彈出各種通知的位置等等，千萬不要等到開發(fā)同學(xué)找你的時(shí)候才想起來。

上面所說的，就是一份交互稿的常見內(nèi)容模塊了。

2. 模板使用

該模板是專門給 Mac 平臺(tái)的 Sketch 用的。

下載后（下載方式見文末），打開你會(huì)看到這個(gè)界面：

里面的每個(gè)模塊我都做了 Symbol 元件，你只要選中就可以在右側(cè)更改內(nèi)容了。

比如下面的文檔基本信息：

我還把可能會(huì)用到的各種字體大小、顏色、對(duì)齊方式都做成了文字樣式：

選中文字后，在右側(cè)下拉框中選擇你要的樣式就好。

交互稿用的都是黑白灰，還有藍(lán)色作為標(biāo)注。

我一直用的這幾種，足夠用。

是不是很心動(dòng)？別著急，先把這個(gè) Sketch 文件保存成 Template（模板）。

然后，你就可以在新建文件時(shí)，選擇從模板處新建，直接用這個(gè)模板開始畫稿。

結(jié)語

感謝大家的閱讀

這是我所總結(jié)的「交互設(shè)計(jì)師技能樹」。

掃描關(guān)注下圖公眾號(hào)回復(fù)：交互稿，可免費(fèi)獲得素材 (請(qǐng)勿輸入空格)

作者：WingST（寇敬）

公眾號(hào)：落羽敬齋（wingstudy）

原文鏈接：https://zhuanlan.zhihu.com/p/62453116