Флажок (интерфейс)
Флажок (также чекбокс (от англ. check box ), галочка) — элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Во включенном состоянии внутри чекбокса отображается отметка (галочка (✓), или реже крестик(×)).
Содержание
Третье состояние чек-бокса
Некоторые приложения используют чек-боксы, которые имеют третье, неопределенное состояние. Это состояние показывается в виде закрашенного квадрата или линии внутри чек-бокса. Такое состояние часто используется, когда чек-бокс показывает различные состояния нескольких элементов коллекции. При нажатии на такой чекбокс новое состояние будет применено ко всем элементам коллекции.
Текстовый интерфейс
Юникод
См. также
Ссылки
Кнопка последовательного выбора • Двунаправленный счётчик • Выпадающий список • Комбинированный список • Флажок • Ползунок • Радиокнопка • Список • Таблица (Grid view) • Текстовое поле
Heads-up display (в играх • OSD) • Боковая панель • Заставка • Значок • Индикатор процесса • Информационная панель • Метка • Подсказка • Строка состояния • Тост • Троббер • Экран загрузки
Диалоговое окно • Диалоговое окно-предупреждение • Модальное окно • О программе • Окно инспектора объектов • Окно-палитра • Файловый диалог
WIMP • Библиотека элементов интерфейса • Внешний вид (Look and feel) • Менеджер разметки (Layout manager) • Наведение мыши
Полезное
Смотреть что такое «Флажок (интерфейс)» в других словарях:
Текстовый интерфейс пользователя — Bash пример консольной программы … Википедия
Многодокументный интерфейс со вкладками — Многодокументный интерфейс с вкладками (англ. Tabbed document interface) разновидность графического интерфейса пользователя, в котором каждый документ отображается на отдельной вкладке общего окна. Содержание 1 Применение … Википедия
Графический интерфейс пользователя — (ГИП), графический пользовательский интерфейс (ГПИ) (англ. Graphical user interface, GUI; сленг. ГУИ) разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.),… … Википедия
Оконный интерфейс — Пример оконного интерфейса в текстовом режиме (файловый менеджер Midnight Commander) несколько окон (две файловых панели и диалоговое окно поверх них … Википедия
Класс (программирование) — У этого термина существуют и другие значения, см. Класс. Класс в программировании набор методов и функций. Другие абстрактные типы данных метаклассы, интерфейсы, структуры, перечисления характеризуются какими то своими, другими… … Википедия
Abstract Window Toolkit — Для улучшения этой статьи желательно?: Исправить статью согласно стилистическим правилам Википедии … Википедия
Элемент интерфейса — Кроссплатформенный редактор элементов интерфейса Qt designer Элемент интерфейса примитив графического интерфейса пользователя, имеющий стандартный внешний вид и выполняющий ста … Википедия
Ribbon — В этой статье не хватает ссылок на источники информации. Информация должна быть проверяема, иначе она может быть поставлена под сомнение и удалена. Вы можете отредактировать эту стать … Википедия
CCleaner — CCleaner … Википедия
EFS — Encrypting File System (EFS) система шифрования данных, реализующая шифрование на уровне файлов в операционных системах Microsoft Windows NT (начиная с Windows 2000 и выше), за исключением «домашних» версий (Windows XP Home Edition, Windows … Википедия
UX-дизайн: флажки и переключатели в формах
При создании форм дизайнеры часто стоят перед необходимостью выбора, какой элемент пользовательского интерфейса обеспечит необходимый уровень взаимодействия при изменении параметров. Безусловно, у каждого специалиста есть свои собственные правила, но всем следует помнить о некоторых неизменных аксиомах, которые действуют всегда и везде.
Выбор параметров может осуществляться с помощью флажков, переключателей, радиокнопок и раскрывающихся кнопок. Все варианты хороши, если правильно их использовать. В данной статье речь пойдет о флажках и переключателях.
Флажки
Флажки используются, когда имеется список параметров, и пользователь может выбрать любое их количество: один, несколько или ни одного. Иными словами, каждый флажок является независимым элементом управления, и включение одного из них не отменяет действие другого.
Флажки снабжаются надписями
Переключатели
Переключатель – это элемент управления, который что-то включает и выключает.
Переключатели позволяют сделать выбор между двумя прямо противоположными вариантами.
Как правило, переключатели используются для включения и отключения какого-либо действия (запустить или остановить что-то). Здесь можно провести аналогию с выключателем света.
Освещение является наиболее распространенной областью применения переключателей
Практические рекомендации по использованию флажков и переключателей
Используйте стандартный внешний вид
Флажок – это просто маленький квадратик с галочкой или крестиком.
Два положения флажка: отмечено или не отмечено
Переключатель должен выглядеть, как обычный тумблер с двумя положениями.
Два положения переключателя: включено или выключено
Вам необходимо обеспечить четкое недвусмысленное взаимодействие пользователя с элементом управления. Здесь может помочь небольшая анимация – это особенно важно для мобильных приложений, где пользовательский интерфейс должен быть осязаем.
Переключатель iOS7/8
Старайтесь, чтобы список возможных вариантов располагался вертикально. Это правило касается и флажков, и переключателей. Если уйти от горизонтального размещения нельзя, необходимо расположить элементы с достаточно большим интервалом, чтобы не допустить двойной трактовки, что выбирает каждый флажок. Ниже представлен пример со слишком близко расположенными друг к другу элементами.
Сложно понять, какую радиокнопку следует нажать, чтобы выбрать четвертый вариант
Текущее положение переключателя
При проектировании переключателей следует избегать неопределенности, связанной с текущим состоянием. В качестве примера возьмем переключатель из iOS 6 и посмотрим на него во включенном состоянии – окраска синим цветом и отображается слово ON (включено).
Не ясно, включено – это текущее состояние, или предлагаемое действие
Вы можете сказать однозначно, переключатель находится во включенном положении, или он только перейдет в него, если вы передвините ползунок? «Включено» — это состояние или действие? Не понятно.
Вы не должны вводить пользователей в заблуждение; очень важно проводить отличие между состоянием и действием. Да, можно использовать цвет для дополнительного информирования пользователей, но при этом следует сделать так, чтобы текущий вид воспринимался однозначно, как в следующем примере:
Цвет шрифта обозначает текущее положение
В тексте надписей флажков используйте позитивное подтверждение, чтобы пользователь точно знал, что произойдет, если он поставит отметку. Избегайте фраз типа «Больше не присылайте мне е-мэйл сообщения», которые бы означали, что пользователю необходимо поставить отметку, чтобы что-то не происходило.
Флажки должны иметь надписи с позитивными командами, а не с негативными «Не…»
Сделайте надпись флажка целевой областью
Все флажки сопровождаются лейблами, но лейблы не всегда кликабельны. Флажки имеют маленький размер, и по закону Фиттса на них тяжело попасть, как мышью, так и пальцем. Для того чтобы увеличить область нажатия, дайте пользователям возможность выбирать требуемый параметр не только попаданием точно в квадратик, но и по лейблу или связанным словам.
Позвольте пользователю делать выбор нажатием не только флажка, но и лейбла
Используйте флажки только для изменения параметров, но не в качестве управляющих кнопок
Главное отличие флажка от переключателя состоит в том, что флажок используется для изменения состояния, а переключатель – для включения или отключения действия.
В примере ниже положение переключателя позволяет сказать однозначно: беспроводная связь включена. В случае с флажком пользователю приходится гадать – WiFi включен, или для его включения необходимо поставить галочку.
Для включения/выключения сервисов и компонентов аппаратного обеспечения, таких как WiFi, используйте переключатели
Взаимодействие флажка отличается от взаимодействия переключателя
Вы можете сделать так, чтобы состояние, за которое отвечает флажок, менялось не сразу (как часть отсылаемой формы, например), но действие, за которое отвечает переключатель, должно совершаться сразу же.
Хорошей практикой пользовательского взаимодействия является мгновенная смена управляемого параметра с помощью переключателя – не после нажатия кнопки «Сохранить» или перехода к предыдущей странице. Именно этого мы ожидаем от этого элемента управления в реальной жизни – мы щелкаем переключателем, и свет включается.
Включение Wi-Fi в iOS
Используйте флажки, когда для ввода изменения в силу от пользователя ожидаются дополнительные действия
Используйте флажки, когда пользователь должен кликнуть кнопку «Отправить» или «Следующий», чтобы сохранить изменения.
Флажки
это руководство по проектированию было создано для Windows 7 и не обновлялось для более новых версий Windows. Многие рекомендации по-прежнему применяются в принципе, но презентация и примеры не соответствуют нашим текущим руководствам по проектированию.
С флажком пользователи принимают решение о двух четко противоположных вариантах. Метка флажка указывает на выбранное состояние, тогда как значение выключенного состояния должно быть однозначным, противоположным выбранному состоянию. Следовательно, флажки следует использовать только для включения или отключения параметра, а также для выбора или отостановки выбора элемента.
Типичная группа флажков.
Выбор правильного элемента управления
Чтобы определиться, ответьте на вопросы:
Установлен ли флажок для включения или отключения параметра или выбора или отменить выбор элемента? Если нет — используйте другой элемент управления.
При использовании в группе делает группу независимым выбором, из которой пользователи могут выбрать ноль или более. В противном случае рекомендуется использовать элементы управления для зависимых вариантов, таких как переключатели и представления в виде дерева флажков.
Если используется в группе, группа включает зависимые варианты выбора, из которых пользователи должны выбрать один или несколько? Если это так, используйте группу флажков и обрабатывайте ошибку, если ни один из параметров не выбран.
Число параметров в группе 10 или меньше? Так как используемое пространство экрана пропорционально количеству параметров, установите число флажков не меньше 10. Для более чем 10 параметров используйте список флажков.
Является ли переключатель лучшим вариантом? Когда флажки подходят только для включения или отключения параметра, переключатели можно использовать для совершенно разных параметров. Если возможны оба решения:
Используйте переключатели, если значение снятого флажка не полностью очевидно.
Неправильно:
В этом примере противоположный выбор из альбомной ориентации не является четким, поэтому этот флажок не подходит.
Правильно:
В этом примере варианты выбора не противоположны, поэтому переключатели являются лучшим выбором.
Используйте переключатели на страницах мастера, чтобы сделать их ясными, даже если флажок в противном случае приемлем.
Используйте переключатели, если у вас достаточно места на экране, и параметры достаточно важны, чтобы быть хорошим использованием этого пространства экрана. В противном случае используйте флажок или раскрывающийся список.
Неправильно:
В этом примере параметры не имеют достаточного значения для использования переключателей.
Правильно:
В этом примере флажок — это эффективное использование пространства экрана для этого варианта периферийного устройства.
Установите флажок, если в окне имеются другие флажки.
Параметр представляет параметр программы, а не данные? Значения параметра не должны основываться на контексте или других данных. Для данных используйте список флажков или список с множественным выбором.
Варианты использования
Флажки имеют несколько шаблонов использования:
| Использование | Пример |
|---|---|
| Отдельный вариант Для выбора отдельного варианта используется один флажок. |  Для отдельного выбора используется один флажок. |
| Независимые варианты (ноль или более) Группа флажков используется для выбора набора из нуля или более вариантов. | в отличие от элементов управления с одним выбором, таких как переключатели, пользователи могут выбрать любое сочетание параметров в группе флажков.  Группа флажков используется для независимых вариантов выбора. |
| Зависимые варианты (один или несколько) Группу флажков также можно использовать для выбора из набора из одного или нескольких вариантов. | может потребоваться представить выбор одного или нескольких зависимых вариантов. Поскольку Microsoft? Windows не имеет элемента управления, который напрямую поддерживает этот тип входных данных, лучшим решением будет использование группы флажков и обработку ошибки, если ни один из параметров не выбран.  Используется группа флажков, где должен быть выбран хотя бы один протокол. |
| Смешанный вариант Кроме выбранных и сброшенных состояний, флажки также имеют смешанное состояние для множественного выбора, чтобы указать, что параметр задан для некоторых, но не всех объектов. |  Флажок смешанного состояния. |
Рекомендации
Общие сведения
Флажки, связанные с группировкой. Объедините связанные параметры и разделите несвязанные параметры группами из 10 или менее, используя несколько групп, если это необходимо.
Пример групп связанных независимых параметров.
Используйте поля группы, чтобы упорядочить группы флажков это часто приводит к ненужным помехам экрана.
Перечислите флажки в логическом порядке, такие как группирование тесно связанных параметров или размещение большинства наиболее распространенных вариантов, или выполнение некоторых других естественных последовательностей. Не рекомендуется использовать алфавитный порядок, так как он зависит от языка и, следовательно, недоступен для локализации.
Выравнивание флажков по вертикали, а не по горизонтали. Выравнивание по горизонтали труднее для чтения.
Правильно:
В этом примере флажки правильно согласованы.
Неправильно:
В этом примере выравнивание по горизонтали труднее для чтения.
Не используйте смешанное состояние для представления третьего состояния. Смешанное состояние используется для указания того, что параметр задан для некоторых, но не для всех дочерних объектов. Пользователи не должны иметь возможность задавать смешанное состояние напрямую, а смешанное состояние — это отражение дочерних объектов. Смешанное состояние не используется в качестве третьего состояния для отдельного элемента. Чтобы представить третье состояние, используйте переключатели или раскрывающийся список.
Неправильно:
В этом примере смешанное состояние должно указывать на то, что служба темы не установлена.
Правильно:
В этом примере пользователи могут выбрать из списка три параметра.
Если щелкнуть флажок смешанное состояние, все выбранные, очищенные и исходные смешанные состояния должны быть циклически перебираться. Для форгивенесс важно иметь возможность восстановить исходное смешанное состояние, поскольку параметры могут быть сложными или неизвестны для пользователя. В противном случае, единственный способ восстановить смешанное состояние с уверенностью — отменить задачу и начать заново.
Неправильно:
В этом примере флажки в качестве индикатора хода выполнения используются неправильно.
Правильно:
Пример типичного индикатора выполнения.
Отображать отключенные флажки, используя правильное состояние выбора. Несмотря на то, что пользователи не могут их изменять, отключенные флажки передают информацию, чтобы они соответствовали результатам.
Неправильно:
В этом примере параметр «всегда читать этот раздел вслух» должен быть сброшен, так как раздел не читается, если этот параметр отключен.
Не устанавливайте флажок для следующих элементов:
Больше не показывать этот
Дополнительные рекомендации и примеры см. в разделе диалоговые окна.
Подчиненные элементы управления
Разместите подчиненные элементы управления справа или ниже (с отступом, с помощью метки с флажком) флажка и его метки. Установите флажок с двоеточием.
В этом примере флажок и его подчиненный элемент управления совместно используют метку флажка и ее ключ доступа.
Оставьте зависимые редактируемые текстовые поля и раскрывающиеся списки включенными, если они совместно используют метку установленного флажка. При вводе или вставке любого элемента в поле выберите соответствующий параметр автоматически. Это упрощает взаимодействие.
В этом примере при вводе верхнего или нижнего колонтитула автоматически выбирается параметр.
Если вложены флажки с переключателями или другие флажки, отключите эти подчиненные элементы управления, пока не будет выбран параметр высокого уровня. Это позволяет избежать путаницы в значении подчиненных элементов управления.
Сделать подчиненные элементы управления флажком рядом с флажком в последовательности табуляции.
Если выбор параметра подразумевает выбор подчиненных флажков, явно установите эти флажки, чтобы связь была очищена.
Неправильно:
В этом примере подчиненные флажки не выбраны.
Правильно:
В этом примере выделены подчиненные флажки, что позволяет снять связь с выбранным параметром.
Используйте зависимые флажки, если альтернативы добавляют ненужные сложности. Хотя флажки должны быть независимыми, иногда такие варианты, как переключатели, добавляют ненужные сложности.
Правильно:
В этом примере Использование переключателей является точным, но создает ненужные сложности.
Лучше:
В этом примере использование флажков упрощается и позволяет пользователям сосредоточиться на выборе требуемых параметров, а не на их сложной связи.
Важно. применить эту рекомендацию только в редких обстоятельствах, при отображении зависимостей существенно усложняется, не добавив ясности. В предыдущем примере маловероятно, что пользователи попытаются выбрать и надстрочные, и подстрочные индексы, и если бы они были, было бы легко понять, что они были эксклюзивными вариантами.
Значения по умолчанию
Рекомендуемое изменение размера и расстояния
Рекомендуемое изменение размера и расстояния для флажков.
Метки
Метки флажков
Метка для каждого флажка.
Напишите метку в виде фразы или императивного предложения и не используйте закрывающие знаки препинания.
Запишите метку, которая описывает выбранное состояние флажка.
Для группы флажков используйте параллельные выражения и старайтесь попытаться удержать одинаковую длину для всех меток.
Для группы флажков сосредоточьте текст метки на различиях между параметрами. Если все параметры имеют одинаковый вводный текст, переместите этот текст в метку группы.
Используйте положительные выражения. Не заменяйте метку, чтобы установка флажка не выполняла никаких действий.
Неправильно:
В этом примере параметр не использует положительные выражения.
Опишите только параметр с меткой. Короткие метки позволяют легко ссылаться на них в сообщениях и документации. Если параметр требует дальнейшего объяснения, укажите пояснения в статическом элементе управления » текст «, используя полные предложения и закрывающие знаки препинания.
Добавление объяснения к одному флажку в группе не означает, что необходимо предоставить пояснения для всех флажков в группе. Укажите нужные сведения в метке, если это возможно, и используйте объяснения только при необходимости. Не просто переводите метку в состояние согласованности.
В этом примере метка флажка содержит дополнительный пояснительный текст под ним.
Если настоятельно рекомендуется использовать параметр, рекомендуется добавить к метке «(рекомендуется)». Не забудьте добавить к метке элемента управления, а не дополнительным примечаниям.
Если необходимо использовать многострочные метки, Выровняйте верхнюю часть метки с флажком.
Не используйте подчиненный элемент управления, содержащиеся в нем значения или метку Units, чтобы создать предложение или фразу. Такой проект не локализуется, так как структура предложения зависит от языка.
Неправильно:
В этом примере текстовое поле неверно помещается в метку флажка.
Метки групп флажков
Используйте метку группы, чтобы объяснить назначение группы, а не как сделать выбор. Предположим, что пользователи узнают, как использовать флажки. Например, не скажите «выбрать любой из следующих вариантов».
Завершайте каждую метку двоеточием.
Не присваивайте метке ключ доступа. Это не обязательно, а другие ключи доступа сложнее назначить.
Чтобы выбрать один или несколько зависимых вариантов, объясните требование к метке.
Правильно:
В этом примере пользователи могут подумать, что они могут только выбрать один из вариантов.
Лучше:
В этом примере ясно, что пользователи могут выбрать несколько элементов.
Документация
При ссылке на флажки:
Используйте точный текст метки, включая прописную букву, но не включайте символ подчеркивания или двоеточие. Включите флажок слово.
Устанавливайте флажок, а не параметр, флажок или только поле, так как только поле однозначно для локализаторов.
Чтобы описать взаимодействие с пользователем, используйте SELECT и Clear.
По возможности отформатируйте метку, используя полужирный текст. В противном случае заключите метку в кавычки, только если это необходимо для предотвращения путаницы.