在原型設(shè)計(jì)中，利用函數(shù)都可以實(shí)現(xiàn)哪些交互呢？吸附導(dǎo)航、數(shù)學(xué)計(jì)算、音量/進(jìn)度滑竿、文字計(jì)數(shù)等等這些交互效果都可以實(shí)現(xiàn)。那么具體怎么在Axure中運(yùn)用函數(shù)呢？看看文中的案例分析吧，相信你一定有所收獲！

一、知乎詳情導(dǎo)航

首先請(qǐng)大家打開知乎App，點(diǎn)擊任意一個(gè)問題，進(jìn)入回答詳情頁，觀察知乎詳情頁中頂部導(dǎo)航的效果。

默認(rèn)情況下，頂部導(dǎo)航為搜索框樣式，向上滾動(dòng)頁面，查看回答內(nèi)容時(shí)，頂部導(dǎo)航發(fā)生了變化，變成了提問內(nèi)容；向下回滾頁面至第一屏?xí)r，導(dǎo)航欄又變成了搜索框。從始至終，導(dǎo)航欄始終固定在窗口頂部。

為了節(jié)省時(shí)間讓大家能夠盡快掌握原型制作的方法，這里就不手動(dòng)繪制線框圖了，我們直接從知乎App中截取頁面作為基本素材。

這里至少需要兩張圖片：第一張是頂部導(dǎo)航為搜索框的圖片，第二張是頂部導(dǎo)航為問題內(nèi)容的圖片。

截取第一張圖片時(shí)，最好能截取長屏，如果你的手機(jī)不支持長屏截取，你需要多截取幾屏圖片了。如果頁面長度不夠，將無法在瀏覽器中滾動(dòng)窗口。

下面我們開始原型的制作：

1. 拖動(dòng)圖像元件至設(shè)計(jì)區(qū)域，雙擊圖像元件從本地導(dǎo)入第一張圖片。由于手機(jī)像素較高，導(dǎo)入到PC中，圖片尺寸較大，建議等比例縮小圖片。

鎖定寬高比例，寬度設(shè)置為375即可。右鍵點(diǎn)擊圖片，選擇切割圖片，將導(dǎo)航欄區(qū)域和回答區(qū)域分割。

2. 右鍵點(diǎn)擊導(dǎo)航欄，選擇轉(zhuǎn)換為動(dòng)態(tài)面板，命名為頂部導(dǎo)航。在樣式面板中，選擇自適應(yīng)內(nèi)容，點(diǎn)擊固定到瀏覽器，設(shè)置固定屬性，水平固定選擇左側(cè)，垂直固定選擇頂部，勾選始終保持頂層（僅瀏覽器中有效）。

設(shè)置動(dòng)態(tài)面板樣式.png

3. 拖動(dòng)圖像元件至設(shè)計(jì)區(qū)域，雙擊元件從本地導(dǎo)入第二張圖片。鎖定寬高比例，寬度值設(shè)計(jì)為375，完成圖片等比縮放。

右鍵點(diǎn)擊選擇裁剪圖片，保留導(dǎo)航欄區(qū)域，將多余區(qū)域裁減掉。

雙擊第2步的動(dòng)態(tài)面板，點(diǎn)擊添加狀態(tài)，將第3步的導(dǎo)航欄圖片剪切移入至狀態(tài)2面板中，點(diǎn)擊右上角關(guān)閉按鈕，退出編輯狀態(tài)。

4. 點(diǎn)擊頁面空白處，點(diǎn)擊新建交互，選擇“窗口向下滾動(dòng)時(shí)”事件（對(duì)應(yīng)頁面向上滾動(dòng)），選擇動(dòng)作“設(shè)置面板狀態(tài)”，選擇動(dòng)態(tài)面板，選擇狀態(tài)2（導(dǎo)航欄為問題內(nèi)容），點(diǎn)擊完成。

點(diǎn)擊添加情形，點(diǎn)擊添加條件，彈出條件創(chuàng)建窗口。選擇文本，點(diǎn)擊fx，點(diǎn)擊插入變量或函數(shù)，選擇窗口函數(shù)Window.scrollY，點(diǎn)擊確定。

回到條件創(chuàng)建窗口，選擇＞，選擇文本，輸入100，點(diǎn)擊確定，完成條件的添加。

5. 從元件庫拖入一個(gè)熱區(qū)元件至動(dòng)態(tài)面板與回答內(nèi)容交界處。

6. 點(diǎn)擊頁面空白處，點(diǎn)擊新建加交互，選擇“窗口向上滾動(dòng)時(shí)”事件（對(duì)應(yīng)頁面向下滾動(dòng)），選擇動(dòng)作“設(shè)置面板狀態(tài)”，選擇動(dòng)態(tài)面板，選擇狀態(tài)1（導(dǎo)航欄為搜索框），點(diǎn)擊完成。

點(diǎn)擊添加情形，點(diǎn)擊添加條件，彈出條件創(chuàng)建窗口。條件表達(dá)式從左至右依次選擇元件范圍，選擇頂部導(dǎo)航動(dòng)態(tài)面板，選擇接觸，選擇元件范圍，選擇熱區(qū)，點(diǎn)擊確定，完成條件的添加。

