如何制作具有全局把控和細節(jié)專注的高段位交互輸出物是交互設(shè)計師一直需要淬煉的能力。今天阿里的同學(xué)把多年的經(jīng)驗寫出來，內(nèi)容超多，全是干貨，來收。

交互設(shè)計師在項目體驗設(shè)計過程中常常擔(dān)任著承上啟下的至關(guān)重要角色；在項目評審時，交互設(shè)計師總是一個滔滔不絕，富有邏輯性的表達角色。除了語言的表達外，交互輸出物文檔是設(shè)計師表達自己態(tài)度和思考最有力的語言，也是團隊評估資源的重要考量和項目沉淀的最佳途徑。

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

1. 原則

交互輸出物是設(shè)計師專業(yè)思考結(jié)果的載體。承載你的想法和方案，使之能有效地傳遞給合作伙伴，用于協(xié)同團隊工作。讓你的設(shè)計觀點可視化，減少溝通成本，易于項目追溯。交互輸出物的原則是在內(nèi)容和形式上，易于理解，利于協(xié)同。

1）易于理解：通過你的設(shè)計輸出文檔能有效清晰地傳遞出你的思考和方案想法是交互文檔的最重要的價值之一。交互設(shè)計師的輸出文檔，在文檔內(nèi)容的搭建和梳理，以及文檔表達的形式上，都保證讓團隊每個成員能快速理解你對于某個需求所做的判斷和設(shè)計解決方案，并能感同身受的領(lǐng)會其內(nèi)涵。

在某些大中型的項目中會經(jīng)常遇到，團隊成員對于項目概念和目標(biāo)的理解存在著偏差和不同。所以交互設(shè)計師不僅需要完成項目的設(shè)計方案，還需要將需求分析，項目目標(biāo)拆解等思考過程融入到自己的設(shè)計方案輸出中。設(shè)計輸出文檔需要能引領(lǐng)團隊成員對于項目的思考和想法的認(rèn)同，并確保設(shè)計方案能夠有效執(zhí)行，這對交互輸出物提出了更高的要求。

2）利于協(xié)同：當(dāng)你面對項目中參與合作的角色眾多，或者遇到需求變更頻繁時，交互設(shè)計輸出物需要做到設(shè)計師之間，或是上下游之間在內(nèi)容的填充和形式的把控上能保證一定的協(xié)同和基本的認(rèn)知，能快速地參與合作，保持統(tǒng)一風(fēng)格的輸出表達。（如圖1）

圖1： 交互設(shè)計師上下游合作角色

2. 輸出物基本類型

一旦踏入交互界，會有很多關(guān)于交互輸出物的專業(yè)名詞蹦出來，例如：線框圖，原型，高保真，低保真等等。很多新人常常會被這些名詞弄混淆。我覺得首先可以先簡單理解：線框圖和原型是在不同設(shè)計階段用到的兩種不同的表達手法。而越是接近最終產(chǎn)品的真實效果的輸出我們稱做高保真，反之我們稱做低保真。

那下面我們就詳細地說說線框圖和原型他們各自的特點和用途。

1）線框圖（Wireframe）

設(shè)計師或者需求方對于產(chǎn)品的一種快速的、靜態(tài)的、清晰的表達手段。用于項目前期的討論和溝通，給項目成員間或者和客戶溝通時提供一個大致的概念和討論方向，以便快速的理解和及時的提出自己的建議。

線框圖需要達到以下3個目標(biāo)：

1. 能界定頁面的大致結(jié)構(gòu)和布局
2. 能清晰表達內(nèi)容信息的展示位置
3. 能包含界面的主體交互元素

線框圖一般不會過多的要求細節(jié)和華麗度，在內(nèi)容的真實性上也不會有過高的要求，但必須能表達你的設(shè)計思考和方案。主要以黑灰線框和簡單的塊面及占位符來組成整個線框圖。（如圖2）

圖2： 低保真線框圖

線框圖輸出最方便的就是手繪。在一張紙上呈現(xiàn)簡易的界面布局和關(guān)鍵的注釋，在敏捷項目流程中運用的比較廣泛。通常在敏捷團隊中，用快速迭代的線框圖和團隊中大量的溝通和討論，產(chǎn)出項目關(guān)鍵的界面方案，視覺和前端開發(fā)即可開始下個階段的工作，交互設(shè)計師則繼續(xù)完善方案細節(jié)和狀態(tài)的補充。多種角色齊頭并進，這是敏捷設(shè)計相對傳統(tǒng)的瀑布式合作方式來說獨具特色的地方。

