Как сделать кнопку переключатель

UX-дизайн: флажки и переключатели в формах

При создании форм дизайнеры часто стоят перед необходимостью выбора, какой элемент пользовательского интерфейса обеспечит необходимый уровень взаимодействия при изменении параметров. Безусловно, у каждого специалиста есть свои собственные правила, но всем следует помнить о некоторых неизменных аксиомах, которые действуют всегда и везде.

Выбор параметров может осуществляться с помощью флажков, переключателей, радиокнопок и раскрывающихся кнопок. Все варианты хороши, если правильно их использовать. В данной статье речь пойдет о флажках и переключателях.

Флажки

Флажки используются, когда имеется список параметров, и пользователь может выбрать любое их количество: один, несколько или ни одного. Иными словами, каждый флажок является независимым элементом управления, и включение одного из них не отменяет действие другого.

Флажки снабжаются надписями

Переключатели

Переключатель – это элемент управления, который что-то включает и выключает.

Переключатели позволяют сделать выбор между двумя прямо противоположными вариантами.

Как правило, переключатели используются для включения и отключения какого-либо действия (запустить или остановить что-то). Здесь можно провести аналогию с выключателем света.

Освещение является наиболее распространенной областью применения переключателей

Практические рекомендации по использованию флажков и переключателей

Используйте стандартный внешний вид

Флажок – это просто маленький квадратик с галочкой или крестиком.

Два положения флажка: отмечено или не отмечено

Переключатель должен выглядеть, как обычный тумблер с двумя положениями.

Два положения переключателя: включено или выключено

Вам необходимо обеспечить четкое недвусмысленное взаимодействие пользователя с элементом управления. Здесь может помочь небольшая анимация – это особенно важно для мобильных приложений, где пользовательский интерфейс должен быть осязаем.

Переключатель iOS7/8

Старайтесь, чтобы список возможных вариантов располагался вертикально. Это правило касается и флажков, и переключателей. Если уйти от горизонтального размещения нельзя, необходимо расположить элементы с достаточно большим интервалом, чтобы не допустить двойной трактовки, что выбирает каждый флажок. Ниже представлен пример со слишком близко расположенными друг к другу элементами.

Сложно понять, какую радиокнопку следует нажать, чтобы выбрать четвертый вариант

Текущее положение переключателя

При проектировании переключателей следует избегать неопределенности, связанной с текущим состоянием. В качестве примера возьмем переключатель из iOS 6 и посмотрим на него во включенном состоянии – окраска синим цветом и отображается слово ON (включено).

Не ясно, включено – это текущее состояние, или предлагаемое действие

Вы можете сказать однозначно, переключатель находится во включенном положении, или он только перейдет в него, если вы передвините ползунок? «Включено» — это состояние или действие? Не понятно.

Вы не должны вводить пользователей в заблуждение; очень важно проводить отличие между состоянием и действием. Да, можно использовать цвет для дополнительного информирования пользователей, но при этом следует сделать так, чтобы текущий вид воспринимался однозначно, как в следующем примере:

Цвет шрифта обозначает текущее положение

В тексте надписей флажков используйте позитивное подтверждение, чтобы пользователь точно знал, что произойдет, если он поставит отметку. Избегайте фраз типа «Больше не присылайте мне е-мэйл сообщения», которые бы означали, что пользователю необходимо поставить отметку, чтобы что-то не происходило.

Флажки должны иметь надписи с позитивными командами, а не с негативными «Не…»

Сделайте надпись флажка целевой областью

Все флажки сопровождаются лейблами, но лейблы не всегда кликабельны. Флажки имеют маленький размер, и по закону Фиттса на них тяжело попасть, как мышью, так и пальцем. Для того чтобы увеличить область нажатия, дайте пользователям возможность выбирать требуемый параметр не только попаданием точно в квадратик, но и по лейблу или связанным словам.

Позвольте пользователю делать выбор нажатием не только флажка, но и лейбла

Используйте флажки только для изменения параметров, но не в качестве управляющих кнопок

