作為一個(gè)后臺(tái)產(chǎn)品經(jīng)理，可能沒有太多的UI、UE可設(shè)計(jì)的，但卻對(duì)產(chǎn)品經(jīng)理的邏輯思路非常考驗(yàn)。后臺(tái)產(chǎn)品經(jīng)理更多的是和數(shù)據(jù)打交道，他要對(duì)整個(gè)產(chǎn)品所使用的數(shù)據(jù)都非產(chǎn)熟悉，并為后臺(tái)使用人員提供簡(jiǎn)單便捷的數(shù)據(jù)管理功能設(shè)計(jì)。接下來(lái)的四章都是關(guān)于后臺(tái)原型設(shè)計(jì)的，這一章主要是教大家如何設(shè)計(jì)全選反選的交互功能。
第一步：拖拉擺放好相關(guān)控件
首先，是三個(gè)80X30的黑框白底矩形充當(dāng)按鈕，文字和元件名稱均分別為：“選擇”、“取消”和“反選”。
然后，是一個(gè)1X5的表格充當(dāng)表頭，黑框灰底，從左到右文字分別為：空、“姓名”、“性別”、“年齡”和“電話”。
最后，是一個(gè)中繼器，中繼器里面放一個(gè)復(fù)選框和一個(gè)1X5的表格，復(fù)選框放在表格的第一格正中間，命名為“選擇”，而表格每個(gè)格子的大小都跟表頭一樣，但都是黑框白底的，第二個(gè)格子開始，格子從左到右分別命名為“姓名”，“性別”，“年齡”和“電話”。
第二步：為“選擇”、“取消”和“反選”矩形添加交互樣式
三個(gè)矩形的交互樣式中，“鼠標(biāo)懸?！焙汀笆髽?biāo)按下”的填充顏色均設(shè)置為灰色。
第三步：為“選擇”、“取消”和“反選”矩形添加鼠標(biāo)點(diǎn)擊時(shí)用例
“選擇”：鼠標(biāo)點(diǎn)擊時(shí)，設(shè)置“選擇”狀態(tài)為選中；
“取消”：鼠標(biāo)點(diǎn)擊時(shí)，設(shè)置“選擇”狀態(tài)為取消選中；
“反選”：鼠標(biāo)點(diǎn)擊時(shí)，設(shè)置“選擇”狀態(tài)為切換選中狀態(tài)。
第四步：為中繼器的數(shù)據(jù)庫(kù)添加數(shù)據(jù)，如下圖：
第五步：為中繼器添加每項(xiàng)加載時(shí)用例
用例中設(shè)置“姓名”的文本對(duì)應(yīng)中繼器數(shù)據(jù)庫(kù)的“name”列；
用例中設(shè)置“性別”的文本對(duì)應(yīng)中繼器數(shù)據(jù)庫(kù)的“sex”列；
用例中設(shè)置“年齡”的文本對(duì)應(yīng)中繼器數(shù)據(jù)庫(kù)的“age”列；
用例中設(shè)置“電話”的文本對(duì)應(yīng)中繼器數(shù)據(jù)庫(kù)的“tel”列。
點(diǎn)擊預(yù)覽，然后點(diǎn)擊“選擇”，“取消”，“反選”三個(gè)按鈕，就可以看到全選反選的效果了。同時(shí)也可以隨時(shí)關(guān)注我的個(gè)人博客：http://weidublog.com，因?yàn)楣ぷ鬟^(guò)程中有很多這些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/09/334/
