Axure RP8 網(wǎng)站與App原型設(shè)計(jì)經(jīng)典實(shí)例教程（超值版 ）





01 原型設(shè)計(jì)的基本知識/011

1.1 Axure RP 介紹/012

1.1.1 當(dāng)前版本/012

1.1.2 主要功能/012

1.1.3 其他原型設(shè)計(jì)工具/013

1.2 原型設(shè)計(jì)的概念/014

1.3 原型設(shè)計(jì)的重要性/016

1.4 我該如何著手學(xué)習(xí)/016

1.5 組件化的設(shè)計(jì)思路/017

1.6 學(xué)習(xí)路徑/017

1.7 小結(jié)/018



02 Axure工作空間介紹/019

2.1 概述/020

2.2 工具欄/020

2.2.1 選擇、連接和畫筆/020

2.2.2 排列順序/021

2.2.3 編組與打散/022

2.2.4 對齊與分布/022

2.2.5 鎖定與解鎖/023

2.2.6 樣式工具欄/023

2.3 左側(cè)面板/024

2.3.1 站點(diǎn)地圖/024

2.3.2 元件庫/024

2.3.3 母版庫/025

2.4 右側(cè)面板/026

2.4.1 屬性和樣式/026

2.4.2 頁面元素大綱/026

2.5 設(shè)計(jì)區(qū)域/027

2.5.1 右鍵菜單/027

2.5.2 用例編輯/028

2.5.3 變量與函數(shù)編輯/030

2.6 小結(jié)/030



03 Axure原型設(shè)計(jì)的操作技巧與解析/031

3.1 關(guān)于元件命名/032

3.2 怎樣讓內(nèi)容屏幕居中/033

3.3 背景適應(yīng)寬度/033

3.4 交互樣式設(shè)置/034

3.5 矩形的基本樣式設(shè)置/034

3.5.1 選擇形狀/034

3.5.2 背景顏色/035

3.5.3 文字顏色/035

3.5.4 邊框大小、顏色和線段類型/035

3.5.5 圓角/036

3.5.6 邊距/036

3.5.7 陰影/036

3.6 吸管工具的使用/036

3.7 自定義元件的設(shè)置/038

3.8 動(dòng)態(tài)面板的特性/039

3.8.1 容器性/039

3.8.2 多狀態(tài)性/040

3.8.3 整體性/040

3.8.4 固定到瀏覽器/040

3.9 如何設(shè)置選項(xiàng)組/040

3.10 選中屬性的應(yīng)用/042

3.11 母版的使用/043

3.12 響應(yīng)式頁面設(shè)計(jì)/043

3.13 圖片Scale-9屬性的應(yīng)用/046

3.14 如何顯示草圖效果/048

3.15 發(fā)布到移動(dòng)終端/048

3.16 小結(jié)/050



04 預(yù)覽與發(fā)布/051

4.1 關(guān)于預(yù)覽/052

4.2 關(guān)于發(fā)布/052

4.2.1 導(dǎo)出HTML文件/053

4.2.2 發(fā)布到AxShare/053

4.3 查看原型/054

4.3.1 安裝Chrome插件/054

4.3.2 從home.html開始/055

4.4 綜合實(shí)例：Hello Axure！/055

4.5 小結(jié)/060



05 變量與函數(shù)的設(shè)置/061

5.1 概述/062

5.2 變量和函數(shù)的常用類型/062

5.3 插入變量或函數(shù)/063

實(shí)例：轉(zhuǎn)換輸入內(nèi)容為大寫/063

5.4 全局變量的添加與使用/064

5.4.1 添加方法/064

5.4.2 如何使用/064

實(shí)例：通過變量給按鈕標(biāo)簽賦值/066

5.5 局部變量的添加與使用/067

5.5.1 添加方法/067

5.5.2 如何使用/068

實(shí)例：給按鈕設(shè)置標(biāo)簽/069

