作為一個后臺產品經理，可能沒有太多的UI、UE可設計的，但卻對產品經理的邏輯思路非常考驗。后臺產品經理更多的是和數據打交道，他要對整個產品所使用的數據都非產熟悉，并為后臺使用人員提供簡單便捷的數據管理功能設計。接下來的四章都是關于后臺原型設計的，這一章主要是教大家如何設計全選反選的交互功能。
第一步：拖拉擺放好相關控件
首先，是三個80X30的黑框白底矩形充當按鈕，文字和元件名稱均分別為：“選擇”、“取消”和“反選”。
然后，是一個1X5的表格充當表頭，黑框灰底，從左到右文字分別為：空、“姓名”、“性別”、“年齡”和“電話”。
最后，是一個中繼器，中繼器里面放一個復選框和一個1X5的表格，復選框放在表格的第一格正中間，命名為“選擇”，而表格每個格子的大小都跟表頭一樣，但都是黑框白底的，第二個格子開始，格子從左到右分別命名為“姓名”，“性別”，“年齡”和“電話”。
第二步：為“選擇”、“取消”和“反選”矩形添加交互樣式
三個矩形的交互樣式中，“鼠標懸停”和“鼠標按下”的填充顏色均設置為灰色。
第三步：為“選擇”、“取消”和“反選”矩形添加鼠標點擊時用例
“選擇”：鼠標點擊時，設置“選擇”狀態(tài)為選中；
“取消”：鼠標點擊時，設置“選擇”狀態(tài)為取消選中；
“反選”：鼠標點擊時，設置“選擇”狀態(tài)為切換選中狀態(tài)。
第四步：為中繼器的數據庫添加數據，如下圖：
第五步：為中繼器添加每項加載時用例
用例中設置“姓名”的文本對應中繼器數據庫的“name”列；
用例中設置“性別”的文本對應中繼器數據庫的“sex”列；
用例中設置“年齡”的文本對應中繼器數據庫的“age”列；
用例中設置“電話”的文本對應中繼器數據庫的“tel”列。
點擊預覽，然后點擊“選擇”，“取消”，“反選”三個按鈕，就可以看到全選反選的效果了。同時也可以隨時關注我的個人博客：http://weidublog.com，因為工作過程中有很多這些axure原型設計小技巧的例子，所以我會堅持分享下去，希望對大家有幫助，你們對我的關注就是我的動力。
效果圖：axure原型設計之全選反選
更多原型案例：http://weidublog.com/index.php/2017/03/20/181/
作者：維度
