AXURE原型設(shè)計(jì):移動(dòng)端選擇器的應(yīng)用

5 評(píng)論 5402 瀏覽 27 收藏 7 分鐘

移動(dòng)端的選擇器就好比是web端的下拉列表,可以說是每個(gè)系統(tǒng)、軟件必備的組件,也是移動(dòng)端元件庫的必備元件,文章對(duì)移動(dòng)端選擇器的不同種類以及原型應(yīng)用進(jìn)行了梳理分析,與大家分享。

一般而言,移動(dòng)端的選擇器分為單選選擇器、多選選擇器。

01 單選選擇器

單選選擇器按效果又可以分為,點(diǎn)擊選擇器、滑動(dòng)選擇器、多級(jí)選擇器、具有搜索效果的選擇器、開關(guān)選擇器……

點(diǎn)擊選擇器:一般以底部彈窗的形式出現(xiàn),如下圖所示,通過手機(jī)點(diǎn)擊選中選項(xiàng),返回選擇內(nèi)容,具體選項(xiàng)內(nèi)容可以在中繼器表格中填寫。

滑動(dòng)選擇器:滑動(dòng)選擇器的效果和點(diǎn)擊選擇器效果非常接近,區(qū)別主要在于,滑動(dòng)選擇器是將需要選中的內(nèi)容活動(dòng)至中部,然后點(diǎn)擊確認(rèn)按鈕確認(rèn)選中后返回選中內(nèi)容?,F(xiàn)在很多app使用這種效果,會(huì)比點(diǎn)擊選擇器炫酷,但是原理都是通過中繼器制作選擇內(nèi)容,只不過是交互的方式不一樣,所謂咸魚白菜各有所愛。

分級(jí)選擇器:在滑動(dòng)選擇器的基礎(chǔ)上在加一級(jí),比較適用于省份-城市或者品牌-產(chǎn)品這種類似的選擇。這種選擇器是由兩個(gè)或兩個(gè)以上的中繼器制作而成,第一個(gè)中繼器選擇后,一般會(huì)對(duì)第二個(gè)中繼器進(jìn)行篩選,例如選擇了廣東省,那么2級(jí)內(nèi)容就應(yīng)該篩選掉廣東省以外的城市。

當(dāng)然了,也有些情況是不需要進(jìn)行篩選的,例如時(shí)間,因?yàn)闆]個(gè)小時(shí)都是60分鐘,所以這里的二級(jí)內(nèi)容分鐘就不需要篩選的操作了。

在日期選擇器里面,又有一些不同,他的2級(jí)選擇器是月份,因?yàn)槊磕甓际?2個(gè)月,所以這里的2級(jí)就不需要篩選,但是他的三級(jí)是天,因?yàn)槊總€(gè)月的天數(shù)都不同,而且閏年的二月有29日,所以這里的三級(jí)內(nèi)容需要根據(jù)一級(jí)和二級(jí)選擇的內(nèi)容進(jìn)行顯示。所以具體情況還是要具體分析。

可搜索選擇器:這種選擇器一般用于選擇項(xiàng)較多,例如全國的城市有幾百個(gè),一個(gè)個(gè)找很麻煩,所以這時(shí)就需要用都可搜索的選擇器,根據(jù)用戶輸入的內(nèi)容,對(duì)中繼器進(jìn)行模糊的搜索,讓用戶快速找到并選擇內(nèi)容。

開關(guān)選擇器:這種選擇器是單選選擇器里最特別的一種,因?yàn)樗挥袃煞N選項(xiàng),true or false,不適用于彈窗這么復(fù)雜,所以可以直接用開關(guān)按鈕代替,常見按鈕是授權(quán)或者性別選擇等等。

02 多選選擇器

多選選擇器主要應(yīng)用于類似愛好、特長(zhǎng)、技能的選擇,用戶可以選擇多個(gè)選項(xiàng),所以多選選擇器就不適用用滑動(dòng)選擇器和開關(guān)選擇器來做。一般常用的多選選擇器都是點(diǎn)擊選擇器,當(dāng)然也有搜索效果的多選選擇器

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

可搜索的多選選擇器:如果選項(xiàng)太多,就不太適合用上面的選擇器,這是我們需要給他增加一個(gè)搜索的功能,根據(jù)用戶輸入的內(nèi)容,對(duì)中繼器進(jìn)行模糊的搜索,讓用戶快速找到并選擇內(nèi)容。

那以上就是本期關(guān)于移動(dòng)端常用選擇器介紹的全部?jī)?nèi)容,主要是基于我個(gè)人在實(shí)際工作中需要用到的原型,而設(shè)計(jì)出來的axure組件。

如果大家有所收獲,希望可以點(diǎn)贊鼓勵(lì)一下,也歡迎大家交流,謝謝。

 

本文由 @秀 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 好家伙,下載還要收費(fèi),牛?

    來自中國 回復(fù)
  2. 原型預(yù)覽及下載地址:
    https://axhub.im/ax9/e4f2832e83281a58

    來自廣東 回復(fù)
  3. 厲害了~

    來自吉林 回復(fù)
    1. 猴哥,你又來了哈哈哈哈哈哈哈哈哈

      來自廣東 回復(fù)
  4. 好文章

    回復(fù)