互動設計師在專案體驗設計過程中常常擔任着承上啓下的至關重要角色; 在專案評審時，互動設計師總是一個滔滔不絕，富有邏輯性的表達角色。除了語言的表達外，互動輸出物文件是設計師表達自己態度和思考有力的語言，也是團隊評估資源的重要考量和專案沉澱的理想途徑。
一、互動輸出物價值與型別
1. 原則
互動輸出物是設計師思考結果的載體。承載您的想法和方案，使之能有效地傳遞給合作伙伴，用於協同團隊工作。讓您的設計觀點視覺化，減少溝通成本，易於專案追溯。互動輸出物的原則是在內容和形式上，易於理解，利於協同。
1) 易於理解：通過您的設計輸出文件能有效清晰地傳遞出您的思考和方案想法是互動文件的重要的價值之一。互動設計師的輸出文件，在文件內容的搭建和梳理，以及文件表達的形式上，都保證讓團隊每個成員能快速理解您對於某個需求所做的判斷和設計解決方案，並能感同身受的領會其內涵。
在某些大中型的專案中會經常遇到，團隊成員對於專案概念和目標的理解存在着偏差和不同。所以互動設計師不僅需要完成專案的設計方案，還需要將需求分析，專案目標拆解等思考過程融入到自己的設計方案輸出中。設計輸出文件需要能引領團隊成員對於專案的思考和想法的認同，並確保設計方案能夠有效執行，這對互動輸出物提出了更高的要求。
2) 利於協同：當您面對專案中參與合作的角色眾多，或者遇到需求變更頻繁時，互動設計輸出物需要做到設計師之間，或是上下游之間在內容的填充和形式的把控上能保證一定的協同和基本的認知，能快速地參與合作，保持統一風格的輸出表達。 (如圖 1)
圖 1： 互動設計師上下游合作角色
2. 輸出物基本型別
一旦踏入互動界，會有很多關於互動輸出物的名詞蹦出來，例如：線框圖，原型，高保真，低保真等等。很多新人常常會被這些名詞弄混淆。我覺得先可以先簡單理解：線框圖和原型是在不同設計階段用到的兩種不同的表達手法。而越是接近終產品的真實效果的輸出我們稱做高保真，反之我們稱做低保真。
那下面我們就詳細地説説線框圖和原型他們各自的特點和用途。
1) 線框圖 (Wireframe)
設計師或者需求方對於產品的一種快速的、靜態的、清晰的表達手段。用於專案前期的討論和溝通，給專案成員間或者和客户溝通時提供一個大致的概念和討論方向，以便快速的理解和及時的提出自己的建議。
線框圖需要達到以下 3 個目標：
能界定頁面的大致結構和佈局
能清晰表達內容資訊的展示位置
能包含介面的主體互動元素
線框圖一般不會過多的要求細節和華麗度，在內容的真實性上也不會有過高的要求，但必須能表達您的設計思考和方案。主要以黑灰線框和簡單的塊面及佔位符來組成整個線框圖。 (如圖 2)
圖 2： 低保真線框圖
線框圖輸出方便的就是手繪。在一張紙上呈現簡易的介面佈局和關鍵的註釋，在敏捷專案流程中運用的比較廣泛。通常在敏捷團隊中，用快速迭代的線框圖和團隊中大量的溝通和討論，產出專案關鍵的介面方案，視覺和前端開發即可開始下個階段的工作，互動設計師則繼續完善方案細節和狀態的補充。多種角色齊頭並進，這是敏捷設計相對傳統的瀑布式合作方式來説獨具特色的地方。
當然畫線框圖的工具也很多，常用的有 Balsamiq Mockups，Axure，PPT，Sketch 等。每個工具都有各具特色，也各有利弊。不要刻意地糾結於形式和工具方法，能使用的習慣和滿足自己設計方案的表達即可。
2) 原型 (Prototype)
原型比線框圖更接近產品終的形態，它用作對多用户進行可用性測試和專案的設計輸出。專案早期的原型測試能夠及時的發現問題和漏洞，節省後續的開發投入成本。原型是可互動的，並且儘可能接近終的產品介面的高保真設計稿。也是我們本文常提及的大家普遍的互動輸出物。
二、高段位互動輸出物
互動輸出物是設計師對於產品或者需求的思考總結的一種表現形式。設計師將需求方提出的專案需求和已有的資料加以整理、分析，經過發散的創造性思維創新和嚴謹的邏輯論證後，得到了逐漸成熟的互動產物。這個思辨的過程貫穿於互動設計工作流程的每個環節。
有一些特別優秀的產品經理也能畫出個看似正統的互動稿，眼看就要直接進入視覺階段了。這也是有些視覺同學轉互動的時候，常常遇到的問題，互動稿不知如何表達、草草收場，落得產品經理評價和我畫的也無差。這時就要看互動設計師如何用自己的互動輸出物説話。有追求的設計師會把自己的詳盡的思考和的原型打造成同視覺稿一樣精美的賞心悦目，甚至用工具詮釋更豐富的動效，將自己的輸出物提升至更高段位。有人會問，不就是個互動稿嗎? 能高到哪去?
1688UED 對於互動設計師的產出內容範圍要求不僅僅停留在完整的互動方案上，還上升到設計師對專案前、中、後三個階段全程思考和創新的跟蹤和記錄 (如下圖 3)， 並且根據專案的重要程度 (A+、 A 、 B 、 C 層級) 來確定專案互動階段需要產出的內容範圍。 (如下圖 4)
圖 3： 互動輸出物內容
圖 4： A 、 B 、 C 層級互動輸出物
內容要求一個設計師對於輸出物的層次把控和邏輯要求，能體現和大致還原出他的和深度。那普通的互動輸出物和的互動輸出區別在哪兒? 我們就以下面幾個關鍵性內容來做詳細解析：
1. 層層遞進的文件邏輯
如果將互動輸出物看作是您在專案中階段性的輸出文章作品的話，其中的文件邏輯就是您這篇文章的目錄。如何能讓人從閲讀目錄開始就能對您的設計推導過程和方案有初步的認識和信任，如何組織輸出物裏的內容是其中的關鍵。
構建互動輸出目錄，可以根據專案型別確定組織方式，初步確定架構和頁面量多少。 常用的 4 種組織方式供您參考：(如圖 5)
1) 按修改版本組織：適用重點單頁面型專案，如網站頁，行業頻道等。
2) 按產品層級關係組織：適用整體平台類專案，如我的阿里。
3) 按操作流程組織，適用於業務流程型專案，如下單付款，會員開通等專案。
4) 按參與人員組織：適用多個互動設計師共同完成的專案，如專案共建。
圖 5： 輸出物文件結構組織方式
2. 元思考
在專案接手時，設計方案開始之間，設計師對於這個專案原始的需求分析，目標多用户訴求的理解等思考發散的過程我們稱之為設計元思考。 也可以歸納為做設計方案前必須要搞明白的三個問題：
1) 為什麼要做這個?(目標)
2) 這個需求針對的多用户羣是什麼?(多用户)
3) 什麼場景下會使用到這個功能?(場景)
這個部分其實一直都在設計師的腦海中，只是有些同學覺得不必展示或者不會表達。 1688UED 團隊總結了崗位工作的思考過程和規律，並將其進行抽象化和體系化，輔之以相關的方法和原則，形成了 “五導家” 這一套 think-flow 方法論。 (如圖 6)
圖 6：五導家步驟概要説明簡圖
支撐五導家推導過程的是大量的設計分析和資料梳理。我們會運用到競品分析，眼動測試，問卷調研資料分析等方法，讓我們在設計過程中更深入地探清多用户的痛點和訴求，讓我們能在更好地為多用户解決問題的過程中，明確設計在其中發力的關鍵點。我們將這部分思考的過程放進我們的互動輸出文件中，讓我們的思考過程從神秘的黑盒變成理性透明的白盒，幫助別人信任我們的設計方案和推到結論，建立良好的合作關係。
3. 資訊架構規劃圖
在設計大部分的電子商務網站頁、行業頻道或者網站搭建等型別的專案中，經常會用到資訊架構規劃圖的設計思考表達方法，即用圖形化的方式來描述出產品清晰的資訊構架。 (如圖 7) 每一次資訊架構的重組都是互動設計師一次鍛鍊的好機會。資訊架構越龐雜，對互動設計師的業務理解、目標多用户場景設定、產品的全域性觀把控等能力的要求就越高。
圖 7：資訊架構圖例
對專案全域性資訊架構有一定深入的瞭解後，我們會根據資訊的優先層次，多用户的關鍵路徑，業務邏輯資訊來設計我們頁面資訊的架構規劃圖 (如圖 8) 包含以下 2 個關鍵點： 1) 介面的主體的佈局和框架，比如搜索框位置，主體導航框架，產品坑位，頁面區塊劃分等。 2) 多用户視覺流的規劃。比如一個頻道頁面，頁面的重點資訊的傳達，多用户對於資訊認知的過程。
圖 8：1688 頁設計資訊架構規劃圖例
資訊架構規劃圖的描繪，能讓您在着眼於細節、區域性的設計之前對整體產品節奏的把控，資訊全域性的分析，以及多用户傳遞的精準都能胸有成竹。它就像在行兵打仗時，將軍台前的軍事策略地圖，不僅能幫助設計師用更敏鋭的眼睛觀察多用户使用情景和業務場景，以此做出更為準確的設計策略和佈局方案，還能使上下游的團隊成員一起快速決策與協同。
4. 任務流程圖和頁面流程圖
流程圖是將一些具有特定邏輯關係的步驟和過程，用圖形化的形式表達，讓其他人能快速理解。任務流程圖和頁面流程圖是兩種不同用途的表達過程和步驟的形式。
任務流程圖：常常以一個多用户角色完成專案中從開始到結束的所有任務的流程圖。其中包括各種多用户角色之間，多用户與產品介面之間，前端介面和後端資料之間在任務流程中的過程和關係的表達。任務流程圖能讓您的思維更清晰，讓您在設計過程中細緻到每個細節中。 (如圖 9)
圖 9：搜索任務流程圖例
頁面流程圖：
這個專案或者產品中涉及到的頁面，以及頁面上下游之間的跳轉的關係和組織表達的方法。通過勾勒專案頁面流程圖，能更清晰的表達多用户在產品使用功能過程中在頁面間互通的互動關係，讓設計師對於產品整體的流暢性和統一性有更好的把控。 (如圖 10)
圖 10：頁面流程圖例
您可以根據自己所負責的專案型別的不同需求，來選擇任務流程圖和頁面流程圖的使用。有時候一張清晰的流程圖更能幫助您的團隊成員快速瞭解專案，也能幫助您在設計過程中發現多用户痛點以及一些細節的創新。