用戶體驗(yàn)設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)：用戶體驗(yàn)與UI交互（附微課視頻）目錄CONTENT4.1

產(chǎn)品功能信息架構(gòu)4.2交互邏輯流程圖4.3紙模原型學(xué)習(xí)目標(biāo)（2）理解產(chǎn)品功能信息架構(gòu)的作用。（5）理解交互邏輯流程圖在產(chǎn)品設(shè)計(jì)中的作用，重點(diǎn)掌握交互邏輯流程圖的形態(tài)。（6）重點(diǎn)掌握交互邏輯流程圖的多種繪圖形式，在實(shí)際產(chǎn)品設(shè)計(jì)中應(yīng)用。（3）了解產(chǎn)品功能信息架構(gòu)設(shè)計(jì)需要考慮的因素，重點(diǎn)掌握產(chǎn)品功能信息架構(gòu)的構(gòu)建方式和形態(tài)。（4）重點(diǎn)理解產(chǎn)品功能信息架構(gòu)的任務(wù)流程和實(shí)現(xiàn)技巧。（1）理解用戶體驗(yàn)設(shè)計(jì)的核心和意義。（7）掌握原型設(shè)計(jì)的四大排版原則。（8）掌握紙模原型設(shè)計(jì)的步驟和測試方法。（9）真正理解用戶體驗(yàn)設(shè)計(jì)在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中的核心地位。4.1產(chǎn)品功能信息架構(gòu)

產(chǎn)品功能信息架構(gòu)的作用在進(jìn)行產(chǎn)品規(guī)劃、產(chǎn)品設(shè)計(jì)時，產(chǎn)品功能信息架構(gòu)可以讓設(shè)計(jì)師擁有相對清晰的思路，也讓用戶在體驗(yàn)產(chǎn)品時，可以更加快速地獲取信息，收貨更好的用戶體驗(yàn)。產(chǎn)品功能信息架構(gòu)的形態(tài)-產(chǎn)品功能信息架構(gòu)設(shè)計(jì)需要考慮的因素2134考慮功能之間的關(guān)系考慮功能的相似性考慮功能的使用頻次考慮系統(tǒng)的擴(kuò)展性產(chǎn)品功能信息架構(gòu)的形態(tài)-產(chǎn)品功能信息架構(gòu)的構(gòu)建方式①

自上而下產(chǎn)品功能信息架構(gòu)的形態(tài)-產(chǎn)品功能信息架構(gòu)的構(gòu)建方式②

自下而上產(chǎn)品功能信息架構(gòu)的形態(tài)-產(chǎn)品功能信息架構(gòu)的構(gòu)建方式③

綜合運(yùn)用產(chǎn)品功能信息架構(gòu)的形態(tài)-產(chǎn)品功能信息架構(gòu)的形態(tài)介紹①層級結(jié)構(gòu)產(chǎn)品功能信息架構(gòu)的形態(tài)-產(chǎn)品功能信息架構(gòu)的形態(tài)介紹②矩陣結(jié)構(gòu)產(chǎn)品功能信息架構(gòu)的形態(tài)-產(chǎn)品功能信息架構(gòu)的形態(tài)介紹③自然結(jié)構(gòu)產(chǎn)品功能信息架構(gòu)的形態(tài)-產(chǎn)品功能信息架構(gòu)的形態(tài)介紹④線性結(jié)構(gòu)產(chǎn)品功能信息架構(gòu)的實(shí)現(xiàn)-產(chǎn)品功能信息架構(gòu)的任務(wù)流程產(chǎn)品功能信息架構(gòu)的實(shí)現(xiàn)-選擇高效的繪圖軟件產(chǎn)品功能信息架構(gòu)的實(shí)現(xiàn)-選擇高效的繪圖軟件產(chǎn)品功能信息架構(gòu)的實(shí)現(xiàn)-產(chǎn)品功能信息架構(gòu)的實(shí)現(xiàn)技巧①

按照總分結(jié)構(gòu)確定關(guān)鍵的一級節(jié)點(diǎn)產(chǎn)品功能信息架構(gòu)的實(shí)現(xiàn)-產(chǎn)品功能信息架構(gòu)的實(shí)現(xiàn)技巧②

繪制單個一級節(jié)點(diǎn)模塊的信息架構(gòu)圖，之后逐個完善產(chǎn)品功能信息架構(gòu)的實(shí)現(xiàn)-產(chǎn)品功能信息架構(gòu)的實(shí)現(xiàn)技巧③

若某個頁面在不同的一級節(jié)點(diǎn)內(nèi)出現(xiàn)，應(yīng)明確標(biāo)識4.2交互邏輯流程圖

