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

01 原型設(shè)計(jì)的基本知識/017
1．1 Axure RP 介紹/018
1．1．1 當(dāng)前版本/018
1．1．2 主要功能/018
1．1．3 其他原型設(shè)計(jì)工具/019
1．2 原型設(shè)計(jì)的概念/020
1．3 原型設(shè)計(jì)的重要性/022
1．4 我如何才能開始/022
1．5 組件化的設(shè)計(jì)思路/023
1．6 學(xué)習(xí)路徑/023
1．7 小結(jié)/024
02 Axure工作空間的介紹/025
2．1 概述/026
2．2 工具欄/026
2．2．1 選擇、連接和畫筆/026
2．2．2 排列順序/027
2．2．3 編組與打散/028
2．2．4 對齊與分布/028
2．2．5 鎖定與解鎖/029
2．2．6 樣式工具欄/029
2．3 左側(cè)面板/030
2．3．1 站點(diǎn)地圖/030
2．3．2 元件庫/030
2．3．3 母版庫/031
2．4 右側(cè)面板/032
2．4．1 屬性和樣式/032
2．4．2 頁面元素大綱/032
2．5 設(shè)計(jì)區(qū)域/033
2．5．1 右鍵菜單/033
2．5．2 用例編輯/034
2．5．3 變量與函數(shù)編輯/036
2．6 小結(jié)/036
03 Axure原型設(shè)計(jì)的操作技巧與解析/037
3．1 關(guān)于元件命名/038
3．2 怎樣讓內(nèi)容屏幕居中/039
3．3 背景適應(yīng)寬度/039
3．4 交互樣式設(shè)置/040
3．5 矩形的基本樣式設(shè)置/040
3．5．1 選擇形狀/040
3．5．2 背景顏色/041
3．5．3 文字顏色/041
3．5．4 邊框大小、顏色和線段類型/041
3．5．5 圓角/042
3．5．6 邊距/042
3．5．7 陰影/042
3．6 吸管工具的使用/042
3．7 自定義元件的設(shè)置/044
3．8 動(dòng)態(tài)面板的特性/045
3．8．1 容器性/045
3．8．2 多狀態(tài)性/046
3．8．3 整體性/046
3．8．4 固定到瀏覽器/046
3．9 如何設(shè)置選項(xiàng)組/046
3．10 選中屬性的應(yīng)用/048
3．11 母版的使用/049
3．12 響應(yīng)式頁面設(shè)計(jì)/049
3．13 圖片Scale-9屬性的應(yīng)用/052
3．14 如何顯示草圖效果/054
3．15 發(fā)布到移動(dòng)終端/054
3．16 小結(jié)/056
04 預(yù)覽與發(fā)布/057
4．1 關(guān)于預(yù)覽/058
4．2 關(guān)于發(fā)布/058
4．2．1 導(dǎo)出HTML文件/059
4．2．2 發(fā)布到AxShare/059
4．3 查看原型/060
4．3．1 安裝chrome插件/060
4．3．2 從home．html開始/061
4．4 綜合實(shí)例：Hello Axure！/061
4．5 小結(jié)/066
05 變量與函數(shù)的設(shè)置 067
5．1 概述/068
5．2 變量和函數(shù)的常用類型/068
5．3 插入變量或函數(shù)/069
實(shí)例：轉(zhuǎn)換輸入內(nèi)容為大寫/069
5．4 全局變量的添加與使用/070
5．4．1 添加方法/070
5．4．2 如何使用/070
實(shí)例：通過變量給按鈕標(biāo)簽賦值/072
5．5 局部變量的添加與使用/073
5．5．1 添加方法/073
5．5．2 如何使用/074
實(shí)例：給按鈕設(shè)置標(biāo)簽/075
5．6 綜合實(shí)例：手機(jī)撥號盤/076
5．7 小結(jié)/080
06 事件處理/081
6．1 概述/082
6．2 普通元件/082
實(shí)例：普通事件/083
6．3 動(dòng)態(tài)面板/085
實(shí)例：動(dòng)態(tài)面板事件/085
6．4 文本/088
實(shí)例：文本事件/088
6．5 頁面/092
實(shí)例：頁面事件/092
6．6 事件分支/097
6．6．1 事件分支的產(chǎn)生/097
6．6．2 事件分支的命名/09 7
實(shí)例：事件分支與事件命名/098
6．7 事件動(dòng)作介紹/100
6．7．1 鏈接動(dòng)作/100
實(shí)例：不同的鏈接打開方式/101
6．7．2 元件動(dòng)作/104
實(shí)例：顯示/隱藏彈出窗口/104
實(shí)例：自動(dòng)水平幻燈片/107
實(shí)例：文本設(shè)置/109
實(shí)例：設(shè)置圖片按鈕/111
實(shí)例：性別選擇/114
實(shí)例：用戶注冊/116
實(shí)例：滑動(dòng)驗(yàn)證碼/117
實(shí)例：幸運(yùn)大轉(zhuǎn)盤/120
實(shí)例：動(dòng)態(tài)進(jìn)度條/122
實(shí)例：圖片透明度調(diào)整/123
6．7．3 全局變量動(dòng)作/125
實(shí)例：轉(zhuǎn)換輸入內(nèi)容為大寫/125
6．7．4 中繼器動(dòng)作/127
實(shí)例：dribbble網(wǎng)站的作品顯示與過濾/130
6．7．5 其他動(dòng)作/137
實(shí)例：設(shè)置等待時(shí)間/138
6．8 小結(jié)/140
07 動(dòng)畫效果的設(shè)置/141
7．1 動(dòng)畫效果的應(yīng)用范圍/142
7．2 顯示/隱藏元件/142
實(shí)例：顯示/隱藏按鈕氣泡提示信息/143
7．3 設(shè)置動(dòng)態(tài)面板狀態(tài)/145
實(shí)例：自動(dòng)垂直幻燈片/145
7．4 移動(dòng)元件/147
實(shí)例：顯示/隱藏動(dòng)態(tài)浮動(dòng)氣泡/147
7．5 旋轉(zhuǎn)元件/148
實(shí)例：制作旋轉(zhuǎn)的風(fēng)車/149
7．6 設(shè)置尺寸/152
實(shí)例：設(shè)置圖片縮放效果/152
7．7 小結(jié)/154
08 動(dòng)態(tài)面板的設(shè)置/155
8．1 概述/156
8．2 動(dòng)態(tài)面板的屬性/156
實(shí)例：自動(dòng)調(diào)整為內(nèi)容尺寸/156
實(shí)例：固定到瀏覽器/158
8．3 動(dòng)態(tài)面板事件/160
8．3．1 載入事件/160
8．3．2 拖動(dòng)開始時(shí)/160
8．3．3 拖動(dòng)進(jìn)行時(shí)/161
8．3．4 拖動(dòng)結(jié)束時(shí)/161
實(shí)例：移動(dòng)滑塊，實(shí)時(shí)顯示當(dāng)前滑塊位置/161
8．4 綜合實(shí)例：“人人都是產(chǎn)品經(jīng)理”之
8．5 小結(jié)/172
09 中繼器的操作/173
9．1 概述/174
9．2 中繼器的基本操作方法/174
9．2．1 添加排序/174
9．2．2 移除排序/175
9．2．3 添加篩選/175
9．2．4 移除篩選/175
9．2．5 設(shè)置當(dāng)前顯示頁面/176
9．2．6 設(shè)置每頁顯示數(shù)量/176
9．2．7 添加行/176
9．2．8 標(biāo)記行、取消標(biāo)記/176
9．2．9 更新行/177
9．2．10 刪除行/177
實(shí)例：中繼器樣式設(shè)置/177
9．3 綜合實(shí)例：用戶列表的數(shù)據(jù)操作 /179
9．4 小結(jié)/188
10 元件庫的設(shè)計(jì)與應(yīng)用/189
10．1 概述/190
10．2 元件庫設(shè)計(jì)的作用和意義/191
10．2．1 提高原型設(shè)計(jì)效率/191
10．2．2 保持原型設(shè)計(jì)的一致性/191
10．3 綜合實(shí)例：Android元件庫的設(shè)計(jì)/192
10．4 小結(jié)/196
11 綜合實(shí)例的操作與應(yīng)用/197
11． 1 綜合實(shí)例：“淘寶網(wǎng)”首頁自動(dòng)幻燈片/198
11．2 綜合實(shí)例：“網(wǎng)易云音樂”分享彈出
11． 3 綜合實(shí)例：“美團(tuán)網(wǎng)”導(dǎo)航菜單的制作/205
11．4 綜合實(shí)例：“人人都是產(chǎn)品經(jīng)理”網(wǎng)站
11．5 綜合實(shí)例：“新浪微博”下拉刷新/216
11．6 綜合實(shí)例：“雷鋒網(wǎng)”浮動(dòng)菜單欄/223
11．7 綜合實(shí)例：“京東網(wǎng)”手機(jī)品牌的選擇/228
11．8 綜合實(shí)例：“UC瀏覽器”文件下載
11．9 綜合實(shí)例：“淘寶網(wǎng)”商品搜索結(jié)果/241
11．10 綜合實(shí)例：“創(chuàng)業(yè)邦”登錄和注冊
11．11 小結(jié)/258
12 微信Android客戶端原型設(shè)計(jì)/259
12．1 概述/260
12．2 準(zhǔn)備工作/261
12．2．1 截圖功能的應(yīng)用/261
12．2．2 吸管工具的應(yīng)用/262
12．2．3 客戶端截圖準(zhǔn)備/262
12．3 設(shè)計(jì)公共元件庫 /263
12．3．1 新建元件庫/263
12．3．2 設(shè)計(jì)元件庫內(nèi)容/264
實(shí)例：制作綠色按鈕/264
實(shí)例：制作淺灰色按鈕/265
實(shí)例：制作返回箭頭圖標(biāo)/266
實(shí)例：制作輸入框/267
實(shí)例：制作標(biāo)題欄/270
實(shí)例：制作白色/綠色文字氣泡背景/271
實(shí)例：制作提示信息彈出框/273
實(shí)例：制作輸入法鍵盤/274
實(shí)例：制作照片選擇列表/278
實(shí)例：設(shè)置“開關(guān)”選項(xiàng)/281
實(shí)例：設(shè)置“掃一掃”功能/283
12．3．3 加載元件庫/287
12．4 綜合實(shí)例：微信登錄和首頁設(shè)計(jì)/288
12．4．1 設(shè)置啟動(dòng)界面/288
12．4．2 設(shè)置登錄界面/289
12．4．3 首頁布局/292
12．4．4 制作主導(dǎo)航/293
12．4．5 設(shè)置“搜索”功能/295
12．4．6 設(shè)置微信菜單/296
12．4．7 設(shè)置“添加朋友”功能/298
12．4．8 “掃一掃”功能的應(yīng)用/299
12．4．9 設(shè)置消息列表/301
1 2 ．4．10 設(shè)置“好友聊天”功能/305
12．4．11 預(yù)覽/310
12．5 小結(jié)/312
附錄：函數(shù)與屬性/313
元件屬性/313
窗口屬性/313
光標(biāo)屬性/314
數(shù)字函數(shù)/314
數(shù)學(xué)函數(shù)/314
字符串函數(shù)和屬性/314
日期函數(shù)/315