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

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

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

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