Общие сведения об элементе управления RadioButton (Windows Forms)
Элементы управления RadioButton Windows Forms представляют набор из двух или более взаимоисключающих вариантов для выбора пользователем. Переключатели и флажки функционируют похожим образом, но существует важное различие: когда пользователь выбирает переключатель, он не может выбрать и другие переключатели в той же группе. В отличие от этого, можно выбрать любое количество флажков. Определение группы переключателей сообщает пользователю: «Вот набор вариантов, из которых можно выбрать один и только один».
Использование элемента управления
При щелчке элемента управления RadioButton для его свойства Checked устанавливается значение true и вызывается обработчик событий Click. При изменении значения свойства Checked возникает событие CheckedChanged. Если для свойства AutoCheck задано значение true (по умолчанию), при выборе переключателя все остальные элементы в группе автоматически очищаются. Обычно для этого свойства задается значение false только в том случае, если используется код проверки, чтобы убедиться, что выбранный переключатель является допустимым вариантом. Текст, отображаемый в элементе управления, задается свойством Text и может содержать сочетания клавиш доступа. Благодаря клавишам доступа пользователь может «щелкнуть» элемент управления, нажав клавишу ALT с клавишей доступа. Дополнительные сведения см. в разделах Практическое руководство. Определение клавиш доступа для элементов управления Windows Forms и Практическое руководство. Определение текста, отображаемого элементом управления Windows Forms.
Элемент управления RadioButton может отображаться как кнопка команды. При выборе этого элемента управления он может выглядеть как нажатая кнопка, если для свойства Appearance задано значение Button. Переключатели также могут демонстрировать изображения с помощью свойств Image и ImageList. Дополнительные сведения см. в разделе Практическое руководство. Определение изображения, отображаемого элементом управления Windows Forms.
См. также
- RadioButton
- Общие сведения об элементе управления Panel
- Общие сведения об элементе управления GroupBox
- Общие сведения об элементе управления CheckBox
- Практическое руководство. Определение клавиш доступа для элементов управления Windows Forms
- Практическое руководство. Определение текста, отображаемого элементом управления Windows Forms
- Практическое руководство. Создание переключателя для выбора одной из нескольких установок на базе элементов управления RadioButton в Windows Forms
- Элемент управления RadioButton
Совместная работа с нами на GitHub
Источник этого содержимого можно найти на GitHub, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.
Что такое радиобаттон в тестировании
Элемент CheckBox или флажок предназначен для установки одного из двух значений: отмечен или не отмечен. Чтобы отметить флажок, надо установить у его свойства Checked значение true .
Кроме свойства Checked у элемента CheckBox имеется свойство CheckState , которое позволяет задать для флажка одно из трех состояний — Checked (отмечен), Indeterminate (флажок не определен — отмечен, но находится в неактивном состоянии) и Unchecked (не отмечен)
Также следует отметить свойство AutoCheck — если оно имеет значение false , то мы не можем изменять состояние флажка. По умолчанию оно имеет значение true .
При изменении состояния флажка он генерирует событие CheckedChanged . Обрабатывая это событие, мы можем получать измененный флажок и производить определенные действия:
private void checkBox_CheckedChanged(object sender, EventArgs e) < CheckBox checkBox = (CheckBox)sender; // приводим отправителя к элементу типа CheckBox if (checkBox.Checked == true) < MessageBox.Show("Флажок " + checkBox.Text + " теперь отмечен"); >else < MessageBox.Show("Флажок " + checkBox.Text + " теперь не отмечен"); >>
Radiobutton
На элемент CheckBox похож элемент RadioButton или переключатель. Переключатели располагаются группами, и включение одного переключателя означает отключение всех остальных.
Чтобы установить у переключателя включенное состояние, надо присвоить его свойству Checked значение true .
Для создания группы переключателей, из которых можно бы было выбирать, надо поместить несколько переключателей в какой-нибудь контейнер, например, в элементы GroupBox или Panel. Переключатели. находящиеся в разных контейнерах, будут относиться к разным группам:
Похожим образом мы можем перехватывать переключение переключателей в группе, обрабатывая событие CheckedChanged . Связав каждый переключатель группы с одним обработчиком данного события, мы сможем получить тот переключатель, который в данный момент выбран:
private void radioButton_CheckedChanged(object sender, EventArgs e) < // приводим отправителя к элементу типа RadioButton RadioButton radioButton = (RadioButton)sender; if (radioButton.Checked) < MessageBox.Show("Вы выбрали " + radioButton.Text); >>
Radio buttons, checkboxes и другие виды селекторов
Выбери меня! Выбери меня! Нет, выбери меня! В сегодняшней статье мы рассмотрим селекторы и чем они различаются. В отличие от большинства других моих статей, основное внимание будет уделено двум компонентам (радиокнопкам (radio buttons) и флажкам (checkboxes), а также их сравнению с парой других селекторов. Читайте также: Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)
1. Что такое селекторы
Селектор (selector) – это поле ввода, в котором пользователь должен выбрать один (или несколько) параметров, в отличие от текстового поля, в котором пользователь имеет полную свободу действий. Селекторы, как прически Lady Gaga, бывают разных форм и стилей. Выпадающие списки, флажки, переключатели, ползунки и т.д. – это разные типы селекторов, но они не похожи друг на друга. Основное функциональное различие между этими типами селекторов состоит в том, сколько вариантов пользователь может выбрать: один или несколько. В идеальном мире, где нет голода, браконьерства, парниковых газов или преступлений, я бы ходатайствовала об изменении названия радиокнопок на «одиночные селекторы», а флажков на «мультиселекторы». Я думаю, что подобные названия намного лучше описывают их функциональность, но, увы, эти устаревшие названия слишком укоренились, и, вероятно, останутся с нами навсегда.
2. Анатомия флажков и радиокнопок
Хотя, в этой статье мы рассмотрим различные типы селекторов, мы сосредоточимся на радиокнопках (radio buttons) и флажках (checkboxes). Ниже их анатомия. Анатомия радиокнопок и флажков Примечание: Иногда люди говорят «radio button»/ «checkbox», когда имеют ввиду метку и селектор вместе, в то время, как в других случаях они подразумевают только селектор. Я предпочитаю последний вариант.
3. В чем разница между радиокнопками и флажками
- 1
- 3
- Неограниченное кол-во
- 0
2) Какова форма селектора радиокнопки?
- Квадрат
- Круг
- Шестиугольник
- Треугольник
3) Если вы хотите создать интерфейс, в котором пользователь сможет выбрать несколько начинок для мороженого, вы должны использовать:
4) Если вы хотите создать интерфейс, в котором пользователь может выбрать тип банковского счета, который он может открыть, вы должны использовать:
5) Если бы вы хотели создать селектор «Подписаться на рассылку», какой тип вы бы использовали?
6) Выберите на картинке ниже вариант с радиокнопкой.
ОТВЕТЫ:
1): 3. Неограниченное кол-во
4): 1. Радиокнопки
Вы справились! (Надеюсь).
4. Распространенные стили селекторов
Ниже представлен ряд распространенных стилей флажков и радиокнопок, с которыми вы можете столкнуться в Интернете.
Стандартный стиль (радиокнопки / флажки)
Самый стандартный стиль флажков и радиокнопок – это кнопки с «галочками» или заполненные кружки. Я предпочитаю кнопки с галочкой, если вы не имеете дело с образовательными тестами (см. ниже).
Стандартный стиль с галочками
Стандартный стиль без галочек
Стиль кнопки в тестах (радиокнопки / флажки)
Когда пользователь отвечает на вопросы теста или викторины, мы должны убедиться в двух вещах: 1) что он может четко видеть, какие ответы выбирает, 2) что он не запутается, когда получит фидбек на свой ответ.
Если вы посмотрите на приведенный ниже пример, то увидите, что «галочка» может сбить с толку – кажется, что эти ответы верны, хотя еще не проверены.
Селекторы викторины, показывающие, что наличие галочки вызывает путаницу
Основной стиль с изображением (радиокнопки/ флажки)
Хотя этот стиль селектора может дать пользователю лучшее представление о том, что он выбирает, я редко использую его, поскольку, все равно изображение всегда будет слишком маленьким, чтобы его можно было разглядеть.
Радиокнопки и флажки с изображениями. Изображения: (с unSplash): Гамбургер от @amir_v_ali | Чикенбургер от @amir_v_ali | Веджибургер от @swimstaralex | Сыр от @swimstaralex | Помидоры от @lmablankers | Латук от @producteurslocaux
Изображения в стиле сетки (одно / несколько)
Я предпочитаю этот стиль изображений базовому, поскольку вы можете сделать изображения намного больше, и они лучше смотрятся.
Селекторы с сеткой изоражений. Изображения (с unSplash): Гамбургер от @amir_v_ali | Чикенбургер от @amir_v_ali | Веджибургер от @swimstaralex | Сыр от @swimstaralex | Помидоры от @lmablankers | Латук от @producteurslocaux
Впервые я узнал об этом стиле в тестах Buzzfeed. Они просто показывают изображение без текста. Если вы используете этот макет, пожалуйста, убедитесь, что у вас есть альтернативный текст для пользователей, использующих программу чтения с экрана или на случай плохого подключение к Интернету.
Многоуровневые флажки
Многоуровневые флажки необходимы, если элементы нужно разделить на группы. Также обратите внимание, что, если выбраны лишь несколько дочерних элементов, родительская категория выбирается только частично.
Это один из наиболее сложных элементов интерфейса, потому что верхний элемент (родительский) действует одновременно, как селектор и, как аккордеон. А что, если вы нажмете на метку, она выберет селектор или откроет / закроет аккордеон? Я не смогла найти определенное исследование того, какой вариант лучше, поскольку это необычный паттерн, но в прошлом я делала метку не селектором, а частью аккордеона. Пишите в комментариях, если у вас есть предложения, как решить эту дилемму.
Принудительный выбор
Иногда вам нужно разрешить пользователям выбирать только определенное количество элементов. Если пользователь выберет на одно значение больше разрешенного количества, самый первый выбранный вариант будет заменен («вытеснен») последним выбранным вариантом.
Флажки с принудительным выбором
Стиль кнопки (одиночный / множественный выбор)
Этот стиль позволяет вам складывать много разных элементов в стек. Это означает, что вы можете сэкономить место и иметь больше вариантов ответа. Поскольку этот паттерн не является распространенным, я предлагаю вам сообщить пользователю, сколько вариантов он может выбрать. Хотя нет причин не использовать его для одиночных селекторов, я никогда не встречала такой вариант.
Селектор в стиле кнопки
Этот стиль очень распространен, когда пользователя просят выбрать несколько тегов контента (хотя он может не знать об этом). В приведенном ниже примере Apple Music просит пользователей выбрать свои любимые жанры, которые, в свою очередь, порекомендуют песни и исполнителей в зависимости от выбора пользователя.
Переключатель (одиночный выбор)
Переключатель (toggle) чаще всего используется для настроек и позволяет пользователю выбирать между вариантами да / нет.
На мобильном устройстве сам переключатель обычно находится в крайнем правом положении, а метка – в крайнем левом. Это сделано для того, чтобы большому пальцу правой руки было легче менять параметры.
5. Состояния
Флажки и радиокнопки должны изменять свое состояние / внешний вид, чтобы пользователи знали, что они были выбраны. Нам нужно добавить эти маленькие визуальные подсказки, чтобы подтолкнуть пользователя в правильном направлении, используя паттерны, которые они уже знают и понимают.
По умолчанию / активно (Default/active)
Это начальное состояние селекторов. Это состояние указывает пользователю, что он может кликать по пунктам в вопросах.
Пример радиокнопок и флажков в их стандартном / активном состоянии
Неактивно (Inactive)
Когда установлено неактивное состояние, пользователь не сможет взаимодействовать с вариантами ответа. Пользователь редко сталкивается с этим состоянием, если это не указано в правилах продукта.
Пример радиокнопок и флажков в их неактивном состоянии
Наведение курсора (Hover)
Как и кнопки, селекторы должны указывать пользователям, что они интерактивны или кликабельны. Обычно это делается с помощью подсветки фона элемента при наведении курсора. Это также указывает, какая область элементов является кликабельной. Если вы уберете курсор, он должен вернуться в исходное состояние.
Пример радиокнопок и флажков в состоянии наведения курсора
Совет для нубов: у сенсорных устройств нет состояния наведения курсора
Фокус / выделение (Focus/highlighted)
Фокус или выделенное состояние обычно обозначается синим ореолом вокруг активируемого кликом элемента. Вы можете убедиться в этом сами, щелкнув по интерфейсу. Пользователь редко сталкивается с этим состоянием, если только не нажмет «Enter», чтобы выбрать элемент.
Пример радиокнопок и флажков в их состоянии фокуса / выделения
Нажато (Pressed)
Это состояние, когда пользователь удерживает свою мышь / палец, и элемент указывает пользователю, что на него нажимают.
Пример радиокнопок и флажков в их нажатом состоянии
Выбрано (Selected)
После того, как пользователь щелкнул по элементу, интерфейс должен сообщить ему об этом. Как упоминалось ранее, радиокнопки могут иметь только один выбранный элемент, а флажки могут иметь несколько, в зависимости от бизнес-правил.
Пример радиокнопок и флажков в их выбранном состоянии
Ошибка обратной связи (Fail feedback)
При свободном вводе текста пользователь может сделать опечатку и т. д. Однако, поскольку параметры в селекторе предопределены, должен быть только один тип обратной связи при ошибке: «incomplete», который пользователь получит только, если нажмет кнопку «отправить» до того, как закончат заполнение формы. Для флажков это будет необходимо, только если вопрос заставит их выбрать один или несколько элементов.
Пример радиокнопок и флажков в состоянии ошибки
6. Правила для текста метки
Существует только одно жесткое правило для меток селектора: быть последовательным.
- Убедитесь, что регистр на каждой метке селектора одинаков (регистр предложений, регистр заголовков и т. д.)
- Убедитесь, что все элементы либо заканчиваются точкой, либо нет.
- Постарайтесь убедиться, что все элементы являются либо предложением, либо фразой, либо словом. Старайтесь избегать, чтобы часть вариантов была предложениями, а другая – отдельными словами. Использование комбинации усложняет решение вопроса о том, какой регистр и пунктуацию использовать.
Пример меток элементов
7. Когда вы должны их использовать
Когда следует использовать радиокнопки или флажки? Это целиком зависит от того, какой вопрос вы задаете. Если вы хотите, чтобы пользователи выбрали несколько вариантов ответа, используйте флажки. Если хотите, чтобы пользователи выбрали только один вариант, используйте радиокнопки (или другой тип селектора).
Когда использовать радиокнопки
У меня есть четыре правила, когда использовать радиокнопки. Вот они:
- Когда вы хотите, чтобы пользователь выбрал только один элемент
Если вы хотите, чтобы пользователь выбрал более одного элемента, лучше использовать флажки. - Если у вас меньше шести вариантов ответа
В зависимости от ваших правил дизайна, если есть более пяти или шести элементов, используйте раскрывающийся список. Да, да, я знаю, что они неуклюжие, но они экономят много пространства вашего дизайна.
Сравнение раскрывающегося списка и радиокнопок
При этом, если пространство не является проблемой, возможно, стоит использовать радиокнопки – особенно, если вы проектируете для мобильных устройств. Я видела, что это идеально подходит для служб доставки еды.
Если хотите узнать больше о раскрывающихся списках, прочитайте мою предыдущую статью.
- Вы хотите принудить выбрать один вариант ответа
Когда вы выбираете элемент в списке радиокнопок, вы не можете отменить его выбор. Вы можете выбрать что-то еще и изменить выбор, но вы не можете отменить ответ на вопрос, если уже выбрали его.
- Если у вопроса есть только два варианта: да / нет
Если ваш вопрос «Хотите получать уведомления?», «Воспроизвести фоновую музыку?» и т. д., то лучше используйте переключатель. Они занимают гораздо меньше места, являются более понятными, и поскольку это относительно новый тип селектора, они модные.
Сравнение радиокнопок и переключателя
Дополнение к статье после ее публикации:
5. Если хотите, чтобы пользователи нажимали «Сохранить» для применения выбранного варианта
Если вы находитесь на странице настроек или в месте, где вы хотите, чтобы пользователь мог экспериментировать с параметрами, прежде чем он нажмет большую зеленую кнопку «Сохранить»– лучше использовать радиокнопки (или флажки). Однако, если вы хотите, чтобы ваши настройки были применены немедленно (включение / выключение Wi-Fi), лучше используйте переключатель.
Этот вариант предложил Thomas Veit_, спасибо ему:)
_6. Если метки варианта ответа короткие, рассмотрите возможность использования переключателя с множественным выбором
Вы очень редко будете встречать этот вариант. Переключатели со множественным выбором соединяют в себе лучшее от радиокнопок и переключателей. Компактные, аккуратные и удобные. Я бы рекомендовал использовать их только в том случае, если метки ответов короткие – в противном случае это может стать неудобным на мобильных устройствах.
Пример переключателя с множественным выбором
Когда использовать флажки
У меня есть два правила, когда использовать флажки, и вот они:
- Если вы хотите, чтобы пользователь мог выбрать несколько вариантов или вообще не выбирать
Если вы хотите, чтобы ваш пользователь мог добавить несколько начинок в свою пиццу, этот вариант для вас. Пользователь может выбрать все, несколько или ни один из флажков.
Тест: почему пункт «Я прочитал условия» всегда в виде флажка, а не радиокнопки? Ведь имеет смысл использовать радиокнопку, так как это лучший тип селектора для вопросов «да / нет»?
Ответ: потому что вы можете отменить его выбор. В отличие от радиокнопок только с одним элементом, где вы не можете отменить его. Если вы нажмете на него, он будет выбран НАВСЕГДА.
8. Проверка доступности
Вы сделали это! Вы завершили проектирование своих селекторов, и пришло время отправить их команде разработчиков. Но погодите! Вы проверили их доступность?
- Соответствует ли ваш селектор стандартам цветового контраста WCAG AAA? Вместо этого некоторые дизайнеры используют стандарты АА. Моя любимая программа проверки контрастности – WebAIM.
- Варианты ответа / элементы больше, чем 44px для сенсорных экранов? (Иногда используют 36px.)
- Расстояние между каждым вариантом ответа / элементом больше 8px?
- Всегда ли видна метка / вопрос?
- Есть ли в соответствующих полях полезный текст обратной связи? (Например, «Пожалуйста, заполните этот вопрос»)
9. Мысли в заключение
После этой статьи я собираюсь отойти от темы паттернов интерфейса форм и перейти к другим типам паттернов интерфейса. НО, если вы хотите, чтобы я рассмотрела другие типы полей формы, сообщите об этом в комментариях.
Берегите себя, ибо сейчас мир совсем обезумел.
Тестирование пользовательского интерфейса
Тестирование пользовательского интерфейса. Графический интерфейс пользователя (Graphical user interface, GUI) –разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.), представленные пользователю на дисплее, исполнены в виде графических изображений.
Проверяется в целом общий вид приложения и в отдельности формы, расположенные на странице.
Общие проверки:
- Вид элементов при уменьшении окна браузера + появление скрола
- Правильность написания текста + текст должен быть выровнен
- Правильность перемещения фокуса в окне (Tab / Tab+Shift)
- Выбранные элементы выделяются
- Неизменяемые поля выглядят одинаково и отличаются от редактируемых
- Желательно не использовать двойной клик
- Проверка наличия нужных нотификейшенов
- Унификация дизайна (цвет, шрифт, размер)
- При необходимости должны быть тултипы
- Изменение вида элемента при ховере на него
- Если формы дублируются, то должны быть одинаковые названия
Дополнительные проверки для веб-форм
Текстовое поле
- Проверить выделение текста с помощью Ctrl+A / Shift+стрелка
- Проверка ввода длинного текста
Радио-баттон
- Расположение возле соответствующего текста
- Переключение кнопок с помощью клавиатуры
Чек-боксы
- Установить чекбокс кликом и пробелом
- Расположение возле соответствующего текста
Выпадающие списки
- Должна быть функция прокрутки
- Должны располагаться по алфавиту (если текст), по возрастанию (если числовые значения)
- Если элемент был выбран, то должен находиться сверху либо обозначен, что он выбран
Поп-ап
- Расположение по центру окна
GUI (Graphical User Interface) Testing — тестирование графического пользовательского интерфейса. Графический пользовательский интерфейс — это интерфейс, в котором пользователь взаимодействует с компьютером, используя графические изображения .
Основные элементы графического интерфейса:
- окно (окно браузера, диалоговое окно, модальное окно, плавающее окно)
- меню (главное, всплывающее, контекстное, системное)
- виджеты/элементы управления/контролы (аккордеон, кнопка, радио-кнопка, чек-бокс, значок (иконка), список, панель инструментов, дерево, полоса прокрутки, ползунок, строка состояния, тултип (подсказка) и др.)
- вкладка
- элементы взаимодействия: курсор мыши, текстовый курсор, поинтер (“ладошка”), курсор перетаскивания и др.
Основные моменты при проверке GUI:
- расположение, размер, цвет, ширина, длина элементов; возможность ввода букв или цифр
- реализуется ли функционал приложения с помощью графических элементов
- размещение всех сообщений об ошибках, уведомленией (а также шрифт, цвет, размер, расположение и орфография текста)
- читабелен ли использованный шрифт
- переходит ли курсор из текстового в поинтер при наведении на активные элементы, выделяются ли выбранные элементы
- выравнивание текста и форм
- качество изображений
- проверить расположение и отображение всех элементов при различных разрешениях экрана, а также при изменении размера окна браузера (проверить, появляется ли скролл)
- проверить текст на орфографические, пунктуационные ошибки
- появляются ли тултипы (если есть необходимость)
- унификация дизайна (цвета, шрифты, текст сообщений, названия кнопок и т.д.)
Наиболее распространенные баги:
- курсор не переходит в поинтер при наведении на активный элемент
- орфографические и грамматические ошибки
- не ровное расположение полей ввода в формах, самих форм
- неправильное отображение элементов при смене размера окна браузера и масштаба страницы
- изменение размера текста при смене языка
- неровное расположение форм
- разные шрифты
- выбранные элементы не отличаются от не выбранных
Проверка pixel to pixel — проверка точного (пиксель в пикcель) соответствия сверстанного HTML — шаблона оригиналу (PSD-макету). Другими словами, если наложить “картинку” сверстанного HTML-шаблона на картинку оригинального PSD-макета, то обе картинки должны совпадать. Совместиться должны все элементы картинок — текст, изображения, графические элементы.
Все о тестировании и качестве ПО
- Тестирование веб форм и элементов
- Чек-лист локализации
- Расширенное тестирование
- Тестирование кнопки (button) и не только
- Тестирование локализации
I believe in QA, все о тестировании
| Пн | Вт | Ср | Чт | Пт | Сб | Вс |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
Больше о тестировании и качестве ПО
- Валидация и верификация
- Тестирование кнопки (button) и не только
- Тестирование файла загрузки
- Куда может развиваться карьера QA
- Собеседование Junior QA
- Альфа тестирование