當(dāng)然畫線框圖的工具也很多，常用的有Balsamiq Mockups，Axure，PPT，Sketch等。每個工具都有各具特色，也各有利弊。不要刻意地糾結(jié)于形式和工具方法，能使用的習(xí)慣和滿足自己設(shè)計方案的表達即可。

2）原型（Prototype）

原型比線框圖更接近產(chǎn)品最終的形態(tài)，它用作對用戶進行可用性測試和項目的設(shè)計輸出。項目早期的原型測試能夠及時的發(fā)現(xiàn)問題和漏洞，節(jié)省后續(xù)的開發(fā)投入成本。原型是可交互的，并且盡可能接近最終的產(chǎn)品界面的高保真設(shè)計稿。也是我們本文常提及的大家普遍的交互輸出物。

二、高段位交互輸出物

交互輸出物是設(shè)計師對于產(chǎn)品或者需求的思考總結(jié)的一種表現(xiàn)形式。設(shè)計師將需求方提出的項目需求和已有的數(shù)據(jù)加以整理、分析，經(jīng)過發(fā)散的創(chuàng)造性思維創(chuàng)新和嚴(yán)謹(jǐn)?shù)倪壿嬚撟C后，得到了逐漸成熟的交互產(chǎn)物。這個思辨的過程貫穿于交互設(shè)計工作流程的每個環(huán)節(jié)。

有一些特別優(yōu)秀的產(chǎn)品經(jīng)理也能畫出個看似正統(tǒng)的交互稿，眼看就要直接進入視覺階段了。這也是有些視覺同學(xué)轉(zhuǎn)交互的時候，常常遇到的問題，交互稿不知如何表達、草草收場，落得產(chǎn)品經(jīng)理評價和我畫的也無差。這時就要看交互設(shè)計師如何用自己的交互輸出物說話。有追求的設(shè)計師會把自己的詳盡的思考和專業(yè)的原型打造成同視覺稿一樣精美的賞心悅目，甚至用工具詮釋更豐富的動效，將自己的輸出物提升至更高段位。有人會問，不就是個交互稿嗎？能高到哪去？

1688UED對于交互設(shè)計師的產(chǎn)出內(nèi)容范圍要求不僅僅停留在完整的交互方案上，還上升到設(shè)計師對項目前、中、后三個階段全程思考和創(chuàng)新的跟蹤和記錄（如下圖3）， 并且根據(jù)項目的重要程度（A+、A、B、C層級）來確定項目交互階段需要產(chǎn)出的內(nèi)容范圍。（如下圖4）

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

圖4： A、B、C層級交互輸出物

內(nèi)容要求一個設(shè)計師對于輸出物的層次把控和邏輯要求，能體現(xiàn)和大致還原出他的專業(yè)和深度。那普通的交互輸出物和專業(yè)的交互輸出區(qū)別在哪兒？我們就以下面幾個關(guān)鍵性內(nèi)容來做詳細解析：

1. 層層遞進的文檔邏輯

如果將交互輸出物看作是你在項目中階段性的輸出文章作品的話，其中的文檔邏輯就是你這篇文章的目錄。如何能讓人從閱讀目錄開始就能對你的設(shè)計推導(dǎo)過程和方案有初步的認(rèn)識和信任，如何組織輸出物里的內(nèi)容是其中的關(guān)鍵。

構(gòu)建交互輸出目錄，可以根據(jù)項目類型確定組織方式，初步確定架構(gòu)和頁面量多少。 常用的4種組織方式供你參考：（如圖5）

1）按修改版本組織：適用重點單頁面型項目，如網(wǎng)站首頁，行業(yè)頻道等。

2）按產(chǎn)品層級關(guān)系組織：適用整體平臺類項目，如我的阿里。

3）按操作流程組織，適用于業(yè)務(wù)流程型項目，如下單付款，會員開通等項目。

4）按參與人員組織：適用多個交互設(shè)計師共同完成的項目，如項目共建。

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

2. 元思考

在項目接手時，設(shè)計方案開始之間，設(shè)計師對于這個項目原始的需求分析，目標(biāo)用戶訴求的理解等思考發(fā)散的過程我們稱之為設(shè)計元思考。 也可以歸納為做設(shè)計方案前必須要搞明白的三個問題：

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

