移動(dòng)端APPUI設(shè)計(jì)與交互基礎(chǔ)教程第4章交互設(shè)計(jì)與原型圖繪制課件

1、設(shè)計(jì)與交互基礎(chǔ)教程MOBILE APP UI DESIGN AND INTERACTION BASIC COURSE 移動(dòng)端APP UI04交互設(shè)計(jì)與原型圖繪制交互設(shè)計(jì)與原型圖繪制是UI設(shè)計(jì)師應(yīng)該掌握的知識(shí)，因?yàn)樵趯?shí)際工作中大多數(shù)公司UI設(shè)計(jì)師崗位會(huì)完成多個(gè)崗位的工作。本章將圍繞交互設(shè)計(jì)基本原理與原型圖繪制常見(jiàn)的操作方法向讀者講解相關(guān)知識(shí)。4.1 初識(shí)交互設(shè)計(jì)1交互2設(shè)計(jì)3交互設(shè)計(jì)師應(yīng)該具有的能力4交互設(shè)計(jì)師的工作任務(wù)5交互設(shè)計(jì)常用工具4.1.1 什么是交互設(shè)計(jì)圖4-1 Bill Verplank（比爾韋普朗克） 圖4-2 Bill Moggridge（比爾莫格里奇）4.1 初識(shí)交互設(shè)計(jì)4.1

2、.2 產(chǎn)品開(kāi)發(fā)中的層級(jí)關(guān)系圖4-3 產(chǎn)品開(kāi)發(fā)流程的4個(gè)層級(jí)關(guān)系4.1 初識(shí)交互設(shè)計(jì)1對(duì)于產(chǎn)品經(jīng)理2對(duì)于交互設(shè)計(jì)師3對(duì)于UI設(shè)計(jì)師4.1.3 相關(guān)工作經(jīng)驗(yàn)4.2 初識(shí)產(chǎn)品原型1手繪原型2低保真原型圖3高保真原型圖圖4-4 手繪原型圖圖4-6 低保真原型圖 圖4-7 高保真原型圖4.2 初識(shí)產(chǎn)品原型4原型圖的使用圖4-8 原型圖與產(chǎn)品開(kāi)發(fā)流程的關(guān)系4.3 原型制作工具Axure RP4.3.1 Axure RP界面認(rèn)知圖4-9 Axure RP啟動(dòng)界面4.3 原型制作工具Axure RP1添加元件到操作區(qū)2設(shè)置形狀外觀(guān)3設(shè)置文本框4元件的層級(jí)關(guān)系與組合元件5載入元件庫(kù)6預(yù)覽原型圖4.3.2 Axu

3、re RP基本操作4.3 原型制作工具Axure RP1創(chuàng)建元件庫(kù)2在元件庫(kù)中繪制主體屏幕3繪制手機(jī)外輪廓4使用自己的元件庫(kù)4.3.3 繪制手機(jī)原型存放于自己的元件庫(kù)4.3 原型制作工具Axure RP4.3.4 多頁(yè)面鞏固練習(xí)（金融類(lèi)APP原型圖繪制）4.4 Axure RP常見(jiàn)的交互應(yīng)用4.4.1 頁(yè)面跳轉(zhuǎn)圖4-27 頁(yè)面交互屬性 圖4-28 元件交互屬性4.4 Axure RP常見(jiàn)的交互應(yīng)用4.4.2 引導(dǎo)頁(yè)左右滑動(dòng)效果1動(dòng)態(tài)面板2使用動(dòng)態(tài)面板實(shí)現(xiàn)引導(dǎo)頁(yè)左右滑動(dòng)效果4.4 Axure RP常見(jiàn)的交互應(yīng)用4.4.3 長(zhǎng)頁(yè)面上下滾動(dòng)效果圖4-38 頁(yè)面間的結(jié)構(gòu)示意圖4.4 Axure RP常見(jiàn)的交互應(yīng)用4.4.4 彈出消息框效果圖4-43 彈出消息框效果過(guò)程描述4.4 Axure RP常見(jiàn)的交互應(yīng)用4.4.5 側(cè)邊欄菜單滑入效果圖4-50 側(cè)邊欄菜單滑入效果4.4 Axure RP常見(jiàn)的交互應(yīng)用4.4.6 表單驗(yàn)證與登錄交