一、表單類元件
01 文本框
在設計填寫項時我們我們需要經常用到文本框,比如註冊、登錄、個人信息等相關的頁面設計,我們都需要使用文本框。文本框的類型包含:文本、密碼、郵箱、數字、電話、URL地址、搜索、文件、日期、月份和時間。選定好類型後,只能在文本框中輸入選定類型的信息。比如我們設定了數字,則無法輸入中文和英文。文本框內容的輸入長度,可以設定上限,這裡的長度限制同時適用於中文、英文和數字。選中元件,右鍵單擊選擇“文本類型”,右鍵單擊選擇文本框選擇“編輯最大長度”,輸入數字,限定最大長度。文本框的類型和長度限制也可以通過交互樣式面板進行設置。如下圖所示:
輸入類型/最大長度
樣式設置
只讀與禁用:當我們將文本設置為只讀時,在瀏覽器中打開原型時,將無法修改輸入框中的文字,即只能查看;設置為禁用時,文本框將被鎖死,無法進行操作。只讀與禁用的交互效果從表象看,沒有什麼區別,但其實是有區別的,只讀是針對內容而言,無法改變;而禁用,則是針對此項功能,無法使用。選中元件,右鍵菜單選擇只讀或禁用。
文本框只讀與禁用
文本提示:提示用戶應該在文本框中輸入什麼樣的內容,點擊輸入框獲取焦點後,內置提示信息消失。選中元件,在右側交互樣式面板的提示文本中,填寫提示內容。
文本提示
文本框樣式:可以設置元件的寬度與高度、填充色、邊框線的顏色、粗細和樣式,陰影、圓角和邊距。
常用交互:文編改變時/獲取焦點時/失去焦點時是文本框元件常用的交互事件。
02 文本段落
文本段落常用於留言、評論、個人介紹。文本段落可輸入多行文本內容,當文本內容超出文本框高度時,文本段落將出現垂直滾動條。文本段落除不能設置文本類型外,其它的屬性均與文本框一致,可參考文本框的元件說明。
有些漢化包將文本段落翻譯為文本域或多行文本
03 下拉列表
當我們需要在多個選項中選出一項作為篩選條件或者選擇結果時,我們就需要使用下拉列表。比如地區的選擇、日期範圍的選擇等。選擇的結果,通過全局變量進行存儲,然後通過全局變量傳遞給其它頁面,影響頁面的展示結果。
04 列表框
與下拉列表的使用場景基本相同,可以用來取代下拉列表,如果你的設計需求希望直接將眾多選項展示出來,而不需要用戶點擊查看選項,列表框可以滿足這一需求。
添加/編輯列表框:列表框的添加、批量添加、編輯、刪除、位置的移動與下拉列表相同,唯一的區別在於列表框可以允許進行多項選擇。
不足之處:在實際的原型演示時,我們無法做到添加、刪除,移動某一選項至另一個列表框中,但我們還可以藉助動態面板的多個狀態實現這樣的效果。每一個交互事件都不能同時設置多個選項,列表框元件只需要讀取或設置一個選項。
05 複選框
複選框的選定比較靈活,可以不選擇、也可以選擇、可以選擇一個或多個。
編輯複選框:拖動複選框元件至設計區域,雙擊複選框,編輯選項內容。複選框默認處於未選中,點擊左側方框或右鍵選擇為“選中”狀態。複選框還可以通過交互動作切換選中狀態。對齊方式:默認情況下,複選框位於左側,文字在右側,可以通過右鍵菜單切換複選框的左右位置。禁用複選框:默認為啟用,但是有時候我們需要禁用複選框。選中複選框,右鍵菜單點擊選擇“禁用”或通過右側的交互樣式面板選擇“禁用”。自定義樣式:複選框支持設置填充、邊框線、陰影、圓角等樣式,文字可以設置字體、字號、對齊方式等樣式。不足之處:複選框與單選按鈕不同,不可以指定單選按鈕組,複選框的高度與寬度是固定的,不可以調整。
06 單選按鈕
單選按鈕常用於表單設計中,一些判斷型的信息選擇,如性別選擇,婚姻狀況等。選擇的結果可能影響到當前頁面的交互顯示或跨頁面的交互顯示,跨頁面常常需要用到全局變量存儲選擇結果。
指定單選按鈕組:單選按鈕加入到指定的組後,一次只能將一個單選按鈕設置為選中狀態。選中想要加入到組中的單選按鈕(第一個單選按鈕加入組),然後右鍵單擊,指定單選按鈕的組,或者在交樣式互面板中設置單選按鈕組名稱。後續添加更多單選項到組中,右鍵點擊該單選按鈕,選擇“指定單選按鈕組”,在彈出的對話窗口中下拉選擇組的名稱或者通過交互樣式面板選擇單選按鈕組名稱。若要將單選按鈕從組中移出,右鍵點擊單選按鈕。指定單選按鈕到組
不足之處:單選按鈕的大小是固定的,形狀是固定的,但文字可以設置字體、字號、顏色,可以設置文字和按鈕的對齊方式。
二、菜單和製表
01 樹元件
常用來瀏覽文件或菜單的層級結構,點擊父節點將收起或展開子節點內容。當一個頁面內有太多交互時,也可以點擊樹節點跳轉到新頁面。
樹節點
移動節點
添加節點/節點圖標
展開收縮圖標
不足之處:樹節點的圖標可以自定義導入,但不能動態隱藏/顯示子節點內容。
02 表格
在設計後臺類數據查詢頁面時,我們需要使用表格元件。
添加/刪除行和列:右鍵單元格或者表格上方和左側的表頭,在彈出菜單中選擇插入行和列,可以選擇插入的位置。
插入行/列
不足之處:表格中的數據是靜態的,無法動態進行添加、刪除和移動,如若需要動態添加行或列的數據,可以使用中繼器;表格不能同時添加多行或多列;不能對錶格中的數據進行排序和篩選。
03 水平菜單和垂直菜單
菜單元件設置好之後,我們經常會將其轉換為母版,其目的是需要在不同頁面之間來回跳轉。
編輯菜單:右鍵菜單,在彈出菜單中選擇後方添加菜單/前方添加菜單/添加子菜單/刪除菜單項。如下圖所示:菜單項填充
設置菜單交互樣式
不足之處:無法為菜單項添加圖標,無法點擊展開子菜單,菜單元件默認是鼠標懸停時展開子菜單。
三、標記
01 快照
當我們在梳理頁面關係或跳轉邏輯時,可以使用快照引用原型頁面幫助我們分析流程。與內部框架不同,快照只能引用內部頁面和母版,而內部框架不僅可以引用內部頁面,也可以引用外部頁面。
引用頁面
快照樣式
02 水平箭頭和垂直箭頭
箭頭與直線的樣式屬性、交互樣式相同,區分在於,箭頭元件默認選擇了一個箭頭樣式,且箭頭線條比直線更粗。具體的樣式屬性請參照
03 便籤與標記
當我們需要為頁面中添加簡短的說明提示時,使用便籤備註則比較方便;截圖時,我們需要標註某一區域時,使用標記元件則較為方便,如我們在講解操作界面時,使用了標記元件。
便籤:Axure 9.0默認為我們提供了黃、藍、青、紫四種顏色的標籤,便籤默認設置了外部陰影,邊距為10。
標記:Axure 9.0默認提供了圓形標記和水滴標記,標記元件填充色為藍色,邊框線為白色,邊距為2。
便籤與標記,本質上是一種添加特殊樣式的形狀類元件,具體的樣式屬性請參照
元件的說明介紹至此已經講解完畢,下一篇文章將講述元件的基本操作。
如果你對原型設計或Axure的學習有興趣,希望系統性的學習Axure知識,掌握更多Axure的使用技巧;或者希望通過臨摹交互案例作品,進一步提升自己的高保真原型設計能力,請點擊關注,後續定期講解Axure更多教程及高保案例分析。