7. 點(diǎn)擊預(yù)覽，查看原型。

案例中運(yùn)用了窗口函數(shù)Window.scrollY來判斷切換頂部導(dǎo)航樣式的時(shí)機(jī)。

二、簡易計(jì)算器

設(shè)計(jì)一個(gè)可以進(jìn)行加減乘除簡單運(yùn)算的計(jì)算器，計(jì)算器效果圖如下：

我們可以看到每一種運(yùn)算都有兩個(gè)輸入框，用來輸入數(shù)據(jù)，運(yùn)算符右側(cè)為計(jì)算輸出結(jié)果，右側(cè)為觸發(fā)計(jì)算指定的操作按鈕。下面我們開始制作原型：

1. 從元件庫拖動(dòng)準(zhǔn)備8個(gè)單行文本框至設(shè)計(jì)區(qū)域，作為數(shù)據(jù)輸入項(xiàng)，8個(gè)單行文本框分別命名為“加數(shù)、被加數(shù)、減數(shù)、被減數(shù)、乘數(shù)、被乘數(shù)、除數(shù)、被除數(shù)”。

2. 拖動(dòng)4個(gè)文本標(biāo)簽放置在每一排兩個(gè)文本框中間，文編標(biāo)簽的內(nèi)容編輯為“+-×÷”運(yùn)算符。再拖動(dòng)四個(gè)文本標(biāo)簽至每一排文本框的右側(cè)，編輯文本標(biāo)簽為“=”。

3. 拖動(dòng)4個(gè)文本標(biāo)簽至等于號(hào)右側(cè)，作為計(jì)算結(jié)果的輸出項(xiàng)，分別命名為“求和、求差、求積、求商”，拖動(dòng)四個(gè)下劃線至計(jì)算結(jié)果下方。

4. 拖動(dòng)四4個(gè)按鈕至計(jì)算結(jié)果右側(cè)，編輯按鈕文字為“計(jì)算”。

5. 為加法計(jì)算按鈕添加交互，選中按鈕，點(diǎn)擊新建交互，選擇事件“鼠標(biāo)單擊時(shí)”，選擇動(dòng)作“設(shè)置文本”，目標(biāo)元件選擇“求和”，點(diǎn)擊fx，進(jìn)入值設(shè)置面板，添加兩個(gè)局部變量LVAR1和LVAR2，分別為加數(shù)元件文字和被加數(shù)元件文字，插入表達(dá)式[[LVAR1+LVAR2]]，點(diǎn)擊確定，點(diǎn)擊完成，完成加法計(jì)算的交互設(shè)置。

6. 為減法計(jì)算按鈕添加交互，選中按鈕，點(diǎn)擊新建交互，選擇事件“鼠標(biāo)單擊時(shí)”，選擇動(dòng)作“設(shè)置文本”，目標(biāo)元件選擇“求差”，點(diǎn)擊fx，進(jìn)入值設(shè)置面板，添加兩個(gè)局部變量LVAR1和LVAR2，分別為減數(shù)元件文字和被減數(shù)元件文字，插入表達(dá)式[[LVAR1-LVAR2]]，點(diǎn)擊確定，點(diǎn)擊完成，完成減法計(jì)算的交互設(shè)置。

7. 為乘法計(jì)算按鈕添加交互，選中按鈕，點(diǎn)擊新建交互，選擇事件“鼠標(biāo)單擊時(shí)”，選擇動(dòng)作“設(shè)置文本”，目標(biāo)元件選擇“求積”，點(diǎn)擊fx，進(jìn)入值設(shè)置面板，添加兩個(gè)局部變量LVAR1和LVAR2，分別為乘數(shù)元件文字和被乘數(shù)元件文字，插入表達(dá)式[[LVAR1*LVAR2]]，點(diǎn)擊確定，點(diǎn)擊完成，完成乘法計(jì)算的交互設(shè)置。

8. 為除法計(jì)算按鈕添加交互，選中按鈕，點(diǎn)擊新建交互，選擇事件“鼠標(biāo)單擊時(shí)”，選擇動(dòng)作“設(shè)置文本”，目標(biāo)元件選擇“求商”，點(diǎn)擊fx，進(jìn)入值設(shè)置面板，添加兩個(gè)局部變量LVAR1和LVAR2，分別為除數(shù)元件文字和被除數(shù)元件文字，插入表達(dá)式[[(LVAR1/LVAR2).toFixed(2)]]，函數(shù)toFixed(2)意思為保留小數(shù)點(diǎn)后兩位，并對(duì)小數(shù)點(diǎn)后兩位的數(shù)字進(jìn)行四舍五入。

點(diǎn)擊確定，點(diǎn)擊完成，完成除法計(jì)算的交互設(shè)置。

9. 點(diǎn)擊預(yù)覽，查看原型。

本案例中運(yùn)用了數(shù)學(xué)函數(shù)+-×÷來進(jìn)行數(shù)學(xué)運(yùn)算，計(jì)算結(jié)果，其中除法運(yùn)算中還運(yùn)營了數(shù)字函數(shù)toFixed(decimalPoints)，控制小數(shù)位數(shù)。

