第一章交互設(shè)計(jì)開發(fā)流程與設(shè)計(jì)分析

交互設(shè)計(jì)概述認(rèn)識(shí)交互設(shè)計(jì)知識(shí)要點(diǎn)2、交互設(shè)計(jì)的流程4、產(chǎn)品交互原型的分類5、交互設(shè)計(jì)的常用軟件1、交互設(shè)計(jì)的基本概念3、開發(fā)人員的配置6、項(xiàng)目實(shí)施-交互設(shè)計(jì)案例分析交互設(shè)計(jì)的基本概念01

…………什么是交互設(shè)計(jì)交互設(shè)計(jì)交互設(shè)計(jì)（英文InteractionDesign,縮寫IXD)，是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域，它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達(dá)成某種目的。交互設(shè)計(jì)的目標(biāo)可以從“可用性”和”用戶體驗(yàn)“兩個(gè)層面上進(jìn)行分析，關(guān)注以人為本的用戶需求交互設(shè)計(jì)的流程重點(diǎn)掌握：√02網(wǎng)頁交互設(shè)計(jì)流程項(xiàng)目立項(xiàng)、產(chǎn)品分析、交互原型、界面設(shè)計(jì)、前端開發(fā)、后臺(tái)開發(fā)、項(xiàng)目測試、項(xiàng)目上線項(xiàng)目立項(xiàng)產(chǎn)品分析交互原型界面設(shè)計(jì)前端開發(fā)后臺(tái)開發(fā)項(xiàng)目測試項(xiàng)目上線開發(fā)人員的配置03重點(diǎn)掌握：√開發(fā)人員的配置開發(fā)一款Web端或移動(dòng)端交互設(shè)計(jì)產(chǎn)品，通常是需要一個(gè)團(tuán)隊(duì)的成員來共同來完成，團(tuán)隊(duì)中各成員分工明確，協(xié)同處理，才能讓產(chǎn)品更完善，更符合用戶的預(yù)期，人員配置一般包括：產(chǎn)品經(jīng)理、UI設(shè)計(jì)師、前端開發(fā)工程師、后臺(tái)程序開發(fā)人員以及產(chǎn)品測試人員等。人員配置另外，當(dāng)產(chǎn)品上線后，經(jīng)過多個(gè)版本的迭代，用戶數(shù)量會(huì)越來越多，這時(shí)就需要大數(shù)據(jù)工程師；如果需要將產(chǎn)品的代碼部署到一個(gè)服務(wù)器上，那么則需要運(yùn)維工程師，日常的維護(hù)都是由運(yùn)維工程師來負(fù)責(zé)；如果涉及到推廣還需要有運(yùn)營、市場營銷、售前/售后工程師等。UI設(shè)計(jì)師前端工程師后臺(tái)程序開發(fā)產(chǎn)品經(jīng)理測試人員其他產(chǎn)品交互原型的分類04重點(diǎn)掌握：√產(chǎn)品交互原型的分類草圖草圖通常用于產(chǎn)品早期的概念階段。在項(xiàng)目立項(xiàng)的早期，對于產(chǎn)品的功能及業(yè)務(wù)場景都處于規(guī)劃階段，沒有明確成熟的產(chǎn)品方案，團(tuán)隊(duì)成員在項(xiàng)目規(guī)劃，進(jìn)行頭腦風(fēng)暴的會(huì)議時(shí)我們需要能夠快速呈現(xiàn)產(chǎn)品雛形的原型，且便于及時(shí)修改產(chǎn)品交互原型的分類低保真原型當(dāng)我們明確了產(chǎn)品的業(yè)務(wù)需求及使用場景以后，產(chǎn)品經(jīng)理和交互設(shè)計(jì)師們可以使用低保真原型來快速設(shè)計(jì)產(chǎn)品的概貌。產(chǎn)品經(jīng)理和交互設(shè)計(jì)師們通過項(xiàng)目早期階段明確了產(chǎn)品的功能需求及業(yè)務(wù)范圍，根據(jù)業(yè)務(wù)會(huì)議上確定的產(chǎn)品方案，首先需要梳理清楚產(chǎn)品的功能結(jié)構(gòu)和信息結(jié)構(gòu)，根據(jù)業(yè)務(wù)需求推導(dǎo)出詳細(xì)的功能點(diǎn)。工作產(chǎn)品的戰(zhàn)略目標(biāo)、需求范圍、功能結(jié)構(gòu)都清楚以后，就可以開始正式繪制線框圖了，線框圖又稱為低保真原型產(chǎn)品交互原型的分類高保真原型高保真原型常用于向高層領(lǐng)導(dǎo)進(jìn)行產(chǎn)品演示或者向投資人演示產(chǎn)品概念，以尋求項(xiàng)目融資。高保真原型又可以成為產(chǎn)品的Demo，除了沒有真實(shí)的后臺(tái)數(shù)據(jù)進(jìn)行支撐外，幾乎可以模擬前端界面的所有功能，完全是一個(gè)高度仿真產(chǎn)品，對于一些非專業(yè)的高層領(lǐng)導(dǎo)、老板及投資人，他們希望看到的是一個(gè)無線接近線上產(chǎn)品的Demo，能夠盡可能詳細(xì)的了解產(chǎn)品的功能及業(yè)務(wù)需求，從視覺顯示以及交互動(dòng)作上都和真實(shí)產(chǎn)品大致相同交互設(shè)計(jì)常用軟件05重點(diǎn)掌握：√交互設(shè)計(jì)常用軟件

