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

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

一、知乎詳情導航

首先請大家打開知乎App，點擊任意一個問題，進入回答詳情頁，觀察知乎詳情頁中頂部導航的效果。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7. 點擊預覽，查看原型。

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

二、簡易計算器

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

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

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

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

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

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

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

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

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

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

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

9. 點擊預覽，查看原型。

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

三、滑竿

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

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

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

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

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

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

7. 點擊預覽，查看原型。

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

四、文字計數(shù)

當我們發(fā)表微博、發(fā)表評論、撰寫文章標題，都會限制我們輸入的字數(shù)，甚至提供了計數(shù)功能，提示你還能輸入多少字。

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

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

選中文本框，點擊新建交互，選擇事件“文本改變時”，選擇動作“設(shè)置文本”，目標選擇“計數(shù)提示”，設(shè)置為富文本，編輯文本。

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

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

4. 點擊預覽，查看原型。

案例中運用了字符串函數(shù)length進行文字的計數(shù)，運用函數(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īng)驗，關(guān)注區(qū)塊鏈及人工智能的技術(shù)發(fā)展及應用場景探索。

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

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