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

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

ios

      ios官方文件中沒有具體說(shuō)單選和復(fù)選控件，只能從一些包含選擇的空間中來(lái)：
    （1）Pickers（選擇器）

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

      使用選擇器需要注意的有：
    使用可預(yù)測(cè)和符合邏輯順序的值；例如使用按字母順序排列的國(guó)家/地區(qū)列表；
    避免通過打開新的界面來(lái)顯示選擇器；
    如果數(shù)值或選項(xiàng)較多，請(qǐng)使用列表而不是選擇器。選擇器的尺寸較小，想要快速找到想要的數(shù)值需要多次滑動(dòng)，而列表的滑動(dòng)范圍更大，可以更快地找到想要的數(shù)值或選項(xiàng)。
    （2）選擇列表

      使用列表的形式簡(jiǎn)潔干凈，能高效地顯示大量或少量信息。

   Android
 （1）單選

    使用單選按鈕選擇單個(gè)項(xiàng)目
    如果可以折疊可用選項(xiàng)，請(qǐng)考慮使用下拉菜單，因?yàn)樗加玫目臻g更少。
    （2）復(fù)選

    使用復(fù)選框選擇列表中的多個(gè)項(xiàng)目
    再次點(diǎn)擊選項(xiàng)可以取消選擇
    對(duì)于有層級(jí)關(guān)系的復(fù)選選項(xiàng)：
    選中父復(fù)選框后，將選中所有子復(fù)選框

    如果未選中父復(fù)選框，則取消選中所有子復(fù)選框

    如果選中某些（但不是全部）子復(fù)選框，則父復(fù)選框?qū)⒆優(yōu)椴淮_定復(fù)選框

    要注意的是：?jiǎn)芜x和復(fù)選控件樣式，不要混淆。也不要在單選的情況下使用復(fù)選按鈕。

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

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

      選擇之后直接更改，沒有確認(rèn)鍵；
    選項(xiàng)字?jǐn)?shù)可以較長(zhǎng)，選項(xiàng)可以較多。
    （4）單選-選擇器

    更多出現(xiàn)在ios系統(tǒng)中，一般從出現(xiàn)在界面底部；
   列表式看起來(lái)選項(xiàng)更清晰；
    一般在表單填寫中出現(xiàn)，選項(xiàng)較多，可滑動(dòng)。
  多選
    多選形式較單一：
      一般是勾選加外框的形狀，避免與單選按鈕混淆；

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

網(wǎng)站標(biāo)題：網(wǎng)站手機(jī)版如何設(shè)計(jì)單選復(fù)選控件
標(biāo)題網(wǎng)址：http://www.rwnh.cn/news/114820.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、動(dòng)態(tài)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、商城網(wǎng)站、網(wǎng)站排名、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)