VisioVisio是Office軟件系列中的負(fù)責(zé)繪制流程圖和示意圖的軟件。Visio是一款便于IT人員和商務(wù)人員就復(fù)雜信息、系統(tǒng)和流程進(jìn)行可視化處理、分析和交流的軟件。使用具有專業(yè)外觀的Visio圖表，可以促進(jìn)對系統(tǒng)和流程的了解，深入了解復(fù)雜信息并利用這些知識(shí)做出更好的業(yè)務(wù)決策。

TeambitionTeambition團(tuán)隊(duì)協(xié)作軟件具有無紙化、移動(dòng)辦公、及時(shí)溝通和工作標(biāo)準(zhǔn)化等特點(diǎn)，團(tuán)隊(duì)的領(lǐng)導(dǎo)人員使用該軟件可以保證自己的團(tuán)隊(duì)做到，目標(biāo)清晰、分工明確、協(xié)同高效、獎(jiǎng)罰分明。Teambition在管理方面可以實(shí)現(xiàn)跨項(xiàng)目、跨部門來協(xié)調(diào)工作。交互設(shè)計(jì)常用軟件

墨刀墨刀是一款在線原型設(shè)計(jì)與協(xié)同工具，用戶群體包括：產(chǎn)品經(jīng)理、設(shè)計(jì)、研發(fā)、運(yùn)營銷售、創(chuàng)業(yè)者等，能夠搭建產(chǎn)品原型，演示項(xiàng)目效果。墨刀同時(shí)也是協(xié)作平臺(tái)，項(xiàng)目成員可以協(xié)作編輯、審閱，還可以展示產(chǎn)品想法、向客戶進(jìn)行Demo展示或是在團(tuán)隊(duì)內(nèi)部協(xié)作溝通進(jìn)行項(xiàng)目管理等操作。

AxureRPAxureRP能幫助設(shè)計(jì)者快速創(chuàng)建基于網(wǎng)站架構(gòu)圖的帶注釋頁面示意圖、操作流程圖以及交互設(shè)計(jì)原型，并可自動(dòng)生成用于演示的網(wǎng)頁文件和規(guī)格文件，以提供給用戶演示或交互設(shè)計(jì)開發(fā)，并具有新的硬件加速渲染引擎，旨在加快保存和加載的文件結(jié)構(gòu)，以及用于平滑縮放和更快編輯的流線型畫布。交互設(shè)計(jì)常用軟件

