在原型設計中，利用函數都可以實現哪些交互呢？吸附導航、數學計算、音量/進度滑竿、文字計數等等這些交互效果都可以實現。那麼具體怎麼在Axure中運用函數呢？看看文中的案例分析吧，相信你一定有所收穫！
一、知乎詳情導航
首先請大家打開知乎App，點擊任意一個問題，進入回答詳情頁，觀察知乎詳情頁中頂部導航的效果。
默認情況下，頂部導航為搜索框樣式，向上滾動頁面，查看回答內容時，頂部導航發生了變化，變成了提問內容；向下回滾頁面至第一屏時，導航欄又變成了搜索框。從始至終，導航欄始終固定在窗口頂部。
為了節省時間讓大家能夠儘快掌握原型製作的方法，這裡就不手動繪製線框圖了，我們直接從知乎App中截取頁面作為基本素材。
這裡至少需要兩張圖片：第一張是頂部導航為搜索框的圖片，第二張是頂部導航為問題內容的圖片。
截取第一張圖片時，最好能截取長屏，如果你的手機不支持長屏截取，你需要多截取幾屏圖片了。如果頁面長度不夠，將無法在瀏覽器中滾動窗口。
下面我們開始原型的製作：
1. 拖動圖像元件至設計區域，雙擊圖像元件從本地導入第一張圖片。由於手機像素較高，導入到PC中，圖片尺寸較大，建議等比例縮小圖片。
鎖定寬高比例，寬度設置為375即可。右鍵點擊圖片，選擇切割圖片，將導航欄區域和回答區域分割。
2. 右鍵點擊導航欄，選擇轉換為動態面板，命名為頂部導航。在樣式面板中，選擇自適應內容，點擊固定到瀏覽器，設置固定屬性，水平固定選擇左側，垂直固定選擇頂部，勾選始終保持頂層（僅瀏覽器中有效）。
設置動態面板樣式.png
3. 拖動圖像元件至設計區域，雙擊元件從本地導入第二張圖片。鎖定寬高比例，寬度值設計為375，完成圖片等比縮放。
右鍵點擊選擇裁剪圖片，保留導航欄區域，將多餘區域裁減掉。
雙擊第2步的動態面板，點擊添加狀態，將第3步的導航欄圖片剪切移入至狀態2面板中，點擊右上角關閉按鈕，退出編輯狀態。
4. 點擊頁面空白處，點擊新建交互，選擇“窗口向下滾動時”事件（對應頁面向上滾動），選擇動作“設置面板狀態”，選擇動態面板，選擇狀態2（導航欄為問題內容），點擊完成。
點擊添加情形，點擊添加條件，彈出條件創建窗口。選擇文本，點擊fx，點擊插入變量或函數，選擇窗口函數Window.scrollY，點擊確定。
回到條件創建窗口，選擇＞，選擇文本，輸入100，點擊確定，完成條件的添加。
5. 從元件庫拖入一個熱區元件至動態面板與回答內容交界處。
6. 點擊頁面空白處，點擊新建加交互，選擇“窗口向上滾動時”事件（對應頁面向下滾動），選擇動作“設置面板狀態”，選擇動態面板，選擇狀態1（導航欄為搜索框），點擊完成。
點擊添加情形，點擊添加條件，彈出條件創建窗口。條件表達式從左至右依次選擇元件範圍，選擇頂部導航動態面板，選擇接觸，選擇元件範圍，選擇熱區，點擊確定，完成條件的添加。
7. 點擊預覽，查看原型。
案例中運用了窗口函數Window.scrollY來判斷切換頂部導航樣式的時機。
二、簡易計算器
設計一個可以進行加減乘除簡單運算的計算器，計算器效果圖如下：
我們可以看到每一種運算都有兩個輸入框，用來輸入數據，運算符右側為計算輸出結果，右側為觸發計算指定的操作按鈕。下面我們開始製作原型：
1. 從元件庫拖動準備8個單行文本框至設計區域，作為數據輸入項，8個單行文本框分別命名為“加數、被加數、減數、被減數、乘數、被乘數、除數、被除數”。
2. 拖動4個文本標籤放置在每一排兩個文本框中間，文編標籤的內容編輯為“+-×÷”運算符。再拖動四個文本標籤至每一排文本框的右側，編輯文本標籤為“=”。
3. 拖動4個文本標籤至等於號右側，作為計算結果的輸出項，分別命名為“求和、求差、求積、求商”，拖動四個下劃線至計算結果下方。
4. 拖動四4個按鈕至計算結果右側，編輯按鈕文字為“計算”。
5. 為加法計算按鈕添加交互，選中按鈕，點擊新建交互，選擇事件“鼠標單擊時”，選擇動作“設置文本”，目標元件選擇“求和”，點擊fx，進入值設置面板，添加兩個局部變量LVAR1和LVAR2，分別為加數元件文字和被加數元件文字，插入表達式[[LVAR1+LVAR2]]，點擊確定，點擊完成，完成加法計算的交互設置。
6. 為減法計算按鈕添加交互，選中按鈕，點擊新建交互，選擇事件“鼠標單擊時”，選擇動作“設置文本”，目標元件選擇“求差”，點擊fx，進入值設置面板，添加兩個局部變量LVAR1和LVAR2，分別為減數元件文字和被減數元件文字，插入表達式[[LVAR1-LVAR2]]，點擊確定，點擊完成，完成減法計算的交互設置。
7. 為乘法計算按鈕添加交互，選中按鈕，點擊新建交互，選擇事件“鼠標單擊時”，選擇動作“設置文本”，目標元件選擇“求積”，點擊fx，進入值設置面板，添加兩個局部變量LVAR1和LVAR2，分別為乘數元件文字和被乘數元件文字，插入表達式[[LVAR1*LVAR2]]，點擊確定，點擊完成，完成乘法計算的交互設置。
8. 為除法計算按鈕添加交互，選中按鈕，點擊新建交互，選擇事件“鼠標單擊時”，選擇動作“設置文本”，目標元件選擇“求商”，點擊fx，進入值設置面板，添加兩個局部變量LVAR1和LVAR2，分別為除數元件文字和被除數元件文字，插入表達式[[(LVAR1/LVAR2).toFixed(2)]]，函數toFixed(2)意思為保留小數點後兩位，並對小數點後兩位的數字進行四捨五入。
點擊確定，點擊完成，完成除法計算的交互設置。
9. 點擊預覽，查看原型。
本案例中運用了數學函數+-×÷來進行數學運算，計算結果，其中除法運算中還運營了數字函數toFixed(decimalPoints)，控制小數位數。
三、滑竿
我們知道當拖動滑桿球時，可以讓圓球沿著進度條進行移動，一般常用於多媒體播放器中控制音量或視頻的播放進度。下面我們來製作這樣的滑動效果：
1. 拖動水平線元件至設計區域，命名為“進度條”邊框寬度的設置為4，寬度設置為22。
2. 拖動圓形元件至設計區域，鎖定寬高比例，寬度設置為20。
3. 拖動鼠標同時選中滑竿和進度條，設置為上下居中對齊。右鍵點擊滑竿，選擇轉換為動態面板，命名為“滑竿”。
4. 選中動態面板，點擊新建交互，選擇事件“拖動時”，選擇動作“移動時”，選擇當前元件，移動方向選擇With Drag X(沿水平方向移動)。點擊更多選項，沿直線軌道移動，設置移動邊界，左側≥[[LVAR1.left]]，局部變量LVAR1為進度條元件；右側≤[[LVAR1.right]]，局部變量LVAR1為進度條元件，點擊完成。
6. 選中動態面板，點擊新建交互，選擇事件“拖動結束時”，選擇動作“移動時”，選擇當前元件，X軸達到[[LVAR1.x]]、Y軸到達[[LVAR1.y]]，變量LVAR1為當前元件，點擊更多選項，選擇沿直線軌道移動，點擊完成。
7. 點擊預覽，查看原型。
案例中運用了元件函數left和right來控制滑竿移動的範圍邊界，運用元件函數this.x和this.y獲取元件座標。
四、文字計數
當我們發表微博、發表評論、撰寫文章標題，都會限制我們輸入的字數，甚至提供了計數功能，提示你還能輸入多少字。
我們以文章標題計數功能為例，說明如何實現計數並提示用戶還能輸入xx字的原型效果:
1. 拖動當行文本框元件至設計區域，命名為“標題-輸入”，拖動文本標籤至設計區域，編輯文本內容“請輸入30字以內的標題”，命名為“計數提示”。
選中文本框，點擊新建交互，選擇事件“文本改變時”，選擇動作“設置文本”，目標選擇“計數提示”，設置為富文本，編輯文本。
首先將當前元件文字添加為局部變量LVAR1，富文本編輯框中輸入“你還可以輸入[[30-LVAR1.length]]字”，將[[30-LVAR1.length]]文字顏色設置為紅色，點擊確定，點擊完成。
3. 點擊插入動作，選擇當前元件，設置為文本，點擊fx，首先將當前元件文字設置為局部變量LVAR1，然後插入表達式[[LVAR1.substring(0,30)]]，點擊確定，點擊完成。
4. 點擊預覽，查看原型。
案例中運用了字符串函數length進行文字的計數，運用函數substring(from,to)截取顯示的字符串內容，案例中的函數表示截取0位至30位區間的字符串文字，不包含第30位。
#專欄作家#
拼搏的80後，人人都是產品經理專欄作家。10年互聯網從業經歷，具有各類型B端、C端產品的設計經驗，關注區塊鏈及人工智能的技術發展及應用場景探索。
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