Главное отличие флажка от переключателя состоит в том, что флажок используется для изменения состояния, а переключатель – для включения или отключения действия.

В примере ниже положение переключателя позволяет сказать однозначно: беспроводная связь включена. В случае с флажком пользователю приходится гадать – WiFi включен, или для его включения необходимо поставить галочку.

Для включения/выключения сервисов и компонентов аппаратного обеспечения, таких как WiFi, используйте переключатели

Взаимодействие флажка отличается от взаимодействия переключателя

Вы можете сделать так, чтобы состояние, за которое отвечает флажок, менялось не сразу (как часть отсылаемой формы, например), но действие, за которое отвечает переключатель, должно совершаться сразу же.

Хорошей практикой пользовательского взаимодействия является мгновенная смена управляемого параметра с помощью переключателя – не после нажатия кнопки «Сохранить» или перехода к предыдущей странице. Именно этого мы ожидаем от этого элемента управления в реальной жизни – мы щелкаем переключателем, и свет включается.

Включение Wi-Fi в iOS
Используйте флажки, когда для ввода изменения в силу от пользователя ожидаются дополнительные действия

Используйте флажки, когда пользователь должен кликнуть кнопку «Отправить» или «Следующий», чтобы сохранить изменения.

Источник

Подключение кнопки к ардуино

Подключение датчика кнопки к ардуино требует определенных знаний и навыков. В этой статье мы поговорим о том, что такое тактовая кнопка, что такое дребезг кнопки, как правильно подключать кнопку с подтягивающим и стягивающим резистором, как можно управлять с помощью кнопки светодиодами и другими устройствами.

Кнопка ардуино

Кнопка (или кнопочный переключатель) – самый простой и доступный из всех видов датчиков. Нажав на нее, вы подаете контроллеру сигнал, который затем приводит к каким-то действиям: включаются светодиоды, издаются звуки, запускаются моторы. В своей жизни мы часто встречаемся с разными выключателями и хорошо знакомы с этим устройством.

Тактовые кнопки и кнопки-переключатели

Как обычно, начинаем раздел с простых вещей, интересных только начинающим. Если вы владеете азами и хотите узнать о различных вариантах подключения кнопки к ардуино – можете пропустить этот параграф.

Что такое кнопка? По сути, это достаточно простое устройство, замыкающее и размыкающее электрическую сеть. Выполнять это замыкание/размыкание можно в разных режимах, при этому фиксировать или не фиксировать свое положение. Соответственно, все кнопки можно поделить на две большие группы:

Вариантов различных кнопок великое множество, это действительно один из самых распространенных видов электронных компонентов.

Кнопки ардуино для простых проектов

В наших проектах мы будем работать с очень простыми тактовыми кнопками с 4 ножками, которые идут практически в любом наборе ардуино. Кнопка представляет собой переключатель с двумя парами контактов. Контакты в одной паре соединены между собой, поэтому больше одного выключателя в схеме реализовать не удастся, но вы можете одновременно управлять двумя параллельными сегментами, это бывает полезно.

В зависимости от ситуации, вы можете создавать как схемы с нормально замкнутыми, так и с нормально разомкнутыми контактами – для этого нужно будет только соответствующим образом выполнить соединение в схеме.

Для удобства работы в комплекте с тактовой кнопкой обычно идет пластмассовый колпачок какого-то цвета, он достаточно очевидно надевается на кнопку и придает проекту менее хакерский вид.

Подключение кнопки Ардуино

Включение и выключение светодиода с помощью кнопки

Давайте начнем с самого простого способа подключения тактовой кнопки. Рассмотрим схему с Arduino в качестве источника питания, светодиода, ограничительного резистора номиналом 220 Ом и кнопки, которая будет замыкать и размыкать цепь.

При подключении кнопки с двумя парами ножек важно правильно выбрать размыкающие контакты. Посмотрите на изображение внимательно: пары ножек расположены по бокам кнопки. Сама кнопка квадратная, но расстояния между парами контактов визуально заметны: можно сразу выделить два на одной стороне и два а другой. Так вот, именно между одной «парой» на стороне и будет реализован выключатель. Для включения в схему мы соединяемся с одним и с другим контактом, между которыми минимальное расстояние. Вторая пара контактов просто дублирует первую.