5.6 綜合實(shí)例：手機(jī)撥號盤/070

5.7 小結(jié)/074



06 事件處理/075

6.1 概述/076

6.2 普通元件/076

實(shí)例：普通事件/077

6.3 動(dòng)態(tài)面板/079

實(shí)例：動(dòng)態(tài)面板事件/079

6.4 文本/082

實(shí)例：文本事件/082

6.5 頁面/086

實(shí)例：頁面事件/086

6.6 事件分支/091

6.6.1 事件分支的產(chǎn)生/091

6.6.2 事件分支的命名/091

實(shí)例：事件分支與事件命名/092

6.7 事件動(dòng)作介紹/094

6.7.1 鏈接動(dòng)作/094

實(shí)例：不同的鏈接打開方式/095

6.7.2 元件動(dòng)作/098

實(shí)例：顯示/隱藏彈出窗口/098

實(shí)例：自動(dòng)水平幻燈片/101

實(shí)例：文本設(shè)置/103

實(shí)例：設(shè)置圖片按鈕/105

實(shí)例：性別選擇/108

實(shí)例：用戶注冊/110

實(shí)例：滑動(dòng)驗(yàn)證碼/111

實(shí)例：幸運(yùn)大轉(zhuǎn)盤/114

實(shí)例：動(dòng)態(tài)進(jìn)度條/116

實(shí)例：圖片透明度調(diào)整/117

6.7.3 全局變量動(dòng)作/119

實(shí)例：轉(zhuǎn)換輸入內(nèi)容為大寫/119

6.7.4 中繼器動(dòng)作/121

實(shí)例：dribbble網(wǎng)站的作品顯示與過濾/124

6.7.5 其他動(dòng)作/131

實(shí)例：設(shè)置等待時(shí)間/132

6.8 小結(jié)/134



07 動(dòng)畫效果的設(shè)置/135

7.1 動(dòng)畫效果的應(yīng)用范圍/136

7.2 顯示/隱藏元件/136

實(shí)例：顯示/隱藏按鈕氣泡提示信息/137

7.3 設(shè)置動(dòng)態(tài)面板狀態(tài)/139

實(shí)例：自動(dòng)垂直幻燈片/139

7.4 移動(dòng)元件/141

實(shí)例：顯示/隱藏動(dòng)態(tài)浮動(dòng)氣泡/141

7.5 旋轉(zhuǎn)元件/142

實(shí)例：制作旋轉(zhuǎn)的風(fēng)車/143

7.6 設(shè)置尺寸/146

實(shí)例：設(shè)置圖片縮放效果/146

7.7 小結(jié)/148



08 動(dòng)態(tài)面板的設(shè)置/149

8.1 概述/150

8.2 動(dòng)態(tài)面板的屬性/150

實(shí)例：自動(dòng)調(diào)整為內(nèi)容尺寸/150

實(shí)例：固定到瀏覽器/152

8.3 動(dòng)態(tài)面板事件/154

8.3.1 載入事件/154

8.3.2 拖動(dòng)開始時(shí)/154

8.3.3 拖動(dòng)進(jìn)行時(shí)/155

8.3.4 拖動(dòng)結(jié)束時(shí)/155

實(shí)例：移動(dòng)滑塊，實(shí)時(shí)顯示當(dāng)前滑塊位置/155

8.4 綜合實(shí)例：人人都是產(chǎn)品經(jīng)理之動(dòng)態(tài)面板的應(yīng)用/159

8.5 小結(jié)/166



09 中繼器的操作/167

9.1 概述/168

9.2 中繼器的基本操作方法/168

9.2.1 添加排序/168

9.2.2 移除排序/169

9.2.3 添加篩選/169

9.2.4 移除篩選/169

9.2.5 設(shè)置當(dāng)前顯示頁面/170

9.2.6 設(shè)置每頁顯示項(xiàng)目數(shù)量/170

9.2.7 添加行/170

