中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：滑動(dòng)輸入是一種方便快捷的輸入方式，同時(shí)對(duì)數(shù)據(jù)精準(zhǔn)度要求不高，只需要一個(gè)大概的范圍。但由于Axure的基礎(chǔ)原件中沒(méi)有滑動(dòng)輸入的原件，因此本文主要講解如何制作滑動(dòng)輸入元件，分享給大家。

滑動(dòng)輸入主要是應(yīng)用于數(shù)字的輸入，例如價(jià)格、評(píng)分等，這是一種方便快捷的輸入方式，對(duì)數(shù)據(jù)精確度要求不高，只是一個(gè)大概的范圍。常用于服務(wù)評(píng)價(jià)、調(diào)查問(wèn)卷、價(jià)格區(qū)間等等。

由于Axure的基礎(chǔ)原件并沒(méi)有滑動(dòng)輸入的元件，所以本期教程主要介紹如果制作滑動(dòng)輸入的元件，方便我們?nèi)蘸蟮氖褂谩?/p>

一、制作完成后應(yīng)具備以下效果

• 滑動(dòng)滑塊移動(dòng)到對(duì)應(yīng)的位置，按比例顯示對(duì)應(yīng)的數(shù)值。
• 點(diǎn)擊滑動(dòng)條具體位置，滑塊移動(dòng)到該位置，并且顯示對(duì)應(yīng)的數(shù)值。
• 在輸入框輸入具體數(shù)值后，滑塊移動(dòng)到對(duì)應(yīng)的位置。

原型地址：https://sg7sjl.axshare.com/#g=1

二、制作材料

• 滑塊——圓形滑塊，可以用圓形元件制作，邊線選擇粗細(xì)及顏色即可
• 分值——滑塊上方的顯示的數(shù)字，可以通過(guò)矩形右鍵邊框形狀得到，也可以自行需要素材
• 動(dòng)態(tài)面板——將滑塊和分值放在動(dòng)態(tài)面板內(nèi)，因?yàn)锳xure里面只有動(dòng)態(tài)面板可以拖動(dòng)。
• 灰色滑條——作為底部滑條
• 藍(lán)色滑條——作為頂部滑條，后續(xù)添加交互能自動(dòng)根據(jù)滑塊位置移動(dòng)到對(duì)應(yīng)位置。
• 輸入框——輸入類型選擇數(shù)字
• 最大值——用于記錄最大值，案例中為100，該文本是為了復(fù)用性，如果最大值改變，例如變成10或者1000，只需要在上面輸入對(duì)應(yīng)的最大值即可。默認(rèn)隱藏。

材料如上圖所示擺放即可。

三、交互制作

1. 動(dòng)態(tài)面板拖動(dòng)時(shí)交互

動(dòng)態(tài)面板拖動(dòng)時(shí)，我們要實(shí)現(xiàn)以下幾個(gè)效果：

1.1 讓動(dòng)態(tài)面板跟隨鼠標(biāo)拖動(dòng)而移動(dòng)

我們用移動(dòng)事件，選擇跟隨鼠標(biāo)水平移動(dòng)。這里需要注意的是，移動(dòng)是用邊界的。

• 左側(cè)邊界為，滑塊中部圓心的x坐標(biāo)不小于灰色滑條的x坐標(biāo)；
• 右側(cè)邊界為，滑塊中部圓心的y坐標(biāo)不大于灰色滑條最右側(cè)的坐標(biāo)，最右側(cè)的坐標(biāo)其實(shí)就是灰色滑條的x坐標(biāo)+他的寬度。

這里建議大家填寫(xiě)公式不要填寫(xiě)數(shù)字，如果填寫(xiě)數(shù)字的話，換個(gè)位置或者修改尺寸就要重新改這里的數(shù)字，復(fù)用性及差，如果用公式的話就沒(méi)有這樣的煩惱了。

1.2 讓藍(lán)色滑條的尺寸隨著滑塊移動(dòng)和改變

我們用設(shè)置尺寸的交互來(lái)實(shí)現(xiàn)。

首先是藍(lán)色滑條的高度是不變的，所以我們直接用target.height函數(shù)就行了，這里用函數(shù)也是為了復(fù)用性，很多同學(xué)還是習(xí)慣寫(xiě)數(shù)字，這樣做出來(lái)的原型往往復(fù)用性很差，導(dǎo)致工作效率很低，所以還是建議大家能寫(xiě)函數(shù)的勁量寫(xiě)函數(shù)。

然后是藍(lán)色滑條的寬度，它的寬度其實(shí)就是等于滑塊圓心的x坐標(biāo)-灰色滑條的x坐標(biāo)。

1.3 設(shè)置分值和輸入框的文本

最后我們還要根據(jù)滑塊的文字設(shè)置分值和輸入框?qū)?yīng)的文本，那我們?cè)趺从?jì)算出對(duì)應(yīng)的數(shù)字呢，這里用到的是比值，我們用圓心的x坐標(biāo)-灰色滑條的x坐標(biāo)得到距離，用這個(gè)距離除灰色滑塊的寬度得到比例，再用比例乘以最大值，就可以得到對(duì)應(yīng)的分值了。最后我們還要用fixed函數(shù)四舍五入即可。

