單選按鈕必填會有紅色選中提示嗎_為什么單選按鈕和復選框不能共存?

26d54ed2c84e3456e5e3aadd60ccb219.png

以下內容由摹客團隊翻譯整理,僅供學習交流,摹客設計+協作一站式云平臺,從產品、設計到開發,摹客來解決。
單選按鈕和復選框長期以來一直都是容易導致用戶困惑的組件。這兩個組件通常用于相同的情景下,但看起來又完全不同。設計人員和開發人員一般比較清楚兩者的區別,因為他們在工作中會接觸到。那么,普通用戶知道嗎?
事實上,用戶也需要知道這兩個組件的區別(ps:間接說明了這兩個組件并不直觀)。它們的外觀本身并不能反映它們在功能上的細微差別。視覺線索上只有圓點和復選框的區別;除了選項之外,其他對用戶毫無意義。因此,單選按鈕和復選框同時存在違反了用戶體驗中的一致性原則。
設計師和開發人員從來沒有質疑過它們的共存,因為一直以來都是這樣的。然而,如果它們的共存引起了用戶的困惑并違反了用戶體驗原則,那么就需要進行邏輯分析和重新考慮了。違反用戶體驗一致性原則
用戶體驗的一致性原則規定:具有相似功能和相同用法的組件應該具有統一的外觀。單選按鈕和復選框具有類似的功能,并在相同的上下文中使用,但它們的外觀并沒有統一之處。

b0268a5f15f02349922419b98c4106c4.png
單選按鈕和復選框


單選按鈕表示相互排斥的選項,而復選框表示相互包含的選項。這兩種組件通常都用于從列表中選擇選項的場景。然而,它們是兩種不同的視覺提示,單選按鈕的是一個圓里面有一個點,而復選框是一個正方形里面有一個勾選標記。
可能有人會覺得它們功能不同,所以它們看起來應該是不同的。但準確地說,它們只是功能略有不同,而用法是相同的,這不足以證明外觀不一致是合理的。同樣功能的組件設計不同的外觀會產生不一致性,讓用戶感到困惑。互斥/包容不是用戶關心的問題
如果你問一個普通用戶什么是互斥或包含選項,他們可能無法回答你。因為他們在使用時并不會考慮互斥性或包容性,只有設計師和開發人員設計頁面才會考慮這些。
用戶只需閱讀標簽提示并選擇想要的選項。他們關注的是提示上的內容,而不是組件功能。因此,互斥性和包容性應該在標簽提示中體現,而不是組件外觀。設計人員和開發人員正在把他們的思維方式強加給用戶。用戶如何知道是單選還是多選?
組件上提供的標簽提示通常能告知用戶可以進行多選還是單選。當用戶可以選擇多個選項時,標簽單詞后綴是復數形式。當用戶只能選擇一個選項時,標簽單詞后綴是單數形式。在標簽提示中提及互斥或包含的標簽時,請確保使用正確的名詞形式。用戶很容易遺忘這些標簽提示,但它們傳遞了最重要的信息。

ae9c764d6684037210e1d0b65e15f1a6.png
標簽單復數


與復選標記和圓點相比,標簽的名詞形式更能清楚地說明相斥/包容的關系。一個勾選標記或一個圓點并不能表示互斥還是包容關系,只有設計師、開發人員和精通技術的用戶才熟悉這個約定。普通用戶看到相同的上下文環境中使用了不同組件,他們就會想知道這些視覺差異意味著什么。這種差異雖然不足以阻礙用戶進行交互,但肯定會轉移他們的注意力。

9e68e2007494b1cc8e750080ecf59887.png
組件對比

使用Check Circles代替
如果用戶需要一個組件用于在列表中選擇選項,與其使用單選按鈕和復選框,不如直接使用Check Circles。它結合了單選按鈕的外部形狀和復選框的復選標記提示,如下圖所示。

bf9ce2f1ead2a78e10aa4ebfd3de86cd.png
Check Circle示例


