如何輸出高質量的互動稿？來看京東設計師的總結！

互動設計師作為近年興起的網際網路設計崗位之一，具有其崗位產生的背景的特殊性。從互動設計師崗位職能來講，它是產品與視覺、前端開發的橋樑，是產品研發線上的連線紐帶。由於互動設計師既不是需求的發起者，也不是完全算是需求的執行者，所以作為產品研發線的中間環節，互動輸出對準確性、效率的不言而喻。可參考某些傳話類遊戲，中間傳遞的人的重要性也不言而喻。

一、互動輸出內容

以目前主流市場來說，大家還都是用Axure來進行互動稿件的繪製和輸出，可見各大網際網路公司的UED團隊對Axure軟體的相容性還是比較認可的。那麼，互動輸出應該規定一些什麼，輸出內容分成幾個大類，下面給大家詳細講述：

1. 頁面元素

所謂頁面元素，就是規定頁面內應該存在什麼內容、應用什麼樣的控制元件等，以及規定這些存在內容的樣式。這些元素為頁面組成的根本，也是互動輸出最基礎的根基部分。下列為筆者隨便舉例：移動端二次確認對話方塊的頁面元素規定（由於方便顯示，沒有按照自身規範書寫）。

2. 使用者點選事件流

其實「事件」是個計算機詞彙，你在輸入框中獲取焦點，就算是一個使用者事件；亦或是你點選了某個連結，都屬於事件，存在於Log日誌中。那麼所謂的使用者點選事件流，通俗說既是使用者使用產品時，與介面、伺服器互動的過程。在此過程中，互動設計師需要規定使用者點選後跳轉的頁面、介面對使用者的反饋，此過程是塑造使用者行為的關鍵環節。下列舉例為移動端二次確認對話方塊的使用者點選事件流規定：

3. 異常、邊界情況

異常情況和邊界情況其實可以分開來講。首先說異常情況，主要包含：伺服器響應超時情況、伺服器錯誤、網路中斷、弱網狀態（主要存在Mobile端）等… 邊界情況的存在主要用於限定一些特殊情況，例如：

• 輸入使用者暱稱的Maxlength （字元限制）；
• 移動端的載入等待時間（一般15-20S），超出後顯示錯誤狀態。

下列舉例為移動端二次確認對話方塊的異常和邊界規定：

二、互動稿輸出原則

在瞭解我個人輸入互動稿的內容習慣後，內容的基礎上，如何完成準確性高、高效、有利於工作協同的互動輸出？筆者個人在工作過程中，總結了以下幾點互動輸出的原則。

1. 模擬真實+規範統一

儘可能對線上頁面的元素進行完整還原，目的是給讀互動稿的同事一種代入感。但是模擬真實並不是進行畫素級別的還原，那是視覺設計做的工作。其實做到模擬真實有一個捷徑就是，建立自己產品的互動設計規範，這套互動設計規範庫可以從控制元件級到元件級再到頁面級。筆者注意到做到一般視覺、互動規範很難達到頁面級別，因為產品頁面模式多變。但是不同頁面最終會落到一種前段「容器」模板中，這個容器可以是以列表、表單為基礎的，也可以是產品的一個詳情頁模板。總之，每次互動輸出需要利用這些規範模板時，都可以複用，達到模擬真實的效果。

利用頁面級的規範模板可以促成產品規範的統一。但是說到規範的統一性，就不僅僅是頁面級別，可能是更高的層級的統一性。比如下圖所示，互動稿的命名、分頁的規範。

2. 易讀性

如何提高互動輸出的易讀性？這個問題見仁見智，從筆者本身角度出發，個人認為提高易讀性最關鍵的就是：流程清晰，描述簡練。能用簡短步驟描述清楚的，就不用繁瑣的步驟。同時流程應儘量簡化，但是流程簡化是建立在高效互動的基礎上，故而互動設計能力還是關鍵；其次則是描述（互動說明），看過許多互動設計師、初級PM在寫頁面的說明時，長篇大論、文字繁瑣至極，瞬間就會產生一種不想讀下去的感覺。

你要想到：寫文字互動說明的目的是爲了補充原型圖中沒有提到的點，從而方便開發、上下游同步頁面資訊。所以在保證功能、流程完整度的前提下，儘量描述簡練，是提高效率的好方式。

3. 業務邏輯 & 功能範圍內的創新

老生常談的話題。在基礎方法論、行業經驗都兼具的一群人當中，靠什麼區別一個產品設計師是否優秀？沒錯，創新能力。業界大佬的例子數不勝數，我就不在這列舉了。就拿身邊的同學來說，他們的策劃案、作品、PRD也看過不少，普遍來說大家都差不太多。但是有BAT或國際TOP3網際網路公司實習的同學明顯會體現出差別：那可能是頁面中某一個控制元件用的十分巧妙、亦可能是某一個商業落地想法以前沒有聽說過，總之都會給人以一種眼前一亮的感覺。或許這就是創新能力吧。

下面連結為筆者日常工作中用到的PC端+移動端 Axure模板，有需要同學自取。

網盤連結： https://pan.baidu.com/s/1feVSzodx4DBy9HYht1UrLg 密碼：Y3rb

歡迎關注作者微信公眾號：「互動設計Roy」

「值得新手學習的互動設計方式」

• 《超全面！寫給零基礎新人的互動設計入門完全指南》
• 《專業科班的答案！一個完整的互動設計流程是怎樣的？》
• 《進階好文！讓人舒服的的互動設計稿該有的5個特點》

================ 明星欄目推薦 ================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的 知識樹專欄 。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手並製作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com