滑動選擇器算是APP原型設計中非常常見的一個功能，但多數(shù)人只是做了靜態(tài)效果，少有做交互動效的。這篇文章，作者就分享了如何設計動效，供大家參考。

這期內(nèi)容，我們來探討Axure中二級滑動選擇器設計與交互技巧。

二級滑動選擇器

創(chuàng)建滑動選擇器所需的元件

1.在元件庫中拖出兩個中繼器元件。

2.選中中繼器元件，樣式窗格中分別命名，“左邊，右邊”

3.選中“左邊”一級選擇中繼器元件，實現(xiàn)上下拖動的交互，中繼器沒有拖拽交互，只有動態(tài)面板才有拖拽交互，所以需要右鍵將中繼器轉(zhuǎn)為動態(tài)面板。

做交互设计10年，我为何转岗到产品经理？

真正转岗之后，我发现很多工作还是超出了自己的想象。产品经理的工作确实比较杂。理论上，产品经理的工作包括了产品的方方面面，从市场研究、用户调研、数据分析...

查看详情 >

選中（“左邊”一級選擇器）動態(tài)面板，在交互窗格中新建交互，拖動時，移動，當前，跟隨垂直拖動。

預覽效果，點擊預覽，在預覽頁面，選中“左邊”一級選擇中繼器元件可以實現(xiàn)拖動效果。

限制動態(tài)面板的顯示區(qū)域，讓它只顯示中間的選項

1.選中動態(tài)面板，右鍵，將動態(tài)面板再轉(zhuǎn)為動態(tài)面板，在概要窗格選中第一層動態(tài)面板命名為左邊，第二層動態(tài)面板命名為向左移動。

2.選中第一層“左邊”動態(tài)面板，在樣式窗格將高度設為30，只顯示一行，將填充顏色設置為灰色（#F2F2F2）

3.選中第一層“左邊”動態(tài)面板，雙擊到中繼器內(nèi)部矩形，將填充色設置為透明，線寬設置為 0。

預覽效果，點擊預覽，在預覽頁面，“左邊”一級選擇中繼器元件就實現(xiàn)了只顯示一行，并且有拖動的效果。

給拖動效果添加邊界

1.在第二層（向左移動）動態(tài)面板交互窗格，拖動時，移動交互中點擊更多選項，添加界限，頂部 大于等于、底部 小于等于

2.選中頂部 大于等于 條件，插入變量或函數(shù) [[30 – This.height]] ，底部 小于等于 條件，插入變量或函數(shù) [[This.height]] 。

看一下 完整交互。

預覽效果，點擊預覽，在預覽頁面，“左邊”一級選擇中繼器元件在拖動時頂部和底部都增加了邊界，拖動到1時，無法繼續(xù)向頂部拖動，拖動到3時，無法繼續(xù)向底部拖動。

選中“左邊”一級選擇中繼器元件，在樣式窗格中添加兩行，效果也是一樣的。

判斷選擇值，確認所選項

1.在第二層動態(tài)面板交互窗格中新建拖動結束時，設置變量值，選擇變量，添加變量 leftindex

2.設置leftindex變量值 值 為 插入變量或函數(shù)[[(-This.y/30).toFixed(0)+1]]

看一下完整交互。

3.修正選擇，添加動作，移動 當前 到達 y軸插入變量或函數(shù) [[-(leftindex-1)*30]] 線性 500毫秒

預覽效果，點擊預覽，在預覽頁面，“左邊”一級選擇中繼器元件在拖動到選項三分之一時會修正選項。

根據(jù)一級選擇器的選擇結果篩選二級選擇器的數(shù)據(jù)

1.選中二級選擇器（右邊），雙擊中繼器元件，在樣式窗格 數(shù)據(jù)表中增加linkleft 列，并補充數(shù)據(jù)。

2.添加關聯(lián)性，選中一級選擇器，在概要窗格點擊向左移動動態(tài)面板交互窗格，添加動作，等待 500毫秒，添加篩選 右邊

3.添加動作 更新行 左邊 插入變量或函數(shù) [[TargetItem.index == leftindex]]

4.在概要窗格中 選中“左邊”中繼器元件，樣式窗格 數(shù)據(jù) 添加列 select 列

5.回到 更新行 +選擇列 select 值 1 ，并將更新行交互移動到 設置變量值下

6.在概要窗格中 選中 “左邊”中繼器元件，在交互窗格中添加動作 設置變量值，選擇變量，添加全局變量 leftselect

7.選擇變量 leftselect 值 插入變量或函數(shù) [[Item.Column0]]

8.添加判斷條件 ，啟用情形判斷

情形1：如果”[[ltem.index]]” ==”[[leftindex]]”

情形2：否則 如果”真” 復制粘貼 設置文本 交互 。

9.在概要窗格選中 “向左移動” 動態(tài)面板，回到交互窗格 添加篩選交互 規(guī)則 插入變量或函數(shù) [[TargetItem.linkeft == leftselect]]

預覽效果，點擊預覽，在預覽頁面，拖動“左邊”一級選擇中元件右邊選擇器會同步篩選結果。

右邊選擇器移動效果

1.選中右邊選擇器中繼器元件，右鍵轉(zhuǎn)為動態(tài)面板，在交互窗格 添加 拖動時，移動 當前 跟隨垂直拖動，跟左側是一樣的。

2.新建交互 拖動結束時 移動 當前 到達

3.選中當前元件，右鍵，轉(zhuǎn)為動態(tài)面板 ，復制 “向左移動”動態(tài)面板 設置變量值、移動交互粘貼到第二層動態(tài)面板

4.選中 設置變量值 交互 目標 添加變量 rightindex

將變量值 目標 改為 rightindex 其他不變

5.選中 移動 交互 將y軸全局變量 [[-(leftindex-1)*30]] 替換為 [[-(rightindex-1)*30]]

6.添加拖動邊界

選中 拖動時交互，點擊更多選項 添加邊界，頂部 大于等于 插入變量或函數(shù) [[30-This.height]]， 底部 小于等于 插入變量或函數(shù) [[This.height]]

選中右邊第一層動態(tài)面板，在樣式窗格中，設置高度為 30，設置填充顏色為灰色 （#F2F2F2）

選中“右邊”動態(tài)面板，雙擊進入中繼器矩形，填充顏色設置為透明，線寬設為0。

預覽效果，點擊預覽，在預覽頁面，拖動“左邊”一級選擇中元件右邊選擇器顯示效果和左邊同步。

添加默認選擇

1.在項目列表中 選擇 全局變量 選中l(wèi)eftindex 設置默認值為 1

2.選中右邊選擇器第一層動態(tài)面板，在交互窗格命名為 右邊，第二層動態(tài)面板命名為向右移動。

3.在概要窗格中 選中“向右移動”新建交互 載入時 添加篩選 右邊 規(guī)則 插入變量或函數(shù) [[TargetItem.linkleft == leftselect]]

預覽效果，點擊預覽，在預覽頁面，拖動“左邊”一級選擇中元件，右邊選擇器只顯示左邊選項對應結果。

1.在中繼器 樣式 窗格 數(shù)據(jù)表中 可以修改一級選擇器和二級選擇器的內(nèi)容，*二級選擇器的內(nèi)容需要和一級選擇器的內(nèi)容有關聯(lián)。

2.在概要窗格中 選中 “向左移動” 在交互窗格中 添加 移動 向右右邊 到達 （0,0）交互 。

預覽效果，點擊預覽，在預覽頁面，拖動“左邊”一級選擇中元件，右邊選擇器會同步顯示對應結果。

預覽地址：https://hfez21.axshare.com