之所以使用復選標記,是因為它比圓點更具選擇提示性,通常它被認為是“肯定”或“是”的象征。而圓點是一個微弱的視覺線索,它可以包含任何含義。
而圓形輪廓有助于區別于復選框。它還有一個額外的好處就是更吸引人,更容易被識別。
把Check Circles用于列表選項選擇,用戶就不會被單選按鈕和復選框之間的差異分散注意力了。他們可以更多地關注選項標簽,選擇最適合自己的選項。用戶是否只能選擇一個或多個選項并不重要。他們將根據選項標簽的指示進行選擇,而不是組件的類型。舊的設計實踐在不斷發展
單選按鈕和復選框已經共存很久了。然而,由于對用戶體驗漸漸有了更好的理解,過去許多舊的設計實踐也在不斷發展演變。例如,清除表單的重置按鈕、必填字段上的紅色星號和密碼確認字段現在幾乎都消失了。單選按鈕和復選框可能很快也會這樣做,因為和生活中的一些事情一樣,界面設計也在不斷發展和變化。原文作者:Anthony原文地址:https://uxmovement.com/forms/why-radio-buttons-and-checkboxes-cant-co-exist/學習工具,但不受限于某種工具。摹客,為企業團隊提供原型設計和全流程的設計協作。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/539278.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/539278.shtml
英文地址,請注明出處:http://en.pswp.cn/news/539278.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

用計算機進行服裝設計,電腦服裝設計(10制版1班)

《電腦服裝設計》課程教學大綱課程名稱:電腦服裝設計(Corldraw和Photoshop)課程代碼:10617313總學時:68課時適用專業:10制版方向學生開課單位:時裝設計學院一、講課內容第一章 CORELDROW軟件整體的介紹第一節緒論, 與其他圖形繪制軟件的區別及…

程序包org.junit.jupiter.api不存在

在跑項目的時候遇到這個問題&#xff0c;去看pom文件一切正常&#xff0c;也引入了這個依賴 <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.13.2</version> <scope>test</scope&…

thrift介紹及應用(一)—介紹

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12157151 ------------------------------------------------------------------------------------ 一、概述 Thrift是Apache下的一個子項目&#xff0c;最早是Facebook的項目&#xff0c;后來Facebook提供給Apa…

matlab雙目相機標定校正_基于雙目視覺的無人機避障算法(一)

講述在10月到12月所做的所有工作對于一個無人機自主避障來說&#xff0c;存在著以下流程&#xff1a;感知&#xff1a;障礙物檢測、行人檢測、目標檢測SLAM&#xff1a;為無人機提供位置估計&#xff0c;構建稀疏環境地圖路徑規劃&#xff1a;規劃一條從當前位置到目標位置的移…

計算機無法播放,如果無法播放計算機mp4文件怎么辦?

FireStar365接受1. 下載并安裝最新版本的視頻播放器(例如: Storm Video).2. 在硬盤中找到MP4視頻文件.3. 右鍵單擊該文件&#xff0c;然后選擇打開方法“ Storm Video”.4. 可以雙擊打開頁面.zxc942128835將mp4鏈接到計算機&#xff0c;打開磁盤&#xff0c;單擊菜單欄上的工具…

thrift介紹及應用(二)—簡單應用

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12162131 ----------------------------------------------------------------------------------- 【接上文“thrift介紹及應用&#xff08;一&#xff09;—介紹”】 六、一個最簡單的實例 Thrift文件&#xf…

打游戲的教育意義

夜色已深&#xff0c;一個男孩子還在打游戲。門忽然開了&#xff0c;媽媽走了進來&#xff0c;她把一碗陽春面擺在桌子上。說&#xff1a;"歇息一會兒&#xff0c;趁熱把這碗面吃了吧。"孩子嗯了一聲&#xff0c;眼睛沒有離開屏幕。媽媽生怕打攪孩子&#xff0c;悄悄…

python快速編程入門課本第六章_python編程快速上手第六章實踐項目參考code

代碼如下&#xff1a; 題目的意思是通過一個函數將列表的列表顯示在組織良好的表格中&#xff0c;每列右對齊 tableData [[apples, oranges, cherries, banana], [Alice, Bob, Carol, David], [dogs, cats, moose, goose]]apples Alice dogs oranges Bob cats cherries Carol …

計算機硬件配置組件,配置vcenter server的硬件(默認指windows版本的)

