第 1章　了解互聯(lián)網(wǎng)產(chǎn)品原型設(shè)計(jì)

1.1　什么是原型設(shè)計(jì)　1

1.2　原型設(shè)計(jì)的參與者　2

1.3　如何體現(xiàn)原型設(shè)計(jì)　2

1.3.1　紙質(zhì)　2

1.3.2　Word和Visio　3

1.3.3　原型設(shè)計(jì)軟件　4

1.4　原型設(shè)計(jì)的必要性和作用　4

1.4.1　原型設(shè)計(jì)的必要性　4

1.4.2　原型設(shè)計(jì)的作用　5

1.4.3　原型設(shè)計(jì)的要點(diǎn)　5

1.5　原型設(shè)計(jì)中的用戶體驗(yàn)　6

1.5.1　用戶體驗(yàn)包含的內(nèi)容　6

1.5.2　用戶體驗(yàn)的生命周期　7

1.5.3　用戶體驗(yàn)的需求層次　8

1.6　思維導(dǎo)圖與原型設(shè)計(jì)　8

1.6.1　思維導(dǎo)圖的作用　8

1.6.2　思維導(dǎo)圖的基本類型　9

1.7　思維導(dǎo)圖軟件介紹　10

1.7.1　MindMeister　10

1.7.2　XMind　10

　課堂操作安裝并使用XMind ZEN　11

1.7.3　MindManager　12

1.8　本章小結(jié)　13

1.9　課后練習(xí)完成創(chuàng)意家居App

　項(xiàng)目的思維導(dǎo)圖　13

1.10　課后測(cè)試　14

1.10.1　選擇題　14

1.10.2　填空題　14

1.10.3　操作題　14



第　2章 了解Axure RP　9

2.1　Axure RP 9簡(jiǎn)介　15

2.2　軟件的下載、安裝、漢化與啟動(dòng)　17

2.2.1　下載并安裝Axure RP 9　17

　課堂操作安裝Axure RP 9　17

2.2.2　漢化與啟動(dòng)Axure RP 9　18

2.3　Axure RP 9的主要功能　19

2.3.1　繪制網(wǎng)站構(gòu)架圖　19

2.3.2　繪制示意圖　19

2.3.3　繪制流程圖　20

2.3.4　實(shí)現(xiàn)交互設(shè)計(jì)　20

2.3.5　輸出網(wǎng)站原型　21

2.3.6　輸出Word格式的規(guī)格文件　21

2.4　熟悉Axure RP 9的工作界面　21

2.4.1　菜單欄　21

2.4.2　工具欄　23

2.4.3　面板　24

2.4.4　工作區(qū)　27

2.5　自定義工作界面　28

2.5.1　自定義工具欄　28

　課堂操作自定義基本工具列表　28

2.5.2　自定義工作面板　29

2.5.3　使用單鍵快捷鍵　29

2.6　使用Axure RP 9的幫助資源　30

2.7　本章小結(jié)　31

2.8　課后練習(xí)自定義草圖工作區(qū)　31

2.9　課后測(cè)試　32

2.9.1　選擇題　32

2.9.2　填空題　32

2.9.3　操作題　32



第3章　頁(yè)面管理與自適應(yīng)視圖

3.1　使用歡迎界面　33

3.2　新建和設(shè)置Axure文件　35

3.2.1　紙張尺寸與設(shè)置　35

3.2.2　文件存儲(chǔ)　36

3.2.3　存儲(chǔ)格式　36

3.2.4　啟動(dòng)和恢復(fù)自動(dòng)備份　37

　課堂操作設(shè)置自動(dòng)備份　37

3.3　頁(yè)面管理　38

3.3.1　添加和刪除頁(yè)面　38

3.3.2　移動(dòng)頁(yè)面　40

3.3.3　搜索頁(yè)面　40

3.3.4　剪切、復(fù)制和粘貼頁(yè)面　40

3.3.5　重復(fù)頁(yè)面　41

3.4　頁(yè)面設(shè)置　42

3.4.1　頁(yè)面尺寸　42

3.4.2　頁(yè)面排列　42

3.4.3　頁(yè)面填充　43

3.4.4　低保真度　45

　課堂操作新建iOS系統(tǒng)頁(yè)面　45

3.4.5　頁(yè)面樣式　46

　課堂操作創(chuàng)建并應(yīng)用頁(yè)面樣式　46

3.4.6　頁(yè)面說明　48

