Axure中繼器全選操作的“半選中狀態”及框選

0 評論 3029 瀏覽 4 收藏 7 分鐘

在Axure中繼器的全選復選框中,有時候會出現“半選中狀態”,這種狀態通常用于提醒用戶,并且在一些特定場景下也有實際的應用。本文作者分享了在Axure中全選復選框時實現“半選中狀態”的方法,一起來看一下吧。

在Axure中繼器的全選復選框中,有時候會出現“半選中狀態”,也被稱為“The indeterminate state(不確定狀態)”。這種狀態是指當子復選框中既有選中狀態的,又有未選中狀態的時候,全選復選框就會呈現出這種不確定的狀態。

半選中狀態通常用于提醒用戶,并且在一些特定場景下也有其實際的應用。例如,當用戶在一組中繼器中選擇部分選項時,如果不是所有選項都被選中了,全選復選框就會呈現出半選中狀態,以提醒用戶還有未選擇的選項。

一、基本教程

先自行準備好以下元件,自行調整元件尺寸、樣式、默認內容、選中時樣式等。

一個帶有多行數據的中繼器,外部包裹一個組合,內部包含:

1)一個動態面板(取名:框選監聽),進階教程時使用:

  • 默認的矩形,用來顯示數據,最好添加“選中樣式”效果。
  • 一個復選框,用來設置選中狀態。

2)一個3狀態的動態面板(取名:全選操作),用來顯示“全選”功能。

3)一個文本框(取名:每項狀態),用來記錄中繼器每項的選中狀態。

我們先來做全選操作的動態面板吧,演示里使用的是Axure自帶圖標庫。三個狀態分別是:

“未選中狀態”,放入未選中圖標,交互為:

最InのAxure 教你純干貨 http://axure.in

“半選中狀態”,放入半選圖標,交互可根據自身要求設置全選或者不選,按照自身需求來。

最InのAxure 教你純干貨 http://axure.in

“全選中狀態”,放入全選圖標,交互為:

最InのAxure 教你純干貨 http://axure.in

然后中繼器的交互,這里就是初始化文本框的內容:

最InのAxure 教你純干貨 http://axure.in

中繼器外部包裹一個組合,也需要添加交互:

最InのAxure 教你純干貨 http://axure.in

復選框的交互如下,U代表Unchecked未選,C代表Checked選中:

  • 選中時設置的文本值為:[[Target.Text.substr(0, Item.index-1)]]C[[Target.Text.substr(Item.index)]]
  • 取消選中時的文本值為:[[Target.Text.substr(0, Item.index-1)]]U[[Target.Text.substr(Item.index)]]

最InのAxure 教你純干貨 http://axure.in

最后,文本框利用添加“文本改變時”實時更新動態面板。

最InのAxure 教你純干貨 http://axure.in

最基本的半選功能就完成了。怎么樣?簡單易懂對吧?我們還可以再升級一下。

二、進階先決知識

你對中繼器監聽器了解多少?如果不明白監聽器是什么東西,可以先閱讀一下《Axure監聽之中繼器監聽》這篇文章。最好能夠清楚為什么要用監聽器、什么時候用、以及怎么用。

?。?!這個知識點是中繼器進階應用的基礎,很多以往非常難以實現的交互通過監聽器都可輕松實現。

而且,在上一篇《Axure任意方向鼠標拖拽框選》后,有很多朋友迷茫這個效果能做什么,今天的進階教程就夢幻聯動一下。

三、進階教程

在前面原型的基礎上,將框選功能的動態面板放在中繼器的下層,但需要讓“框選矩形”在初始化時“置頂”。

最InのAxure 教你純干貨 http://axure.in

記得中繼器里的第一層是個動態面板吧?我們先把它做為框選監聽器:

最InのAxure 教你純干貨 http://axure.in

再在框選矩形的“拖動時”里觸發監聽:

最InのAxure 教你純干貨 http://axure.in

四、效果泰酷辣

預覽地址:https://usrsky.axshare.com/#g=1&id=281jfx

最InのAxure 教你純干貨 http://axure.in

趕快添加到你的原型里秀BOSS一臉吧!

五、總結

半選中狀態是復選框中一個比較特殊的狀態,可以幫助用戶更加清晰地理解當前選擇的情況,提高用戶體驗。利用文本框就可以在Axure中輕松實現。

本文由 @Jorkin 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

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

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