一、表單類元件

01 文本框

在設(shè)計填寫項時我們我們需要經(jīng)常用到文本框，比如注冊、登錄、個人信息等相關(guān)的頁面設(shè)計，我們都需要使用文本框。文本框的類型包含：文本、密碼、郵箱、數(shù)字、電話、URL地址、搜索、文件、日期、月份和時間。選定好類型后，只能在文本框中輸入選定類型的信息。比如我們設(shè)定了數(shù)字，則無法輸入中文和英文。文本框內(nèi)容的輸入長度，可以設(shè)定上限，這里的長度限制同時適用于中文、英文和數(shù)字。選中元件，右鍵單擊選擇“文本類型”，右鍵單擊選擇文本框選擇“編輯最大長度”，輸入數(shù)字，限定最大長度。文本框的類型和長度限制也可以通過交互樣式面板進(jìn)行設(shè)置。如下圖所示：

右鍵菜單設(shè)置.png

樣式設(shè)置.png

• 只讀與禁用：當(dāng)我們將文本設(shè)置為只讀時，在瀏覽器中打開原型時，將無法修改輸入框中的文字，即只能查看；設(shè)置為禁用時，文本框?qū)⒈绘i死，無法進(jìn)行操作。只讀與禁用的交互效果從表象看，沒有什么區(qū)別，但其實是有區(qū)別的，只讀是針對內(nèi)容而言，無法改變；而禁用，則是針對此項功能，無法使用。選中元件，右鍵菜單選擇只讀或禁用。
  文本框只讀與禁用.png

• 文本提示：提示用戶應(yīng)該在文本框中輸入什么樣的內(nèi)容，點擊輸入框獲取焦點后，內(nèi)置提示信息消失。選中元件，在右側(cè)交互樣式面板的提示文本中，填寫提示內(nèi)容。
  文本提示.png
• 文本框樣式：可以設(shè)置元件的寬度與高度、填充色、邊框線的顏色、粗細(xì)和樣式，陰影、圓角和邊距。
• 常用交互：文編改變時/獲取焦點時/失去焦點時是文本框元件常用的交互事件。

02文本段落

文本段落常用于留言、評論、個人介紹。文本段落可輸入多行文本內(nèi)容，當(dāng)文本內(nèi)容超出文本框高度時，文本段落將出現(xiàn)垂直滾動條。文本段落除不能設(shè)置文本類型外，其它的屬性均與文本框一致，可參考文本框的元件說明。

有些漢化包將文本段落翻譯為文本域或多行文本

03 下拉列表

當(dāng)我們需要在多個選項中選出一項作為篩選條件或者選擇結(jié)果時，我們就需要使用下拉列表。比如地區(qū)的選擇、日期范圍的選擇等。選擇的結(jié)果，通過全局變量進(jìn)行存儲，然后通過全局變量傳遞給其它頁面，影響頁面的展示結(jié)果。

• 編輯下拉列表：拖拽元件至設(shè)計區(qū)域，雙擊元件，打開編輯框，在這里可以進(jìn)行選項的添加、刪除、位置的移動等操作。點擊編輯多項，可一次性添加多個選項。編輯設(shè)置如下圖所示：
  下拉列表編輯.png
• 禁用下拉列表：某些情況下，我們可以會有禁用下拉列表的需求。選中下拉列表，右鍵菜單選擇“禁用”或者通過右側(cè)交互樣式面板設(shè)置禁用下拉列表。
• 添加空白選項：有些時候下拉列表需要默認(rèn)為空，這個時候我們通過創(chuàng)建一個空格選項來實現(xiàn)空選項的效果。需要注意，需要將空格選項移動至第一個位置，因為下拉列表默認(rèn)選擇第一項。
  常用交互：選中改變時/獲取焦點時作為下拉列表元件常用的交互事件。

04 列表框

與下拉列表的使用場景基本相同，可以用來取代下拉列表，如果你的設(shè)計需求希望直接將眾多選項展示出來，而不需要用戶點擊查看選項，列表框可以滿足這一需求。