3.5　設(shè)置自適應(yīng)視圖　49

　課堂操作設(shè)置自適應(yīng)視圖　50

3.6　使用輔助線和網(wǎng)格　52

3.6.1　輔助線的分類　53

3.6.2　編輯輔助線　54

3.6.3　創(chuàng)建輔助線　54

　課堂操作創(chuàng)建輔助線　54

3.6.4　使用網(wǎng)格　55

3.7　設(shè)置遮罩　56

3.8　本章小結(jié)　57

3.9　課后練習(xí)創(chuàng)建Android系統(tǒng)頁(yè)面樣式　57

3.10　課后測(cè)試　58

3.10.1　選擇題　58

3.10.2　填空題　58

3.10.3　操作題　58



第4章　使用元件和元件庫(kù)

4.1　了解元件面板　59

4.2　將元件添加到頁(yè)面　60

4.2.1　基本元件　62

　課堂操作切割按鈕圖片　65

4.2.2　表單元件　69

　課堂操作創(chuàng)建文本框　70

4.2.3　菜單與表格　74

　課堂操作制作水平菜單　76

4.2.4　標(biāo)記元件　77

　課堂操作制作便簽說明　79

4.2.5　流程圖元件　79

　課堂操作制作手機(jī)產(chǎn)業(yè)流程圖　79

4.2.6　圖標(biāo)元件　81

4.2.7　使用繪畫工具　81

4.3　元件的轉(zhuǎn)換　82

4.3.1　轉(zhuǎn)換為形狀　82

4.3.2　轉(zhuǎn)換為圖片　83

4.4　元件的編輯　83

4.4.1　元件的組合和結(jié)合　83

4.4.2　編輯元件　84

4.4.3　元件的運(yùn)算　84

　課堂操作制作iOS系統(tǒng)功能圖標(biāo)　85

4.5　創(chuàng)建元件庫(kù)　86

4.5.1　新建元件庫(kù)　86

　課堂操作創(chuàng)建圖標(biāo)元件庫(kù)　87

4.5.2　編輯元件庫(kù)　88

4.5.3　添加圖片文件夾　89

4.6　使用外部元件庫(kù)　89

4.6.1　下載元件庫(kù)　89

4.6.2　載入元件庫(kù)　89

4.7　使用概要面板　90

4.8　本章小結(jié)　91

4.9　課后練習(xí)設(shè)計(jì)制作注冊(cè)頁(yè)原型　91

4.10　課后測(cè)試　92

4.10.1　選擇題　92

4.10.2　填空題　92

4.10.3　操作題　92



第5章　元件的樣式和交互

5.1　設(shè)置元件的屬性　93

5.1.1　不透明性　94

5.1.2　填充　94

5.1.3　線段　97

　課堂操作實(shí)現(xiàn)下畫線效果　98

5.1.4　陰影　98

5.1.5　圓角　99

5.1.6　邊距　99

5.1.7　排版　99

5.2　創(chuàng)建和管理樣式　101

5.2.1　創(chuàng)建頁(yè)面樣式　101

5.2.2　創(chuàng)建元件樣式　102

　課堂操作創(chuàng)建并應(yīng)用文本樣式　103

5.2.3　編輯樣式　104

5.3　了解交互面板　105

5.4　添加頁(yè)面交互　106

5.4.1　打開鏈接　107

　課堂操作打開頁(yè)面鏈接　108

5.4.2　關(guān)閉窗口　109

5.4.3　框架中打開鏈接　109

5.4.4　滾動(dòng)到元件　110

5.5　添加元件交互　110

5.5.1　顯示/隱藏　112

　課堂操作設(shè)計(jì)制作顯示/隱藏圖片　113

5.5.2　設(shè)置面板狀態(tài)　114

5.5.3　設(shè)置文本　114

　課堂操作為元件添加文本　114

5.5.4　設(shè)置圖片　116

　課堂操作制作按鈕交互狀態(tài)　116

5.5.5　設(shè)置選中　117

5.5.6　設(shè)置列表選中項(xiàng)　117

5.5.7　啟用/禁用　117

5.5.8　移動(dòng)　117

　課堂操作設(shè)計(jì)制作切換案例　117

5.5.9　旋轉(zhuǎn)　118

5.5.10　設(shè)置尺寸　118

5.5.11　置于頂層/底層　119

5.5.12　設(shè)置不透明　119

5.5.13　獲取焦點(diǎn)　119

