Что такое тогл

Что такое Тогл

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

Узнать больше
Анастасия Шаркова

Бывало, наверное, у вас такое, что напало вдохновение, овладела креативность, захотелось срочно сдел.

Аура Ракушки
Придумано давно и не мной, но я делюсь всем, чем владею сама. Итак, берем ракушк.

Все материалы раздела «Словарь рукоделия» предназначены для персонального использования.
Любое их воспроизведение и/или распространение запрещено без письменного разрешения портала Ярмарка Мастеров.

Знаешь, что такое
Раннер?
Узнать ответ

Предложить правку
или новый термин

ТОП-10 Журнала
Конкурсы и Галерея победителей
Материалы для творчества
Словарь рукоделия
Программа привилегий

• Российский рубль
• Украинская гривна
• Br Белорусский рубль
• Казахский тенге
• $ Доллар США
• € Евро
• AU $ Австралийский доллар
• CA $ Канадский доллар
• Китайский юань
• DK kr Датская крона
• ¥ Японская иена
• NKr Норвежская крона
• S $ Сингапурский доллар
• kr Шведская крона
• Fr Швейцарский франк
• £ Фунт стерлингов
• Турецкая лира

Российский рубль
ВКонтакте Pinterest Одноклассники Показать больше

• О нас
• Отзывы клиентов
• Рекламодателям
• Новости
• Правила
• Мобильные приложения
• Часто задаваемые вопросы
• Рекомендательные технологии

Покупателям

• Подарочные карты
• Программа привилегий
• Популярные товары
• Популярные мастер-классы
• Новинки
• Доставка для покупателей
• Товары по регионам

• Handmade in Russia
• Тарифы
• Подарочные сертификаты
• Программа привилегий
• Бренд стори
• Юридическим лицам
• Требования к фотографиям
• Доставка для продавцов
• Рекомендации новичкам
• Как писать хорошие тексты

Политика конфиденциальности и ИТ-аккредитация
© Интернет-сайт «Ярмарка Мастеров».
ООО «УК «Ливмастер», 2021.
© Рекламные системы «Marketplace 2.0» и «Livemaster».
ООО «Ливмастер», 2021.
Словесные обозначения Ярмарка Мастеров® и Livemaster® являются зарегистрированными товарными знаками.
Использование интернет-сайта, рекламных систем и товарных знаков без требуемого разрешения преследуется по закону.
На информационном ресурсе применяются рекомендательные технологии (информационные технологии предоставления информации на основе сбора, систематизации и анализа сведений, относящихся к предпочтениям пользователей сети «Интернет», находящихся на территории Российской Федерации).

Тогл Toggle

Тогл переключает состояния. Например, включает или отключает уведомления в настройках.

По-английски toggle — рычаг или переключатель. Между собой мы говорим «тогл», чтобы не путать этот контрол с радиокнопками или табами-переключателем. Тем не менее при общении с пользователями мы говорим не «тогл», а «переключатель».

Когда использовать

Функционально тогл — аналог чекбокса, но контекст их использования может отличаться.

Тогл заимствован из мобильных операционных систем, где он используется для включения и выключения настроек.

Тогл нельзя использовать для выбора элементов в списке. Например, выбрать несколько писем.

Тогл больше и заметнее чекбокса. Хорошо, когда на странице 1 тогл, максимум 2–3.

Описание работы

Чтобы переключить тогл, нужно кликнуть на сам контрол или его название.

При переключении тогла эффект наступает сразу. Поэтому тогл не нуждается в кнопке «Сохранить».

Расположение

В отличие от чекбокса, тогл может располагаться как слева, так и справа от названия. Если тоглов несколько, лучше их ставить слева от текста.

Цвет

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

Валидация

Если тогл нельзя использовать, заблокируйте его. Валидация не нужна.

Дизайн и анимация

Тогл переключается с анимацией. Круг плавно перемещается, фон движется за ним:

Активное состояние — стандартный белый цвет  #FFFFFF. Выключенное — серый  #F6F6F6 по умолчанию и  #D6D6D6 для выбранного.

Флажок (checkbox) или тумблер (toggle), что выбрать?

