1、第10章 表單Axure RP 8 交互原型設(shè)計(jì)案例教程在默認(rèn)的元件庫(kù)中專門有一類表單元件，如圖10-1 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.1 表單基礎(chǔ)10.1.1 認(rèn)識(shí)表單元件圖 10-1 表單元件庫(kù)表單元件與其他元件的創(chuàng)建方法相同，只要用鼠標(biāo)將相應(yīng)的表單元件拖曳到頁(yè)面中即可。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.1 表單基礎(chǔ)10.1.2 創(chuàng)建表單元件文本框主要用于填寫文本信息，另外它還可以用于搜索文字和上傳文件等。1. 文本框類型在頁(yè)面中選擇文本框元件后，在右側(cè)的【屬性】子面板中可以看到文本框的類型，如圖10-2所示。Axure RP

2、8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.1 文本框圖10-2 數(shù)字類型的文本框【查找】相當(dāng)于搜索功能。例如，京東網(wǎng)上的搜索文本框，如圖10-3 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.1 文本框圖 10-3 京東網(wǎng)上的搜索文本框【文件】相當(dāng)于發(fā)送郵件時(shí)的上傳附件功能，如圖10-4 所示?！救掌凇靠梢暂斎肴掌冢部梢詥螕粲覀?cè)的按鈕添加日期，或者單擊最右側(cè)的按鈕，從彈出的日期列表中選擇日期。【月份】與日期相似，只是缺少了天數(shù)，只有年和月?！緯r(shí)間】可以直接輸入小時(shí)數(shù)和分鐘數(shù)，也可以單擊右側(cè)的按鈕輸入小時(shí)數(shù)和分鐘數(shù)，如圖10-5所

3、示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.1 文本框圖 10-4 上傳文件類型的文本框 圖10-5 時(shí)間類型的文本框2. 文本框其他屬性【提示文字】載入頁(yè)面時(shí)，在文本框中默認(rèn)以灰色顯示的提示文字，如圖10-6 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.1 文本框圖 10-6 提示文本【提示樣式】如果要改變默認(rèn)的灰色提示文本，則可以單擊“提示樣式”超鏈接進(jìn)行設(shè)置，如圖10-7 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.1 文本框圖 10-7 提示樣式選項(xiàng)多行文本

4、框與文本框最大的不同在于：多行文本框可以輸入多行文字，當(dāng)在瀏覽器中輸入的文本超過(guò)多行文本框的寬度時(shí)，文字會(huì)自動(dòng)換行；如果按回車鍵，則可以重新開始一個(gè)新的段落，如圖10-8 所示。多行文本框通常在網(wǎng)絡(luò)調(diào)查時(shí)用于搜集一些建議和意見，如圖10-9 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.2 多行文本框圖 10-8 多行文本框圖10-9 多行文本框用于搜集建議和意見下拉列表框從外觀上看有點(diǎn)像文本框，但是下拉列表框只能允許用戶從列表中選擇某個(gè)選項(xiàng)，而無(wú)法填寫信息。該元件一般用于選擇某項(xiàng)信息。例如，選擇用戶的籍貫或者出生日期等，如圖10-10所示。向下拉列表

5、框中添加數(shù)據(jù)的方法是：選擇下拉列表框后，在【屬性】子面板中單擊“列表項(xiàng)”超鏈接，如圖10-11 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.3 下拉列表框圖 10-10 下拉列表圖10-11 【列表項(xiàng)】超鏈接在打開的【編輯列表選項(xiàng)】對(duì)話框中單擊【添加】按鈕，即可添加一個(gè)列表項(xiàng)，如圖10-12所示。如果要同時(shí)添加多個(gè)列表項(xiàng)，則可以單擊【添加多個(gè)】按鈕，在彈出的對(duì)話框中輸入一個(gè)列表項(xiàng)后，按回車鍵換行再輸入第二個(gè)列表項(xiàng)，重復(fù)此操作就可以添加多個(gè)列表項(xiàng)了，如圖10-13所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.3

6、 下拉列表框Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.3 下拉列表框圖 10-12 添加列表項(xiàng)圖10-13 同時(shí)添加多個(gè)列表項(xiàng)在【編輯列表選項(xiàng)】對(duì)話框的頂部還有一排針對(duì)列表項(xiàng)的按鈕，分別是【添加】、【上移】、【下移】、【清除】、【清除全部】，如圖10-14 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.3 下拉列表框圖 10-14 編輯列表選項(xiàng)按鈕列表框與下拉列表框的區(qū)別在于：列表框是通過(guò)滾動(dòng)條來(lái)顯示隱藏的選項(xiàng)的，而且允許用戶同時(shí)選擇多個(gè)選項(xiàng)。向列表框中添加數(shù)據(jù)的方法與下拉列表框相同：選擇列表框后，在【屬性】子面

