Axure RP 9 案例：那些熟悉的互動，原來都可以用函式實現
在原型設計中，利用函式都可以實現哪些互動呢？吸附導航、數學計算、音量/進度滑竿、文字計數等等這些互動效果都可以實現。那麼具體怎麼在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協議