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

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

　　1. 原則

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

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

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

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

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

　　2. 輸出物基本類型

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

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

　　1)線框圖(Wireframe)

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

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

　　能界定頁面的大致結(jié)構(gòu)和布局

　　能清晰表達(dá)內(nèi)容信息的展示位置

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

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

　　圖2： 低保真線框圖

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

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

　　2)原型(Prototype)

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

　　二、高段位交互輸出物

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

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

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

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

　　圖4： A、B、C層級(jí)交互輸出物

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

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

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

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

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

　　2)按產(chǎn)品層級(jí)關(guān)系組織：適用整體平臺(tái)類項(xiàng)目，如我的阿里。

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

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

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

　　2. 元思考

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　頁面流程圖：

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

　　圖10：頁面流程圖例

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

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