7、板中單擊“列表項(xiàng)”超鏈接，在打開的【編輯列表選項(xiàng)】對(duì)話框中單擊【添加】按鈕，即可添加一個(gè)列表項(xiàng)，單擊對(duì)話框中的【添加多個(gè)】按鈕可以同時(shí)輸入多個(gè)選項(xiàng)。另外，在【編輯列表選項(xiàng)】對(duì)話框中，還可以設(shè)置默認(rèn)選中項(xiàng)，如果允許用戶選擇列表中的多個(gè)選項(xiàng)，則只要勾選底部的【允許選中多個(gè)選項(xiàng)】即可。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.4 列表框該元件主要用于從多個(gè)項(xiàng)目中選擇一個(gè)或者多個(gè)選項(xiàng)，與列表框的功能有些類似，平時(shí)我們?cè)诰W(wǎng)上遇到的多項(xiàng)選擇題主要就是用這種元件制作的。在【屬性】子面板中，可以設(shè)置復(fù)選框的相關(guān)屬性。例如：勾選“選中”選項(xiàng)，可以使復(fù)選框在頁(yè)面預(yù)覽時(shí)自動(dòng)處

8、于選中狀態(tài)。默認(rèn)狀態(tài)下，復(fù)選框位于文本的左側(cè)位置，使用【屬性】子面板的“對(duì)齊按鈕”選項(xiàng)，可以讓復(fù)選框放置在文本的右側(cè)。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.5 復(fù)選框默認(rèn)狀態(tài)下，在頁(yè)面中創(chuàng)建了多個(gè)單選按鈕后，預(yù)覽網(wǎng)頁(yè)，會(huì)發(fā)現(xiàn)雖然是單選按鈕，但仍然可以選擇多個(gè)選項(xiàng)。這是什么原因呢？原來(lái)，如果要實(shí)現(xiàn)一組單選按鈕的單選效果，必須將一組單選按鈕都設(shè)置為同一組。具體操作方法是：選擇同一組的所有單選按鈕，然后在【屬性】子面板中輸入單選按鈕組的名稱，如圖10-15 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.6 單選按鈕

9、Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.6 單選按鈕圖 10-15 指定單選按鈕組名稱提交按鈕元件主要用于提交通過(guò)上述表單元件獲取的數(shù)據(jù)。與基本元件庫(kù)中的按鈕元件不同，提交按鈕的樣式是無(wú)法更改的，也無(wú)法通過(guò)【設(shè)置文本】動(dòng)作更改提交按鈕的文字，但是可以直接修改提交按鈕上的文字。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.2 管理表單10.2.7 提交按鈕文本框和多行文本框的事件內(nèi)容相同，如圖10-16 所示。下拉列表框和列表框的事件的內(nèi)容也相同，如圖10-17 所示。復(fù)選框和單選按鈕的事件內(nèi)容相同，如圖10-18 所示。提交按鈕的事件最少

10、，只有6 個(gè)，如圖10-19 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.1 關(guān)于表單事件Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.1 關(guān)于表單事件圖 10-16 文本框和多行文本框事件圖 10-17 下拉列表框和列表框事件Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.1 關(guān)于表單事件圖 10-18 復(fù)選框和單選按鈕的事件圖10-19 提交按鈕的事件這是文本框和多行文本框表單專有的事件，表示當(dāng)文本框中的文本改變時(shí)導(dǎo)致產(chǎn)生某種結(jié)果。例如，在文本框中輸入文本時(shí)，顯示在其他地方的文

11、本提示將被隱藏。下面以一個(gè)小案例進(jìn)行說(shuō)明。（1）在頁(yè)面上創(chuàng)建一個(gè)文本框元件和文本標(biāo)簽元件，如圖10-20 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.2 【文本改變時(shí)】圖 10-20 創(chuàng)建元件（2）選擇文本框元件，在【屬性】子面板中雙擊【文本改變時(shí)】事件，在彈出的對(duì)話框中添加一個(gè)【隱藏】動(dòng)作，在右側(cè)選擇隱藏的對(duì)象，如圖10-21 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.2 【文本改變時(shí)】圖 10-21 【文本改變時(shí)】事件設(shè)置（3）完成后，按【F5】鍵預(yù)覽網(wǎng)頁(yè)。在瀏覽器中載入頁(yè)面時(shí)，文本框上方會(huì)顯示文本提