交互邏輯流程圖的作用用戶行為路徑圖交互邏輯流程圖的作用交互邏輯流程圖交互邏輯流程圖的形態(tài)-交互邏輯流程圖的繪制階段（1）了解目標(biāo)用戶（2）盡量繪制在一個頁面內(nèi)（3）具有可讀性（4）使用標(biāo)準(zhǔn)的交互邏輯流程圖組件（5）明確2W1H要素交互邏輯流程圖的形態(tài)-時序圖某醫(yī)院線上預(yù)約掛號的交互邏輯流程圖交互邏輯流程圖的形態(tài)-流程圖（1）單線程流程圖交互邏輯流程圖的形態(tài)-流程圖（2）泳道流程圖交互邏輯流程圖的實(shí)現(xiàn)-交互邏輯流程圖的組成界面動作條件一個矩形代表一個界面，在這個流程中用戶經(jīng)過兩個界面（登錄頁和首頁），非界面的內(nèi)容不要出現(xiàn)。界面之間要加上一個觸發(fā)動作，該動作需要標(biāo)示出來。一個動作之后可能有多種（是/否）結(jié)果。交互邏輯流程圖的組成交互邏輯流程圖的實(shí)現(xiàn)-交互邏輯流程圖的多種繪圖形式順序/判斷交互邏輯流程圖交互邏輯流程圖的實(shí)現(xiàn)-交互邏輯流程圖的多種繪圖形式多Tab界面交互邏輯流程圖交互邏輯流程圖的實(shí)現(xiàn)-交互邏輯流程圖的多種繪圖形式非線性中心化信息交互邏輯流程圖4.3紙模原型

原型設(shè)計(jì)四大排版原則-親密性原則原型設(shè)計(jì)四大排版原則-對齊原則對齊原則指的是頁面上的任何獨(dú)立項(xiàng)都應(yīng)當(dāng)和頁面上其他的某個獨(dú)立項(xiàng)存在視覺上的聯(lián)系，人的視覺習(xí)慣是喜歡看到有序的事物，這樣閱讀比較舒適且能快速獲取信息。原型設(shè)計(jì)四大排版原則-對比與重復(fù)原則紙模原型設(shè)計(jì)-紙模原型繪制工具紙模原型設(shè)計(jì)-紙模原型設(shè)計(jì)參考步驟原型草圖設(shè)計(jì)整體局部原形測試按鈕點(diǎn)擊/觸摸頁面切換局部模塊的整體展示測試軟件的選擇功能結(jié)構(gòu)導(dǎo)航菜單布局信息架構(gòu)的設(shè)計(jì)功能上的交互設(shè)計(jì)完善紙模原型設(shè)計(jì)-紙模原型要做到什么程度一般來說，紙模原型階段不需要進(jìn)行視覺設(shè)計(jì)，因此過于細(xì)節(jié)的內(nèi)容在紙模階段不需要明確畫出，只需要表明產(chǎn)品的核心功能、每個控件的大概位置、整體界面的布局等即可。可用性測試-測試方法與流程（1）原型測試方法常見的原型測試軟件有

POP、交互、Mockup等。這幾款都比較容易上手，可以快速對原型進(jìn)行交互可用性測試，是快速App原型測試和分享的平臺?？捎眯詼y試-測試方法與流程（2）原型測試流程下載軟件拍攝原型導(dǎo)入圖片至軟件一鍵分享保存并演示編輯事件添加交互可用性測試-原型測試與思考（1）原型測試演示可用性測試-原型測試與思考（2）測試完成后的思考和感悟一測試是非常重要的，但是對于不是很成熟的產(chǎn)品，功能需求的迭代上線才是頭等大事。二原型測試要有明確且唯一的目標(biāo)。三要進(jìn)行多次測試，保證交互流程的順暢。四要善于分享測試結(jié)果，遇到問題及時修改。思考題02為什么進(jìn)行信息架構(gòu)設(shè)計(jì)？在進(jìn)行設(shè)計(jì)時需要考慮的因素有哪些？04舉例說明信息架構(gòu)的形態(tài)。06請簡要闡述信息架構(gòu)實(shí)現(xiàn)的方法和要注意的問題。01簡述產(chǎn)品功能信息架構(gòu)的概念和作用。03信息架構(gòu)的構(gòu)建方式都有哪些？請簡要闡述。05選一個App產(chǎn)品，分析信息架構(gòu)的任務(wù)流程。思考題08繪制交互邏輯流程圖時需要注意哪些問題？10在實(shí)際的項(xiàng)目制作過程中，紙模原型設(shè)計(jì)一般需要做到什么程度？12為什么要進(jìn)行原型測試？07

如何理解交互邏輯流程圖在移動設(shè)計(jì)流程中的作用？09常見的交互邏輯流程圖有哪幾種形式？請簡要闡述。11舉例說明原型設(shè)計(jì)四大排版原則。實(shí)踐題一：根據(jù)自己小組的產(chǎn)品選題，分別畫出產(chǎn)品的信息架構(gòu)圖和交互邏輯流程圖并輸出。要求：內(nèi)容完整，使用軟件不限，并在組間或班級內(nèi)交流分享。根據(jù)自