7 случаев их использования в дизайне форм. В формах есть несколько элементов управления, которые облегчают сбор данных от пользователей. При разработке форм бывает сложно использовать правильный элемент управления в подходящем месте. Элемент управления флажок (checkbox) имеет три состояния: не выбрано, выбрано и неопределенное. Последнее состояние представляет собой ситуацию, когда список подпараметров сгруппирован по родительскому параметру, а подпараметры находятся в выбранных и невыбранных состояниях. Тумблер (toggle) представляет собой физический переключатель, который позволяет пользователям включать или выключать вещи, например, выключатель освещения. http://ux.pub/rukovodstvo-po-tumbleram-pereklyuchatelyam-toggle-switches/ Нажатие тумблера – это двухступенчатое действие: выбор и выполнение, тогда, как флажок – это просто выбор опции, и ее выполнение обычно требует другого элемента управления. При выборе между флажком и тумблером лучше сосредоточиться на контексте использования, а не на их функциях. Ниже приведены несколько случаев использования, а также рекомендации по выбору между этими двумя элементами управления при разработке форм.

Случай 1: Мгновенный ответ

Используйте тумблер, когда

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

Параметры, требующие мгновенного ответа, лучше всего выбирать при помощи тумблера

Случай 2: Подтверждение настроек

Используйте флажок, когда

• Примененные настройки должны быть подтверждены и просмотрены пользователем до их отправки.
• Для отображения результатов требуются такие действия, как «Отправить», «ОК», «Далее», «Применить».
• Пользователь должен выполнить дополнительные шаги для того, чтобы изменения вступили в силу.

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

Случай 3: Выбор нескольких вариантов

Используйте флажок, когда

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

При выборе нескольких вариантов из списка используйте флажки, чтобы получить лучший опыт

Случай 4: Промежуточное состояние

Используйте флажок, когда

• Требуется промежуточное состояние выбора, если несколько подпараметров сгруппированы под родительским параметром. Промежуточное состояние будет показывать, что в списке выбрано несколько подпараметров (но не все).

Промежуточное состояние лучше всего показывать с помощью флажка

Случай 5: Четкое визуальное состояние

Используйте флажок, когда

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

Иногда тумблер не четко указывает, является ли это состоянием или действием

Случай 6: Связанные элементы

Используйте флажок, когда

• Пользователь должен выбрать вариант(ы) из списка связанных элементов.

Используйте флажки, чтобы выбрать связанные элементы в списке

Используйте тумблер, когда

• Пользователь переключает независимые функции или варианты.

Для выбора независимых элементов используйте тумблеры

Случай 7: Один вариант

Используйте флажок, когда

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

Для одного варианта «да / нет» удобнее использовать флажок

Используйте тумблер, когда

• Требуется выбрать один вариант, а вы хотите предложить два варианта для принятия решения о включении/выключении.

Единственное решение о включении/выключении понятнее всего с тумблером

Вывод

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

Спасибо за прочтение. Еще больше статей на uxdworld.com.

Тогл-принцип в интерфейсах

Пост в двух словах: анализируем, какие панели ключевые для программы. Скрываем ненужные, на нужные назначаем горячие клавиши, начинающимися на Alt + Cmd. Используем мнемонику, чтобы запоминать английские имена панелей: Alt + Cmd + I(nspector), Alt + Cmd + L(ayers). Переназначим все горячие клавиши так, чтобы одни и те же ассоциации срабатывали в разных программах. Позабудем про печаль и боль, умело смеёмся.

Как настраивать свои горячие клавиши в Скетче и не забывать их

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

Я хочу поделиться важной идеей, которая позволила мне выстроить единую систему горячих клавиш в своей работе. Если ты примешь её, то сможешь в считаные минуты ориентироваться в любых профессиональных редакторах, вне зависимости от их назначения и кажущейся сложности. Sketch, Photoshop, Illustrator, Pages, Axure, Final Cut, After Effects и кончая какой-нибудь Ableton Live или Logic Pro.

Все они используют один и тот же дизайн-паттерн — скрываемые панели.

To toggle (от англ.) — переключать что-либо, что может быть в двух режимах: включено/выключено. Нажал раз — включил, нажал два, выключил. Например, панель слоёв в Фотошопе или сетка в Скетче может быть видима, либо скрыта.

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

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

Идея 1. Что-то скрываемое

