———— / BEGIN / ————

PS：本文適用于移動(dòng)端，Axure軟件制作的文檔型交互稿。

• 交互稿應(yīng)該包含哪些內(nèi)容？

• 如何搭建一個(gè)合理的交互稿結(jié)構(gòu)？

• 各個(gè)界面應(yīng)該如何擺放？

• 清晰易讀的設(shè)計(jì)說明應(yīng)該是怎樣的？

作為一個(gè)新人，很難完全弄清上面的問題。

其實(shí)想要畫出一份合乎規(guī)范的交互稿并不難，只需找前輩的稿子參考一下就能習(xí)得十之六七。但由于設(shè)計(jì)稿大多涉及企業(yè)機(jī)密，有著較強(qiáng)的產(chǎn)權(quán)屬性，所以一般很難接觸到。

今天筆者將通過“解讀一份交互稿模板”的方式，解決上面的幾個(gè)問題。

一、交互稿應(yīng)該包含哪些內(nèi)容？

交互稿是否只需包含設(shè)計(jì)方案即可？

其實(shí)不然。

交互稿兼具設(shè)計(jì)展示、上下游協(xié)作、過程記錄、版本管理幾種作用，所以交互稿一般至少具有以下幾個(gè)部分的內(nèi)容：

封面：用于記錄版本號(hào)、人員、時(shí)間等信息；

更新日志：記錄了交互稿更新的信息，方便他人查看，同時(shí)也保障了規(guī)范性；

設(shè)計(jì)過程：包含需求信息、設(shè)計(jì)資料記錄、設(shè)計(jì)過程記錄三方面信息，目的是讓自己的設(shè)計(jì)過程更加結(jié)構(gòu)化，也方便以后回溯設(shè)計(jì)、總結(jié)設(shè)計(jì)；

交互稿：交互稿的主體，內(nèi)含流程圖、界面圖、設(shè)計(jì)說明等；

廢紙簍：用于存放廢棄的頁面，以防后期用到；

二、如何組織交互稿結(jié)構(gòu)？

2.1. 交互稿結(jié)構(gòu)依賴于產(chǎn)品信息架構(gòu)

首先需要說明的是，“把所有界面放在一個(gè)畫布上的無結(jié)構(gòu)式交互稿”一定是不對(duì)的，這是很多新人經(jīng)常會(huì)犯的錯(cuò)誤。因?yàn)檫@種做法無法適應(yīng)大型稿件，而且開發(fā)同學(xué)在錯(cuò)綜復(fù)雜的網(wǎng)狀設(shè)計(jì)稿中找信息，也是著實(shí)辛苦。

交互稿的結(jié)構(gòu)，應(yīng)該根據(jù)產(chǎn)品信息架構(gòu)搭建。

比如下圖是網(wǎng)易云音樂“本地音樂”模塊的信息架構(gòu)和交互稿目錄，由產(chǎn)品信息架構(gòu)可以推導(dǎo)出交互稿目錄。

可以發(fā)現(xiàn)這種一一對(duì)應(yīng)的交互稿目錄結(jié)構(gòu)，非常清晰易懂。

網(wǎng)易云音樂“本地音樂”模塊

2.2. 交互稿結(jié)構(gòu)原理

交互稿結(jié)構(gòu)應(yīng)當(dāng)遵循“平臺(tái)–頁面–子頁面”這樣的原則（下圖，這里說的頁面不是界面，而是指“一頁交互稿”）。每一個(gè)頁面中承載的對(duì)象有2種，一種是單界面，另一種是界面流程（后文解釋）。

交互稿結(jié)構(gòu)原則

我們舉個(gè)例子，假設(shè)有一個(gè)“簡版的網(wǎng)易新聞”，那么它的結(jié)構(gòu)可能是下圖這樣的：

交互稿結(jié)構(gòu)示例

什么是“單界面”、“界面流程”？單界面相對(duì)容易理解，比如上圖中的“首頁”，就只需要在交互稿的這一頁中放置一張“首頁”的線框圖即可，也就是所謂的“單界面”。那么界面流程是什么呢？

其實(shí)就是多個(gè)界面的串聯(lián)圖（如下圖所示）

界面流程

什么情況下需要使用“流程界面”呢？所有APP都由界面組成，而界面上的元素可以歸為3類：內(nèi)容、入口、功能。“界面流程”一般用來闡述一項(xiàng)“功能”。

究其原因，功能與內(nèi)容和入口都不同，功能一般需要“一連串操作”，比如登錄功能、搜索功能。此時(shí)我們?cè)倏瓷厦娴陌咐?#xff0c;就會(huì)很容易理解了。

三、每一頁交互稿應(yīng)該是怎樣的？

3.1. 每頁交互稿的內(nèi)容

一般而言，每一頁交互稿應(yīng)當(dāng)具備以下幾項(xiàng)內(nèi)容：

單頁交互稿示例：

頁面標(biāo)題：建議使用“固定在瀏覽器頂部”功能讓頁面標(biāo)題常駐；

界面標(biāo)題：方便交互稿中的互相索引，比如“回到界面B狀態(tài)”；

界面：建議尺寸為360*640px，長頁面也可自行延伸高度；

設(shè)計(jì)說明：邏輯關(guān)系、元素狀態(tài)、小微流程，都可以放在設(shè)計(jì)說明中；

流程線：說明界面間邏輯關(guān)系，可使用軟件自帶流程線；

鏈接：指向其他頁面，比如支線流程，開發(fā)同學(xué)閱讀起來會(huì)很方便；

作者信息：這是設(shè)計(jì)師的落款，同時(shí)也方便他人聯(lián)系設(shè)計(jì)師；

3.2. 網(wǎng)格系統(tǒng)的應(yīng)用

確定了頁面內(nèi)容后，內(nèi)容的布局也很重要。布局不好就會(huì)顯得亂糟糟的，怎么處理布局問題呢？筆者提供一個(gè)“網(wǎng)格系統(tǒng)”（下圖），可以讓設(shè)計(jì)稿很有“秩序感”。

具體而言，在Axure的“布局-柵格與輔助線-網(wǎng)格設(shè)置”中設(shè)置間距為40px的網(wǎng)格（40px是常見界面尺寸320、360、640、1080…的公約數(shù)），然后盡量保證所有的元素貼齊網(wǎng)格即可。使用后你會(huì)發(fā)現(xiàn)自己的交互稿變得盡然有序，且美觀很多。

帶有網(wǎng)格系統(tǒng)的交互稿

網(wǎng)格的另外一個(gè)優(yōu)點(diǎn)是可以很高效地對(duì)齊各個(gè)元素，如下面視頻所示：

總結(jié)

以上是生活随笔為你收集整理的这份交互稿模板，可以让你的设计稿非常规范的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。