AdobeXDAdobeXD主要用于設(shè)計(jì)UI頁面并為其添加簡單的交互效果。它能夠?qū)崿F(xiàn)設(shè)計(jì)頁面到原型頁面的轉(zhuǎn)換，并將文檔共享給項(xiàng)目團(tuán)隊(duì)的其他人員。AdobeXD已實(shí)現(xiàn)與Photoshop、Illustrator和AfterEffects的良好集成。這樣就可以在這些應(yīng)用程序中進(jìn)行設(shè)計(jì)，再將這些資源導(dǎo)入AdobeXD中，然后使用AdobeXD創(chuàng)建和共享原型。AdobeXD支持SVG文件和位圖文件，且不會(huì)降低保真度。項(xiàng)目實(shí)施-交互設(shè)計(jì)案例分析06項(xiàng)目實(shí)施-交互設(shè)計(jì)案例分析案例分析我們設(shè)計(jì)一個(gè)高保真交互產(chǎn)品之前，先了解幾個(gè)概念：①產(chǎn)品思維：從用戶價(jià)值出發(fā)，在滿足商業(yè)戰(zhàn)略和業(yè)務(wù)目標(biāo)的同時(shí)，尋求產(chǎn)品路徑，滿足用戶需求。②線框圖、原型圖、效果圖：線框圖是框架，是一種低保真的設(shè)計(jì)產(chǎn)物；原型是一個(gè)應(yīng)用程序/網(wǎng)頁的工作模型，原型的目標(biāo)是模擬用戶和界面之間的交互，原型圖的保真度應(yīng)與思維的保真度相匹配，并且原型可以是低保真度，中保真度和高保真度；效果圖就是高保真。③扁平化設(shè)計(jì)：去除冗余的裝飾效果，強(qiáng)調(diào)抽象、極簡和符號(hào)化，看起來更直觀，目前主流的扁平化設(shè)計(jì)風(fēng)格，降低了我們做高保真原型的門檻。下面我們來舉例說明制作高保真交互原型設(shè)計(jì)時(shí)，將產(chǎn)品的用戶體驗(yàn)作為設(shè)計(jì)思路，同時(shí)考慮在交互設(shè)計(jì)時(shí)要如何保持產(chǎn)品思維的過程。項(xiàng)目實(shí)施-交互設(shè)計(jì)案例分析案例分析（1）用戶行為路徑我們以電商售后App平臺(tái)管理的界面作為示例，需求簡單描述為：報(bào)修人在平臺(tái)填寫保修單，管理員收到信息后，指派維修人員進(jìn)行維修。首先我們要進(jìn)行低保真原型圖的交互設(shè)計(jì)，如圖所示，用戶的行為路徑是：管理員在列表頁可以看到待派工的工單，然后進(jìn)入到詳情頁，看完工單的詳細(xì)信息以后，在最下方選擇維修師傅前去維修。項(xiàng)目實(shí)施-交互設(shè)計(jì)案例分析案例分析（2）功能優(yōu)先排序工單通常有很多條，在做功能交互設(shè)計(jì)時(shí)需要有一個(gè)搜索功能，在做低保真交互設(shè)計(jì)時(shí)，只繪制一個(gè)搜索框即可，如圖所示。在做高保真原型時(shí)，我們還是去參考競品，我們發(fā)現(xiàn)搜索方式常見的有兩類，一是明顯的搜索條，另一種是搜索按鈕，我們來思考下我們做的這個(gè)電商售后平臺(tái)的用戶體驗(yàn)，對于用戶來說，他們使用產(chǎn)品的主要目的是處理當(dāng)前事務(wù)，而對應(yīng)歷史數(shù)據(jù)的查詢，使用情況較少，也不存在對于其他類型數(shù)據(jù)的查詢，看到的大多是和自己相關(guān)的工單數(shù)據(jù)，做高保真交互設(shè)計(jì)時(shí)