AXURE原型設計:移動端選擇器的應用

移動端的選擇器就好比是web端的下拉列表,可以説是每個系統、軟件必備的組件,也是移動端元件庫的必備元件,文章對移動端選擇器的不同種類以及原型應用進行了梳理分析,與大家分享。

AXURE原型設計:移動端選擇器的應用

一般而言,移動端的選擇器分為單選選擇器、多選選擇器。

01 單選選擇器

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

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

AXURE原型設計:移動端選擇器的應用

滑動選擇器:滑動選擇器的效果和點擊選擇器效果非常接近,區別主要在於,滑動選擇器是將需要選中的內容活動至中部,然後點擊確認按鈕確認選中後返回選中內容。現在很多app使用這種效果,會比點擊選擇器炫酷,但是原理都是通過中繼器製作選擇內容,只不過是交互的方式不一樣,所謂鹹魚白菜各有所愛。

AXURE原型設計:移動端選擇器的應用

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

AXURE原型設計:移動端選擇器的應用

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

AXURE原型設計:移動端選擇器的應用

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

AXURE原型設計:移動端選擇器的應用

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

AXURE原型設計:移動端選擇器的應用

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

AXURE原型設計:移動端選擇器的應用
02 多選選擇器

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

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

AXURE原型設計:移動端選擇器的應用

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

AXURE原型設計:移動端選擇器的應用

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

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

本文由 @秀 原創發佈於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 1271 字。

轉載請註明: AXURE原型設計:移動端選擇器的應用 - 楠木軒