《Axure RP 9網站與App產品交互設計實踐》課件 4.1Axure表單元件

Axure表單元件技術型文科人才系列課程主講人：文學與傳媒學院新媒體產品設計與項目管理本章案例：制作“百度注冊界面”，效果如圖所示。

回顧:矩形、圖片元件1.設置頁面居中；添加頁面背景填充（圖片）;知識點：頁面屬性2.設置表單背景;知識點：矩形的應用拓展：設置文本框的邊框為淺藍色，圓角半徑為15px知識點：添加形狀、鋼筆工具、更換形狀、改變形狀（翻轉、合并、去除、相交、排除）3.添加圖片LOGO.知識點：添加圖片、分割圖片、裁剪圖片、變換圖片（翻轉、優(yōu)化、固定邊角（圓角））3

實戰(zhàn)——制作“仿百度注冊原型”1

Axure表單元件2

課堂練習4

小結回顧：

Axure基本元件AxureRP8原型設計軟件里默認內置了基本元件有20種，表單類元件有7種，菜單與表格元件有4種，標記元件有9種。

元件庫1表單類元件的使用表單類元件是用在設計表單時經常會用到的元件，如登錄、注冊表單等。

表單類元件包括文本框、多行文本框、下拉列表框、列表框、復選框、單選按

鈕、提交按鈕。

表單型元件案例：制作“百度注冊界面”，效果如圖所示。

1.文本框元件和多行文本框元件的使用文本框元件，經常用于收集表單內容，如單行輸入框；多行文本框元件，用于多行文本的輸入。

文本框和多行文本框元件

在登錄網站的時候，經常會在輸入框里看到“請輸入用戶名、手機號或者郵箱”，文本框元件同樣可以填寫提示信息。

在文本框輸入內容時，提示文字會自然消失。在檢視區(qū)域的屬性選項卡里，可以設置文本框的輸入類型，如文本（Text）、密碼、郵箱、Number等。

文本框類型

選擇文本（Text）類型可以設置提示文字的樣式，輸入文字：“請輸入用戶名”，字體顏色為淺灰色（CCCCCC），單擊“提示樣式”來設置。

提示文字

在屬性選項卡還可以設置文本框元件文字輸入的最大長度，同時也可以隱藏邊框、設置為只讀或者禁用。

文本框屬性

多行文本框元件的右側屬性選項卡里同樣可以設置提示文字、隱藏邊框、只讀和禁用，但是不能設置文本框的類型和最大長度。

多行文本框元件設置2.下拉列表框元件和列表框元件的使用

下拉列表框元件，是經常用到的下拉菜單，只能顯示一個下拉菜單選項，而列表框元件可以顯示多個下拉菜單選項。

如果頁面區(qū)域有限，可以使用下拉列表框元件，如果頁面區(qū)域比較大，只放置一個下拉列表框，感覺整個頁面布局不是很美觀，使用列表框元件更合適。

下拉列表框元件和列表框元件實戰(zhàn)演練1. 拖曳一個下拉列表框元件，雙擊這個元件，彈出編輯選項對話框，單擊加號可以新增一個菜單選項，單擊菜單選項可以對它重新命名，命名為“北京”，再新增一個下拉選項，命名為“上?！?。

編輯列表選項對話框單擊向上箭頭和向下箭頭，調整下拉菜單選項的順序，單擊紅色差號，可以刪除選項。單擊“添加多個”按鈕，彈出添加多個對話框，每行代表一個下拉菜單選項。

調整選項順序和刪除

添加多個選項對話框如果想把某個選項作為默認顯示的選項，只需要勾選其前面的復選框。列表框的操作方式和下拉列表框的操作方式一樣，但是它允許選擇多個默認選項。

設置默認選項列表框設置默認選項3.復選框元件和單選按鈕元件的使用

如果允許選擇多個選項，可以使用復選框元件，如果每次只能選中一個，適合使用單選按鈕元件。

復選框和單選按鈕元件4.提交按鈕元件的使用提交按鈕元件經常被用來作為操作按鈕，如注冊、登錄、保存、取消按鈕等。

課堂練習實戰(zhàn)1——制作“仿百度注冊原型”1.新建項目l新建項目，另存為“百度.rp”;l重命名頁面“page1”為“注冊”。2.在頁面中拖入文本元件。依次拖入一級標題和文本標簽，雙擊畫布上的元件，修改元件文字。3.設置文本樣式、對齊和分布?？蜻x所有文本元件，點擊上方樣式面板的“左”對齊和“垂直”分布，使其在畫布上平均排列。選擇文本“登錄”，設置文本顏色為藍色.4.拖入文本框元件。從上面標尺拖入3條水平頁面輔助線，分別到“用戶名”、“手機號”、“密碼”文本元件處；從左邊標尺拖入一條垂直頁面輔助線，距離文本元件20px；勾選“視圖”→“標尺，網格和輔助線”→“對齊輔助線”命令；從表單元件列表中，拖入3個文本框元件到相應位置。5.設置文本框的提示屬性點開“交互”面板的提示屬性，設置用戶名文本框的類型為“文本”，提示文字為“請設置用戶名”，并設置“獲取焦點”之后隱藏該提示文字；設置手機號文本框的類型為“電話號碼”，提示文字為“可用于登錄和找回密碼”，并設置“獲取焦點”之后隱藏該提示文字；設置密碼文本框的類型為“密碼”，提示文字為“請設置登錄密碼”，并設置“獲取焦點”之后隱藏該提示文字。6.拖入按鈕元件拖入1個主要按鈕到頁面相應位置；雙擊按鈕元件，修改按鈕上的文字為“注冊”；選擇按鈕上的文本，修改樣式為：微軟雅黑、加粗、16px；修改按鈕的填充顏色為淺藍色；修改按鈕的圓角為20px。7.拖入復選框從表單元件列表中拖入1個復選框到頁面相應位置，并修改文字。修改文字的顏色。8.預覽設置點擊快捷功能中的“預覽”按鈕可以預覽頁面效果。預覽可以選擇不同的設置，在“發(fā)布（Publish）”菜單中的“預覽選項”里設置預覽的瀏覽器等。

實戰(zhàn)2——制作“仿百度注冊原型”1）打開項目2）設置頁面樣式（設置“頁面對齊（PageAlign）”方式為：居中；設置“填充（Fill）”為“圖片”，導入背景圖片）3）添加矩形背景（置于表單底部，“填充”顏色為白色，透明度為90%，圓角為12px）。拓展：設置文本框的邊框