后臺(tái)原型設(shè)計(jì)的基礎(chǔ)功能可以總結(jié)為：增刪改查選顯6個(gè)動(dòng)作们妥，即增加、刪除勉吻、修改监婶、查詢、選擇和顯示齿桃，其中增加和刪除是6個(gè)動(dòng)作的核心惑惶。上一章《axure8.0快速入門新手教程：全選反選》是關(guān)于選擇的，而這一章短纵，就好好講講如何使用axure8.0制作后臺(tái)原型的數(shù)據(jù)增加和刪除功能了带污。
第一步：拖拉擺放好相關(guān)控件
1、添加按鈕：白底黑框香到，80X30鱼冀，放在右上角；
2养渴、數(shù)據(jù)表格（表頭）：1行5列雷绢，灰底黑框的表格作為表頭，從左到右每個(gè)格子的文字分別為：姓名理卑、性別翘紊、年齡、電話和操作藐唠，字體全部加粗帆疟；
3鹉究、數(shù)據(jù)表格（表身）：一個(gè)中繼器，中繼器里面是一個(gè)1行5列踪宠，白底黑框的表格自赔，從左到右5個(gè)格子分別命名為“姓名”、“性別”柳琢、“年齡”绍妨、“電話”和“刪除”，其中最右邊一個(gè)格子文字為：刪除柬脸，字體為藍(lán)色加下劃線他去。
4、表單彈框：4個(gè)文本標(biāo)簽倒堕、4個(gè)文本框以及2個(gè)矩形組成的表單彈框灾测，組合命名為“彈出框”，初始狀態(tài)設(shè)置為隱藏垦巴。
（1）4個(gè)文本標(biāo)簽分別為姓名媳搪、性別、年齡和電話骤宣；
（2）4個(gè)文本框分別命名為“姓名”秦爆、“性別”、“年齡”和“電話”涯雅，一一對(duì)應(yīng)放在文本標(biāo)簽右邊鲜结；
（3）2個(gè)矩形中展运，一個(gè)是確認(rèn)按鈕活逆，另一個(gè)是取消按鈕。
第二步：為添加按鈕設(shè)置交互樣式和交互用例
交互樣式為：鼠標(biāo)懸停和鼠標(biāo)按下均設(shè)置填充顏色為灰色拗胜；
交互用例為：鼠標(biāo)單擊時(shí)顯示“彈出框”蔗候。
第三步：為中繼器設(shè)置數(shù)據(jù)庫和交互用例
中繼器中的數(shù)據(jù)庫設(shè)置如下：
為中繼器添加每項(xiàng)加載時(shí)用例
用例中設(shè)置“姓名”的文本對(duì)應(yīng)中繼器數(shù)據(jù)庫的“name”列；
用例中設(shè)置“性別”的文本對(duì)應(yīng)中繼器數(shù)據(jù)庫的“sex”列埂软；
用例中設(shè)置“年齡”的文本對(duì)應(yīng)中繼器數(shù)據(jù)庫的“age”列锈遥；
用例中設(shè)置“電話”的文本對(duì)應(yīng)中繼器數(shù)據(jù)庫的“tel”列。
第四步：為刪除按鈕設(shè)置交互用例
交互用例設(shè)置為：鼠標(biāo)單擊時(shí)刪除this行勘畔。
第五步：為確認(rèn)按鈕設(shè)置交互用例
交互用例設(shè)置為：鼠標(biāo)單擊時(shí)添加一行數(shù)據(jù)并隱藏“彈出框”所灸。
第六步：為取消按鈕設(shè)置交互用例
交互用例設(shè)置為：隱藏“彈出框”。
點(diǎn)擊預(yù)覽炫七，然后點(diǎn)擊添加——填寫表單——點(diǎn)擊確認(rèn)或者點(diǎn)擊刪除爬立，就可以看到添加刪除的效果了。同時(shí)也可以隨時(shí)關(guān)注我的個(gè)人博客：http://weidublog.com万哪，因?yàn)楣ぷ鬟^程中有很多這些axure原型設(shè)計(jì)小技巧的例子侠驯，所以我會(huì)堅(jiān)持分享下去抡秆，希望對(duì)大家有幫助，你們對(duì)我的關(guān)注就是我的動(dòng)力吟策。
更多原型案例：http://weidublog.com/index.php/2017/03/20/181/
作者：維度
轉(zhuǎn)載請(qǐng)注明出處：http://weidublog.com/index.php/2017/04/10/347/