9.2.8 標(biāo)記行、取消標(biāo)記/170

9.2.9 更新行/171

9.2.10 刪除行/171

實(shí)例：中繼器樣式設(shè)置/171

9.3 綜合實(shí)例：用戶列表的數(shù)據(jù)操作/173

9.4 小結(jié)/182



10 元件庫的設(shè)計(jì)與應(yīng)用/183

10.1 概述/184

10.2 元件庫設(shè)計(jì)的作用和意義/185

10.2.1 提高原型設(shè)計(jì)效率/185

10.2.2 保持原型設(shè)計(jì)的一致性/185

10.3 綜合實(shí)例：Android元件庫的

設(shè)計(jì)/186

10.4 小結(jié)/190



11 綜合實(shí)例的操作與應(yīng)用/191

11.1 綜合實(shí)例：淘寶網(wǎng)首頁自動(dòng)

幻燈片/192

11.2 綜合實(shí)例：網(wǎng)易云音樂分享

彈出窗口/195

11.3 綜合實(shí)例：美團(tuán)網(wǎng)導(dǎo)航

菜單/199

11.4 綜合實(shí)例：人人都是產(chǎn)品經(jīng)理網(wǎng)站導(dǎo)航菜單/205

11.5 綜合實(shí)例：新浪微博下拉

刷新/210

11.6 綜合實(shí)例：雷鋒網(wǎng)浮動(dòng)

菜單欄/217

11.7 綜合實(shí)例：京東網(wǎng)手機(jī)品牌的選擇/222

11.8 綜合實(shí)例：UC瀏覽器文件

下載處理/225

11.9 綜合實(shí)例：淘寶網(wǎng)商品搜索

結(jié)果/235

11.10 綜合實(shí)例：創(chuàng)業(yè)邦登錄和

注冊界面/243

11.11 小結(jié)/252



12 微信Android客戶端原型

設(shè)計(jì)/253

12.1 概述/254

12.2 準(zhǔn)備工作/255

12.2.1 截圖功能的應(yīng)用/255

12.2.2 吸管工具的應(yīng)用/256

12.2.3 客戶端截圖準(zhǔn)備/256

12.3 設(shè)計(jì)公共元件庫/257

12.3.1 新建元件庫/257

12.3.2 設(shè)計(jì)元件庫內(nèi)容/258

實(shí)例：制作綠色按鈕/258

實(shí)例：制作淺灰色按鈕/259

實(shí)例：制作返回箭頭圖標(biāo)/260

實(shí)例：制作輸入框/261

實(shí)例：制作標(biāo)題欄/264

實(shí)例：制作白色/綠色文字氣泡背景/265

實(shí)例：制作提示信息彈出框/267

實(shí)例：制作輸入法鍵盤/268

實(shí)例：制作照片選擇列表/272

實(shí)例：設(shè)置開關(guān)選項(xiàng)/275

實(shí)例：設(shè)置掃一掃功能/277

12.3.3 加載元件庫/281

12.4 綜合實(shí)例：微信登錄和首頁設(shè)計(jì)/282

12.4.1 設(shè)置啟動(dòng)界面/282

12.4.2 設(shè)置登錄界面/283

12.4.3 首頁布局/286

12.4.4 制作主導(dǎo)航/287

12.4.5 設(shè)置搜索功能/289

12.4.6 設(shè)置微信菜單/290

12.4.7 設(shè)置添加朋友功能/292

12.4.8 掃一掃功能的應(yīng)用/293

12.4.9 設(shè)置消息列表/295

12.4.10 設(shè)置好友聊天功能/299

12.4.11 預(yù)覽/304

12.5 小結(jié)/306

附錄：函數(shù)與屬性/307

元件屬性/307

窗口屬性/307

光標(biāo)屬性/308

數(shù)字函數(shù)/308

數(shù)學(xué)函數(shù)/308

字符串函數(shù)和屬性/308

日期函數(shù)/309