引言 交互設計師作為近年興起的互聯網設計崗位之一，具有其崗位產生的背景的特殊性。從交互設計師崗位職能來講，它是產品與視覺、前端開發的橋樑，是產品研發線上的連接紐帶。由於交互設計師既不是需求的發起者，也不是完全算是需求的執行者，所以作為產品研發線的中間環節，交互輸出對
準確性、效率的不言而喻。類似可參考某些傳話類遊戲，中間傳遞的人的重要性也不言而喻。
1. 交互輸出內容
以目前主流市場來說，大家還都是用Axure來進行交互稿件的繪製和輸出，可見各大互聯網公司的UED團隊對Axure軟件的認可度、兼容性還是比較認可的。那麼，交互輸出應該規定一些什麼，輸出內容分成幾個大類，下面給大家詳細講述：
1.1 頁面元素
所謂頁面元素，就是規定頁面內應該存在什麼內容、應用什麼樣的控件等，以及規定這些存在內容的樣式。這些元素為頁面組成的根本，也是交互輸出最基礎的根基部分。下列為筆者隨便舉例：移動端二次確認對話框的頁面元素規定（由於方便顯示，沒有按照自身規範書寫）
1.2 用戶點擊事件流
其實“事件”是個計算機詞彙，你在輸入框中獲取焦點，就算是一個用戶事件；亦或是你點擊了某個鏈接，都屬於事件，存在於Log日誌中。那麼所謂的用戶點擊事件流，通俗說既是用戶使用產品時，與界面、服務器交互的過程。在此過程中，交互設計師需要規定用戶點擊後跳轉的頁面、界面對用戶的反饋，此過程是塑造用戶行為的關鍵環節。下列舉例為移動端二次確認對話框的用戶點擊事件流規定：
1.3 異常、邊界情況
異常情況和邊界情況其實可以分開來講。首先說異常情況，主要包含：服務器響應超時情況、服務器錯誤、網絡中斷、弱網狀態（主要存在Mobile端）等… 邊界情況的存在主要用於限定一些特殊情況，例如：
- 輸入用戶暱稱的Maxlength （字符限制）；
- 移動端的加載等待時間（一般15-20S），超出後顯示錯誤狀態。
下列舉例為移動端二次確認對話框的異常和邊界規定：
2. 交互稿輸出原則：
OK，在瞭解我個人輸入交互稿的內容習慣後，內容的基礎上，如何完成準確性高、高效、有利於工作協同的交互輸出？筆者個人在工作過程中，總結了以下幾點交互輸出的原則：
2.1 模擬真實+規範統一
儘可能對線上頁面的元素進行完整還原，目的是給讀交互稿的同事一種代入感。但是模擬真實並不是進行像素級別的還原，那是視覺設計做的工作。其實做到模擬真實有一個捷徑就是，建立自己產品的交互設計規範，這套交互設計規範庫可以從控件級到組件級再到頁面級。筆者注意到做到一般視覺、交互規範很難達到頁面級別，因為產品頁面模式多變。但是不同頁面最終會落到一種前段“容器”模板中，這個容器可以是以列表、表單為基礎的，也可以是產品的一個詳情頁模板。總之，每次交互輸出需要利用這些規範模板時，都可以複用，達到模擬真實的效果。
利用頁面級的規範模板可以促成產品規範的統一。但是說到規範的統一性，就不僅僅是頁面級別，可能是更高的層級的統一性。比如下圖所示，交互稿的命名、分頁的規範。
![如何輸出高質量的交互稿？]()
2.2 易讀性
2.2 易讀性如何提高交互輸出的易讀性？這個問題見仁見智，從筆者本身角度出發，個人認為提高易讀性最關鍵的就是：流程清晰，描述簡練。能用簡短步驟描述清楚的，就不用繁瑣的步驟。同時流程應儘量簡化，但是流程簡化是建立在高效交互的基礎上，故而交互設計能力還是關鍵；其次則是描述（交互說明），看過許多交互設計師、初級PM在寫頁面的說明時，長篇大論、文字繁瑣至極，瞬間就會產生一種不想讀下去的感覺。。。
你要想到：寫文字交互說明的目的是為了補充原型圖中沒有提到的點，從而方便開發、上下游同步頁面信息。所以在保證功能、流程完整度的前提下，儘量描述簡練，是提高效率的好方式。
2.3 業務邏輯 & 功能範圍內的創新
老生常談的話題。在基礎方法論、行業經驗都兼具的一群人當中，靠什麼區別一個產品設計師是否優秀？沒錯，創新能力。業界大佬的例子數不勝數，我就不在這列舉了。就拿身邊的同學來說，他們的策劃案、作品、PRD也看過不少，普遍來說大家都差不太多。但是有BAT或國際TOP3互聯網公司實習的同學明顯會體現出差別：那可能是頁面中某一個控件用的十分巧妙、亦可能是某一個商業落地想法以前沒有聽說過，總之都會給人以一種眼前一亮的感覺。或許這就是創新能力吧。
最後：寫的零零散散，都是工作之餘的休息時間拼湊出來的，大家湊合看吧~（反正看到這你都看完啦）
*下面鏈接為筆者日常工作中用到的PC端+移動端 Axure模板，有需要同學自取~
鏈接: https://pan.baidu.com/s/1ESw5Ibt0oMz7b0m1VIvBwg 密碼: yxxq
OK，就這樣，希望大家多多點贊、收藏、分享，祝各位同行能拿下滿意Offer~下期產品設計文章再見~
題圖來自 Pexels，基於 CC0 協議
閱讀更多 人人都是產品經理 的文章
