相關(guān)推薦
您可能對(duì)下面課程感興趣
Axure8.0視頻教程

74小節(jié)已有16721人學(xué)過

UI交互app及axure設(shè)計(jì)教程

84小節(jié)已有76108人學(xué)過

用中繼器做穿梭框
發(fā)布時(shí)間:2022-03-12 10:53 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

穿梭框是常用的一個(gè)選擇器,它使用直觀方式在左右列表框移動(dòng)數(shù)據(jù),實(shí)現(xiàn)數(shù)據(jù)的多項(xiàng)選擇。

所以今天和大家分享如何用中繼器做一個(gè)高保真的穿梭框原型,本教程主要是講解兩個(gè)中繼器的聯(lián)動(dòng)交互,屬于中高級(jí)教程。

1、材料準(zhǔn)備

中繼器(內(nèi)含矩形)*2;背景框*2;左箭頭*1;右箭頭*2;文本*2,如下圖所示擺放;

中繼器內(nèi)的矩形需要取消邊框,然后設(shè)置鼠標(biāo)移入時(shí)填充顏色為灰色,選中時(shí)填充顏色為藍(lán)色,這樣會(huì)有更好的交互感。

背景框置于底層,調(diào)整合適的大小和位置即可。

左邊的為未選項(xiàng)中繼器1,在中繼器表格內(nèi)填寫對(duì)應(yīng)選項(xiàng)文字;然后復(fù)制到右面,為已選項(xiàng)中繼器2,由于已選項(xiàng)默認(rèn)為0,所以需要?jiǎng)h除中繼器所有行,默認(rèn)空值即可。

中繼器1和2均需取消隔離選項(xiàng)組和隔離單選按鈕組效果,兩個(gè)中繼器內(nèi)的矩形需要設(shè)置單選組。

文本元件命名為邏輯1和邏輯2,默認(rèn)為空且隱藏,后續(xù)用于邏輯交互

2、交互設(shè)置

中繼器1每項(xiàng)載入時(shí):

設(shè)置中繼器1內(nèi)矩形文字為列表Column0的值,這個(gè)交互是中繼器默認(rèn)設(shè)置的。

中繼器1內(nèi)矩形鼠標(biāo)單擊時(shí):

選中當(dāng)前元件:因?yàn)橹拔覀冊O(shè)置了選中的顏色變藍(lán),所以這樣做以后,就可以知道選中了那一項(xiàng),而且因?yàn)樵O(shè)置了單選組,所以也不會(huì)同時(shí)選中多個(gè)。

設(shè)置邏輯1的文本為列表Column0的值:這里其實(shí)就是把選中的值記錄下來,方便后面左右箭頭穿梭的操作

中繼器2每項(xiàng)加載時(shí)及內(nèi)部矩形鼠標(biāo)單擊時(shí):

交互和中繼器1一致,不過需要注意的是,中繼器2里面設(shè)置的文本是邏輯2的文本。

右箭頭鼠標(biāo)單擊時(shí):

這里需要判斷邏輯1的文字是否為空,如果為空就是還沒選中,就不發(fā)生交互,如果不為空,就需要做一個(gè)增加行和刪除行的交互。

增加行:在中繼器2里增加行,增加的值為邏輯1文本值

刪除行:刪除中繼器1里的和邏輯1文本值相同的行

完成上述兩個(gè)交互之后,我們還需要清空邏輯1的文本,因?yàn)槿绻磺蹇,我們點(diǎn)右箭頭就可以無限增加同一個(gè)選項(xiàng),所以這里需要清空邏輯1的文本值。

左箭頭鼠標(biāo)單擊時(shí):

左箭頭和右箭頭的交互其實(shí)是一個(gè)道理的,首先需要判斷邏輯2的文本是否為空,如果為空就是還沒選中,就不發(fā)生交互,如果不為空,就需要做一個(gè)增加行和刪除行的交互,不過這里和中繼器1的交互是反過來的

增加行:在中繼器1里增加行,增加的值為邏輯2文本值

刪除行:刪除中繼器2里的和邏輯2文本值相同的行

設(shè)置邏輯2的文本值為空值

那這樣一個(gè)實(shí)用的穿梭框原型就制作完成了。

完成之后,以后我們需要使用的話,只需要填寫在左邊中繼器1的表格里填寫選項(xiàng)文字即可,方便使用,小提示,如果選項(xiàng)多的話可以在excel表格復(fù)制粘貼到中繼器表格里哦

UI交互app及axure設(shè)計(jì)教程
我要自學(xué)網(wǎng)商城 ¥50 元
進(jìn)入購買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
相關(guān)推薦
您可能對(duì)下面課程感興趣
Axure8.0視頻教程

74小節(jié)已有16721人學(xué)過

UI交互app及axure設(shè)計(jì)教程

84小節(jié)已有76108人學(xué)過

分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫 程序開發(fā) 網(wǎng)頁設(shè)計(jì) 會(huì)計(jì)課程 興趣成長 AIGC