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

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

　　1. 原則

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

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

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

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

圖1：交互設(shè)計器的上游和下游協(xié)作角色

　　2. 輸出物基本類型

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

然后讓我們詳細談?wù)劸€框和原型各自的功能和用途。

1）線框（

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

線框需要實現(xiàn)以下三個目標(biāo)：

可以定義頁面的一般結(jié)構(gòu)和布局

明確表達內(nèi)容信息的展示位置

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

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

圖2：低保真線框

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

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

　　2)原型(Prototype)

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

二，高段互動輸出

交互式輸出表示設(shè)計者對產(chǎn)品或要求的總結(jié)。設(shè)計師對需求方提出的項目需求和現(xiàn)有數(shù)據(jù)進行分類和分析，經(jīng)過不同的創(chuàng)造性思維創(chuàng)新和嚴(yán)謹?shù)倪壿嬚撟C，使交互產(chǎn)品逐漸成熟。這個推測過程貫穿交互設(shè)計工作流程的每個步驟。

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

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

圖3：交互式輸出內(nèi)容

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

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

　　1. 層層遞進的文檔邏輯

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

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

1）由修改版組織：適用于關(guān)鍵的單頁項目，如網(wǎng)站頁面，行業(yè)渠道等。

2）按產(chǎn)品層次結(jié)構(gòu)組織：適用于整體平臺項目，如我的阿里。

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

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

圖5：輸出文檔結(jié)構(gòu)的組織方式

　　2. 元思考

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

1）你為什么要這樣做？ （目標(biāo)）

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

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

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

圖6：五個領(lǐng)導(dǎo)者步驟摘要的示意圖

支持五個導(dǎo)師扣除過程是很多設(shè)計分析和數(shù)據(jù)梳理。我們將采用競爭產(chǎn)品分析，眼球運動測試，問卷調(diào)查數(shù)據(jù)分析等方法，使我們能夠更深入地了解用戶在設(shè)計過程中的痛點和訴求，從而更好地解決問題。用戶。明確設(shè)計強制要點。我們將這部分思維過程放入我們的交互式輸出文檔中，讓我們的思維過程從神秘的黑盒子變?yōu)槔硇酝该鞯陌缀凶?，幫助他人信任我們的設(shè)計并推動結(jié)論，并建立良好的合作。關(guān)系。

　　3. 信息架構(gòu)規(guī)劃圖

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

圖7：信息架構(gòu)圖例

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

圖8：圖1688設(shè)計信息架構(gòu)規(guī)劃圖例

信息架構(gòu)規(guī)劃圖的描述允許您在關(guān)注細節(jié)和部分設(shè)計之前控制整體產(chǎn)品節(jié)奏，信息的整體分析以及用戶傳輸?shù)臏?zhǔn)確性。當(dāng)士兵們在戰(zhàn)斗時，它就像是將軍面前的軍事戰(zhàn)略地圖。它不僅可以幫助設(shè)計人員更敏銳地觀察用戶使用場景和業(yè)務(wù)場景，還可以制定更準(zhǔn)確的設(shè)計策略和布局計劃。使上游和下游的團隊成員能夠一起快速做出決策和協(xié)同作用。

　　4. 任務(wù)流程圖和頁面流程圖

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

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

圖9：搜索任務(wù)流程圖示例

頁面流程圖：

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

圖10：頁面流程圖示例

您可以根據(jù)您負責(zé)的項目類型的不同需求選擇使用任務(wù)流程圖和頁面流程圖。有時，清晰的流程圖可以幫助您的團隊成員快速了解項目，還可以幫助您在設(shè)計過程中發(fā)現(xiàn)用戶痛點和創(chuàng)新的一些細節(jié)。