天天看點

axure原型——移動端選擇器合集(單選、多選、分級、搜尋效果)含地區、時間選擇器

原型預覽位址:https://www.pmdaniu.com/storages/120756/8fc56edf349be4dbba1bf71379dff7c5-69620/start.html#id=iehtoj&p=%E5%8F%AF%E6%90%9C%E7%B4%A2%E7%9A%84%E5%8D%95%E9%80%89%E9%80%89%E6%8B%A9%E5%99%A8&g=1

01 單選選擇器

單選選擇器按效果又可以分為,點選選擇器、滑動選擇器、多級選擇器、具有搜尋效果的選擇器、開關選擇器……

點選選擇器:一般以底部彈窗的形式出現,如下圖所示,通過手機點選選中選項,傳回選擇内容,具體選項内容可以在中繼器表格中填寫。

axure原型——移動端選擇器合集(單選、多選、分級、搜尋效果)含地區、時間選擇器

滑動選擇器:滑動選擇器的效果和點選選擇器效果非常接近,差別主要在于,滑動選擇器是将需要選中的内容活動至中部,然後點選确認按鈕确認選中後傳回選中内容。現在很多app使用這種效果,會比點選選擇器炫酷,但是原理都是通過中繼器制作選擇内容,隻不過是互動的方式不一樣,所謂鹹魚白菜各有所愛。

axure原型——移動端選擇器合集(單選、多選、分級、搜尋效果)含地區、時間選擇器

分級選擇器:在滑動選擇器的基礎上在加一級,比較适用于省份-城市或者品牌-産品這種類似的選擇。這種選擇器是由兩個或兩個以上的中繼器制作而成,第一個中繼器選擇後,一般會對第二個中繼器進行篩選,例如選擇了廣東省,那麼2級内容就應該篩選掉廣東省以外的城市。

axure原型——移動端選擇器合集(單選、多選、分級、搜尋效果)含地區、時間選擇器

當然了,也有些情況是不需要進行篩選的,例如時間,因為沒個小時都是60分鐘,是以這裡的二級内容分鐘就不需要篩選的操作了。

axure原型——移動端選擇器合集(單選、多選、分級、搜尋效果)含地區、時間選擇器

在日期選擇器裡面,又有一些不同,他的2級選擇器是月份,因為每年都是12個月,是以這裡的2級就不需要篩選,但是他的三級是天,因為每個月的天數都不同,而且閏年的二月有29日,是以這裡的三級内容需要根據一級和二級選擇的内容進行顯示。是以具體情況還是要具體分析。

axure原型——移動端選擇器合集(單選、多選、分級、搜尋效果)含地區、時間選擇器

可搜尋選擇器:這種選擇器一般用于選擇項較多,例如全國的城市有幾百個,一個個找很麻煩,是以這時就需要用都可搜尋的選擇器,根據使用者輸入的内容,對中繼器進行模糊的搜尋,讓使用者快速找到并選擇内容。

axure原型——移動端選擇器合集(單選、多選、分級、搜尋效果)含地區、時間選擇器

開關選擇器:這種選擇器是單選選擇器裡最特别的一種,因為他隻有兩種選項,true or false,不适用于彈窗這麼複雜,是以可以直接用開關按鈕代替,常見按鈕是授權或者性别選擇等等。

axure原型——移動端選擇器合集(單選、多選、分級、搜尋效果)含地區、時間選擇器

02 多選選擇器

多選選擇器主要應用于類似愛好、特長、技能的選擇,使用者可以選擇多個選項,是以多選選擇器就不适用用滑動選擇器和開關選擇器來做。一般常用的多選選擇器都是點選選擇器,當然也有搜尋效果的多選選擇器

點選多選選擇器:如果選項較少,一般也是以底部彈窗的形式出現,如下圖所示,通過手機點選選中選中或取消選中該選項,傳回選中内容,具體選項内容可以在中繼器表格中填寫。

axure原型——移動端選擇器合集(單選、多選、分級、搜尋效果)含地區、時間選擇器

可搜尋的多選選擇器:如果選項太多,就不太适合用上面的選擇器,這是我們需要給他增加一個搜尋的功能,根據使用者輸入的内容,對中繼器進行模糊的搜尋,讓使用者快速找到并選擇内容。

axure原型——移動端選擇器合集(單選、多選、分級、搜尋效果)含地區、時間選擇器

那以上就是本期關于移動端常用選擇器介紹的全部内容,主要是基于我個人在實際工作中需要用到的原型,而設計出來的axure元件。

如果大家有所收獲,希望可以點贊鼓勵一下,也歡迎大家交流,謝謝。