Axure-RP原型設(shè)計(jì)基礎(chǔ)與案例實(shí)戰(zhàn)

1、Axure-RP原型設(shè)計(jì)基礎(chǔ)與案例實(shí)戰(zhàn)Axure-RP原型設(shè)計(jì)基礎(chǔ)與案例實(shí)戰(zhàn)配套學(xué)習(xí)資源01配套學(xué)習(xí)資源01配套學(xué)習(xí)資源配套學(xué)習(xí)資源1 Axure RP基礎(chǔ)021 Axure RP基礎(chǔ)021 Axure RP基礎(chǔ)0102031.1 Axure RP是干什么用的1.2 基礎(chǔ)概念1.3 案例1：我的第1個(gè)Axure RP原型注冊頁面1 Axure RP基礎(chǔ)0102031.1 Axure RP1.1 Axure RP是干什么用的1 Axure RP基礎(chǔ)1.1.2 Axure RP原型案例1.1.1 Axure RP是原型設(shè)計(jì)軟件1.1.3 使用Axure RP原型1.1 Axure RP是干什么用的

2、1 Axure RP基礎(chǔ)1.2 基礎(chǔ)概念1 Axure RP基礎(chǔ)1.2.1 軟件界面概述1.2.2 畫布1.2.3 坐標(biāo)1.2.6 母版1.2.5 站點(diǎn)地圖1.2.4 元件庫1.2 基礎(chǔ)概念1 Axure RP基礎(chǔ)1.2.1 軟件界面1 Axure RP基礎(chǔ)1.2 基礎(chǔ)概念011.2.7 屬性1.2.8 元件地圖021.2.9 發(fā)布原型031 Axure RP基礎(chǔ)1.2 基礎(chǔ)概念011.2.7 屬性1 Axure RP基礎(chǔ)1.3 案例1：我的第1個(gè)Axure RP原型注冊頁面1.3.1 創(chuàng)建原型文件1.3.2 添加元件1.3.4 預(yù)覽原型效果1.3.3 設(shè)置頁面樣式1 Axure RP基礎(chǔ)1.

3、3 案例1：我的第1個(gè)Axure2 樣式設(shè)置032 樣式設(shè)置032 樣式設(shè)置2.1 顏色2.2 陰影2.3 文字格式2.6 處理圖片的尺寸2.5 “鋼筆”和自定義圖形2.4 格式刷2 樣式設(shè)置2.1 顏色2.2 陰影2.3 文字格式2.6 2 樣式設(shè)置2.8 文本框樣式2.10 布局2.12 案例2：給不同模塊制作不同背景2.7 設(shè)置按鈕的交互樣式2.9 改變形狀2.11 頁面樣式2 樣式設(shè)置2.8 文本框樣式2.10 布局2.12 案例22 樣式設(shè)置2.14 案例4：繪制一個(gè)APP原型2.13 案例3：繪制一個(gè)網(wǎng)站原型2 樣式設(shè)置2.14 案例4：繪制一個(gè)APP原型2.13 案2 樣式設(shè)置2

4、.1 顏色CBA2.1.1 認(rèn)識(shí)顏色窗口2.1.2 設(shè)置透明效果2.1.3 設(shè)置漸變效果2 樣式設(shè)置2.1 顏色CBA2.1.1 認(rèn)識(shí)顏色窗口2.12.3 文字格式2 樣式設(shè)置2.3.1 文字樣式2.3.2 調(diào)整文本的間距和填充2.3.3 調(diào)整文本的寬度、高度2.3 文字格式2 樣式設(shè)置2.3.1 文字樣式2.3.2 2 樣式設(shè)置2.5 “鋼筆”和自定義圖形2.5.1 鋼筆012.5.2 自定義形狀022 樣式設(shè)置2.5 “鋼筆”和自定義圖形2.5.1 鋼筆012 樣式設(shè)置2.6 處理圖片的尺寸2.6.1 分割圖片2.6.2 裁剪圖片2 樣式設(shè)置2.6 處理圖片的尺寸2.6.1 分割圖片2.6

5、2 樣式設(shè)置2.8 文本框樣式2.8.1 文本框類型12.8.3 文本限制32.8.2 文本框提示22.8.4 “提交”按鈕42 樣式設(shè)置2.8 文本框樣式2.8.1 文本框類型12.82 樣式設(shè)置2.9 改變形狀012.9.1 旋轉(zhuǎn)2.9.2 翻轉(zhuǎn)022.9.3 合并032 樣式設(shè)置2.9 改變形狀012.9.1 旋轉(zhuǎn)2.9.2 2 樣式設(shè)置2.10 布局2.10.1 順序012.10.3 對齊032.10.2 組合022.10.4 分布042 樣式設(shè)置2.10 布局2.10.1 順序012.10.32 樣式設(shè)置2.11 頁面樣式2.11.1 頁面排列2.11.2 背景2.11.3 草圖2.

