Axure PR 9 步進器 設計&交互
在做輸入框、選擇之類的組件時,我們會經常用到步進器這種功能。這篇文章,作者分享的這種簡單方法,可以快速做一個步進器。
這期內容,我們將深入探討Axure中步進器設計與交互技巧。
先梳理一下步進器的流程圖,方便待會兒做交互。
01 步進器:創建步進器所需的元件
1.打開一個新的 RP 文件并在畫布上打開 Page 1。
2.將“文本框”元件拖到畫布上,在樣式窗格中將寬度設置為90,高度設置為40,線段寬度設置為0,輸入文本“1”,字號16,居中。
3.將“矩形”元件拖到畫布上,在樣式窗格中將寬高度設置為40,輸入文本“-”字號16,字體顏色白色,居中,藍色填充(#0052D9)。
4.然后復制一個,將文本改成“+”。
02 創建交互:創建“加,減”按鈕的交互狀態
1.選擇“-”元件,在交互窗格點擊新建交互,單擊時,設置文本,添加變量,添加局部變量,插入變量[[LVAR1 – 1]];
2.將“-”元件的交互復制粘貼到“+”元件交互中,變量[[LVAR1 – 1]]改成[[LVAR1 + 1]],點擊完成。
預覽交互
點擊預覽,在預覽頁面點擊加號或減號按鈕來遞增或遞減數值。
一個基礎的步進器即做好了,還可以延展一點。
給步進器加上上限和下限的限制。
1.選擇“文本框”元件,在交互窗格點擊新建交互,選文本改變時,啟用情形判斷:
情形1:點擊添加條件,選擇“元件文字”,“當前”,“< =”,“文本”“0”的情況下,禁用“-”按鈕,并設置當前文本框為“0”。
復制情形1,將“< =”改成“> =”,“文本”“999”的情況下,禁用“+”按鈕,并設置當前文本框為“0”。
2.添加情形,點擊確認,反之則啟用“+”,“-”按鈕。
3.給“+”,“-”按鈕添加元件禁用填充顏色(#D7D7D7)。
同理配置“+”按鈕。
預覽交互
點擊預覽,在預覽頁面點擊加號或減號按鈕來遞增或遞減數值,當文本框“< = 0”的時候,“-”按鈕置灰,當文本框“> = 999”的時候,“+”按鈕置灰。
預覽地址:https://53fnke.axshare.com
好的, 這期內容到這里就結束了。
本文由 @PM大明同學 原創發布于人人都是產品經理。未經作者許可,禁止轉載
題圖來自Unsplash,基于CC0協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務
- 目前還沒評論,等你發揮!