Axure RP8.0產(chǎn)品原型設(shè)計(jì)與制作實(shí)戰(zhàn)

第 1章 關(guān)于界面原型/ 9
1．1 界面原型的概念和作用 / 10
1．2 界面原型的保真程度及應(yīng)用 / 10
1．2．1 “畫”糙理不糙——低保真原型 / 10
1．2．2 交流高格調(diào)——高保真原型 / 11
第 2章 使用 Axure制作低保真原型/ 13
2．1 初識(shí) Axure RP/ 14
2．1．1 菜單 / 14
2．1．2 工具欄 / 14
2．1．3 功能區(qū) / 15
2．1．4 案例：制作第 一張?jiān)蛨D / 16
2．2 基本元件 / 18
2．2．1 矩形類 / 18
2．2．2 占位符 / 21
2．2．3 水平線和垂直線 / 21
2．2．4 圖片 / 22
2．2．5 熱區(qū) / 23
2．2．6 案例：修改按鈕的交互樣式 / 24
2．3 文本框與多行文本框 / 25
2．3．1 文本框的屬性設(shè)置 / 26
2．3．2 文本框樣式 / 26
2．3．3 設(shè)計(jì)原則：表單設(shè)計(jì)那些事兒 / 26
2．4 選擇類表單元件 / 28
2．4．1 下拉列表框 / 28
2．4．2 列表框 / 29
2．4．3 復(fù)選框 / 29
2．4．4 單選按鈕 / 29
2．4．5 提交按鈕 / 30
2．4．6 設(shè)計(jì)原則：選擇合適的表單元件 / 30
2．4．7 選擇類表單元件在 App上的“變體”/ 32
2．5 表格與菜單 / 33
2．5．1 表格 / 33
2．5．2 樹狀菜單 / 33
2．5．3 水平菜單和垂直菜單 / 34
2．6 動(dòng)態(tài)面板 / 35
2．6．1 動(dòng)態(tài)面板的創(chuàng)建 / 35
2．6．2 動(dòng)態(tài)面板的狀態(tài) / 35
2．6．3 動(dòng)態(tài)面板的屬性 / 36
2．6．4 動(dòng)態(tài)面板樣式 / 36
2．6．5 案例：移動(dòng)端“開關(guān)”元件 / 37
2．6．6 案例：輪播圖基礎(chǔ) / 37
2．6．7 案例：懸浮網(wǎng)頁頭部 / 39
2．6．8 案例：標(biāo)簽頁 / 43
2．7 內(nèi)聯(lián)框架 / 44
2．7．1 內(nèi)聯(lián)框架嵌入內(nèi)容 / 44
2．7．2 內(nèi)聯(lián)框架屬性 / 45
2．7．3 案例：在內(nèi)聯(lián)框架中實(shí)現(xiàn)菜單跳轉(zhuǎn) / 46
2．8 中繼器 / 47
2．8．1 中繼器的“項(xiàng)”/ 47
2．8．2 中繼器的數(shù)據(jù)集 / 47
2．8．3 中繼器顯示數(shù)據(jù) / 47
2．8．4 中繼器樣式 / 48
2．8．5 案例：用戶管理列表 / 48
2．8．6 案例：商品訂單列表 / 49
2．9 巧用母版 / 52
2．9．1 創(chuàng)建母版 / 52
2．9．2 母版實(shí)例 / 52
2．9．3 母版的拖放行為 / 53
2．9．4 應(yīng)用母版 / 54
2．9．5 移除母版 / 54
2．10 界面原型的尺寸 / 55
2．10．1 Web 原型尺寸/ 55
2．10．2 App 原型尺寸/ 56
第 3章 原型的分享與合作/ 57
3．1 頁面快照標(biāo)記元件 / 58
3．1．1 添加引用頁面 / 58
3．1．2 設(shè)置快照范圍 / 58
3．1．3 案例：制作低保真線框圖 / 58
3．2 其他標(biāo)記元件 / 59
3．3 流程圖 / 59
3．3．1 繪制流程圖 / 59
3．3．2 生成頁面流程圖 / 60
3．4 交互說明書 / 60
3．4．1 頁面說明 / 60
3．4．2 元件說明 / 61
3．4．3 生成 Word說明書/ 61
3．4．4 生成 CSV報(bào)告/ 62
3．5 AxShare/ 62
3．5．1 分享原型 / 62
3．5．2 管理原型 / 64
3．5．3 創(chuàng)建和管理團(tuán)隊(duì)項(xiàng)目 / 65
3．6 生成 HTML文件/ 68
3．6．1 選擇生成的頁面 / 69
3．6．2 選擇頁面說明字段 / 69
3．6．3 選擇元件說明字段 / 70
3．6．4 設(shè)置交互效果相關(guān)內(nèi)容 / 70
3．6．5 設(shè)置 HTML頁面工具欄的標(biāo)志/ 70
3．6．6 設(shè)置 Web字體/ 71
3．6．7 設(shè)置字體映射 / 72
3．6．8 在移動(dòng)設(shè)備中預(yù)覽 App原型/ 72
3．6．9 高級(jí)設(shè)置 / 73
3．6．10 設(shè)置是否開放討論 / 74
第 4章 使用Axure制作高保真原型/ 75
4．1 高級(jí)交互 / 76
4．1．1 事件 / 76
4．1．2 用例 / 76
4．1．3 動(dòng)作 / 76
4．1．4 條件用例 / 77
4．1．5 變量 / 78
4．1．6 函數(shù) / 80
4．1．7 案例：登錄表單驗(yàn)證 / 83
4．1．8 案例：跨頁面?zhèn)鬟f用戶登錄信息 / 86
4．1．9 案例：生成四位驗(yàn)證碼 / 88
4．1．10 設(shè)計(jì)原則：用戶登錄 /注冊(cè)功能/ 91
4．2 動(dòng)態(tài)面板進(jìn)階 / 93
4．2．1 案例：滑動(dòng)解鎖 / 93
4．2．2 案例：App 中帶指示器的輪播圖/ 95
4．2．3 案例：倒計(jì)時(shí)獲取動(dòng)態(tài)驗(yàn)證碼 / 97
4．3 中繼器進(jìn)階 / 100
4．3．1 排序 / 101
4．3．2 篩選 / 102
4．3．3 分頁 / 104
4．3．4 編輯中繼器數(shù)據(jù)集 / 105
4．3．5 案例：跨頁面添加列表數(shù)據(jù) / 109
4．3．6 案例：高亮顯示列表中的數(shù)據(jù) / 113
4．4 母版自定義事件 / 114
4．4．1 什么是母版自定義事件 / 114
4．4．2 創(chuàng)建并使用母版自定義事件 / 114
4．4．3 圖解自定義事件 / 116
第 5章 自定義元件庫/ 117
5．1 認(rèn)識(shí)自定義元件庫 / 118
5．1．1 使用場(chǎng)景 / 118
5．1．2 自定義元件庫與母版的區(qū)別 / 118
5．2 創(chuàng)建并使用自定義元件庫 / 118
5．2．1 創(chuàng)建自定義元件庫 / 118
5．2．2 載入自定義元件庫 / 118
5．2．3 卸載自定義元件庫 / 118
第 6章 自適應(yīng)視圖/ 119
6．1 認(rèn)識(shí)自適應(yīng)視圖 / 120
6．2 使用自適應(yīng)視圖 / 120
第 7章 案例：自定義UI元素/ 121
7．1 自定義文本框樣式 / 122
7．2 自定義下拉列表樣式 / 124
7．3 自定義單選按鈕樣式 / 126
第 8章 綜合案例：電商類產(chǎn)品/129
8．1 淘寶 App首頁/ 130
8．1．1 底部標(biāo)簽欄 / 130
8．1．2 頂部導(dǎo)航欄 / 133
8．2 商品列表頁 / 134
8．2．1 商品列表 / 134
8．2．2 局部滾動(dòng)的側(cè)滑篩選菜單 / 136
8．2．3 切換標(biāo)簽頁 / 138
8．3 商品詳情頁 / 141
8．3．1 窗口滾動(dòng)時(shí)逐漸顯示頭部 / 141
8．3．2 標(biāo)簽錨點(diǎn)定位 / 143
8．3．3 收藏 / 147
8．4 購(gòu)物車 / 149
8．5 完善原型 / 151
8．6 制作手機(jī)外殼 / 151
8．7 思考：電商購(gòu)物車的設(shè)計(jì) / 153
8．7．1 購(gòu)物車的功能設(shè)計(jì) / 153
8．7．2 購(gòu)物車的設(shè)計(jì)細(xì)節(jié) / 154
第 9章 綜合案例：音樂類產(chǎn)品/ 155
9．1 音樂館頁面：抽屜菜單 / 156
9．2 歌單頁 / 158
9．3 通用頭部導(dǎo)航欄 / 161
第 10章 綜合案例：后臺(tái)管理系統(tǒng)/ 163
10．1 頁面框架 / 164
10．1．1 頭像快捷入口 / 164
10．1．2 手風(fēng)琴導(dǎo)航菜單 1/ 165
10．1．3 手風(fēng)琴導(dǎo)航菜單 2/ 168
10．2 數(shù)據(jù)查詢與編輯頁面 / 169
10．2．1 聯(lián)動(dòng)下拉菜單 / 169
10．2．2 進(jìn)度條 / 171
第 11章 產(chǎn)品設(shè)計(jì)工作中的體會(huì)/ 173
11．1 設(shè)計(jì)原型前，先畫流程圖 / 174
11．1．1 如何畫好流程圖 / 174
11．1．2 泳道圖 / 175
11．1．3 Axure RP 流程圖與原型圖的配合/ 175
11．2 原型圖中的注意事項(xiàng) / 176
11．2．1 低保真原型也要“美觀”/ 176
11．2．2 模擬真實(shí)數(shù)據(jù) / 177
11．3 團(tuán)隊(duì)項(xiàng)目協(xié)作注意事項(xiàng) / 177
11．3．1 規(guī)范命名規(guī)則 / 177
11．3．2 謹(jǐn)慎創(chuàng)建全局變量 / 177
11．3．3 及時(shí)簽入已完成的更新 / 178
11．3．4 及時(shí)獲取全部更新 / 178
11．3．5 不要同時(shí)簽出過多頁面 / 178
11．4 撰寫 PRD文檔/ 178
11．4．1 PRD 文檔的內(nèi)容/ 178
11．4．2 傳統(tǒng) PRD文檔存在的弊病/ 179
11．4．3 利用 Axure撰寫PRD文檔/ 179