<strike id="ca4is"><em id="ca4is"></em></strike>
  • <sup id="ca4is"></sup>
    • <s id="ca4is"><em id="ca4is"></em></s>
      <option id="ca4is"><cite id="ca4is"></cite></option>
    • 二維碼
      企資網(wǎng)

      掃一掃關(guān)注

      當(dāng)前位置: 首頁 » 企業(yè)資訊 » 設(shè)備 » 正文

      超全面_開關(guān)_復(fù)選框和單選組件在web表單應(yīng)用

      放大字體  縮小字體 發(fā)布日期:2022-06-26 18:02:18    作者:江學(xué)武    瀏覽次數(shù):36
      導(dǎo)讀

      感謝導(dǎo)語:如何針對具體場景選擇合適得組件,是web表單設(shè)計(jì)中得常見問題。那么,你知道開關(guān)、單選、復(fù)選框等組件得適用場景該如何選擇么?本篇文章里,就該問題做了詳細(xì)解答,一起來看一下吧。在web表單設(shè)計(jì)

      感謝導(dǎo)語:如何針對具體場景選擇合適得組件,是web表單設(shè)計(jì)中得常見問題。那么,你知道開關(guān)、單選、復(fù)選框等組件得適用場景該如何選擇么?本篇文章里,就該問題做了詳細(xì)解答,一起來看一下吧。

      在web表單設(shè)計(jì)中,我們會經(jīng)常遇到在開關(guān)、單選、復(fù)選框三個(gè)組件得選擇使用上糾結(jié),特別是只有兩種狀態(tài)下,比如開啟/關(guān)閉、啟用/關(guān)閉、顯示/隱藏、同意/不同意、默認(rèn)/自定義……

      我們發(fā)現(xiàn)使用Switch開關(guān)、Radio單選和Checkbox復(fù)選這三個(gè)組件好像也都是可以得,這時(shí)應(yīng)該選擇哪個(gè)組件更合適呢?

      感謝主要探討這三個(gè)組件得基本特點(diǎn),以?及在web表單設(shè)計(jì)中,這三個(gè)組件使用上有什么區(qū)別,以及常見得場景如何去選擇。

      文章概覽一、Switch 開關(guān)?它就像是滅霸得響指1. 簡要了解開關(guān)

      開關(guān)作為仿照物理開關(guān)得映射,提供了兩種最為簡單、直接得對立選項(xiàng),比如開/關(guān)、啟動(dòng)/禁用等。它就像生活中控制燈泡得開關(guān),燈泡立即亮起。所以它得意符也必須明確,不然用戶都不知道,即將要啟動(dòng)/關(guān)閉什么。

      2.開關(guān)組件得特點(diǎn)
        對象標(biāo)簽名稱須傳達(dá)清晰,能夠讓用戶能夠明確感知操作后得動(dòng)作開啟或關(guān)閉什么;主體標(biāo)簽信息和按鈕是分離得,兩個(gè)視覺焦點(diǎn);一般后會立即反饋;沒有hovering效果,有動(dòng)作效果,更適合手指操作;非W3C組織自家html標(biāo)記,品質(zhì)不錯(cuò)情況不支持 Javascript。
      3. 蘋果公司對開關(guān)組件得設(shè)計(jì)規(guī)范

      蘋果得「Human Interface Guidelines」有著這么一份對于開關(guān)組件得使用規(guī)范定義,我們不妨可以借鑒。

      1) 避免使用開關(guān)控制局部細(xì)節(jié)或者次要得設(shè)置。開關(guān)得視覺權(quán)重比較高,所以用它控制內(nèi)容較多更為合適,比如可以將它作為總開關(guān)打開或關(guān)閉一組設(shè)置。

      2) 通常不要用開關(guān)替代復(fù)選框。如果我們得規(guī)范中定義了復(fù)選框,則盡可能保持一致得使用規(guī)范。

      4. 開關(guān)使用場景舉例

      通過上述對開關(guān)組件特點(diǎn),結(jié)合蘋果組件得規(guī)范,我們基本可以梳理出以下幾條主要主要使用場景:

      1)開關(guān)得標(biāo)簽意符需傳達(dá)清晰

      和單選、復(fù)選框不一樣得是,因?yàn)殚_關(guān)主體得信息和按鈕是分離得。用戶在開關(guān)按鈕前,必須清晰告知用戶后會發(fā)生什么,甚至有時(shí)我們需要通過增加副標(biāo)題來加以說明。

      2)一般只為立即生效得場景使用開關(guān)按鈕

      在表單填寫時(shí),往往最終會有「提交」按鈕作為結(jié)束態(tài),開關(guān)作為表單字段得填寫,用戶后并不能夠立即生效,而是需要再次「提交」按鈕。

      3)有風(fēng)險(xiǎn),需著重提醒用戶

      開關(guān)得視覺權(quán)重較高,在復(fù)雜得表單信息中,它能夠很快吸引到用戶得注意力,并能夠給用戶以視覺提醒。

      4)避免大面積使用開關(guān),使用它控制局部細(xì)節(jié)或者次要設(shè)置

      開關(guān)在視覺感知上它和按鈕上有些接近,所以盡可能避免在表單中大量使用開關(guān)來控制局部層級內(nèi)容,這時(shí)推薦使用復(fù)選框來替代開關(guān)作為局部。

      5)把它作為高層級內(nèi)容控制或信息設(shè)置

      把它用來作為總控制來顯示更高層級內(nèi)容,避免web表單中大面積得使用開關(guān)按鈕,會和其他得基本組件造成視覺干擾。這樣可以既凸顯其重要性,又能提升用戶瀏覽表單得效率。

      5. 小結(jié)

      開關(guān)按鈕就像是滅霸得戒指,視覺突出且反應(yīng)快。用戶瀏覽表單、填寫內(nèi)容組之間,一般不需要很強(qiáng)得視覺差異。如果填寫得表單信息之間對比差異過大,開關(guān)往往給用戶造成過大得視覺干擾,反而阻礙用戶瀏覽表單得效率。

      二、Checkbox 復(fù)選框? 它是一個(gè)機(jī)器小能手1. 簡要了解復(fù)選框

      讓用戶在兩個(gè)布爾值之間進(jìn)行選擇,勾選后和未勾選表示“是/否、要/不要、開啟/關(guān)閉…” 等問題。以下內(nèi)容主要討論單個(gè)復(fù)選框得使用情況。

      2.復(fù)選框得特點(diǎn)

      1)為了便于用戶快速理解,一般復(fù)選框得標(biāo)簽內(nèi)容是一句話,不會用逗號去作隔開。

      2)作為單選狀態(tài)時(shí),操作對象和標(biāo)簽主體內(nèi)容視覺焦點(diǎn)是不分開得,選擇后就知道它被選中了。

      3)可直接表示標(biāo)簽內(nèi)容得開啟、關(guān)閉。

      3. 場景舉例分析

      1) 用戶基本清楚會發(fā)生什么,使用復(fù)選框

      如果使用開關(guān)或者單選框,我們會發(fā)現(xiàn)視覺干擾特別嚴(yán)重,一般表單內(nèi)容不需要特別去強(qiáng)調(diào)每一個(gè)字段得開啟狀態(tài)。當(dāng)然如果排版限制,我們也是可以將復(fù)選框放到標(biāo)簽得右側(cè)(放右側(cè)復(fù)選框需對齊)。

      2)表單中得復(fù)選框生效,需要配合提交按鈕

      一般情況下,表單填寫中,復(fù)選框不會像開關(guān)后立即生效,它需要配合提交按鈕生效。所以用戶在提交前可查看他們填寫得表單,更有助于在信息防錯(cuò)。

      (Ps. 在設(shè)置頁,復(fù)選框可單獨(dú)作為設(shè)置且立即生效。)復(fù)選框得主體標(biāo)簽信息和復(fù)選按鈕在一起,特別是對于批量填寫或設(shè)置一批字段,使用復(fù)選框效率更高。

      3)用復(fù)選框來控制表單局部細(xì)節(jié)

      如上述,如果控制對象得功能是表單得一個(gè)局部,或信息內(nèi)容不是很多,用戶也清楚知道選擇后會是什么,這時(shí)候復(fù)選框更適合。

      這時(shí)我們不需要過重地給用戶強(qiáng)調(diào)什么,用復(fù)選框會比使用開關(guān)讓整個(gè)表單得結(jié)構(gòu)內(nèi)容更清晰。

      4. 小結(jié)

      復(fù)選框就像是一個(gè)機(jī)器小能手,它得應(yīng)用拓展性比開關(guān)更強(qiáng),它既可以作為層級內(nèi)容使用,又可以作為設(shè)置項(xiàng),后并立即生效。

      在表單中,作為局部、或者細(xì)節(jié)內(nèi)容控制,使用復(fù)選框更合適。它也不會像單選按鈕閱讀有信息阻斷得問題,不會像開關(guān)有強(qiáng)視覺干擾,它會讓我們得視覺焦點(diǎn)更集中表單信息上。

      三、Radio 單選按鈕? 白天不懂夜得黑1. 簡要了解單選按鈕

      單選按鈕最早得設(shè)計(jì)模型,于收音機(jī)切換頻道得按鍵,當(dāng)我們按下其中一個(gè),其他得按鈕就會被彈出,按下得那個(gè)按鈕就成為了選中得狀態(tài)。單選按鈕可謂是涇渭分明,有你不能有我。

      2. 單選按鈕得特點(diǎn)

      單選按鈕得優(yōu)點(diǎn)是,將所有信息條件暴露給到用戶,它不像開關(guān)在使用上帶有去猜測、探索得必要。

      1)每個(gè)選擇都非常直觀,如果希望用戶閱讀完所有選項(xiàng),用它再好不過了。

      2)拓展性更強(qiáng),相較于開關(guān)、復(fù)選框得布爾值,單選能承載兩個(gè)或兩個(gè)以上選擇。

      3)必須提供默認(rèn)值,且默認(rèn)值可以承載內(nèi)容。

      3. 場景舉例分析

      1)需要讓用戶明確知道兩者得區(qū)別,甚至需要強(qiáng)調(diào)兩個(gè)選項(xiàng)得不同

      如果采用復(fù)選框,用戶需要在兩個(gè)差距較大得選項(xiàng)中去作思考。

      2)開啟/關(guān)閉得單選狀態(tài),使用復(fù)選框

      復(fù)選框?qū)τ诮^大多數(shù)用戶都是非常清楚,使用復(fù)選框在空間、視覺焦點(diǎn)更是更集中得,所以如果只針對開啟/關(guān)閉得狀態(tài),推薦使用復(fù)選框

      3)每個(gè)選項(xiàng)都關(guān)聯(lián)內(nèi)容時(shí),使用單選按鈕

      我們知道,如果默認(rèn)選項(xiàng)設(shè)計(jì)得好,會讓很多人保持選擇默認(rèn)選項(xiàng)。

      下圖這個(gè)案例,如果采用復(fù)選框或者開關(guān),用戶就不得不去探索思考開啟后是什么,還要擔(dān)心理解開啟/關(guān)閉后帶來得影響,而對于絕大多數(shù)用戶來說,這邊得報(bào)名設(shè)置系統(tǒng)默認(rèn)內(nèi)容無需改動(dòng)。需注意給用戶提供得默認(rèn)選擇,一定要是安全、方便得選項(xiàng)。

      4)較長需隱藏拆分得內(nèi)容情況,使用單選按鈕

      在表單設(shè)計(jì)中,如果遇到得內(nèi)容需要重新組織或者拆分時(shí),選擇使用單選按鈕。這樣不僅能夠做到表單信息簡潔,也能夠提高用戶得瀏覽效率。

      5)垂直排列單選,信息閱讀更佳

      如果字段名稱較長,需要添加副標(biāo)題加以說明,這時(shí)單選按鈕承載得信息較多,使用垂直排列讓用戶有一致得起始閱讀線,眼球轉(zhuǎn)動(dòng)幅度最小,信息獲取體驗(yàn)更佳。如果標(biāo)簽文字較少,也可以橫排不至于占用太多得垂直空間。

      4. 小結(jié)

      單選按鈕就是白天和黑夜,互不干擾得條件,希望用戶閱讀完這兩個(gè)選項(xiàng),使用單選按鈕再好不過了,考慮到單選按鈕提供得默認(rèn)選項(xiàng),提供得要是絕大多數(shù)用戶需要得,且是安全方便得,如果單選按鈕標(biāo)簽文字過多,在排版時(shí)垂直排列拓展性更強(qiáng),閱讀體驗(yàn)更佳。

      四、全文總結(jié)

      1)開關(guān)更像是一個(gè)滅霸得戒指閃閃發(fā)光,不過在表單結(jié)構(gòu)、各種控件內(nèi)容較多,需要頁面清晰、避免過多得視覺突出,所以盡量避免讓無數(shù)個(gè)戒指閃亮中表單中。

      2)復(fù)選框它更像是一個(gè)機(jī)器小能手,適用和拓展性極強(qiáng),即可以單獨(dú)作為設(shè)置,不用配合其他提交按鈕,也可以作為表單填寫得一部分。當(dāng)我們猶豫使用哪個(gè)組件時(shí),選擇它一般不會錯(cuò)。

      3)單選按鈕就像是白天和黑夜,完全不見彼此。單選條件承載得信息也較多,如果希望用戶對比感知到兩者信息得不同,那么使用單選按鈕。

      4)最后理論永遠(yuǎn)只是指導(dǎo)實(shí)踐得一部分,上述內(nèi)容可能只是在用戶認(rèn)知和易用性之間,找到一個(gè)相對平衡得點(diǎn),具體得使用場景情況,還是要具體問題具體分析。

      參考文獻(xiàn)

      Nielsen Norman Group

      Human Interface Guidelines

      特別woshipm/pd/374314.html

      特別woshipm/ucd/1267601.html

      感謝由 等小高雜談 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止感謝。

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

       
      (文/江學(xué)武)
      免責(zé)聲明
      本文僅代表作發(fā)布者:江學(xué)武個(gè)人觀點(diǎn),本站未對其內(nèi)容進(jìn)行核實(shí),請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內(nèi)容,一經(jīng)發(fā)現(xiàn),立即刪除,需自行承擔(dān)相應(yīng)責(zé)任。涉及到版權(quán)或其他問題,請及時(shí)聯(lián)系我們刪除處理郵件:weilaitui@qq.com。
       

      Copyright ? 2016 - 2025 - 企資網(wǎng) 48903.COM All Rights Reserved 粵公網(wǎng)安備 44030702000589號

      粵ICP備16078936號

      微信

      關(guān)注
      微信

      微信二維碼

      WAP二維碼

      客服

      聯(lián)系
      客服

      聯(lián)系客服:

      在線QQ: 303377504

      客服電話: 020-82301567

      E_mail郵箱: weilaitui@qq.com

      微信公眾號: weishitui

      客服001 客服002 客服003

      工作時(shí)間:

      周一至周五: 09:00 - 18:00

      反饋

      用戶
      反饋

      午夜久久久久久网站,99久久www免费,欧美日本日韩aⅴ在线视频,东京干手机福利视频
        <strike id="ca4is"><em id="ca4is"></em></strike>
      • <sup id="ca4is"></sup>
        • <s id="ca4is"><em id="ca4is"></em></s>
          <option id="ca4is"><cite id="ca4is"></cite></option>
        • 主站蜘蛛池模板: 91精品久久久久久久久中文字幕| 亚洲色成人WWW永久网站| 久久免费观看国产99精品| 男女下面一进一出视频在线观看| 欧美日韩国产人成在线观看| 在线观看黄网站| 伊人久久国产精品| GOGOGO免费观看国语| 激情小说在线视频| 在线观看中文字幕2021| 亚洲精品成人片在线播放| 91精品国产入口| 欧美日韩国产综合在线| 国产精品美女久久久网av| 亚洲成a人片77777群色| 北条麻妃久久99精品| 暖暖免费中国高清在线| 国产又黄又爽又刺激的免费网址| 久久九九国产精品怡红院| 色妞视频资源在线观看| 成人短视频完整版在线播放| 又大又紧又粉嫩18p少妇 | av在线手机播放| 波多野结衣中文字幕一区二区三区 | 香蕉免费在线视频| 欧亚专线欧洲s码在线| 国产女同在线观看| 久久中文字幕网站篠田优| 经典三级在线播放线观看| 好吊妞在线成人免费| 亚洲精品亚洲人成在线观看| 在线观看精品视频看看播放| 果冻传媒mv在线观看入口免费| 国产婷婷综合丁香亚洲欧洲| 久久久久亚洲AV成人片| 精品理论片一区二区三区| 天天5g影院永久免费地址| 亚洲最大免费视频网| 黄色软件网站大全| 成在人线AV无码免费| 亚洲色国产欧美日韩|