Чтобы дать богатые функциональные возможности и разместить множество кнопочек в окне программы, ещё в 90-е разработчики ПО стали использовать скрываемые панели, видимость которых можно настроить. Это позволяло делать интерфейс столь же универсальным, как швейцарский нож.

Эту идею легко можно довести до абсурда. По интернету гуляла смешная картинка с интерфесом текстового редактора Word, в котором включены все панели, которые в нём только есть:

Это не значит, что у Word был плохой дизайн. Напротив, тогда он предоставлял неслыханную гибкость опытным пользователям. Каждый мог включить в настройках то функциональный набор, который был нужен. Однако, такой уровень несёт опасность для начинающих пользователей. Большинство пользователей Word просто не знало о том, что в его контекстном меню скрыто ещё множество панелей. А чтобы научиться ими пользоваться, нужно читать унылую документацию. Если какая-нибудь важная панель, например Форматирование, исчезала из поля зрения, это могло стать настоящей драмой, поскольку Word воспринимался как сломанный.

Итак, первый из наших ингрединетов — скрываемые панели, содержащие какие-либо UI-кнопки.

Идея 2. Горячая клавиша в режиме on/off

Я впервые столкнулся с тогл-панелями в Фотошопе. Я узнал, что по нажатию F7 панель слоёв можно скрывать. Сперва это показалось довольно бессмысленным: очередная незапоминаемая горячая клавиша, которая скрывала маленькую квадратную панель среди полдюжины других. Но позже я выяснил, что панели в Фотошопе можно настраивать по размеру, делая нужные больше и убирая ненужные. Когда самая важная для веб-дизайна панель «Слои» занимала всю высоту экрана, она значительно загораживала макет, и я её регулярно скрывал, чтобы не мешала. Однако, размножить этот принцип на другие панели не удавалось. Я еле-запомнил F7, начертив её перманентным маркером на руке и развесив по всему дому стикеры-напоминалки. Бессмысленные горячие клавиши невозможно запоминать, если не используешь программу регулярно.

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

Второй ингредиент — горячая клавиша, которая переключает видимость панели туда-обратно.

Идея 3. Используем мнемонику

Горячая клавиша — это не про безумные вытягивания пальцев по клавиатуре, не про запоминание семизначных чисел.

Прежде всего, горячая клавиша это приказ программе в обход графического интерфейса.

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

Чтобы можно было запомнить команду, она должна вызывать человеческие ассоциации и быть понятной. Те, кто выпускает ПО со стандартными горячими клавишами вроде F7, совершают преступление против человечества, поскольку из-за них миллионы людей боятся использовать горячие клавиши, и особенно, переназначать стандартные.

Поскольку у меня стоял английский Фотошоп, панель слоёв в нём называлась Layers. Логично, что я назначил на неё Cmd + L(ayers). Однако, в Фотошопе было много команд, которые имели такой же вид: Cmd + D — Deselect, снятие выделения. Cmd + C и Cmd + V — всем известные копирование и вставка, и ещё множество других. Все они являются командами, которые ведут к каким-то заметным действиям на холсте. Я называю их действиями. Скрытие панели Layers в этом ряду явно было белой вороной. Решение подсказал текстовый редактор Pages, в котором основная панель Inspector скрывалась и показывалась по сочетанию Alt + Cmd + I. Я взял это на вооружение в Фотошопе, а позже и в Скетче.

Пазл сложился: все тогл-сочетания отныне получили вид Alt + Command + [буква].

Теперь однотипные панели вроде Inspector в разных программах автоматически получают постоянное универсальное сочетание.

Пять основных паттернов

Так я разделил горячие клавиши на группы-паттерны по внешнему виду:

1. тогл-панели
2. тогл-режимы
3. инструменты
4. действия
5. обращения / дополнительные действия

В каждом паттерне присутствует ключ (буква).

Тогл-панели
Alt + Cmd + ключ. Умение эффективно использовать тогл-панели — мощнейшая техника, превращающая интерфейс в податливый пластилин на кончиках пальцев. Примеры: Скрыть/показать панель Inspector (Alt + Cmd + I), скрыть Library в Logic Pro X (Alt + Cmd + L).

