引言 交互設(shè)計師作為近年興起的互聯(lián)網(wǎng)設(shè)計崗位之一，具有其崗位產(chǎn)生的背景的特殊性。從交互設(shè)計師崗位職能來講，它是產(chǎn)品與視覺、前端開發(fā)的橋梁，是產(chǎn)品研發(fā)線上的連接紐帶。由于交互設(shè)計師既不是需求的發(fā)起者，也不是完全算是需求的執(zhí)行者，所以作為產(chǎn)品研發(fā)線的中間環(huán)節(jié)，交互輸出對準(zhǔn)確性、效率的不言而喻。類似可參考某些傳話類游戲，中間傳遞的人的重要性也不言而喻。

1. 交互輸出內(nèi)容

以目前主流市場來說，大家還都是用Axure來進行交互稿件的繪制和輸出，可見各大互聯(lián)網(wǎng)公司的UED團隊對Axure軟件的認可度、兼容性還是比較認可的。那么，交互輸出應(yīng)該規(guī)定一些什么，輸出內(nèi)容分成幾個大類，下面給大家詳細講述：

1.1 頁面元素

所謂頁面元素，就是規(guī)定頁面內(nèi)應(yīng)該存在什么內(nèi)容、應(yīng)用什么樣的控件等，以及規(guī)定這些存在內(nèi)容的樣式。這些元素為頁面組成的根本，也是交互輸出最基礎(chǔ)的根基部分。下列為筆者隨便舉例：移動端二次確認對話框的頁面元素規(guī)定（由于方便顯示，沒有按照自身規(guī)范書寫）

1.2 用戶點擊事件流

其實“事件”是個計算機詞匯，你在輸入框中獲取焦點，就算是一個用戶事件；亦或是你點擊了某個鏈接，都屬于事件，存在于Log日志中。那么所謂的用戶點擊事件流，通俗說既是用戶使用產(chǎn)品時，與界面、服務(wù)器交互的過程。在此過程中，交互設(shè)計師需要規(guī)定用戶點擊后跳轉(zhuǎn)的頁面、界面對用戶的反饋，此過程是塑造用戶行為的關(guān)鍵環(huán)節(jié)。下列舉例為移動端二次確認對話框的用戶點擊事件流規(guī)定：

1.3 異常、邊界情況

異常情況和邊界情況其實可以分開來講。首先說異常情況，主要包含：服務(wù)器響應(yīng)超時情況、服務(wù)器錯誤、網(wǎng)絡(luò)中斷、弱網(wǎng)狀態(tài)（主要存在Mobile端）等… 邊界情況的存在主要用于限定一些特殊情況，例如：

1. 輸入用戶昵稱的Maxlength （字符限制）；
2. 移動端的加載等待時間（一般15-20S），超出后顯示錯誤狀態(tài)。

下列舉例為移動端二次確認對話框的異常和邊界規(guī)定：

2. 交互稿輸出原則：

OK，在了解我個人輸入交互稿的內(nèi)容習(xí)慣后，內(nèi)容的基礎(chǔ)上，如何完成準(zhǔn)確性高、高效、有利于工作協(xié)同的交互輸出？筆者個人在工作過程中，總結(jié)了以下幾點交互輸出的原則：

2.1 模擬真實+規(guī)范統(tǒng)一

盡可能對線上頁面的元素進行完整還原，目的是給讀交互稿的同事一種代入感。但是模擬真實并不是進行像素級別的還原，那是視覺設(shè)計做的工作。其實做到模擬真實有一個捷徑就是，建立自己產(chǎn)品的交互設(shè)計規(guī)范，這套交互設(shè)計規(guī)范庫可以從控件級到組件級再到頁面級。筆者注意到做到一般視覺、交互規(guī)范很難達到頁面級別，因為產(chǎn)品頁面模式多變。但是不同頁面最終會落到一種前段“容器”模板中，這個容器可以是以列表、表單為基礎(chǔ)的，也可以是產(chǎn)品的一個詳情頁模板。總之，每次交互輸出需要利用這些規(guī)范模板時，都可以復(fù)用，達到模擬真實的效果。

利用頁面級的規(guī)范模板可以促成產(chǎn)品規(guī)范的統(tǒng)一。但是說到規(guī)范的統(tǒng)一性，就不僅僅是頁面級別，可能是更高的層級的統(tǒng)一性。比如下圖所示，交互稿的命名、分頁的規(guī)范。

2.2 易讀性

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

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

2.3 業(yè)務(wù)邏輯 & 功能范圍內(nèi)的創(chuàng)新

老生常談的話題。在基礎(chǔ)方法論、行業(yè)經(jīng)驗都兼具的一群人當(dāng)中，靠什么區(qū)別一個產(chǎn)品設(shè)計師是否優(yōu)秀？沒錯，創(chuàng)新能力。業(yè)界大佬的例子數(shù)不勝數(shù)，我就不在這列舉了。就拿身邊的同學(xué)來說，他們的策劃案、作品、PRD也看過不少，普遍來說大家都差不太多。但是有BAT或國際TOP3互聯(lián)網(wǎng)公司實習(xí)的同學(xué)明顯會體現(xiàn)出差別：那可能是頁面中某一個控件用的十分巧妙、亦可能是某一個商業(yè)落地想法以前沒有聽說過，總之都會給人以一種眼前一亮的感覺。或許這就是創(chuàng)新能力吧。

最后：寫的零零散散，都是工作之余的休息時間拼湊出來的，大家湊合看吧~（反正看到這你都看完啦）

*下面鏈接為筆者日常工作中用到的PC端+移動端 Axure模板，有需要同學(xué)自取~

鏈接: https://pan.baidu.com/s/1ESw5Ibt0oMz7b0m1VIvBwg 密碼: yxxq

OK，就這樣，希望大家多多點贊、收藏、分享，祝各位同行能拿下滿意Offer~下期產(chǎn)品設(shè)計文章再見~

作者：Roy_ ，公眾號：交互設(shè)計Roy

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

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