三、滑竿

我們知道當(dāng)拖動(dòng)滑桿球時(shí)，可以讓圓球沿著進(jìn)度條進(jìn)行移動(dòng)，一般常用于多媒體播放器中控制音量或視頻的播放進(jìn)度。下面我們來制作這樣的滑動(dòng)效果：

1. 拖動(dòng)水平線元件至設(shè)計(jì)區(qū)域，命名為“進(jìn)度條”邊框?qū)挾鹊脑O(shè)置為4，寬度設(shè)置為22。

2. 拖動(dòng)圓形元件至設(shè)計(jì)區(qū)域，鎖定寬高比例，寬度設(shè)置為20。

3. 拖動(dòng)鼠標(biāo)同時(shí)選中滑竿和進(jìn)度條，設(shè)置為上下居中對(duì)齊。右鍵點(diǎn)擊滑竿，選擇轉(zhuǎn)換為動(dòng)態(tài)面板，命名為“滑竿”。

4. 選中動(dòng)態(tài)面板，點(diǎn)擊新建交互，選擇事件“拖動(dòng)時(shí)”，選擇動(dòng)作“移動(dòng)時(shí)”，選擇當(dāng)前元件，移動(dòng)方向選擇With Drag X(沿水平方向移動(dòng))。點(diǎn)擊更多選項(xiàng)，沿直線軌道移動(dòng)，設(shè)置移動(dòng)邊界，左側(cè)≥[[LVAR1.left]]，局部變量LVAR1為進(jìn)度條元件；右側(cè)≤[[LVAR1.right]]，局部變量LVAR1為進(jìn)度條元件，點(diǎn)擊完成。

6. 選中動(dòng)態(tài)面板，點(diǎn)擊新建交互，選擇事件“拖動(dòng)結(jié)束時(shí)”，選擇動(dòng)作“移動(dòng)時(shí)”，選擇當(dāng)前元件，X軸達(dá)到[[LVAR1.x]]、Y軸到達(dá)[[LVAR1.y]]，變量LVAR1為當(dāng)前元件，點(diǎn)擊更多選項(xiàng)，選擇沿直線軌道移動(dòng)，點(diǎn)擊完成。

7. 點(diǎn)擊預(yù)覽，查看原型。

案例中運(yùn)用了元件函數(shù)left和right來控制滑竿移動(dòng)的范圍邊界，運(yùn)用元件函數(shù)this.x和this.y獲取元件坐標(biāo)。

四、文字計(jì)數(shù)

當(dāng)我們發(fā)表微博、發(fā)表評(píng)論、撰寫文章標(biāo)題，都會(huì)限制我們輸入的字?jǐn)?shù)，甚至提供了計(jì)數(shù)功能，提示你還能輸入多少字。

我們以文章標(biāo)題計(jì)數(shù)功能為例，說明如何實(shí)現(xiàn)計(jì)數(shù)并提示用戶還能輸入xx字的原型效果:

1. 拖動(dòng)當(dāng)行文本框元件至設(shè)計(jì)區(qū)域，命名為“標(biāo)題-輸入”，拖動(dòng)文本標(biāo)簽至設(shè)計(jì)區(qū)域，編輯文本內(nèi)容“請(qǐng)輸入30字以內(nèi)的標(biāo)題”，命名為“計(jì)數(shù)提示”。

選中文本框，點(diǎn)擊新建交互，選擇事件“文本改變時(shí)”，選擇動(dòng)作“設(shè)置文本”，目標(biāo)選擇“計(jì)數(shù)提示”，設(shè)置為富文本，編輯文本。

首先將當(dāng)前元件文字添加為局部變量LVAR1，富文本編輯框中輸入“你還可以輸入[[30-LVAR1.length]]字”，將[[30-LVAR1.length]]文字顏色設(shè)置為紅色，點(diǎn)擊確定，點(diǎn)擊完成。

3. 點(diǎn)擊插入動(dòng)作，選擇當(dāng)前元件，設(shè)置為文本，點(diǎn)擊fx，首先將當(dāng)前元件文字設(shè)置為局部變量LVAR1，然后插入表達(dá)式[[LVAR1.substring(0,30)]]，點(diǎn)擊確定，點(diǎn)擊完成。

4. 點(diǎn)擊預(yù)覽，查看原型。

案例中運(yùn)用了字符串函數(shù)length進(jìn)行文字的計(jì)數(shù)，運(yùn)用函數(shù)substring(from,to)截取顯示的字符串內(nèi)容，案例中的函數(shù)表示截取0位至30位區(qū)間的字符串文字，不包含第30位。

#專欄作家#

拼搏的80后，人人都是產(chǎn)品經(jīng)理專欄作家。10年互聯(lián)網(wǎng)從業(yè)經(jīng)歷，具有各類型B端、C端產(chǎn)品的設(shè)計(jì)經(jīng)驗(yàn)，關(guān)注區(qū)塊鏈及人工智能的技術(shù)發(fā)展及應(yīng)用場(chǎng)景探索。

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

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