中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)站手機版如何設(shè)計單選復(fù)選控件

2021-05-24    分類: 網(wǎng)站建設(shè)

Web中的單選和復(fù)選我們見得比較多,但是在移動端中,單選和復(fù)選控件樣式較多,需要結(jié)合不同的使用場景去選擇使用。下面我將總結(jié)一下移動端中的單選和復(fù)選控件。

      首先我們看看官方文件給的設(shè)計規(guī)范:

ios

      ios官方文件中沒有具體說單選和復(fù)選控件,只能從一些包含選擇的空間中來:
    (1)Pickers(選擇器)

      選擇器是包括一個或多個不同值的可滾動列表,每個值都具有單個選定值,常顯示在屏幕底部或彈出窗口中。

如何設(shè)計單選復(fù)選控件

      使用選擇器需要注意的有:
    使用可預(yù)測和符合邏輯順序的值;例如使用按字母順序排列的國家/地區(qū)列表;
    避免通過打開新的界面來顯示選擇器;
    如果數(shù)值或選項較多,請使用列表而不是選擇器。選擇器的尺寸較小,想要快速找到想要的數(shù)值需要多次滑動,而列表的滑動范圍更大,可以更快地找到想要的數(shù)值或選項。
    (2)選擇列表

      使用列表的形式簡潔干凈,能高效地顯示大量或少量信息。

如何設(shè)計單選復(fù)選控件


   Android
 (1)單選
如何設(shè)計單選復(fù)選控件

    使用單選按鈕選擇單個項目
    如果可以折疊可用選項,請考慮使用下拉菜單,因為它占用的空間更少。
    (2)復(fù)選
如何設(shè)計單選復(fù)選控件

    使用復(fù)選框選擇列表中的多個項目
    再次點擊選項可以取消選擇
    對于有層級關(guān)系的復(fù)選選項:
    選中父復(fù)選框后,將選中所有子復(fù)選框
如何設(shè)計單選復(fù)選控件

    如果未選中父復(fù)選框,則取消選中所有子復(fù)選框
如何設(shè)計單選復(fù)選控件

    如果選中某些(但不是全部)子復(fù)選框,則父復(fù)選框?qū)⒆優(yōu)椴淮_定復(fù)選框
如何設(shè)計單選復(fù)選控件

    要注意的是:單選和復(fù)選控件樣式,不要混淆。也不要在單選的情況下使用復(fù)選按鈕。
如何設(shè)計單選復(fù)選控件
左:復(fù)選;右:單選

    下面,我們看實際運用中,單選和復(fù)選控件是如何使用的。
    單選控件總結(jié)了四種樣式:按鈕式、選中打點、列表勾選和選擇器。
   單選
(1)單選-按鈕式
如何設(shè)計單選復(fù)選控件
      選項一般是相同類型的,例如淘寶選擇商品尺寸、屬性等選項內(nèi)容少,選項數(shù)量較少;
    彈窗內(nèi)容清晰明了,選擇區(qū)域很清楚,但選擇區(qū)域較?。?br />    不適合選項較多、選項文案較長的場景。
   (2)單選-選中打點
如何設(shè)計單選復(fù)選控件
      更多是安卓上的操作控件,適用于單選,選項不是同一類型的情況;
    目測選擇區(qū)域較小,但實際上只要點擊與文字同一排的位置即可選擇。
    (3)單選-列表勾選
如何設(shè)計單選復(fù)選控件
      彈窗更多出現(xiàn)在安卓系統(tǒng)中,相比選中打點的設(shè)計,給用戶的引導(dǎo)性更強,目測選擇區(qū)域更大。
    因為✔️離文案較遠,所以選中的選項要突出。

如何設(shè)計單選復(fù)選控件

      Ios系統(tǒng)中也使用列表勾選,但大部分都是跳轉(zhuǎn)一個新界面;

      選擇之后直接更改,沒有確認鍵;
    選項字數(shù)可以較長,選項可以較多。
    (4)單選-選擇器
如何設(shè)計單選復(fù)選控件

    更多出現(xiàn)在ios系統(tǒng)中,一般從出現(xiàn)在界面底部;
   列表式看起來選項更清晰;
    一般在表單填寫中出現(xiàn),選項較多,可滑動。
  多選
    多選形式較單一:
如何設(shè)計單選復(fù)選控件
      一般是勾選加外框的形狀,避免與單選按鈕混淆;

      彈窗選擇中要盡量避免只使用單個操作按鈕的情況,會讓用戶產(chǎn)生疑惑,不知道如何關(guān)閉彈窗。

如何設(shè)計單選復(fù)選控件

分享題目:網(wǎng)站手機版如何設(shè)計單選復(fù)選控件
本文來源:http://m.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)

成都定制網(wǎng)站網(wǎng)頁設(shè)計
辉县市| 页游| 临邑县| 从江县| 汝城县| 惠来县| 鹤岗市| 沁源县| 太康县| 龙门县| 萍乡市| 神农架林区| 含山县| 沈阳市| 册亨县| 黔西县| 时尚| 廉江市| 海林市| 玉溪市| 承德县| 大悟县| 常熟市| 曲阳县| 英吉沙县| 武陟县| 河东区| 大厂| 马公市| 宁城县| 都兰县| 沈丘县| 南康市| 镇原县| 宣化县| 兰西县| 武义县| 康定县| 四川省| 托克逊县| 衡山县|