起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程：App移動(dòng)端單選效果美化
本篇教程將為大家展示如何使用Axure美化App移動(dòng)端單選效果。
最終效果
知識(shí)點(diǎn)
font awesome：如demo中所示，界面下方三個(gè)按鈕中的圖片，都是使用font awesome實(shí)現(xiàn)的效果。
具體安裝步驟可在本站中搜索查看：點(diǎn)擊這里
制作步驟
首先我們按照設(shè)計(jì)圖排版繪制出最終靜態(tài)效果：
首先我們介紹一下效果實(shí)現(xiàn)的思路，當(dāng)點(diǎn)擊“A單選元件”后，顯示“A選中元件”，并且將“B選中元件”隱藏；當(dāng)點(diǎn)擊“B單選元件”后，顯示“B選中元件”，并且將“A選中元件”隱藏。
第一步我們來為原件命名，用于交互使用，分別命名為“A單選元件”、“B單選元件”、“A選中元件”、“B選中元件”。
下面我們來創(chuàng)建交互動(dòng)作，首先將“A選中元件、B選中元件”隱藏，選擇“A單選元件”，在交互面板，雙擊“鼠標(biāo)單擊時(shí)”，打開交互面板，進(jìn)行設(shè)置。
依次選擇“顯示/隱藏”->“A選中元件”->“顯示”->“置于頂層”：
完成了“A選中元件”的顯示設(shè)置，我們來將“B選中元件”進(jìn)行隱藏設(shè)置：
依次選擇“顯示/隱藏”->“B選中元件”->“隱藏”。
完成設(shè)置后，保存，按F5查看特效，現(xiàn)在已經(jīng)完成了點(diǎn)擊“A選中元件”后，顯示單選的效果。
使用相同的方法，對(duì)“B選中元件”進(jìn)行設(shè)置，這里就不詳細(xì)描述了，只將設(shè)置截圖貼出。
至此，我們完成了本教程的所有設(shè)置，按F5即可預(yù)覽。
源文件下載
https://pan.baidu.com/s/1l674tB7zJRZnjX7GvpFHDQ
下篇預(yù)告
下一篇教程，我們將給大家介紹“App移動(dòng)端多選效果美化”，可以先預(yù)覽下效果。
作者：ZQZ原型師，專注原型設(shè)計(jì)/交互設(shè)計(jì)
本文由 @ZQZ原型師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自作者。
- 目前還沒評(píng)論，等你發(fā)揮！