• 添加/編輯列表框：列表框的添加、批量添加、編輯、刪除、位置的移動與下拉列表相同，唯一的區(qū)別在于列表框可以允許進(jìn)行多項選擇。
  列表框.png

不足之處：在實際的原型演示時，我們無法做到添加、刪除，移動某一選項至另一個列表框中，但我們還可以借助動態(tài)面板的多個狀態(tài)實現(xiàn)這樣的效果。每一個交互事件都不能同時設(shè)置多個選項，列表框元件只需要讀取或設(shè)置一個選項。

05 復(fù)選框

復(fù)選框的選定比較靈活，可以不選擇、也可以選擇、可以選擇一個或多個。

• 編輯復(fù)選框：拖動復(fù)選框元件至設(shè)計區(qū)域，雙擊復(fù)選框，編輯選項內(nèi)容。復(fù)選框默認(rèn)處于未選中，點擊左側(cè)方框或右鍵選擇為“選中”狀態(tài)。復(fù)選框還可以通過交互動作切換選中狀態(tài)。
• 對齊方式：默認(rèn)情況下，復(fù)選框位于左側(cè)，文字在右側(cè)，可以通過右鍵菜單切換復(fù)選框的左右位置。
• 禁用復(fù)選框：默認(rèn)為啟用，但是有時候我們需要禁用復(fù)選框。選中復(fù)選框，右鍵菜單點擊選擇“禁用”或通過右側(cè)的交互樣式面板選擇“禁用”。
• 自定義樣式：復(fù)選框支持設(shè)置填充、邊框線、陰影、圓角等樣式，文字可以設(shè)置字體、字號、對齊方式等樣式。

不足之處：復(fù)選框與單選按鈕不同，不可以指定單選按鈕組，復(fù)選框的高度與寬度是固定的，不可以調(diào)整。

06 單選按鈕

單選按鈕常用于表單設(shè)計中，一些判斷型的信息選擇，如性別選擇，婚姻狀況等。選擇的結(jié)果可能影響到當(dāng)前頁面的交互顯示或跨頁面的交互顯示，跨頁面常常需要用到全局變量存儲選擇結(jié)果。

• 指定單選按鈕組：單選按鈕加入到指定的組后，一次只能將一個單選按鈕設(shè)置為選中狀態(tài)。選中想要加入到組中的單選按鈕（第一個單選按鈕加入組），然后右鍵單擊，指定單選按鈕的組，或者在交樣式互面板中設(shè)置單選按鈕組名稱。后續(xù)添加更多單選項到組中，右鍵點擊該單選按鈕，選擇“指定單選按鈕組”，在彈出的對話窗口中下拉選擇組的名稱或者通過交互樣式面板選擇單選按鈕組名稱。若要將單選按鈕從組中移出，右鍵點擊單選按鈕，選擇“指定單選按鈕組”，刪除組的名稱，點擊“確定”按鈕。
  單選按鈕組.png
• 對齊方式：默認(rèn)按鈕在左側(cè)，文字在右側(cè)，右鍵單擊，在彈出菜單中可切換文字和按鈕的左右位置。
• 禁用單選按鈕：單選按鈕默認(rèn)為啟用狀態(tài)，但有時候我們需要禁用。右鍵點擊單選按鈕，在彈出菜單中選擇“禁用”或通過交互樣式面板選擇為禁用。
• 按鈕選中狀態(tài)：點擊單選按鈕或右鍵單擊選擇選中。這樣生成原型文件時，在瀏覽中看到的默認(rèn)狀態(tài)即為選中狀態(tài)。按鈕的選中切換，也可以通過交互用例的動作進(jìn)行設(shè)置選中/取消選中。

不足之處：單選按鈕的大小是固定的，形狀是固定的，但文字可以設(shè)置字體、字號、顏色，可以設(shè)置文字和按鈕的對齊方式。

二、菜單和制表

01 樹元件

樹節(jié)點.png