6、11.4 樣式模板2 樣式設(shè)置2.11 頁面樣式2.11.1 頁面排列2.112 樣式設(shè)置2.13 案例3：繪制一個(gè)網(wǎng)站原型01032.13.1 繪制導(dǎo)航欄2.13.2 繪制折線圖2.13.3 繪制統(tǒng)計(jì)數(shù)據(jù)模塊020405062.13.4 處理圖標(biāo)、圖片2.13.5 總體布局2.13.6 設(shè)置頁面樣式2 樣式設(shè)置2.13 案例3：繪制一個(gè)網(wǎng)站原型01032.12 樣式設(shè)置2.14 案例4：繪制一個(gè)APP原型2.14.1 繪制手機(jī)框2.14.2 添加遮罩2.14.3 添加陰影2.14.4 設(shè)置頁面布局2 樣式設(shè)置2.14 案例4：繪制一個(gè)APP原型2.14.13 原型設(shè)計(jì)準(zhǔn)則043 原型設(shè)計(jì)準(zhǔn)則

7、043 原型設(shè)計(jì)準(zhǔn)則3.2 原型中要使用真實(shí)的數(shù)據(jù)3.4 原型需要快速迭代3.6 頁面布局要隨時(shí)優(yōu)化3.1 原型做成高保真還是低保真3.3 產(chǎn)品流程應(yīng)該盡量完整3.5 頁面應(yīng)該盡量簡化3 原型設(shè)計(jì)準(zhǔn)則3.2 原型中要使用真實(shí)的數(shù)據(jù)3.4 原型需3 原型設(shè)計(jì)準(zhǔn)則3.7 要保持原型的一致性3 原型設(shè)計(jì)準(zhǔn)則3.7 要保持原型的一致性3 原型設(shè)計(jì)準(zhǔn)則3.1 原型做成高保真還是低保真A3.1.1 什么是高保真和低保真3.1.2 如何選擇高保真與低保真B3 原型設(shè)計(jì)準(zhǔn)則3.1 原型做成高保真還是低保真A 產(chǎn)品流程應(yīng)該盡量完整3 原型設(shè)計(jì)準(zhǔn)則3.3.2 考慮系統(tǒng)出錯(cuò)的情況3.3.4 考慮每一

8、步的狀態(tài)3.3.1 考慮用戶出錯(cuò)的情況3.3.3 考慮沒有數(shù)據(jù)的情況3.3.5 添加適當(dāng)?shù)奶崾?.3 產(chǎn)品流程應(yīng)該盡量完整3 原型設(shè)計(jì)準(zhǔn)則3.3.2 考慮3.4 原型需要快速迭代3 原型設(shè)計(jì)準(zhǔn)則3.4.2 修改原型的技巧3.4.1 溝通原型的技巧3.4 原型需要快速迭代3 原型設(shè)計(jì)準(zhǔn)則3.4.2 修改原型3.5 頁面應(yīng)該盡量簡化3 原型設(shè)計(jì)準(zhǔn)則3.5.1 精簡用戶輸入內(nèi)容3.5.2 精簡頁面上的元素3.5.5 減少確認(rèn)環(huán)節(jié)3.5.4 避免過多的分支流程3.5.3 合并重復(fù)的功能3.5 頁面應(yīng)該盡量簡化3 原型設(shè)計(jì)準(zhǔn)則3.5.1 精簡用戶3.6 頁面布局要隨時(shí)優(yōu)化3 原型設(shè)計(jì)準(zhǔn)則CBA3.6.1

9、 用圖形替代文字3.6.2 突出重點(diǎn)信息3.6.3 把握頁面節(jié)奏3.6 頁面布局要隨時(shí)優(yōu)化3 原型設(shè)計(jì)準(zhǔn)則CBA3.6.1 3 原型設(shè)計(jì)準(zhǔn)則3.7 要保持原型的一致性A3.7.1 遵從慣例，保持外部一致3.7.2 統(tǒng)一樣式，保持內(nèi)部一致B3 原型設(shè)計(jì)準(zhǔn)則3.7 要保持原型的一致性A3.7.1 遵從4 交互動(dòng)畫054 交互動(dòng)畫054 交互動(dòng)畫014.1 基礎(chǔ)概念4.2 動(dòng)態(tài)面板024.3 常用交互案例034.4 復(fù)雜交互案例044 交互動(dòng)畫014.1 基礎(chǔ)概念4.2 動(dòng)態(tài)面板024.3 4.1 基礎(chǔ)概念4 交互動(dòng)畫4.1.1 了解4個(gè)概念4.1.2 舉例說明4個(gè)概念4.1.3 觸發(fā)事件4.1.6