5.5.14　展開/折疊樹節(jié)點(diǎn)　120

5.6　交互樣式設(shè)置　120

5.7　本章小結(jié)　120

5.8　課后練習(xí)設(shè)計(jì)制作按鈕交互樣式　120

5.9　課后測(cè)試　121

5.9.1　選擇題　121

5.9.2　填空題　122

5.9.3　操作題　122



第６章　使用母版和動(dòng)態(tài)面板

6.1　母版的概念　123

6.2　新建和編輯母版　124

6.2.1　新建母版　125

　課堂操作新建iOS系統(tǒng)布局母版　126

6.2.2　編輯和轉(zhuǎn)換母版　127

　課堂操作將卡片標(biāo)簽轉(zhuǎn)換為母版　127

6.2.3　刪除母版　128

6.3　使用母版　128

6.3.1　拖放方式　128

　課堂操作在任意位置使用母版　129

6.3.2　添加到頁(yè)面中　131

6.3.3　從頁(yè)面中移除　132

6.4　母版使用情況報(bào)告　132

6.5　應(yīng)用動(dòng)態(tài)面板　132

6.5.1　使用動(dòng)態(tài)面板　133

　課堂操作創(chuàng)建動(dòng)態(tài)面板　133

6.5.2　編輯動(dòng)態(tài)面板狀態(tài)　134

6.5.3　從首個(gè)狀態(tài)脫離　135

　課堂操作設(shè)計(jì)制作標(biāo)簽選擇頁(yè)面　135

6.5.4　為動(dòng)態(tài)面板添加交互　137

　課堂操作動(dòng)態(tài)面板制作輪播圖　137

6.6　轉(zhuǎn)換為動(dòng)態(tài)面板　139

6.7　本章小結(jié)　139

6.8　課后練習(xí)設(shè)計(jì)制作動(dòng)態(tài)按鈕效果　139

6.9　課后測(cè)試　141

6.9.1　選擇題　141

6.9.2　填空題　141

6.9.3　操作題　141



第7章　變量與表達(dá)式

7.1　使用變量　142

7.1.1　全局變量　142

　課堂操作使用全局變量　144

7.1.2　局部變量　145

7.2　設(shè)置條件　147

7.2.1　確定條件邏輯　147

7.2.2　用來進(jìn)行邏輯判斷的值　148

7.2.3　確定變量或元件名稱　148

7.2.4　邏輯判斷的運(yùn)算符　148

7.2.5　用來選擇被比較的值　149

7.2.6　文本框　149

　課堂操作設(shè)置制作用戶登錄界面　149

7.3　使用表達(dá)式　151

7.3.1　運(yùn)算符類型　151

7.3.2　表達(dá)式的格式　152

　課堂操作設(shè)置制作滑動(dòng)解鎖　152

7.4　本章小結(jié)　155

7.5　課后練習(xí)設(shè)計(jì)制作圖片交互效果　155

7.6　課后測(cè)試　156

7.6.1　選擇題　156

7.6.2　填空題　156

7.6.3　操作題　156



第8章　函數(shù)的使用

8.1　了解函數(shù)　157

　課堂操作使用時(shí)間函數(shù)　158

8.2　常見函數(shù)　159

8.2.1　中繼器/數(shù)據(jù)集函數(shù)　159

8.2.2　元件函數(shù)　159

　課堂操作設(shè)計(jì)制作商品詳情頁(yè)　160

8.2.3　頁(yè)面函數(shù)　162

8.2.4　窗口函數(shù)　162

8.2.5　鼠標(biāo)指針函數(shù)　162

　課堂操作設(shè)計(jì)制作產(chǎn)品局部放大效果　163

8.2.6　數(shù)字函數(shù)　165

8.2.7　字符串函數(shù)　165

8.2.8　數(shù)學(xué)函數(shù)　166

　課堂操作設(shè)計(jì)制作計(jì)算器　168

8.2.9　日期函數(shù)　169

　課堂操作使用日期函數(shù)　170

8.3　本章小結(jié)　173

8.4　課后練習(xí)設(shè)計(jì)制作商品購(gòu)買頁(yè)面　173

8.5　課后測(cè)試　173

8.5.1　選擇題　174

8.5.2　填空題　174

8.5.3　操作題　174



第9章　使用中繼器

9.1　中繼器　175

9.1.1　數(shù)據(jù)集　176

9.1.2　項(xiàng)目交互　177