12、示；在文本框中輸入文字時(shí)，上方的提示文本被隱藏，如圖10-22 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.2 【文本改變時(shí)】圖 10-22 預(yù)覽【文本改變時(shí)】事件下面以一個(gè)小案例來(lái)學(xué)習(xí)【選項(xiàng)改變時(shí)】事件的使用方法。（1）在頁(yè)面中創(chuàng)建圖10-23 所示的4 個(gè)元件對(duì)象。（2）雙擊下拉列表元件，在打開的【編輯列表選項(xiàng)】中添加問(wèn)號(hào)、加、減、乘、除5 個(gè)符號(hào)，如圖10-24 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.3 【選項(xiàng)改變時(shí)】Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.

13、3.3 【選項(xiàng)改變時(shí)】圖 10-23 創(chuàng)建的4 個(gè)元件圖10-24 添加的列表項(xiàng)（3）選擇下拉列表框元件，在【屬性】面板中雙擊【選項(xiàng)改變時(shí)】事件，在打開的對(duì)話框中添加【獲取焦點(diǎn)】動(dòng)作，在【配置動(dòng)作】欄中選擇文本框元件，勾選底部的【在文本域或文本區(qū)選擇文本】，如圖10-25 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.3 【選項(xiàng)改變時(shí)】Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.3 【選項(xiàng)改變時(shí)】圖 10-25 【選項(xiàng)改變時(shí)】用例設(shè)置按【F5】鍵預(yù)覽，默認(rèn)狀態(tài)下，文本框元件沒(méi)有獲取焦點(diǎn)，如圖10-26 所示。Axu

14、re RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.3 【選項(xiàng)改變時(shí)】圖 10-26 載入頁(yè)面時(shí)的效果當(dāng)選擇相加運(yùn)算方式后，后面文本框就會(huì)獲取焦點(diǎn)了，如圖10-27 所示。輸入答案“100”后，將運(yùn)算改為減法時(shí)，會(huì)自動(dòng)選中文本框中的文本，如圖10-28 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.3 【選項(xiàng)改變時(shí)】圖 10-27 文本框獲取焦點(diǎn)圖10-28 自動(dòng)選擇文本功能（1）在頁(yè)面中創(chuàng)建一個(gè)文字文本框和一個(gè)密碼文本框，在密碼文本框右側(cè)添加一個(gè)軟鍵盤圖標(biāo)的圖片元件，如圖10-29所示。（2）在當(dāng)前頁(yè)添加一個(gè)【頁(yè)面載入時(shí)】事件

15、，用例設(shè)置如圖10-30 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.4 焦點(diǎn)事件圖 10-29 添加的三個(gè)元件圖 10-30 【頁(yè)面載入時(shí)】事件用例設(shè)置通過(guò)本事件的設(shè)置，可以在頁(yè)面載入時(shí)使用戶文本框獲取焦點(diǎn)。（3）選擇軟鍵盤圖片元件，將其設(shè)置為隱藏，如圖10-31 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.4 焦點(diǎn)事件圖 10-31 隱藏圖片元件（4）選擇密碼文本框元件，在【屬性】子面板中雙擊【獲取焦點(diǎn)時(shí)】事件，在打開的對(duì)話框中添加【顯示】動(dòng)作，顯示對(duì)象為軟鍵盤圖片元件，如圖10-32 所示。Axure

16、 RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.4 焦點(diǎn)事件圖 10-32 設(shè)置【獲取焦點(diǎn)時(shí)】事件用例（5）對(duì)密碼文本框元件再添加一個(gè)【失去焦點(diǎn)時(shí)】事件，在打開的對(duì)話框中添加【隱藏】動(dòng)作，隱藏對(duì)象為軟鍵盤圖片元件，如圖10-33 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.4 焦點(diǎn)事件圖 10-33 設(shè)置【失去焦點(diǎn)時(shí)】事件用例按【F5】鍵預(yù)覽，剛載入頁(yè)面時(shí)，用戶名文本框就獲取了焦點(diǎn)，可以直接通過(guò)鍵盤輸入文本，如圖10-34 所示。單擊密碼文本框時(shí)，該文本框會(huì)獲取焦點(diǎn)，同時(shí)會(huì)在右側(cè)顯示軟鍵盤圖標(biāo)，如圖10-35 所示。Axure