一般來說vcenter的硬件需求與它管理的主機和VM有直接關系1. vcenter server的最低硬件配置Two 64-bit CPUs or a single dual-core 64-bit CPU.2 GHz processor or faster.4 GB of RAM or more.4 GB of free disk space.A network adapter (Gigabit Ethernet strongly recommen…

標準評分卡分數計算原理_評分卡的形式、刻度及應用場景

&#xfeff; 看到有伙伴提問&#xff1a;①我們的評分卡做好后&#xff0c;后續的使用策略是什么呀&#xff0c;都有哪些方向&#xff1f; ②評分卡分數切割點如何定&#xff0c;制定的業務邏輯是什么&#xff1f;其實&#xff0c;這個問題不好回答&#xff0c;也好回答。一方…

hexeditor 復制二進制值_MySQL復制全解析 Part 6 MySQL GTID 生命周期

實驗環境此次實驗的環境如下MySQL 5.7.25Redhat 6.10操作系統賬號:mysql數據庫復制賬號:repl復制格式:基于行的復制通過前面的介紹我們知道MySQL的復制有兩種方法基于二進制日志文件位置基于GTID上一節的內容為GTID的格式和存儲&#xff0c;這節根據官方文檔我們說GTID的生命周…

Thrift介紹與應用(三)—hbase的thrift接口

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12163047 ----------------------------------------------------------------------------------- 一、概述 Hbase是目前比較火的列存儲數據庫&#xff0c;由于Hbase是用Java寫的&#xff0c;因此它原生地提供了…

Linux/Unix 新手和專家教程

你正在找一些高質量的Linux 和 UNIX 的教程嗎&#xff1f;如果是&#xff0c;這篇文章會告訴你到哪去找到這些教程。這里我們將給出超過30個相當的不錯的 Linux 和 UNIX 在線的教程。 需要大家注意的是&#xff0c;他們都是英文的&#xff0c;也許有一些也經被翻譯到了中文社區…

自動ip的計算機共享打印,局域網內自動獲取ip地址怎么設置打印機共享文件夾...

在局域網環境中,為了盡可能地節省辦公成本,很多用戶都會選擇在局域網中架設、部署共享打印機,以便在單位的任何角落處都能方便、自如地進行打印操作。下面是學習啦小編為大家整理的關于局域網內自動獲取ip地址怎么設置打印機共享文件夾&#xff0c;一起來看看吧!局域網內自動獲…

高級數據分析1代碼_用Python進行數據分析,讓你一看就會

本書詳細介紹利用Python進行操作、處理、清洗和規整數據等方面的具體細節和基本要點。雖然本書的標題是“數據分析”&#xff0c;重點卻是Python編程、庫&#xff0c;以及用于數據分析的工具。第1章 準備工作第2章 Python語法基礎&#xff0c;IPython和Jupyter Notebooks第3章 …

工期日歷天計算器_天津實地告訴你:房建項目是怎樣保節點,搶工期的?

工程概況天津實地薔薇花園住宅地塊項目共計由24棟單體住宅、2棟配建及地下人防車庫組成&#xff0c;其中12層小高層4棟、13層小高層1棟、19棟7層洋房。總建建筑面積為139348.62㎡&#xff0c;地上99348㎡&#xff0c;地下40000㎡&#xff0c;人防面積為14236㎡。工期目標項目施…

thrift介紹及應用(四)—hadoop的thrift接口

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12163519 ----------------------------------------------------------------------------------- 一、概述 hadoop是目前使用比較多的分布式文件系統&#xff0c;由于hadoop是用Java寫的&#xff0c;對非Java程…

遲到的年度總結,我們應該收放自如

現在已經2018年3月了&#xff0c;這篇2017的年度總結顯得晚了一點&#xff0c;但意義非凡&#xff0c;讓我有了更多的反省和思考&#xff0c;我相信大家讀完一定會有收獲。好了&#xff0c;廢話不多說進入主題。別用學習來逃避成長這話說的簡直是屁話&#xff0c;不是學習才會成…

測試fps游戲反應速度軟件,FPS反應速度提速

靜謐無聲&#xff0c;生死一瞬&#xff0c;說的就是FPS游戲&#xff0c;沒有哪一個種類的游戲可以比擬我們FPS玩家對于反應速度的追求&#xff0c;更快更準哪怕提速只是1毫秒&#xff0c;無數高手之所以為高手就是因為他們可以打出我們看起來不可能完成的擊殺&#xff0c;特別是…

html5中單選框被選中把值傳給后臺_HTML5的表單設計

使用過Delphi的程序員&#xff0c;對Form這個詞應該比較熟悉。在Delphi中&#xff0c;Form被翻譯為“界面、窗口”&#xff0c;作用是&#xff1a;為用戶提供界面&#xff0c;供用戶輸入信息&#xff0c;向用戶展示處理結果。HTML5中也有Form&#xff0c;功能與Delphi中的Form差…