在新浪微博註冊的時候，通常會讓註冊用戶選擇興趣愛好，這樣就方便愛好給用戶推薦朋友和資訊，今天我們來看看如何通過axure實現興趣選擇功能。通過本練習，主要讓大家掌握全局變量和選中\\取消選中的事件。
效果圖如下：
需求分析
1、興趣節點在選中之後，圓圈變大，背景變色，字體變大變色；
2、興趣節點在取消選中之後，圓圈大小、背景顏色、字體恢復；
3、當有興趣節點選中之後，“下一步”按鈕可用（變藍）；
4、如果沒有興趣節點選中，“下一步”按鈕禁用（灰色）。
原型設計
1、拖入一個矩形框，作為手機背景，當然你有其他的手機背景，也可以拖入，這裡不做贅述；
2、拖入一個圓形框，設置尺寸為60*60 ， 寫上抽菸，其他的興趣框先不拖入；
3、拖入一個按鈕，作為下一步按鈕，設置為禁用；
4、到了這裡，原型就算設計完成了。
交互設計
1、設置全局變量select_amount，用於記錄當前選中的興趣數量，初始值=0；
2、設置興趣選擇的交互樣式，即選擇中的時候，字號變成16，字色變成白色，背景變成綠色；
3、設置興趣選擇的鼠標單擊事件，當鼠標單擊的時候，興趣選擇器在選中和取消選中之間切換；
4、當興趣被選中時候，被選中的數量select_amount+1，設置被選中元件尺寸為80*80；當取消取消選中的時候，被選中數量select_amount-1，設置被選中元件尺寸為60*60；
5、設置“下一步”按鈕的交互樣式，當禁用的時候，設置背景顏色為灰色，字色為黑色；
6、設置興趣框的尺寸改變事件，當尺寸改變時候，判斷如果select_amount>0,設置“下一步”按鈕為啟用；當select_amount<=0 , 設置“下一步”按鈕禁用；
7、複製“抽菸”興趣框，修改為其他興趣愛好，至此，興趣選擇的原型就製作好了。
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