9.1.3　樣式設(shè)置　177

　課堂操作使用中繼器制作產(chǎn)品頁(yè)面　178

9.2　數(shù)據(jù)集的操作　180

9.2.1　設(shè)置分頁(yè)與數(shù)量　180

　課堂操作使用中繼器添加分頁(yè)　180

9.2.2　添加和移除排序　182

　課堂操作使用中繼器設(shè)置排序　182

9.2.3　添加和移除篩選　183

9.2.4　添加和刪除中繼器的項(xiàng)目　183

　課堂操作使用中繼器實(shí)現(xiàn)自增　184

9.3　項(xiàng)目列表的操作　185

　課堂操作使用中繼器顯示頁(yè)碼　185

9.4　本章小結(jié)　187

9.5　課后練習(xí)設(shè)計(jì)制作模糊搜索　187

9.6　課后測(cè)試　188

9.6.1　選擇題　188

9.6.2　填空題　188

9.6.3　操作題　188



第　10章 團(tuán)隊(duì)合作與輸出

10.1　使用團(tuán)隊(duì)項(xiàng)目　189

10.1.1　創(chuàng)建團(tuán)隊(duì)項(xiàng)目　189

10.1.2　加入團(tuán)隊(duì)項(xiàng)目　191

10.1.3　打開團(tuán)隊(duì)項(xiàng)目　192

10.1.4　編輯項(xiàng)目文件　192

10.2　使用Axure云　194

10.2.1　創(chuàng)建Axure云賬號(hào)　194

10.2.2　發(fā)布到Axure云　195

10.3　發(fā)布查看原型　196

10.4　使用生成器　197

10.4.1　HTML生成器　197

10.4.2　Word生成器　199

10.4.3　更多生成器　200

10.5　本章小結(jié)　202

10.6　課后練習(xí)完成團(tuán)隊(duì)項(xiàng)目的簽入與簽出　202

10.7　課后測(cè)試　202

10.7.1　選擇題　203

10.7.2　填空題　203

10.7.3　操作題　203



第　11章 設(shè)計(jì)制作網(wǎng)頁(yè)原型

11.1　設(shè)計(jì)制作QQ郵箱加載頁(yè)面　204

11.1.1　案例分析　204

11.1.2　案例效果　205

11.1.3　制作步驟　205

11.2　設(shè)計(jì)制作微博用戶評(píng)論頁(yè)面　209

11.2.1　案例分析　209

11.2.2　案例效果　209

11.2.3　制作步驟　209

11.3　設(shè)計(jì)制作課程購(gòu)買頁(yè)面　211

11.3.1　案例分析　211

11.3.2　案例效果　211

11.3.3　制作步驟　212

11.4　使用并設(shè)置鏈接類動(dòng)作　213

11.4.1　案例分析　213

11.4.2　案例效果　213

11.4.3　制作步驟　214

11.5　設(shè)計(jì)制作商品分類頁(yè)面　217

11.5.1　案例分析　217

11.5.2　案例效果　218

11.5.3　制作步驟　218

11.6　設(shè)計(jì)制作課程選擇頁(yè)面　219

11.6.1　案例分析　219

11.6.2　案例效果　219

11.6.3　制作步驟　220

11.7　本章小結(jié)　222

11.8　課后練習(xí)設(shè)計(jì)制作抽獎(jiǎng)活動(dòng)頁(yè)面原型　222

11.9　課后測(cè)試　222



第　12章 設(shè)計(jì)制作App原型

12.1　設(shè)計(jì)制作App頁(yè)面原型　223

12.1.1　設(shè)計(jì)制作App啟動(dòng)頁(yè)面　224

12.1.2　設(shè)計(jì)制作App會(huì)員系統(tǒng)頁(yè)面　226

12.1.3　設(shè)計(jì)制作App首頁(yè)　227

12.1.4　設(shè)計(jì)制作App設(shè)計(jì)師頁(yè)面　228

12.2　設(shè)計(jì)制作App交互原型　229

12.2.1　設(shè)計(jì)制作App頁(yè)面導(dǎo)航交互　229

12.2.2　設(shè)計(jì)制作App注冊(cè)/登錄頁(yè)面交互　232

12.2.3　設(shè)計(jì)制作App主頁(yè)面交互　233

12.3　本章小結(jié)　236

12.4　課后練習(xí)設(shè)計(jì)制作App輪播圖原型　236

12.5　課后測(cè)試　236