后臺原型設(shè)計的基礎(chǔ)功能可以總結(jié)為：增刪改查選顯6個動作，即增加、刪除、修改、查詢、選擇和顯示，其中增加和刪除是6個動作的核心。上一章《axure8.0快速入門新手教程：全選反選》是關(guān)于選擇的，而這一章，就好好講講如何使用axure8.0制作后臺原型的數(shù)據(jù)增加和刪除功能了。
第一步：拖拉擺放好相關(guān)控件
1、添加按鈕：白底黑框，80X30，放在右上角；
2、數(shù)據(jù)表格（表頭）：1行5列，灰底黑框的表格作為表頭，從左到右每個格子的文字分別為：姓名、性別、年齡、電話和操作，字體全部加粗；
3、數(shù)據(jù)表格（表身）：一個中繼器，中繼器里面是一個1行5列，白底黑框的表格，從左到右5個格子分別命名為“姓名”、“性別”、“年齡”、“電話”和“刪除”，其中最右邊一個格子文字為：刪除，字體為藍(lán)色加下劃線。
4、表單彈框：4個文本標(biāo)簽、4個文本框以及2個矩形組成的表單彈框，組合命名為“彈出框”，初始狀態(tài)設(shè)置為隱藏。
（1）4個文本標(biāo)簽分別為姓名、性別、年齡和電話；
（2）4個文本框分別命名為“姓名”、“性別”、“年齡”和“電話”，一一對應(yīng)放在文本標(biāo)簽右邊；
（3）2個矩形中，一個是確認(rèn)按鈕，另一個是取消按鈕。
第二步：為添加按鈕設(shè)置交互樣式和交互用例
交互樣式為：鼠標(biāo)懸停和鼠標(biāo)按下均設(shè)置填充顏色為灰色；
交互用例為：鼠標(biāo)單擊時顯示“彈出框”。
第三步：為中繼器設(shè)置數(shù)據(jù)庫和交互用例
中繼器中的數(shù)據(jù)庫設(shè)置如下：
為中繼器添加每項(xiàng)加載時用例
用例中設(shè)置“姓名”的文本對應(yīng)中繼器數(shù)據(jù)庫的“name”列；
用例中設(shè)置“性別”的文本對應(yīng)中繼器數(shù)據(jù)庫的“sex”列；
用例中設(shè)置“年齡”的文本對應(yīng)中繼器數(shù)據(jù)庫的“age”列；
用例中設(shè)置“電話”的文本對應(yīng)中繼器數(shù)據(jù)庫的“tel”列。
第四步：為刪除按鈕設(shè)置交互用例
交互用例設(shè)置為：鼠標(biāo)單擊時刪除this行。
第五步：為確認(rèn)按鈕設(shè)置交互用例
交互用例設(shè)置為：鼠標(biāo)單擊時添加一行數(shù)據(jù)并隱藏“彈出框”。
第六步：為取消按鈕設(shè)置交互用例
交互用例設(shè)置為：隱藏“彈出框”。
點(diǎn)擊預(yù)覽，然后點(diǎn)擊添加——填寫表單——點(diǎn)擊確認(rèn)或者點(diǎn)擊刪除，就可以看到添加刪除的效果了。同時也可以隨時關(guān)注我的個人博客：http://weidublog.com，因?yàn)楣ぷ鬟^程中有很多這些axure原型設(shè)計小技巧的例子，所以我會堅持分享下去，希望對大家有幫助，你們對我的關(guān)注就是我的動力。
更多原型案例：http://weidublog.com/index.php/2017/03/20/181/
作者：維度
轉(zhuǎn)載請注明出處：http://weidublog.com/index.php/2017/04/10/347/
