本篇教程將為大家展示如何使用Axure美化App移動端單選效果。

最終效果

知識點

font awesome：如demo中所示，界面下方三個按鈕中的圖片，都是使用font awesome實現(xiàn)的效果。

具體安裝步驟可在本站中搜索查看：點擊這里

制作步驟

首先我們按照設(shè)計圖排版繪制出最終靜態(tài)效果：

首先我們介紹一下效果實現(xiàn)的思路，當點擊“A單選元件”后，顯示“A選中元件”，并且將“B選中元件”隱藏；當點擊“B單選元件”后，顯示“B選中元件”，并且將“A選中元件”隱藏。

第一步我們來為原件命名，用于交互使用，分別命名為“A單選元件”、“B單選元件”、“A選中元件”、“B選中元件”。

下面我們來創(chuàng)建交互動作，首先將“A選中元件、B選中元件”隱藏，選擇“A單選元件”，在交互面板，雙擊“鼠標單擊時”，打開交互面板，進行設(shè)置。

依次選擇“顯示/隱藏”->“A選中元件”->“顯示”->“置于頂層”：

完成了“A選中元件”的顯示設(shè)置，我們來將“B選中元件”進行隱藏設(shè)置：

依次選擇“顯示/隱藏”->“B選中元件”->“隱藏”。

完成設(shè)置后，保存，按F5查看特效，現(xiàn)在已經(jīng)完成了點擊“A選中元件”后，顯示單選的效果。

使用相同的方法，對“B選中元件”進行設(shè)置，這里就不詳細描述了，只將設(shè)置截圖貼出。

至此，我們完成了本教程的所有設(shè)置，按F5即可預(yù)覽。

源文件下載

https://pan.baidu.com/s/1l674tB7zJRZnjX7GvpFHDQ

下篇預(yù)告

下一篇教程，我們將給大家介紹“App移動端多選效果美化”，可以先預(yù)覽下效果。

作者：ZQZ原型師，專注原型設(shè)計/交互設(shè)計

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

題圖來自作者。