Axure 教程：興趣選擇

14 評(píng)論 8747 瀏覽 35 收藏 4 分鐘

在新浪微博注冊(cè)的時(shí)候，通常會(huì)讓注冊(cè)用戶選擇興趣愛(ài)好，這樣就方便愛(ài)好給用戶推薦朋友和資訊，今天我們來(lái)看看如何通過(guò)axure實(shí)現(xiàn)興趣選擇功能。通過(guò)本練習(xí)，主要讓大家掌握全局變量和選中\(zhòng)取消選中的事件。

效果圖如下：

需求分析

1、興趣節(jié)點(diǎn)在選中之后，圓圈變大，背景變色，字體變大變色；

2、興趣節(jié)點(diǎn)在取消選中之后，圓圈大小、背景顏色、字體恢復(fù)；

3、當(dāng)有興趣節(jié)點(diǎn)選中之后，“下一步”按鈕可用（變藍(lán)）；

4、如果沒(méi)有興趣節(jié)點(diǎn)選中，“下一步”按鈕禁用（灰色）。

原型設(shè)計(jì)

1、拖入一個(gè)矩形框，作為手機(jī)背景，當(dāng)然你有其他的手機(jī)背景，也可以拖入，這里不做贅述；

2、拖入一個(gè)圓形框，設(shè)置尺寸為60*60 ，?寫(xiě)上抽煙，其他的興趣框先不拖入；

3、拖入一個(gè)按鈕，作為下一步按鈕，設(shè)置為禁用；

4、到了這里，原型就算設(shè)計(jì)完成了。

交互設(shè)計(jì)

1、設(shè)置全局變量select_amount，用于記錄當(dāng)前選中的興趣數(shù)量，初始值=0；

2、設(shè)置興趣選擇的交互樣式，即選擇中的時(shí)候，字號(hào)變成16，字色變成白色，背景變成綠色；

3、設(shè)置興趣選擇的鼠標(biāo)單擊事件，當(dāng)鼠標(biāo)單擊的時(shí)候，興趣選擇器在選中和取消選中之間切換；

4、當(dāng)興趣被選中時(shí)候，被選中的數(shù)量select_amount+1，設(shè)置被選中元件尺寸為80*80；當(dāng)取消取消選中的時(shí)候，被選中數(shù)量select_amount-1，設(shè)置被選中元件尺寸為60*60；

5、設(shè)置“下一步”按鈕的交互樣式，當(dāng)禁用的時(shí)候，設(shè)置背景顏色為灰色，字色為黑色；

6、設(shè)置興趣框的尺寸改變事件，當(dāng)尺寸改變時(shí)候，判斷如果select_amount>0,設(shè)置“下一步”按鈕為啟用；當(dāng)select_amount<=0?, 設(shè)置“下一步”按鈕禁用；

7、復(fù)制“抽煙”興趣框，修改為其他興趣愛(ài)好，至此，興趣選擇的原型就制作好了。

 

本文由 @馬白龍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議

更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
大力出奇跡
私域運(yùn)營(yíng)解決方案提和落地
11篇作品 62390總閱讀量
08-224057 瀏覽
稅務(wù)管理系統(tǒng)測(cè)試方法論
03-269459 瀏覽
電商運(yùn)營(yíng)：如何通過(guò)文本分析進(jìn)行機(jī)會(huì)點(diǎn)挖掘
10-122518 瀏覽
PMO基于OKR價(jià)值交付的敏捷實(shí)踐
05-106475 瀏覽
產(chǎn)品經(jīng)理要如何做好產(chǎn)業(yè)鏈分析，并繪制產(chǎn)業(yè)鏈結(jié)構(gòu)圖？
08-023055 瀏覽
漲價(jià)被罵上熱搜，“共享刺客”該何去何從？
評(píng)論
評(píng)論請(qǐng)登錄

  1. 沒(méi)太看懂 求源文件

    來(lái)自上海 回復(fù)

  2. 點(diǎn)了三個(gè)按鈕才變?yōu)閱⒂?，全局變量?，可判斷條件寫(xiě)的是大于0,o(╥﹏╥)o

    來(lái)自北京 回復(fù)

  3. 我想問(wèn)為什么我把所有的興趣節(jié)點(diǎn)組合在一起之后，點(diǎn)興趣節(jié)點(diǎn)它的位置都變啊 就是排版會(huì)亂 請(qǐng)問(wèn)有什么解決方法嗎

    回復(fù)

  4. 啊這，從第三步開(kāi)始就沒(méi)找到……請(qǐng)問(wèn)用的是axure9嗎

    來(lái)自北京 回復(fù)

  5. 搞定

    來(lái)自浙江 回復(fù)

  6. 有這么復(fù)雜？？？？？？

    來(lái)自湖北 回復(fù)

  7. 同樣求問(wèn)，設(shè)置全局變量select_amount這個(gè)能不能講詳細(xì)一點(diǎn)，在后面添加交互那邊設(shè)置時(shí)添加了變量，但是沒(méi)有選中時(shí)，禁用下一步?jīng)]有變色（抱拳）

    來(lái)自上海 回復(fù)

    1. 我發(fā)現(xiàn)只有預(yù)覽一進(jìn)去的時(shí)候，這個(gè)按鈕一定是藍(lán)色的，先選幾個(gè)然后全部取消后才會(huì)變灰色禁用狀態(tài)

      來(lái)自上海 回復(fù)

  8. 能不能用axure9再描述一遍呢？不然用不了呢

    來(lái)自廣東 回復(fù)

    1. 這個(gè)就是rp9吧

      回復(fù)

  9. 表示第六步也沒(méi)明白

    來(lái)自貴州 回復(fù)

  10. 點(diǎn)擊興趣 “下一步”按鈕可用 再點(diǎn)擊興趣來(lái)取消選中 但按鈕沒(méi)有變?yōu)榻?請(qǐng)問(wèn)是哪一步出錯(cuò)了

    來(lái)自江蘇 回復(fù)

    1. 你可以刷新看看

      回復(fù)

    2. 出現(xiàn)同樣的問(wèn)題

      來(lái)自貴州 回復(fù)