上一章已經講了增加和刪除的原型案例,具體可查看《axure8.0快速入門新手教程:添加刪除》,而這章要講的修改和查詢,主要是對增加和刪除起到一個輔助作用。為什么說是輔助呢?因為沒有了修改,可以用先刪除后增加的方法;因為沒有了查詢,可以用肉眼一條一條數據查看。但是有了它們,將會讓數據管理起來更加簡單便捷。
第一步:拖拉擺放好相關控件
1、搜索框和搜索按鈕:搜索框是一個170X29的文本框,命名為“搜索框”,而搜索按鈕為白底黑框,80X30的矩形元件,放在“搜索框”右邊;
2、數據表格(表頭):1行5列,灰底黑框的表格作為表頭,從左到右每個格子的文字分別為:姓名、性別、年齡、電話和操作,字體全部加粗;
3、數據表格(表身):一個中繼器,中繼器里面是一個1行5列,白底黑框的表格,從左到右5個格子分別命名為“姓名”、“性別”、“年齡”、“電話”和“修改”,其中最右邊一個格子文字為:修改,字體為藍色加下劃線。
4、表單彈框:4個文本標簽、4個文本框以及2個矩形組成的表單彈框,組合命名為“彈出框”,初始狀態設置為隱藏。
(1)4個文本標簽分別為姓名、性別、年齡和電話;
(2)4個文本框分別命名為“姓名”、“性別”、“年齡”和“電話”,一一對應放在文本標簽右邊;
(3)2個矩形中,一個是確認按鈕,另一個是取消按鈕。
第二步:為搜索按鈕設置交互樣式和交互用例
交互樣式為:鼠標懸停和鼠標按下均設置填充顏色為灰色;
交互用例為:鼠標單擊時,如果“搜索框”為空,那么就移除中繼器全部的篩選條件,如果“搜索框”不為空,那么就添加“搜索框”文字等于“姓名”的搜索條件,同時移除其他的篩選條件。
第三步:為中繼器設置數據庫和交互用例
中繼器中的數據庫設置如下:
為中繼器添加每項加載時用例
用例中設置“姓名”的文本對應中繼器數據庫的“name”列;
用例中設置“性別”的文本對應中繼器數據庫的“sex”列;
用例中設置“年齡”的文本對應中繼器數據庫的“age”列;
用例中設置“電話”的文本對應中繼器數據庫的“tel”列。
第四步:為修改按鈕設置鼠標單擊時用例
1、標記this行;
2、
設置“姓名”的文本為中繼器數據庫“name”列的值;
設置“性別”的文本為中繼器數據庫“sex”列的值;
設置“年齡”的文本為中繼器數據庫“age”列的值;
設置“電話”的文本為中繼器數據庫“tel”列的值。
3、顯示“彈出框”。
第五步:為確認按鈕設置鼠標單擊時用例
1、更新已標記行的每列對應數據
2、取消中繼器的全部標記;
3、隱藏“彈出框”。
第六步:為取消按鈕設置交互用例
交互用例設置為:隱藏“彈出框”。
點擊預覽,然后“輸入名字——點擊搜索”或者“點擊修改——填寫表單——點擊確認”,就可以看到修改查詢的效果了。同時也可以隨時關注我的個人博客:http://weidublog.com,因為工作過程中有很多這些axure原型設計小技巧的例子,所以我會堅持分享下去,希望對大家有幫助,你們對我的關注就是我的動力。
效果圖:axure原型設計之修改查詢
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/
作者:維度