交互設計師經常在項目體驗設計過程中發揮重要作用;在項目審查中，交互設計師始終是一個無窮無盡的邏輯表達角色。除了語言的表達外，交互式輸出文檔還是設計師表達態度和思維的有力語言。這也是團隊評估資源和項目降水的重要途徑。

　　一、交互輸出物價值與類型

　　1. 原則

交互式輸出是設計師思考結果的載體。托管您的想法和解決方案，以便將它們有效地交付給合作伙伴，以進行協作團隊工作。可視化您的設計理念，降低通信成本，并使項目可追溯性變得容易。交互式輸出的原理易于理解，在內容和形式上具有協同作用。

1）易于理解：通過您的設計輸出文檔可以有效地傳達您的思想和解決方案的想法是交互式文檔的重要價值之一。交互設計者的輸出文檔，在文檔內容的構建和梳理以及文檔表達的形式中，確保團隊的每個成員能夠快速理解您的判斷并針對特定需求設計解決方案，并且可以感受到相同的效果。了解它的內涵。

在一些大中型項目中經常遇到這種情況，團隊成員對項目概念和目標有不同的理解。因此，交互設計者不僅需要完成項目的設計，還需要將需求分析和項目目標反匯編等思維過程集成到他的設計輸出中。設計輸出文檔需要能夠引導團隊成員識別項目的思想和想法，并確保設計有效執行，這對交互式輸出提出了更高的要求。

2）有利于協同作用：當您在項目中面臨大量角色，或者需求經常發生變化時，需要在設計者之間或上游與下游之間填充和形成交互設計輸出。控制可以保證一定程度的協同作用和基本認知，可以快速參與合作，保持統一的輸出表達風格。 （圖1）

圖1：交互設計器的上游和下游協作角色

　　2. 輸出物基本類型

一旦進入交互世界，就會有很多關于交互式輸出的名詞，例如線框，原型，高保真度，低保真等等。許多新人經常被這些名詞搞糊涂。我認為首先容易理解：線框和原型是在不同設計階段使用的兩種不同表達。輸出越接近最終產品的真實效果，我們稱之為高保真度，否則我們稱之為低保真度。

然后讓我們詳細談談線框和原型各自的功能和用途。

1）線框（

設計師或需求者對產品的快速，靜態和清晰的表達。用于項目初期的討論和溝通，為項目成員或與客戶溝通提供一般概念和討論方向，以便快速了解并及時提出自己的建議。

線框需要實現以下三個目標：

可以定義頁面的一般結構和布局

明確表達內容信息的展示位置

可以包含接口的主體交互元素

線框通常不需要太多的細節和亮度，并且對內容的真實性沒有過多的要求，但它必須能夠表達您的設計思想和解決方案。整個線框由黑色和灰色線框以及簡單的塊面和占位符組成。 （圖2）

圖2：低保真線框

線框輸出的便利性是手繪的。在一張紙上呈現簡單的界面布局和關鍵注釋廣泛用于敏捷項目過程。通常在敏捷團隊中，通過快速迭代線框和團隊中的大量溝通和討論，項目的關鍵接口解決方案，可視化和前端開發可以開始下一階段的工作，并且交互設計師繼續改進細節該項目。并補充國家。各種角色齊頭并進，與傳統的瀑布合作相比，這是敏捷設計的獨特功能。

當然，有許多繪制線框的工具。常用的有Balsamiq Mockups，Axure，PPT，Sketch等。每種工具都有自己的特點，各有利弊。不要刻意糾纏于形式和工具方法，可以使用的習慣以及滿足您設計的表達方式。

　　2)原型(Prototype)

原型比線框更接近產品的末端，并且它被用作可用性測試和項目的設計輸出。項目的早期原型測試可以及時發現問題和漏洞，節省后續開發投資成本。原型是交互式的，盡可能接近最終產品界面的高保真設計。它也是我們在本文中經常提到的常見交互輸出。

二，高段互動輸出

交互式輸出表示設計者對產品或要求的總結。設計師對需求方提出的項目需求和現有數據進行分類和分析，經過不同的創造性思維創新和嚴謹的邏輯論證，使交互產品逐漸成熟。這個推測過程貫穿交互設計工作流程的每個步驟。

有一些非常優秀的產品經理也可以繪制一個看似正統的交互式手稿，直接進入視覺階段。這也是一些視覺同學在彼此互動時經常遇到的問題。互動手稿不知道如何表達，最終匆忙。產品經理評估它和我的繪畫是不錯的。是時候看看交互設計師如何用他自己的交互輸出說話了。追求的設計師將使他們的詳細思考和原型像視覺草稿一樣美觀和令人愉悅，甚至使用工具來解釋更多動態效果并將其輸出提升到更高的位置。有些人可能會問，這不是一個互動手稿嗎？哪里可以？

交互設計師的輸出內容范圍的1688UED要求不僅停留在完整的交互方案上，而且還提升到設計師在項目之前，期間和之后的三個階段中對整個思維，創新和創新過程的跟蹤和記錄（見下圖3）。并根據項目（A +，A，B，C級）的重要性來確定項目交互階段需要生成的內容范圍。 （圖4）

