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

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ù)選控件是如何使用的。
    單選控件總結(jié)了四種樣式：按鈕式、選中打點、列表勾選和選擇器。
   單選
（1）單選-按鈕式
      選項一般是相同類型的，例如淘寶選擇商品尺寸、屬性等選項內(nèi)容少，選項數(shù)量較少；
    彈窗內(nèi)容清晰明了，選擇區(qū)域很清楚，但選擇區(qū)域較小；
    不適合選項較多、選項文案較長的場景。
   （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)站標題：網(wǎng)站手機版如何設(shè)計單選復(fù)選控件
標題網(wǎng)址：http://www.muchs.cn/news/114820.html

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

廣告

聲明：本網(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)