Если у вас переключатель другого типа, то можете смело выбрать контакты с противоположных углов (на некоторых кнопка делается специальный знак в виде выемки, по которому можно определить, с какой стороны расположены спаренные контакты). Самый надежный способ определить правильные ножки – это прозвонить контакты тестером.

Сама схема с кнопкой, светодиодом и контроллером Arduino не нуждается в особых пояснениях. Кнопка разрывает цепь, светодиод не горит. При нажатии цепь замыкается, светодиод включается. Если вы перепутаете контакты (включите через замкнутые спаренные контакты кнопки), то кнопка работать не будет, потому что цепь никогда не разомкнется. Просто поменяйте контакты местами.

Подключение кнопки с подтягивающим резистором

Давайте теперь подключим кнопку к ардуино так, чтобы можно было считывать в скетче ее состояние. Для этого воспользуемся следующей схемой.

В скетче мы будем отслеживать факт нажатия и выводить сообщение в монитор порта. Более интересный пример и подробное объяснение самой схемы мы приведем чуть позже.

Следует обратить внимание на сопротивление 10 К, которое мы добавили в этой схеме. Более подробно о его предназначении мы поговорим позже, просто имейте в виду, что такой резистор необходим для правильной работы схемы.

Скетч для кнопки ардуино с подтягивающим резистором:

Подключение кнопки в режиме INPUT_PULLUP

В указанной выше схеме мы использовали резистор, называемый подтягивающим, для формирования определенного уровня сигнала на цифровом порту. Но есть другой способ подключить кнопку без резистора, используя внутренне сопротивление платы ардуино. В блоке setup мы должны всего лишь определить тип пина, к которому подключим кнопку, как INPUT_PULLUP.

Альтернативным вариантом будет выбрать режим пина как OUTPUT и установить на данный порт высокий уровень сигнала. Встроенный подтягивающий резистор подключиться автоматически.

И все. Можно собрать вот такую сложную схему и работать с кнопкой в скетче.

Мигание светодиода после нажатия на кнопку

В предыдущем примере со светодиодами мы подключили кнопку к плате ардуино и поняли, как она работает. Светодиод включался и выключался, но делал это в совершенно пассивном режиме – сам контроллер здесь был абсолютно лишним, его можно было бы заменить батарейками. Поэтому давайте сделаем наш новый проект более «интеллектуальным»: при нажатии на кнопку заставим светодиод непрерывно мигать. Обычной схемой с лампочкой и выключателем этого уже не сделаешь – мы будем использовать мощь нашего микроконтроллера для решения этой пусть и простой, но не тривиальной задачи.

Полная схема проекта изображена на рисунке:

Фрагмент схемы со светодиодом уже хорошо нам знаком. Мы собрали обычный маячок со светодиодом и ограничительным резистором. А вот во второй части мы видим знакомую нам кнопку и еще один резистор. Пока не будем вдаваться в подробности, просто соберем схему и закачаем в ардуино простой скетч. Все элементы схемы идут в самых простых стартовых наборах ардуино.

Давайте посмотрим на скетч. В нем мы видим довольно простую логику.

Логика поведения кнопки в скетче может зависеть от способа подключения с подтягивающим резистором. Об этом мы поговорим в следующей статье.

Дребезг кнопки ардуино

В процессе работы с кнопками мы можем столкнуться с очень неприятным явлением, называемым дребезгом кнопки. Как следует из самого названия, явление это обуславливается дребезгом контактов внутри кнопочного переключателя. Металлические пластины соприкасаются друг с другом не мгновенно (хоть и очень быстро для наших глаз), поэтому на короткое время в зоне контакта возникают скачки и провалы напряжения. Если мы не предусмотрим появление таких “мусорных” сигналов, то будем реагировать на них каждый раз и можем привести наш проект к хаусу.