10、 條件4.1.5 交互動(dòng)作4.1.4 用例4.1 基礎(chǔ)概念4 交互動(dòng)畫4.1.1 了解4個(gè)概念4.1.LOGOM.94275.CN4 交互動(dòng)畫4.2 動(dòng)態(tài)面板4.2.1 創(chuàng)建動(dòng)態(tài)面板4.2.2 動(dòng)態(tài)面板的狀態(tài)4.2.4 拖曳4.2.3 調(diào)整動(dòng)態(tài)面板的尺寸LOGOM.94275.CN4 交互動(dòng)畫4.2 動(dòng)態(tài)面板4.4.3 常用交互案例4 交互動(dòng)畫4.3.2 案例6：切換標(biāo)簽頁4.3.4 案例8：通知4.3.1 案例5：輪播圖4.3.3 案例7：側(cè)邊欄4.3.5 案例9：自動(dòng)彈出鍵盤4.3 常用交互案例4 交互動(dòng)畫4.3.2 案例6：切換標(biāo)簽4 交互動(dòng)畫4.4 復(fù)雜交互案例4.4.2 案例11：錘

11、子開機(jī)解鎖4.4.3 案例12：企業(yè)網(wǎng)站4.4.1 案例10：優(yōu)化的注冊流程4 交互動(dòng)畫4.4 復(fù)雜交互案例4.4.2 案例11：錘子開5 數(shù)據(jù)操作065 數(shù)據(jù)操作065 數(shù)據(jù)操作010203045.1 變量5.2 函數(shù)5.3 中繼器Repeater5.4 數(shù)據(jù)操作案例5 數(shù)據(jù)操作010203045.1 變量5.2 函數(shù)5.3 5.1 變量5 數(shù)據(jù)操作5.1.1 使用變量01“5.1.2 全局變量02“5.1.3 元件變量04“5.1.4 局部變量05“5.1.5 頁面、窗口和鼠標(biāo)指針變量06“5.1 變量5 數(shù)據(jù)操作5.1.1 使用變量01“5.1.25 數(shù)據(jù)操作5.2 函數(shù)5.2.4 日期

12、函數(shù)5.2.5 布爾函數(shù)5.2.1 數(shù)字函數(shù)5.2.2 字符串函數(shù)5.2.3 數(shù)學(xué)函數(shù)5 數(shù)據(jù)操作5.2 函數(shù)5.2.4 日期函數(shù)5.2.5 布爾5.3 中繼器Repeater5 數(shù)據(jù)操作5.3.1 復(fù)制5.3.2 數(shù)據(jù)集5.3.3 樣式5.3.6 交互動(dòng)作5.3.5 中繼器變量5.3.4 觸發(fā)事件5.3 中繼器Repeater5 數(shù)據(jù)操作5.3.1 復(fù)制55 數(shù)據(jù)操作5.4 數(shù)據(jù)操作案例ABC5.4.2 案例14：Layout圖片編輯5.4.3 案例15：雅虎天氣5.4.1 案例13：模擬制作“奇妙清單”APP5 數(shù)據(jù)操作5.4 數(shù)據(jù)操作案例ABC5.4.2 案例14：6 復(fù)雜原型的規(guī)劃07

13、6 復(fù)雜原型的規(guī)劃076 復(fù)雜原型的規(guī)劃6.2 巧命名6.4 結(jié)構(gòu)規(guī)劃6.1 可維護(hù)性6.3 善用“說明”功能6.5 案例16：Flappy Bird游戲案例6 復(fù)雜原型的規(guī)劃6.2 巧命名6.4 結(jié)構(gòu)規(guī)劃6.1 可維6 復(fù)雜原型的規(guī)劃6.1 可維護(hù)性6.1.1 可理解性16.1.2 可修改性26 復(fù)雜原型的規(guī)劃6.1 可維護(hù)性6.1.1 可理解性16.6.2 巧命名6 復(fù)雜原型的規(guī)劃6.2.1 使用有意義的名稱6.2.2 命名規(guī)范6.2.3 頁面的命名6.2 巧命名6 復(fù)雜原型的規(guī)劃6.2.1 使用有意義的名稱6.3 善用“說明”功能6 復(fù)雜原型的規(guī)劃6.3.2 對整個(gè)原型的“說明”6.3.

14、1 元件的“說明”6.3.3 結(jié)構(gòu)圖、流程圖6.3 善用“說明”功能6 復(fù)雜原型的規(guī)劃6.3.2 對整個(gè)6.4 結(jié)構(gòu)規(guī)劃6 復(fù)雜原型的規(guī)劃0102036.4.1 原型結(jié)構(gòu)選擇“頁面”或“動(dòng)態(tài)面板”6.4.2 減少重復(fù)的動(dòng)作和數(shù)據(jù)6.4.3 分割用例6.4 結(jié)構(gòu)規(guī)劃6 復(fù)雜原型的規(guī)劃0102036.4.1 原6 復(fù)雜原型的規(guī)劃6.5 案例16：Flappy Bird游戲案例6.5.1 原型規(guī)劃6.5.2 開場6.5.3 背景移動(dòng)6.5.6 結(jié)束6.5.5 碰撞檢測6.5.4 飛行控制6 復(fù)雜原型的規(guī)劃6.5 案例16：Flappy Bird游6 復(fù)雜原型的規(guī)劃6.5 案例16：Flappy Bi

