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

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

　　1. 原則

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

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

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

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

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

　　2. 輸出物基本類型

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

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

　　1)線框圖(Wireframe)

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

　　線框圖需要達到以下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)用戶視覺流的規劃。比如一個頻道頁面，頁面的重點信息的傳達，用戶對于信息認知的過程。

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

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

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

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

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

　　圖9：搜索任務流程圖例

　　頁面流程圖：

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

　　圖10：頁面流程圖例

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

網頁設計

• 2020-11-09網站設計時需注意到的行業規范
• 2020-11-09品牌網站設計怎樣做更加高端？
• 2020-11-112020佛山響應式網站設計趨勢
• 2020-11-09網站設計中要注意的事項
• 2020-11-09佛山網頁設計-順德網站設計制作-佛山網絡推廣
• 2020-11-11網站設計需要注意什么問題
• 2020-11-11什么樣的網站設計報價是合理的
• 2020-11-11優秀的網站設計不容易 這幾點要滿足
• 2020-11-11四大要點判斷商業網站設計的好壞
• 2020-11-09在微軟官網看運用的心理學現象優化用戶體驗設計-佛山網站設計
• 2020-11-11無錫網站建設_佛山網站設計制作_順德網站優化SEO推廣
• 2020-11-09什么樣的網站頁面布局有利于提升用戶體驗-佛山網站設計