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

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

　　1. 原則

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

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

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

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

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

　　2. 輸出物基本類(lèi)型

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

　　那下面我們就詳細地說(shuō)說(shuō)線(xiàn)框圖和原型他們各自的特點(diǎn)和用途。

　　1)線(xiàn)框圖(Wireframe)

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

　　線(xiàn)框圖需要達到以下3個(gè)目標：

　　能界定頁(yè)面的大致結構和布局

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

　　能包含界面的主體交互元素

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

　　圖2： 低保真線(xiàn)框圖

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

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

　　2)原型(Prototype)

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

　　二、高段位交互輸出物

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

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

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

　　圖3： 交互輸出物內容

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

　　內容要求一個(gè)設計師對于輸出物的層次把控和邏輯要求，能體現和大致還原出他的和深度。那普通的交互輸出物和的交互輸出區別在哪兒?我們就以下面幾個(gè)關(guān)鍵性?xún)热輥?lái)做詳細解析：

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

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

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

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

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

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

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

　　圖5： 輸出物文檔結構組織方式

　　2. 元思考

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

　　1)為什么要做這個(gè)?(目標)

　　2)這個(gè)需求針對的用戶(hù)群是什么?(用戶(hù))

　　3)什么場(chǎng)景下會(huì )使用到這個(gè)功能?(場(chǎng)景)

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

　　圖6：五導家步驟概要說(shuō)明簡(jiǎn)圖

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

　　3. 信息架構規劃圖

　　在設計大部分的電子商務(wù)網(wǎng)站頁(yè)、行業(yè)頻道或者網(wǎng)站搭建等類(lèi)型的項目中，經(jīng)常會(huì )用到信息架構規劃圖的設計思考表達方法，即用圖形化的方式來(lái)描述出產(chǎn)品清晰的信息構架。(如圖7)每一次信息架構的重組都是交互設計師一次鍛煉的好機會(huì )。信息架構越龐雜，對交互設計師的業(yè)務(wù)理解、目標用戶(hù)場(chǎng)景設定、產(chǎn)品的全局觀(guān)把控等能力的要求就越高。

　　圖7：信息架構圖例

　　對項目全局信息架構有一定深入的了解后，我們會(huì )根據信息的優(yōu)先層次，用戶(hù)的關(guān)鍵路徑，業(yè)務(wù)邏輯信息來(lái)設計我們頁(yè)面信息的架構規劃圖(如圖8) 包含以下2個(gè)關(guān)鍵點(diǎn)： 1)界面的主體的布局和框架，比如搜索框位置，主體導航框架，產(chǎn)品坑位，頁(yè)面區塊劃分等。 2)用戶(hù)視覺(jué)流的規劃。比如一個(gè)頻道頁(yè)面，頁(yè)面的重點(diǎn)信息的傳達，用戶(hù)對于信息認知的過(guò)程。

　　圖8：1688頁(yè)設計信息架構規劃圖例

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

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

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

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

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

　　頁(yè)面流程圖：

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

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

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

http://ezekroy.com/jianzhanzhishi/7694.html 阿里招聘設計師要求,BAT招聘設計師要求,深圳網(wǎng)站設計師怎么進(jìn)BAT