• 添加/刪除樹節(jié)點：右鍵單擊節(jié)點，在彈出菜單中選擇添加/刪除節(jié)點。支持添加子節(jié)點或同級節(jié)點，同級節(jié)點可以選擇在該節(jié)點前或節(jié)點后添加。

• 移動節(jié)點：節(jié)點的位置和層級可以靈活設(shè)置。選中樹節(jié)點，右鍵節(jié)點，在彈出菜單中選擇移動，在這里可以移動節(jié)點的上下位置或者調(diào)整節(jié)點的層級。
  移動節(jié)點.png

• 添加樹節(jié)點圖標(biāo)：樹節(jié)點左側(cè)的圖標(biāo)可以自定義修改，默認(rèn)為三角形。右鍵節(jié)點，在彈出菜單中選擇編輯圖標(biāo)，從本地導(dǎo)入圖標(biāo)，選擇圖標(biāo)的適用范圍：當(dāng)前節(jié)點/當(dāng)前節(jié)點和同級節(jié)點/當(dāng)前節(jié)點、同級節(jié)點和全部子節(jié)點。關(guān)閉對話框，右鍵樹節(jié)點，選擇編輯樹屬性，在彈出窗口中勾選“顯示圖標(biāo)”。
  添加節(jié)點&添加圖標(biāo).png
  
  
  -自定義展開/收縮圖標(biāo)：右鍵樹節(jié)點，在彈出菜單中選擇“編輯樹屬性”，彈出窗口中選擇展開/折疊的圖標(biāo)，系統(tǒng)提供三角形和+/-，默認(rèn)圖標(biāo)為三角形。這里也可以導(dǎo)入圖標(biāo)，與編輯圖標(biāo)不同的是，這里的圖標(biāo)只適用于本節(jié)點。
  展開/收縮圖標(biāo).png
• 樹節(jié)點的交互樣式：樹節(jié)點可以添加鼠標(biāo)懸停時/鼠標(biāo)按下時/選中時/獲取焦點時的樣式。選中樹節(jié)點，通過交互樣式面板進(jìn)行設(shè)置。
• 自定義樣式：樹節(jié)點可以自定義設(shè)置填充色，設(shè)置邊框線的顏色、粗細(xì)、線條類型（直線或虛線），設(shè)置文字的字體、字號、顏色和陰影。

不足之處：樹節(jié)點的圖標(biāo)可以自定義導(dǎo)入，但不能動態(tài)隱藏/顯示子節(jié)點內(nèi)容。

02 表格

在設(shè)計后臺類數(shù)據(jù)查詢頁面時，我們需要使用表格元件。

• 添加/刪除行和列：右鍵單元格或者表格上方和左側(cè)的表頭，在彈出菜單中選擇插入行和列，可以選擇插入的位置。
  插入行:列.png
• 交互樣式：表格中的單元格可以設(shè)置鼠標(biāo)懸停時/按下時/選中時/獲取焦點時的交互樣式。右鍵點擊單元格（windows按照ctrl，Mac按住command可進(jìn)行多選），然后在交互樣式面板中設(shè)置交互樣式。

不足之處：表格中的數(shù)據(jù)是靜態(tài)的，無法動態(tài)進(jìn)行添加、刪除和移動，如若需要動態(tài)添加行或列的數(shù)據(jù)，可以使用中繼器；表格不能同時添加多行或多列；不能對表格中的數(shù)據(jù)進(jìn)行排序和篩選。

03 水平菜單和垂直菜單

菜單元件設(shè)置好之后，我們經(jīng)常會將其轉(zhuǎn)換為母版，其目的是需要在不同頁面之間來回跳轉(zhuǎn)。

• 編輯菜單：右鍵菜單，在彈出菜單中選擇后方添加菜單/前方添加菜單/添加子菜單/刪除菜單項。如下圖所示：

  
  
  編輯菜單.png