Для устранения дребезга используют программные и аппаратные решения. В двух словах лишь упомянем основные методы подавления дребезга:

Более подробную информацию о способах борьбы с дребезгом вы можете найти в этой статье об устранении дребезга кнопок.

Переключение режимов с помощью кнопки

Для того, чтобы определить, была ли нажата кнопка, надо просто зафиксировать факт ее нажатия и сохранить признак в специальной переменной.

Факт нажатия мы определяем с помощью функции digitalRead(). В результате мы получим HIGH (1, TRUE) или LOW(0, FALSE), в зависимости от того, как подключили кнопку. Если мы подключаем кнопку с помощью внутреннего подтягивающего резистора, то нажатие кнопки приведет к появлению на входе уровня 0 (FALSE).

Для хранения информации о нажатии на кнопку можно использовать переменную типа boolean:

boolean keyPressed = digitalRead(PIN_BUTTON)==LOW;

Почему мы используем такую конструкцию, а не сделали так:

boolean keyPressed = digitalRead(PIN_BUTTON);

Все дело в том, что digitalRead() может вернуть HIGH, но оно не будет означать нажатие кнопки. В случае использования схемы с подтягивающим резистором HIGH будет означать, что кнопка, наоборот, не нажата. В первом варианте (digitalRead(PIN_BUTTON)==LOW ) мы сразу сравнили вход с нужным нам значением и определили, что кнопка нажата, хотя и на входе сейчас низкий уровень сигнала. И сохранили в переменную статус кнопки. Старайтесь явно указывать все выполняемые вами логические операции, чтобы делать свой код более прозрачным и избежать лишних глупых ошибок.

Как переключать режимы работы после нажатия кнопки?

Часто возникает ситуация, когда мы с помощью кнопок должны учитывать факт не только нажатия, но и отпускания кнопки. Например, нажав и отпустив кнопку, мы можем включить свет или переключить режим работы схемы. Другими словами, нам нужно как-то зафиксировать в коде факт нажатия на кнопку и использовать информацию в дальнейшем, даже если кнопка уже не нажата. Давайте посмотрим, как это можно сделать.

Логика работы программы очень проста:

Как определить нажатие нескольких кнопок?

Нужно просто запомнить состояние каждой из кнопок в соответствующей переменной или в массиве ардуино. Здесь главное понимать, что каждая новая кнопка – это занятый пин. Поэтому если количество кнопок у вас будет большим, то возможно возникновение дефицита свободных контактов. Альтернативным вариантом является использование подключения кнопок на один аналоговый пин по схеме с резистивным делителем. Об этом мы поговорим в следующих статьях.

Источник

Узнайте, как создавать настраиваемые флажки и переключатели с помощью CSS.

По умолчанию:

Настраиваемый флажок:

One Two Three Four

Пользовательские переключатель:

One Two Three Four

Создание настраиваемого флажка

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Пример

/* Customize the label (the container) */
.container <
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>

/* Hide the browser’s default checkbox */
.container input <
position: absolute;
opacity: 0;
cursor: pointer;
>

/* Create a custom checkbox */
.checkmark <
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
>

/* On mouse-over, add a grey background color */
.container:hover input

.checkmark <
background-color: #ccc;
>

/* When the checkbox is checked, add a blue background */
.container input:checked

.checkmark <
background-color: #2196F3;
>

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after <
content: «»;
position: absolute;
display: none;
>

/* Show the checkmark when checked */
.container input:checked

.checkmark:after <
display: block;
>

Создание пользовательской переключателя

Пример

/* Customize the label (the container) */
.container <
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>

/* Hide the browser’s default radio button */
.container input <
position: absolute;
opacity: 0;
>

/* Create a custom radio button */
.checkmark <
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
>

/* On mouse-over, add a grey background color */
.container:hover input

.checkmark <
background-color: #ccc;
>

/* When the radio button is checked, add a blue background */
.container input:checked

.checkmark <
background-color: #2196F3;
>

/* Show the indicator (dot/circle) when checked */
.container input:checked

.checkmark:after <
display: block;
>

Источник