Тогл-режимы
Ctrl + [ключ] — Эту группу я выделил после перехода на Скетч. Есть много действий, которые имеют сходную природу с тогл-панелями, но не выглядят как панель. Примеры: Включить сетку (Ctrl + G), перейти в режим вращения объектов (Ctrl + R), замьютить канал в аудио-редакторе (Ctrl + M).

Инструменты
[ключ] — выбор инструмента. Скетч отлично использует такие горячие клавиши. Примеры: O — Oval Tool, V — Vector Tool, T — Text Tool. Photoshop в более сложном положении, поскольку инструментов в нём гораздо больше. Однако, и в нём это используется: M — Marquee Tool, L — Lasso Tool, B — Brush Tool.

Важные действия
Cmd + [ключ] — команда-действие. Вырезать, выделить, покрасить, переименовать и редактировать — это всё сюда.

Обращения
Shift + Cmd + [ключ] — тут два варианта. Либо парная обращающая команда (Сгруппировать/Разгруппировать), либо ещё один слой команд-действий.

Пример из Скетча, обращение:
Cmd + G — сгруппировать,
Shift + Cmd + G — разгруппировать.

Cmd + Z — отменить,
Shift + Cmd + Z — повторить отменённое действие.

Идея 4. Метод перебора букв

Букв явно меньше, чем команд. Буква S на клавиатуре всего одна, и по такому принципу в Фотошопе на неё претендуют сразу две панели: Swatches и Styles. И тут нам решать, что займёт основное сочетание Alt + Command + S. Что нам нужнее? Допустим, нужно много работать с цветами, поэтому выбираем Swatches. Второе сочетание может разместиться на следующей букве слова.

[S] T Y L E S — S занята Swatches, выбираем следующую букву.

S [T] Y L E S — T свободна. Получили Alt + Cmd+ T.

Как правило, хватает первых трёх букв слова. Если мы дошли до конца слова STYLES и все буквы заняты, возможно, эта панель не настолько важна, чтобы назначать на неё горячую клавишу. Либо придётся освободить уже занятые буквы.

Не держись за ключ

Не стоит стремиться сохранить букву, дополнив тогл-группу какой-нибудь посторонней клавишей типа Shift, потому что это ведёт к незапоминаемым монстрам: Shift + Alt + Cmd+ S, которые придётся зажимать всем офисом. Не надо так.

Если по ошибке вместо Alt + Cmd+ T мы нажимаем Alt + Cmd + S, развернув панель Swatches вместо Styles, ошибку легко исправить, нажав Alt + Cmd+ S снова и не отпуская клавиш Alt + Cmd, нажать следующую букву нужного названия панели, словно мы печатаем слово Styles.

Какие плюсы даёт следование тогл-принципу

Ты используешь память

Если их назначить один раз, твои горячие клавиши работают в любых программах для Mac. Не нужно запоминать, что в Скетче панель слоёв открывается Alt + Cmd + 1, а в Photoshop — F7. В обоих программах можно поставить одну клавишу: Alt + Cmd + L(ayers).

К слову, в Скетче я оставил Alt + Cmd + 1, потому что это легко было запомнить по другой логике: панель 1 слева, панель 2 справа.

Ты экономишь время

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

Ты группируешь команды по смыслу

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

Ты используешь знакомые слова для подсказок

Читая названия панелей в интерфейсе программы, ты всегда можешь посмотреть, на какую букву они начинаются, зажать тогл-группу Alt + Cmd и добавить нужную букву. Либо, если нужная панель скрыта, посмотреть в меню программы. Поиск по меню в пункте Help работает на отлично.

Минусы тогл-подхода

Психологический барьер

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

Придётся что-то настраивать, вместо того чтобы делать работу

Когда ты открываешь новую программу, первые 10 минут вместо работы тратишь на настройку. Впрочем, они окупятся.

Не хватит букв

Если нужно действительно много тогл-панелей в сложной программе, могут закончиться буквы. В этом случае придётся отойти от канонического Alt + Cmd и заменить его на Ctrl + Cmd, что нарушает стройную идиллию и слегка рушит мозг.

Что если в программе нельзя назначать горячие клавиши?

Значит, это хреновая программа. Найди хорошую. Либо напиши разработчикам, чтобы вынесли нужную функцию в основное меню. Часто независимые разработчики слушают пользователей. Если ты программист — напиши хорошую самостоятельно. Хватит это терпеть!

Другие посты про горячие клавиши: