起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure教程：App移動端多選效果美化
本篇教程將為大家展示如何使用Axure美化App移動端多選效果。
最終效果
分解頁面
制作步驟
首先我們按照上圖在場景中繪制出需要用到的元素，并且將元素單獨(dú)成組（快捷鍵CTRL+G），分別命名為：了解程度=dx / 合作意向=hzz / 下一步策略=cl。
下一步，我們創(chuàng)建交互動作，選擇上圖中第一個界面里：了解程度后的“請選擇”按鈕，雙擊“當(dāng)鼠標(biāo)點(diǎn)擊時”，為其設(shè)置顯示參數(shù)，并且將動畫設(shè)置為“向左滑動”，時間250ms。
使用相同的設(shè)置，將“合作意向”、“下一步策略”后的“請選擇”按鈕進(jìn)行配置。
完成這一步，實(shí)現(xiàn)了點(diǎn)擊不同的按鈕，顯示不同的場景頁面。
下面，我們來設(shè)置多選的效果，也是本例的重點(diǎn)。我們以“了解程度”場景頁面進(jìn)行舉例：
該頁面主要包含了選項(xiàng)的名稱（上圖左側(cè)內(nèi)容），以及點(diǎn)擊后被勾選的顯示元素（上圖右側(cè)內(nèi)容）。
這里我們?yōu)橛覀?cè)5個勾選的效果，分別命名為dx11 ~?dx15。
完成設(shè)置后，我們來創(chuàng)建點(diǎn)擊后顯示勾選效果的特效，選擇圖片左側(cè)的選項(xiàng)名稱，分別創(chuàng)建5個相同的點(diǎn)擊動作。
這里需要注意一點(diǎn)，需要一一對應(yīng)，第一個選項(xiàng)對應(yīng)dx11；第二個選項(xiàng)對應(yīng)dx12,；依此類推。
完成后，我們將dx11~dx15這5個元素設(shè)置透明度為0，并且移動至“了解程度”頁面中，與選項(xiàng)坐標(biāo)相同。
黃色表示元素被設(shè)置了透明度為0，并且層級高于下面的層。
然后我們給“返回”和“保存”按鈕，設(shè)置動作，點(diǎn)擊后，隱藏“了解程度”頁面。
最后我們將“了解程度”頁面所有元素成組，命名為“dx”，同時將“dx”透明度設(shè)置為0，順序設(shè)置為“置于頂層（Ctrl+Shift+]）”，并且將“dx”移動至主頁面，完全覆蓋主頁面。
使用相同的設(shè)置，將“合作意向”、“下一步策略”進(jìn)行配置。
配置完成后，按F5即可進(jìn)行預(yù)覽。
源文件下載
https://pan.baidu.com/s/1dhz3v8F5PJGGlOCs3J5-4A
作者：ZQZ原型師，專注原型設(shè)計(jì)/交互設(shè)計(jì)
本文由 @ZQZ原型師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自作者。
請教一個問題，矩形原件里面放置的什么使它變成√的
你是說“勾”那個圖標(biāo)吧
這是使用font awesome
具體安裝步驟可在本站中搜索查看：http://www.aharts.cn/search-posts?k=axure+font+awesome