2. 灰色滑條鼠標(biāo)單擊時(shí)事件

鼠標(biāo)點(diǎn)擊灰色滑條的話，其實(shí)就是將滑塊的原型移動(dòng)到鼠標(biāo)點(diǎn)擊的位置，我們可以通過(guò)Cursor.x獲取鼠標(biāo)x坐標(biāo)的值，然后通過(guò)移動(dòng)事件，將動(dòng)態(tài)面板移動(dòng)到對(duì)應(yīng)的位置即可。

移動(dòng)完成后，其實(shí)我們只需要通過(guò)觸發(fā)事件，觸發(fā)動(dòng)態(tài)面板拖動(dòng)時(shí)事件，這樣藍(lán)色滑條和分值也會(huì)自動(dòng)完成交互。不過(guò)作者發(fā)現(xiàn)Axure9的話好像還有bug，Axure8的話是沒(méi)問(wèn)題的。

如果你用的是axure9的話，那就也不怕，我們剛剛上面已經(jīng)寫(xiě)好了設(shè)置藍(lán)色滑條的尺寸和設(shè)置分值和文本框的文本的事件了，這里直接復(fù)制就可以了。不過(guò)前面用了this函數(shù)的要換成變量的形式即可。

3. 藍(lán)色滑條鼠標(biāo)單擊時(shí)事件

因?yàn)樗{(lán)色滑條在灰色滑條上面，所以如果鼠標(biāo)點(diǎn)擊滑塊左邊區(qū)域的話，就會(huì)點(diǎn)到藍(lán)色滑條。不過(guò)點(diǎn)擊藍(lán)色滑條的交互和點(diǎn)擊灰色滑條交互是完全一樣的，所以我們直接復(fù)制粘貼上面的交互就可以了，在這里就不在重復(fù)敘述了。

4. 分值文本載入時(shí)的交互

因?yàn)槲覀兊幕瑝K一開(kāi)始是在滑條的中部，顯示的分值也應(yīng)該是最大值的一半，例如案例中最大值為100，分值初始顯示的文本就應(yīng)該是50。這里考慮到以后我們有可能改成1000或其他數(shù)字，那你就要將這里的文本改成500。

作者為了一勞永逸，所以用了設(shè)置文本的交互，在這個(gè)元件載入時(shí)，設(shè)置當(dāng)前文本為最大值的一半，這樣設(shè)置以后，就交給電腦自己完成，不用自己再改多一個(gè)地方了。

5. 輸入框的交互

輸入框就是為了滿是用戶對(duì)于填寫(xiě)精準(zhǔn)數(shù)字的需求。

5.1 載入時(shí)事件

和上面分值文本載入時(shí)的原理是一樣，默認(rèn)為最大值的一半，這里就不展開(kāi)了。

5.2 文本改變時(shí)

輸入框的輸入的內(nèi)容是有要求的，第一，它必須是數(shù)字，這里我們可以通過(guò)輸入類型選擇數(shù)字來(lái)解決；第二他輸入的范圍要大于等于0且小于等于最大值文本，所以這里我們就要添加條件，如果輸入框的文本小于0或者大于最大值，我們不能讓他輸入。

具體操作：通過(guò)設(shè)置文本讓輸入框內(nèi)的文字無(wú)效，這里我們通常做法是取消最后一位，例如最大值為100，如果輸入了999，這是設(shè)置文本為99。

這里就運(yùn)用到substr和length函數(shù)，length函數(shù)是這段數(shù)字的長(zhǎng)度（有多少個(gè)字），例如999的長(zhǎng)度為3，我們?cè)谟胹ubstr，取文本第0為到length-1位的數(shù)字就可以了。如果覺(jué)得麻煩的話也可以直接設(shè)置為空值，讓用戶重新填寫(xiě)也可以。

5.3 失去焦點(diǎn)時(shí)

失去焦點(diǎn)時(shí)，即用戶確定了最終數(shù)字，所以我們要做3個(gè)交互：

1. 設(shè)置分值文本，將分值文本設(shè)置為和輸入框一致。
2. 移動(dòng)動(dòng)態(tài)面板，根據(jù)比例移動(dòng)動(dòng)態(tài)面板到指定位置。首先我們用輸入框的文本/最大值的文本得到比值，然后乘以灰色滑條的寬度，再加上灰色滑條的x坐標(biāo)值，這就是滑塊圓心要到達(dá)的具體位置。
3. 設(shè)置藍(lán)色滑條的寬度，其實(shí)上面已經(jīng)計(jì)算出來(lái)了，就是輸入框的文本/最大值的文本得到比值，然后乘以灰色滑條的寬度。

這樣我們就完成了整個(gè)元件了，將他組合在一起，以后就可以直接復(fù)制或者從元件庫(kù)用拖出來(lái)使用了，使用的時(shí)候如果最大值沒(méi)有改變，直接使用即可；如果發(fā)生改變，只需要修改最大值文本就可以了，是不是非常好用呢？

那以上就是高保真滑動(dòng)輸入原型的制作方法了，感興趣的同學(xué)們可以動(dòng)手試試，謝謝您的閱讀。

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

題圖來(lái)自 Unsplash，基于CC0協(xié)議