17、 RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.4 焦點(diǎn)事件圖 10-34 載入頁(yè)面時(shí)獲取焦點(diǎn)的用戶名文本框圖 10-35 獲取焦點(diǎn)的密碼文本框顯示軟鍵盤圖標(biāo)選中事件包括【選中時(shí)】、【未選中時(shí)】和【選中改變時(shí)】三個(gè)事件。在下面的案例中，使用鼠標(biāo)選擇某個(gè)選項(xiàng)后，其右方會(huì)顯示對(duì)應(yīng)的圖片，未選中某個(gè)選項(xiàng)后，其右方的圖片會(huì)隱藏起來(lái)。（1）在頁(yè)面上創(chuàng)建如圖10-36 所示的元件，包括一個(gè)文本標(biāo)簽、兩個(gè)復(fù)選框和兩個(gè)圖片元件。（2）將貓貓和狗狗兩個(gè)圖片元件隱藏起來(lái)，如圖10-37 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.5 選中事件Ax

18、ure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.5 選中事件圖 10-36 創(chuàng)建的元件圖10-37 隱藏兩個(gè)圖片元件（3）選擇【貓貓】復(fù)選框，雙擊【屬性】子面板中的【選中時(shí)】事件，在打開的對(duì)話框中添加【顯示】動(dòng)作，在右側(cè)的【配置動(dòng)作】欄中選擇顯示的貓貓圖片，如圖10-38 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.5 選中事件圖 10-38 設(shè)置貓貓的【選中時(shí)】事件的用例（4）再次選擇【貓貓】復(fù)選框，雙擊【屬性】子面板中的【未選中時(shí)】事件，在打開的對(duì)話框中添加【隱藏】動(dòng)作，在右側(cè)選擇要隱藏的貓貓圖片，如圖10-39 所

19、示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.5 選中事件圖 10-39 設(shè)置貓貓的【未選中時(shí)】事件的用例（5）選擇【狗狗】復(fù)選框，雙擊【屬性】子面板中的【選中時(shí)】事件，在打開的對(duì)話框中添加【顯示】動(dòng)作，在右側(cè)的【配置動(dòng)作】欄中選擇顯示的狗狗圖片，如圖10-40 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.5 選中事件圖 10-40 設(shè)置狗狗的【選中時(shí)】事件的用例（6）再次選擇【狗狗】復(fù)選框，雙擊【屬性】子面板中的【未選中時(shí)】事件，在打開的對(duì)話框中添加【隱藏】動(dòng)作，在右側(cè)選擇要隱藏的狗狗圖片，如圖10-41 所

20、示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.5 選中事件圖 10-41 設(shè)置狗狗的【未選中時(shí)】事件的用例按【F5】鍵預(yù)覽，當(dāng)載入頁(yè)面時(shí)顯示的狀態(tài)如圖10-42 所示。選擇【貓貓】復(fù)選框時(shí)，下方會(huì)顯示貓貓的圖片，如圖10-43 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.5 選中事件圖 10-42 載入頁(yè)面時(shí)的效果 圖10-43 選中貓貓時(shí)的顯示效果再選擇【狗狗】復(fù)選框時(shí)，下方也會(huì)顯示狗狗的圖片，如圖10-44 所示。取消選擇【貓貓】復(fù)選框時(shí)，貓貓圖片就消失了，但是狗狗的圖片依然存在，如圖10-45 所示。Ax

21、ure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.3 表單事件10.3.5 選中事件圖 10-44 同時(shí)選擇貓貓和狗狗時(shí)的顯示效果圖10-45 取消選擇貓貓時(shí)的顯示效果【獲取焦點(diǎn)】動(dòng)作可以獲取某個(gè)元件的焦點(diǎn)。該動(dòng)作對(duì)文本框獲取焦點(diǎn)非常有用。例如，可以讓頁(yè)面載入時(shí)就獲取文本框表單的焦點(diǎn)，這樣用戶進(jìn)入頁(yè)面時(shí)無(wú)需單擊文本框就可以直接輸入文本了。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.4 表單動(dòng)作10.4.1 獲取焦點(diǎn)該動(dòng)作專門針對(duì)列表框和下拉列表框兩種元件而設(shè)置。使用該動(dòng)作可以從列表框或者下拉列表框中選中相應(yīng)的選項(xiàng)。Axure RP 8 交互原型設(shè)計(jì)案例教程第10章表單10.4 表單動(dòng)作10.4.2 設(shè)置列表選中項(xiàng)在所有的表單元件中，【設(shè)置選中】動(dòng)作只對(duì)復(fù)選框