2）這個需求針對的用戶群是什么？（用戶）

3）什么場景下會使用到這個功能？（場景）

這個部分其實一直都在設(shè)計師的腦海中，只是有些同學(xué)覺得不必展示或者不會表達。1688UED團隊總結(jié)了崗位工作的思考過程和規(guī)律，并將其進行抽象化和體系化，輔之以相關(guān)的方法和原則，形成了“五導(dǎo)家”這一套think-flow方法論。（如圖6）

圖6：五導(dǎo)家步驟概要說明簡圖

支撐五導(dǎo)家推導(dǎo)過程的是大量的設(shè)計分析和數(shù)據(jù)梳理。我們會運用到競品分析，眼動測試，問卷調(diào)研數(shù)據(jù)分析等方法，讓我們在設(shè)計過程中更深入地探清用戶的痛點和訴求，讓我們能在更好地為用戶解決問題的過程中，明確設(shè)計在其中發(fā)力的關(guān)鍵點。我們將這部分思考的過程放進我們的交互輸出文檔中，讓我們的思考過程從神秘的黑盒變成理性透明的白盒，幫助別人信任我們的設(shè)計方案和推到結(jié)論，建立良好的合作關(guān)系。

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

在設(shè)計大部分的電子商務(wù)網(wǎng)站首頁、行業(yè)頻道或者網(wǎng)站搭建等類型的項目中，經(jīng)常會用到信息架構(gòu)規(guī)劃圖的設(shè)計思考表達方法，即用圖形化的方式來描述出產(chǎn)品清晰的信息構(gòu)架。（如圖7）每一次信息架構(gòu)的重組都是交互設(shè)計師一次鍛煉的好機會。信息架構(gòu)越龐雜，對交互設(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） 包含以下2個關(guān)鍵點： 1）界面的主體的布局和框架，比如搜索框位置，主體導(dǎo)航框架，產(chǎn)品坑位，頁面區(qū)塊劃分等。 2）用戶視覺流的規(guī)劃。比如一個頻道頁面，頁面的重點信息的傳達，用戶對于信息認(rèn)知的過程。

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

信息架構(gòu)規(guī)劃圖的描繪，能讓你在著眼于細節(jié)、局部的設(shè)計之前對整體產(chǎn)品節(jié)奏的把控，信息全局的分析，以及用戶傳遞的精準(zhǔn)都能胸有成竹。它就像在行兵打仗時，將軍臺前的軍事策略地圖，不僅能幫助設(shè)計師用更敏銳的眼睛觀察用戶使用情景和業(yè)務(wù)場景，以此做出更為準(zhǔn)確的設(shè)計策略和布局方案，還能使上下游的團隊成員一起快速決策與協(xié)同。

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

流程圖是將一些具有特定邏輯關(guān)系的步驟和過程，用圖形化的形式表達，讓其他人能快速理解。任務(wù)流程圖和頁面流程圖是兩種不同用途的表達過程和步驟的形式。

任務(wù)流程圖：常常以一個用戶角色完成項目中從開始到結(jié)束的所有任務(wù)的流程圖。其中包括各種用戶角色之間，用戶與產(chǎn)品界面之間，前端界面和后端數(shù)據(jù)之間在任務(wù)流程中的過程和關(guān)系的表達。任務(wù)流程圖能讓你的思維更清晰，讓你在設(shè)計過程中細致到每個細節(jié)中。（如圖9）

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

頁面流程圖：

這個項目或者產(chǎn)品中涉及到的頁面，以及頁面上下游之間的跳轉(zhuǎn)的關(guān)系和組織表達的方法。通過勾勒項目頁面流程圖，能更清晰的表達用戶在產(chǎn)品使用功能過程中在頁面間互通的交互關(guān)系，讓設(shè)計師對于產(chǎn)品整體的流暢性和統(tǒng)一性有更好的把控。（如圖10）

圖10：頁面流程圖例

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

【優(yōu)設(shè)最新職場好文人氣榜】

作者強調(diào)的是個人的氣質(zhì)與精神狀態(tài)喲！
《職場看顏值么？聊聊我跟設(shè)計師的那些事兒》

電話面試是一種怎樣的體驗？
《畢業(yè)季專題第二期！揭秘天貓交互設(shè)計師面試過程》

如何管理不同類型的設(shè)計師？
《總監(jiān)修煉之路！如何管理才氣型/實干型的設(shè)計師？》

原文地址：aliued

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量100萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com