想進阿里？先來學習如何製作高段位的交互輸出物

如何製作具有全局把控和細節專註的高段位交互輸出物是交互設計師一直需要淬鍊的能力。今天阿里的同學把多年的經驗寫出來，內容超多，全是乾貨，來收。

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

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

1. 原則

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

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

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

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

圖1：交互設計師上下游合作角色

2. 輸出物基本類型

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

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

1）線框圖（Wireframe）

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

線框圖需要達到以下3個目標：

1. 能界定頁面的大致結構和布局

2. 能清晰表達內容信息的展示位置

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）用戶視覺流的規劃。比如一個頻道頁面，頁面的重點信息的傳達，用戶對於信息認知的過程。

資料由AAA教育整理

推薦閱讀：