Axure PR 9 步進器 設計&交互

0 評論 521 瀏覽 1 收藏 5 分鐘

在做輸入框、選擇之類的組件時,我們會經常用到步進器這種功能。這篇文章,作者分享的這種簡單方法,可以快速做一個步進器。

這期內容,我們將深入探討Axure中步進器設計與交互技巧。

Axure PR 9 步進器 設計&交互

先梳理一下步進器的流程圖,方便待會兒做交互。

Axure PR 9 步進器 設計&交互

01 步進器:創建步進器所需的元件

1.打開一個新的 RP 文件并在畫布上打開 Page 1。

2.將“文本框”元件拖到畫布上,在樣式窗格中將寬度設置為90,高度設置為40,線段寬度設置為0,輸入文本“1”,字號16,居中。

Axure PR 9 步進器 設計&交互

3.將“矩形”元件拖到畫布上,在樣式窗格中將寬高度設置為40,輸入文本“-”字號16,字體顏色白色,居中,藍色填充(#0052D9)。

Axure PR 9 步進器 設計&交互

4.然后復制一個,將文本改成“+”。

02 創建交互:創建“加,減”按鈕的交互狀態

1.選擇“-”元件,在交互窗格點擊新建交互,單擊時,設置文本,添加變量,添加局部變量,插入變量[[LVAR1 – 1]];

Axure PR 9 步進器 設計&交互

2.將“-”元件的交互復制粘貼到“+”元件交互中,變量[[LVAR1 – 1]]改成[[LVAR1 + 1]],點擊完成。

Axure PR 9 步進器 設計&交互

預覽交互

點擊預覽,在預覽頁面點擊加號或減號按鈕來遞增或遞減數值。

Axure PR 9 步進器 設計&交互

一個基礎的步進器即做好了,還可以延展一點。

給步進器加上上限和下限的限制。

1.選擇“文本框”元件,在交互窗格點擊新建交互,選文本改變時,啟用情形判斷:

情形1:點擊添加條件,選擇“元件文字”,“當前”,“< =”,“文本”“0”的情況下,禁用“-”按鈕,并設置當前文本框為“0”。

復制情形1,將“< =”改成“> =”,“文本”“999”的情況下,禁用“+”按鈕,并設置當前文本框為“0”。

Axure PR 9 步進器 設計&交互

2.添加情形,點擊確認,反之則啟用“+”,“-”按鈕。

Axure PR 9 步進器 設計&交互

3.給“+”,“-”按鈕添加元件禁用填充顏色(#D7D7D7)。

Axure PR 9 步進器 設計&交互

同理配置“+”按鈕。

預覽交互

點擊預覽,在預覽頁面點擊加號或減號按鈕來遞增或遞減數值,當文本框“< = 0”的時候,“-”按鈕置灰,當文本框“> = 999”的時候,“+”按鈕置灰。

Axure PR 9 步進器 設計&交互

預覽地址:https://53fnke.axshare.com

好的, 這期內容到這里就結束了。

本文由 @PM大明同學 原創發布于人人都是產品經理。未經作者許可,禁止轉載

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!