編輯導(dǎo)讀：滑動(dòng)選擇器在手機(jī)端是一個(gè)比較常見的組件，主要用于多數(shù)據(jù)情況下的選擇。本文作者從工作實(shí)踐出發(fā)，分享了手機(jī)版滾動(dòng)選擇器的相關(guān)設(shè)計(jì)思路，避免大家走一些不必要的彎路。

效果展示：

準(zhǔn)備：Axure 8（或Axure 9）軟件已安裝，掌握基本的軟件使用，掌握基礎(chǔ)的動(dòng)態(tài)面板知識(shí)。

本教程知識(shí)點(diǎn)：

1. 進(jìn)階的動(dòng)態(tài)面板使用。
2. 基礎(chǔ)函數(shù)應(yīng)用。
3. 基礎(chǔ)中繼器應(yīng)用。

本文以基礎(chǔ)的單一選擇為例（多選擇可以將滑動(dòng)區(qū)域、數(shù)據(jù)集模塊進(jìn)行復(fù)制，調(diào)整滑動(dòng)區(qū)域、數(shù)據(jù)集寬度即可）。

一、功能

鼠標(biāo)拖動(dòng)滑輪進(jìn)行數(shù)據(jù)選擇，滑動(dòng)結(jié)束后，選中數(shù)據(jù)居中。

二、制作方式

1. 制作基礎(chǔ)的靜態(tài)模塊

（注意元件命名，本案例涉及局部變量關(guān)聯(lián)元件，元件命名有利于查找對應(yīng)元件）。

2. 制作上遮蓋、選中、下遮蓋

上遮蓋、下遮蓋制作了一個(gè)模糊的效果，實(shí)際制作為對應(yīng)的矩形，填充漸變色（#FFFFFF（50%）–#FFFFFF（100%）），注意設(shè)置對應(yīng)的角度，下遮蓋為-90°，上遮蓋為90°。（圖以上遮蓋為例，選中漸變左側(cè)。）

選中效果：設(shè)置選中為對應(yīng)的純色矩形即可。（設(shè)置顏色主要是與背景有所區(qū)分，顏色可選APP主色或其它與背景有對比度的顏色）。

3. 制作數(shù)據(jù)集數(shù)據(jù)（中繼器基礎(chǔ)）

（1）繪圖區(qū)域拖入中繼器組件

（2）完成上下模糊區(qū)域

修改中繼器組件內(nèi)部為文本標(biāo)簽元件，調(diào)整字體元件的寬（375px）、高（35px），文本標(biāo)簽元件字體設(shè)置對齊為左右居中，上下居中。

• 默認(rèn)中繼器中是一個(gè)矩形可以手動(dòng)刪除后拖入文本標(biāo)簽元件。
• 技巧：矩形快速變?yōu)槲谋緲?biāo)簽元件：移除矩形背景色、移除矩形描邊即可。

（3）配置中繼器數(shù)據(jù)關(guān)聯(lián)

• 設(shè)置每項(xiàng)加載時(shí)，文字為中繼器對應(yīng)list列表數(shù)據(jù)。
• list：中繼器表頭，自行修改（注：中繼器表頭目前不支持中文）。
• list數(shù)據(jù)：自行填寫（此處數(shù)據(jù)為滾動(dòng)選擇器中的數(shù)據(jù)，可自行進(jìn)行填寫，目前需大于等于7。）

（4）交互整體原理

（5）配置滑動(dòng)交互

實(shí)現(xiàn)原理：整個(gè)滑動(dòng)交互分為兩層。

• 第一層：用戶鼠標(biāo)拖動(dòng)滑動(dòng)區(qū)域動(dòng)態(tài)面板移動(dòng)后，數(shù)據(jù)集動(dòng)態(tài)面板跟隨移動(dòng)。
• 第二層：當(dāng)滑動(dòng)區(qū)域移動(dòng)結(jié)束后，計(jì)算出滑動(dòng)的數(shù)據(jù)距離，給數(shù)據(jù)集動(dòng)態(tài)面板進(jìn)行計(jì)算并進(jìn)行上下對應(yīng)調(diào)整（保證文案居中）。

滑動(dòng)區(qū)域高度計(jì)算：滑動(dòng)區(qū)域比數(shù)據(jù)集區(qū)域高6個(gè)數(shù)據(jù)高度（取決于顯示滑動(dòng)區(qū)域多少）。

所有可以在載入是計(jì)算滑塊區(qū)域的高度：滑塊區(qū)域高度=中繼器數(shù)據(jù)個(gè)數(shù)35+額外高出的高度（635）。

（6）配置滑動(dòng)區(qū)域交互

• 配置滑動(dòng)區(qū)域可拖動(dòng)的范圍
• 按照滑塊區(qū)域頂部為依據(jù)，設(shè)置頂部可移動(dòng)區(qū)域?yàn)?[-滑塊高度+245（7個(gè)滑動(dòng)展示區(qū)域），0]。計(jì)算依據(jù)參考整體交互原理。

（7）配置數(shù)據(jù)移動(dòng)區(qū)域與展示

• 設(shè)置數(shù)據(jù)集跟隨滑動(dòng)區(qū)域移動(dòng)
• 計(jì)算出滑動(dòng)區(qū)域移動(dòng)后，數(shù)據(jù)集需要移動(dòng)多少進(jìn)行最后結(jié)果的調(diào)整。

計(jì)算方式：

滑動(dòng)區(qū)域移動(dòng)的距離取除35（單個(gè)數(shù)據(jù)高度）余數(shù)的整。然后進(jìn)行乘35。然后將數(shù)據(jù)區(qū)域約束在對應(yīng)的滾動(dòng)區(qū)域中。計(jì)算依據(jù)參考整體交互原理。

總結(jié)

過程相對較為復(fù)雜，如果只是日常使用，下載對應(yīng)源文件更改數(shù)據(jù)即可，如果自行學(xué)習(xí)注意以下幾個(gè)交互：

1. 注意滑動(dòng)區(qū)域計(jì)算與數(shù)據(jù)集跟隨計(jì)算；
2. 可以使用文本賦值展示交互的實(shí)際值進(jìn)行修改對應(yīng)的邏輯。

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

題圖來自Unsplash，基于CC0協(xié)議。