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

　　一、交互輸出物價(jià)值與類型

　　1. 原則

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

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

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

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

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

　　2. 輸出物基本類型

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

然后讓我們?cè)敿?xì)談?wù)劸€框和原型各自的功能和用途。

1）線框（

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

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

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

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

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

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

圖2：低保真線框

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

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

　　2)原型(Prototype)

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

二，高段互動(dòng)輸出

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

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

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

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

圖4：A，B，C級(jí)交互式輸出

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

　　1. 層層遞進(jìn)的文檔邏輯

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

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

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

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

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

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

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

　　2. 元思考

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

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

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

3）在這個(gè)場(chǎng)景中將使用哪些功能？ （場(chǎng)景）

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

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

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

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

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

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

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

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

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

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

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

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

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

頁(yè)面流程圖：

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

圖10：頁(yè)面流程圖示例

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