Web中的單選和復(fù)選我們見得比較多,但是在移動端中,單選和復(fù)選控件樣式較多,需要結(jié)合不同的使用場景去選擇使用。下面我將總結(jié)一下移動端中的單選和復(fù)選控件。
首先我們看看官方文件給的設(shè)計規(guī)范:
ios
ios官方文件中沒有具體說單選和復(fù)選控件,只能從一些包含選擇的空間中來:
(1)Pickers(選擇器)
選擇器是包括一個或多個不同值的可滾動列表,每個值都具有單個選定值,常顯示在屏幕底部或彈出窗口中。
使用選擇器需要注意的有:
使用可預(yù)測和符合邏輯順序的值;例如使用按字母順序排列的國家/地區(qū)列表;
避免通過打開新的界面來顯示選擇器;
如果數(shù)值或選項較多,請使用列表而不是選擇器。選擇器的尺寸較小,想要快速找到想要的數(shù)值需要多次滑動,而列表的滑動范圍更大,可以更快地找到想要的數(shù)值或選項。
(2)選擇列表
使用列表的形式簡潔干凈,能高效地顯示大量或少量信息。
Android (1)單選 使用單選按鈕選擇單個項目
如果可以折疊可用選項,請考慮使用下拉菜單,因為它占用的空間更少。
(2)復(fù)選 使用復(fù)選框選擇列表中的多個項目
再次點擊選項可以取消選擇
對于有層級關(guān)系的復(fù)選選項:
選中父復(fù)選框后,將選中所有子復(fù)選框
如果未選中父復(fù)選框,則取消選中所有子復(fù)選框
如果選中某些(但不是全部)子復(fù)選框,則父復(fù)選框?qū)⒆優(yōu)椴淮_定復(fù)選框
要注意的是:單選和復(fù)選控件樣式,不要混淆。也不要在單選的情況下使用復(fù)選按鈕。
左:復(fù)選;右:單選
下面,我們看實際運用中,單選和復(fù)選控件是如何使用的。
單選控件總結(jié)了四種樣式:按鈕式、選中打點、列表勾選和選擇器。
單選(1)單選-按鈕式
選項一般是相同類型的,例如淘寶選擇商品尺寸、屬性等選項內(nèi)容少,選項數(shù)量較少;
彈窗內(nèi)容清晰明了,選擇區(qū)域很清楚,但選擇區(qū)域較?。?br /> 不適合選項較多、選項文案較長的場景。
(2)單選-選中打點
更多是安卓上的操作控件,適用于單選,選項不是同一類型的情況;
目測選擇區(qū)域較小,但實際上只要點擊與文字同一排的位置即可選擇。
(3)單選-列表勾選
彈窗更多出現(xiàn)在安卓系統(tǒng)中,相比選中打點的設(shè)計,給用戶的引導(dǎo)性更強,目測選擇區(qū)域更大。
因為✔️離文案較遠,所以選中的選項要突出。
Ios系統(tǒng)中也使用列表勾選,但大部分都是跳轉(zhuǎn)一個新界面;
選擇之后直接更改,沒有確認鍵;
選項字數(shù)可以較長,選項可以較多。
(4)單選-選擇器 更多出現(xiàn)在ios系統(tǒng)中,一般從出現(xiàn)在界面底部;
列表式看起來選項更清晰;
一般在表單填寫中出現(xiàn),選項較多,可滑動。
多選 多選形式較單一:
一般是勾選加外框的形狀,避免與單選按鈕混淆;
彈窗選擇中要盡量避免只使用單個操作按鈕的情況,會讓用戶產(chǎn)生疑惑,不知道如何關(guān)閉彈窗。
分享題目:網(wǎng)站手機版如何設(shè)計單選復(fù)選控件
本文來源:http://www.rwnh.cn/news20/114820.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機、外貿(mào)建站、響應(yīng)式網(wǎng)站、網(wǎng)站營銷、網(wǎng)站收錄、面包屑導(dǎo)航
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)