圖3：交互式輸出內容

圖4：A，B，C級交互式輸出

內容要求設計師控制和邏輯地要求輸出水平，這可以反映并大致恢復他的深度。普通交互輸出和交互輸出之間的區別在哪里？我們將使用以下關鍵內容進行詳細分析：

　　1. 層層遞進的文檔邏輯

如果您將交互式輸出視為項目中文章的逐步輸出，那么文檔邏輯就是您文章的目錄。如何讓人們從閱讀目錄開始就對您的設計派生過程和程序有一個初步的了解和信任。如何組織輸出中的內容是關鍵。

構建交互式輸出目錄，可以根據項目類型確定組織，并初步確定結構和頁面數量。四種常用的組織方法供您參考:(圖5）

1）由修改版組織：適用于關鍵的單頁項目，如網站頁面，行業渠道等。

2）按產品層次結構組織：適用于整體平臺項目，如我的阿里。

3）根據運作流程組織，適用于單一支付，會員開放等項目的業務流程類項目。

4）根據參與者組織：由多個交互設計師共同完成的項目，如項目建設。

圖5：輸出文檔結構的組織方式

　　2. 元思考

當項目接管時，在設計計劃，設計者對項目的原始需求分析，對目標用戶的吸引力的理解等方面，思考分歧的過程稱為設計元思維。在設計解決方案之前，還可以將其歸納為必須理解的三個問題：

1）你為什么要這樣做？ （目標）

2）此要求的用戶群是什么？ （用戶）

3）在這個場景中將使用哪些功能？ （場景）

這部分一直是設計師的想法，但有些學生認為他們不必表現或表達。 1688UED團隊總結了后期工作的思維過程和規則，對其進行了抽象和系統化，并輔以相關的方法和原則，形成了“五指導”的思維流方法論。 （圖6）

圖6：五個領導者步驟摘要的示意圖

支持五個導師扣除過程是很多設計分析和數據梳理。我們將采用競爭產品分析，眼球運動測試，問卷調查數據分析等方法，使我們能夠更深入地了解用戶在設計過程中的痛點和訴求，從而更好地解決問題。用戶。明確設計強制要點。我們將這部分思維過程放入我們的交互式輸出文檔中，讓我們的思維過程從神秘的黑盒子變為理性透明的白盒子，幫助他人信任我們的設計并推動結論，并建立良好的合作。關系。

　　3. 信息架構規劃圖

在大多數電子商務網站頁面，行業渠道或網站建設項目的設計中，經常使用信息架構規劃圖的設計思維表達方法，即以圖形方式清楚地描述產品信息。 （圖7）信息架構的每次重組都是交互設計師鍛煉一次的好機會。信息架構越復雜，交互設計師的業務理解，目標用戶場景設置和產品整體控制的要求就越高。

圖7：信息架構圖例

在對項目的全局信息架構有一定深入了解后，我們將根據信息的優先級，用戶的關鍵路徑和業務邏輯信息設計頁面信息的架構規劃（圖8）。包括以下兩個關鍵點：界面主體的布局和框架，如搜索框位置，主導航框架，產品坑，頁面塊劃分等。 2）用戶視覺流程的規劃。例如，頻道頁面，頁面的密鑰信息的傳輸，以及用戶對信息的認知的過程。

圖8：圖1688設計信息架構規劃圖例

信息架構規劃圖的描述允許您在關注細節和部分設計之前控制整體產品節奏，信息的整體分析以及用戶傳輸的準確性。當士兵們在戰斗時，它就像是將軍面前的軍事戰略地圖。它不僅可以幫助設計人員更敏銳地觀察用戶使用場景和業務場景，還可以制定更準確的設計策略和布局計劃。使上游和下游的團隊成員能夠一起快速做出決策和協同作用。

　　4. 任務流程圖和頁面流程圖

流程圖是以圖形形式表達具有特定邏輯關系的一些步驟和過程，以便其他人可以快速理解。任務流程圖和頁面流程圖是用于兩個不同目的的表達過程和步驟的形式。

任務流程圖：通常在單個用戶角色中從頭到尾完成項目中所有任務的流程圖。這包括各個用戶角色之間，用戶和產品界面之間，前端界面和任務流中后端數據之間的過程和關系的表達。任務流程圖可以使您的思路更清晰，并讓您詳細說明設計過程中的每個細節。 （圖9）

圖9：搜索任務流程圖示例

頁面流程圖：

此項目或產品中涉及的頁面，以及頁面上游和下游之間跳轉與組織表達方式之間的關系。通過勾勒項目頁面的流程圖，可以更清晰地表達用戶在使用產品過程中的交互關系，從而使設計人員能夠更好地控制整個產品的流暢性和一致性。 （圖10）

圖10：頁面流程圖示例

您可以根據您負責的項目類型的不同需求選擇使用任務流程圖和頁面流程圖。有時，清晰的流程圖可以幫助您的團隊成員快速了解項目，還可以幫助您在設計過程中發現用戶痛點和創新的一些細節。