• 編輯菜單填充：右鍵菜單，在彈出菜單中選擇“編輯菜單填充”，彈出窗口中設(shè)置填充像素，選擇適用范圍：僅當(dāng)前菜單/當(dāng)前菜單和全部子菜單。設(shè)置菜單填充后，菜單外層出現(xiàn)了一個矩形框，填充像素的大小影響了矩形框的大小，且菜單與矩形框的四個邊距是相等的。
  菜單填充.png
• 菜單樣式：通過右側(cè)樣式面板，可以對菜單設(shè)置顏色填充，設(shè)置邊框線的顏色，設(shè)置文本的字體、字號、顏色和對齊方式，設(shè)置文本內(nèi)容的邊距。添加子菜單時，子菜單繼承了父菜單的樣式，子菜單或父菜單修改樣式，均不會影響到對方。

• 菜單的交互樣式：我們可以為菜單項設(shè)置鼠標(biāo)懸停時/按下時/選中時/獲取焦點時的交互樣式。選擇目標(biāo)菜單（windows按照ctrl，Mac按住command可進(jìn)行多選），在交互樣式面板中點擊新建交互，為菜單項設(shè)置交互樣式。
  設(shè)置菜單交互樣式.png

不足之處：無法為菜單項添加圖標(biāo)，無法點擊展開子菜單，菜單元件默認(rèn)是鼠標(biāo)懸停時展開子菜單。

三、標(biāo)記

01 快照

當(dāng)我們在梳理頁面關(guān)系或跳轉(zhuǎn)邏輯時，可以使用快照引用原型頁面幫助我們分析流程。與內(nèi)部框架不同，快照只能引用內(nèi)部頁面和母版，而內(nèi)部框架不僅可以引用內(nèi)部頁面，也可以引用外部頁面。

• 引用頁面：雙擊快照元件或右鍵菜單選擇“引用頁面或母版”或點擊樣式面板中的“添加引用頁面”，在彈出窗口中選擇想要引用的頁面或母版，點擊確定，完成引用。
  引用頁面.png

• 快照樣式：在樣式面板中，可以為快照元件設(shè)置寬度和高度、縮放比例、邊距和外框線的顏色、粗細(xì)和樣式。引用頁面默認(rèn)根據(jù)快照元件的大小自適應(yīng)調(diào)整縮放比例，也可以通過樣式面板手動調(diào)整。
  快照樣式.png

02 水平箭頭和垂直箭頭

箭頭與直線的樣式屬性、交互樣式相同，區(qū)分在于，箭頭元件默認(rèn)選擇了一個箭頭樣式，且箭頭線條比直線更粗。具體的樣式屬性請參照《Axure 9.0基礎(chǔ)教程：史上最詳細(xì)的元件說明，建議你認(rèn)真看完》

03 便簽與標(biāo)記

當(dāng)我們需要為頁面中添加簡短的說明提示時，使用便簽備注則比較方便；截圖時，我們需要標(biāo)注某一區(qū)域時，使用標(biāo)記元件則較為方便，如我們在講解操作界面時，使用了標(biāo)記元件。

• 便簽：Axure 9.0默認(rèn)為我們提供了黃、藍(lán)、青、紫四種顏色的標(biāo)簽，便簽?zāi)J(rèn)設(shè)置了外部陰影，邊距為10。
• 標(biāo)記：Axure 9.0默認(rèn)提供了圓形標(biāo)記和水滴標(biāo)記，標(biāo)記元件填充色為藍(lán)色，邊框線為白色，邊距為2。
  便簽與標(biāo)記，本質(zhì)上是一種添加特殊樣式的形狀類元件，具體的樣式屬性請參照《Axure 9.0基礎(chǔ)教程：史上最詳細(xì)的元件說明，建議你認(rèn)真看完》

如果你對Axure或原型設(shè)計有興趣，希望系統(tǒng)性地學(xué)習(xí)Axure知識，掌握更多Axure使用技巧；或者希望通過臨摹交互案例，進(jìn)一步提升高保交互設(shè)計能力。請點擊下方關(guān)注按鈕，查看更多連載作品。
點擊獲取案例作品源文件