一份恰到好處的交互原型文檔，能夠體現(xiàn)出產(chǎn)品的交互設計規(guī)劃以及大概展示效果，并保證設計師、開發(fā)、測試對交互效果展現(xiàn)達成一致，避免中途翻車產(chǎn)品上線延期。

很多交互設計師都會遇到的問題，疫情期間在線辦公更是問題重重——交互評審反饋問題較多？開發(fā)和測試對交互理解有偏差？最終實現(xiàn)的效果與預期不符？開發(fā)測試過程中溝通成本較大？交互不完善導致延期上線？

根據(jù)我多年與技術(shù)撕b（討論）的經(jīng)驗，告訴你們一份我的珍藏版交互葵花寶典。

一、文檔結(jié)構(gòu)層

先來看看你需要在axure里建立哪些文件夾和頁面：

1. 全局說明

需要放在文檔首位的文件夾，主要分三個頁面，原型查看說明、修改歷史記錄、統(tǒng)一元件。

2. 原型文件夾劃分

如APP端和web端都放在一個文件里，那么就需要一級文件夾命名為APP和web，如文件里只放了app端，那就需要按照功能模塊劃分。如圖：

3. 備份

這一點不要忘了，建立一個備份的文件夾，便于保留一些備份頁面。

4. 整體文件夾和頁面命名都使用編號

在做交互的過程中經(jīng)常會遇到命名類似的頁面，這個編號非常便于日后溝通，包括寫修改記錄時用到，開發(fā)可以對應的第一時間找到你們溝通或修改記錄里寫的頁面，包括對接ui時也會用得到，可以減少不少溝通成本。

二、結(jié)構(gòu)層全局說明詳細介紹

1. 原型查看說明

主要是教開發(fā)怎么看原型，如何快速理解你產(chǎn)出的方案。近期我發(fā)現(xiàn)使用火狐瀏覽器會造成所有交互事件消失，所以進入時先提示不要使用火狐瀏覽器。關(guān)閉瀏覽器后的說明如下圖，相信大家一看就懂。

2. 修改歷史記錄

主要記錄此版本交互的修改記錄，無論哪個階段修改、大家切記一定要寫在這個記錄里。不要嫌麻煩，會有用到的一天的，你們都無法想象我在做一個大項目時記錄了多少記錄。記錄模板如下圖，每次修改的內(nèi)容都要記錄在里面，要寫清日期、評審人。

3. 統(tǒng)一元件

這個不一定用得上，有一些項目是需要用的，尤其做一個0-1的項目，那么可能放哪些內(nèi)容呢？

比如需要下拉刷新的頁面都有哪些，上拉加載的默認條數(shù)，多種加載效果都分別用在哪些頁面，總之全局性的交互都在這里描述，舉例說明。

三、原型效果

1. 交互效果盡量做出來

比如點擊跳轉(zhuǎn)、點擊出現(xiàn)彈窗、其他的效果根據(jù)自己的能力和時間考慮是否做出來。

謹記一點，產(chǎn)品畫的原型可以很糙，但交互的原型要很精致，注重細節(jié)。否則就失去了交互這個崗位的意義。除了跳轉(zhuǎn)、彈窗的交互，其他的交互如果在axure做出了效果，要在交互說明里向開發(fā)傳達，因為有一些技術(shù)人員不會一個一個去點你實現(xiàn)的交互。

傳達方法一：把效果復制到交互說明，引導開發(fā)點擊查看效果。

傳達方法二：可使用錄屏軟件錄下來操作效果，生成gif，直接放在交互說明，開發(fā)用瀏覽器打開原型直接就能看到動圖。我用的是下面這個錄屏軟件。

2. 邏輯判斷的不同提示或跳轉(zhuǎn)要表示出來

一般產(chǎn)品會給一些流程圖，里面會有一些判斷邏輯，大多數(shù)情況是觸發(fā)一個按鈕需要判斷多個條件，而不同的條件可能是彈窗、可能是跳轉(zhuǎn)、可能是toast。那么我用的方法就是在一個按鈕上加多個單擊的事件，添加后記得給每一個用例名稱修改成對應狀態(tài)。

那么開發(fā)最終點擊按鈕就會看到多個狀態(tài)，點擊不同的狀態(tài)會有不同的彈窗、toast或跳轉(zhuǎn)。

3. 原型畫成什么樣？

低保真？中保真？高保真？

可能現(xiàn)實項目中沒有那么多的時間去做很多細節(jié)的調(diào)整，包括加交互、動畫都需要一定的時間，不過這根據(jù)自身的工作效率也有很大的關(guān)系。

我曾經(jīng)嘗試過同樣的工作量的不同項目，我跟另一個交互分別負責不同的項目，工作量是差不多的，最后我產(chǎn)出的就是偏高保真的效果還包括交互和動畫。

當習慣了用我自己的方法工作，如果讓我去做低保真的效果，反而會增加我的工作時間。給大家看一些我工作的產(chǎn)出吧，需要注意的是同一個頁面不同狀態(tài)展示的話要向右橫著排，不要讓開發(fā)又要橫向滑動又要縱向滑動的查看

4. 交互說明

交互說明我在APP和web端的輸出方法是不一樣的，APP占用空間小，而web一個頁面就已經(jīng)占滿了全屏。

APP交互說明：可以直接在旁邊寫出交互說明，上面一些圖片大家應該一看就懂了，交互說明一定要把你想到的所有細節(jié)，所有可能都寫出來，其實原型畫的比較細，可以省很多交互說明的文字，不過有一些容易被開發(fā)忽略的交互還是要寫出來，比如：

1. 各種情況下的提示效果和提示文案都需要寫清。
2. 我們在做交互設計的時候會有一些頁面的返回特意設計成返回上兩級，這種情況不光是在返回上加鏈接的問題，要在說明上也寫清楚，避免開發(fā)沒有點擊查看效果。
3. 當然有一些進入頁面就自動彈出鍵盤，焦點在某一個文本框上，雖然原型畫出來了，但交互說明還是要寫清楚。
4. 所有的列表頁都需要寫明需不需要下拉刷新和上拉加載。
5. 按鈕什么狀態(tài)下為灰色不可點擊狀態(tài)，什么狀態(tài)下是高亮可點擊狀態(tài)
6. 有必要的時候還需要在交互說明處配一個流程圖便于理解復雜的邏輯

web端交互說明：web端我一般都會直接在對應需要說明的地方直接用axure的說明功能寫出來，開發(fā)打開后對應點開每一處的說明，這種方法更有針對性，開發(fā)能一下子明白這條說明是針對這一個按鈕的、或針對這一個列表的。

四、總結(jié)

以上只是個人通過多年經(jīng)驗總結(jié)出來的交互輸出的工作方法，希望可以幫助到交互小白，少踩坑。

或許大家看了之后會覺得會在做一個原型上面花很多時間，不過當你習慣了這種方法后，其實并不會花太長時間，我的每一個實戰(zhàn)都會用以上方法輸出原型，至于為什么大家會看到以上效果，那都是一次一次撕b總結(jié)出來的。

作者：高杰，微信號公眾號：UX設計師高杰，從事交互設計和用戶體驗工作。

本文由 @高杰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議