15、rd游戲案例6.5.7 得分6 復(fù)雜原型的規(guī)劃6.5 案例16：Flappy Bird游7 帶地圖的原型087 帶地圖的原型087 帶地圖的原型7.1 地圖開放平臺(tái)7.2 案例17：制作LBS應(yīng)用“踩紅包”的原型7 帶地圖的原型7.1 地圖開放平臺(tái)7.2 案例17：制作L7.1 地圖開放平臺(tái)7 帶地圖的原型7.1.1 接口7.1.2 示例7.1.3 設(shè)置控件7.1.6 信息窗口7.1.5 覆蓋物7.1.4 地圖風(fēng)格7.1 地圖開放平臺(tái)7 帶地圖的原型7.1.1 接口7.1.7 帶地圖的原型7.2 案例17：制作LBS應(yīng)用“踩紅包”的原型7.2.1 初始化地圖頁面7.2.2 在地圖上添加紅包7.

16、2.3 在地圖上添加信息窗口7.2.4 整合發(fā)布7 帶地圖的原型7.2 案例17：制作LBS應(yīng)用“踩紅包”的8 響應(yīng)式原型設(shè)計(jì)098 響應(yīng)式原型設(shè)計(jì)098 響應(yīng)式原型設(shè)計(jì)8.1.1 響應(yīng)式設(shè)計(jì)介紹8.1.2 為什么做響應(yīng)式設(shè)計(jì)8.1.3 響應(yīng)式設(shè)計(jì)思維8.1 響應(yīng)式設(shè)計(jì)8.2.1 添加子視圖8.2.2 繼承8.2 自適應(yīng)視圖8.3.1 自適應(yīng)視圖改變布局8.3.2 窗口改變時(shí)調(diào)整元件寬度8.3 案例18：響應(yīng)式網(wǎng)站8 響應(yīng)式原型設(shè)計(jì)8.1.1 響應(yīng)式設(shè)計(jì)介紹8.1 響應(yīng)式設(shè)9 手機(jī)上可訪問的原型109 手機(jī)上可訪問的原型109 手機(jī)上可訪問的原型9.1 讓原型適應(yīng)手機(jī)尺寸9.2 生成分享鏈接9

17、.3 案例19：H5小測試色彩感覺心理測試9 手機(jī)上可訪問的原型9.1 讓原型適應(yīng)手機(jī)尺寸9.2 生成9 手機(jī)上可訪問的原型9.1 讓原型適應(yīng)手機(jī)尺寸AB9.1.2 通過視口標(biāo)簽，讓原型自適應(yīng)瀏覽器9.1.1 設(shè)置適應(yīng)手機(jī)的原型尺寸9 手機(jī)上可訪問的原型9.1 讓原型適應(yīng)手機(jī)尺寸AB9.1.9 手機(jī)上可訪問的原型9.2 生成分享鏈接AB9.2.2 利用“新浪云”自建原型服務(wù)器9.2.1 注冊Axure Share賬號(hào)并分享原型9 手機(jī)上可訪問的原型9.2 生成分享鏈接AB9.2.2 利LOGOM.94275.CN9 手機(jī)上可訪問的原型9.3 案例19：H5小測試色彩感覺心理測試9.3.1 制作

18、測試題19.3.3 設(shè)置視口標(biāo)簽39.3.2 制作測試結(jié)果29.3.4 發(fā)布4LOGOM.94275.CN9 手機(jī)上可訪問的原型9.3 案10 母版1110 母版1110 母版110.1 創(chuàng)建母版210.2 使用母版310.3 案例20：利用母版，解決“積分商城”的重復(fù)建設(shè)10 母版110.1 創(chuàng)建母版210.2 使用母版310.310 母版10.1 創(chuàng)建母版A10.1.1 在母版欄直接添加10.1.2 將元件轉(zhuǎn)換為母版B10 母版10.1 創(chuàng)建母版A10.1.1 在母版欄直接添加10 母版10.2 使用母版10.2.1 拖放行為110.2.2 使用情況210 母版10.2 使用母版10.2.1 拖放行為110.210 母版10.3 案例20：利用母版，解決“積分商城”的重復(fù)建設(shè)10.3.1 導(dǎo)航欄10.3.2 彈出菜單10.3.3 底部欄10.3.4 使用母版10 母版10.3 案例20：利用母版，