Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/patterns/switcher-checkbox/checkbox.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
58 changes: 58 additions & 0 deletions docs/patterns/switcher-checkbox/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
# Свитчер или одиночный чекбокс

Свитчеры и одиночные чекбоксы имеют схожее бинарное значение («включено» / «выключено», «да» / «нет»), но их использование в интерфейсе различается в пользовательском опыте и ожиданиях.

## Подпись

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

## Правило для свитчера

Переключение свитчера должно вызывать мгновенное, заметное изменение в системе или интерфейсе.

![Пример для свитчера](./switcher.png)

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

### Пример плохого решения

В интерфейсах можно встретить неудачные решения. Например, ряд свитчеров в платежах:

![Пример плохого решения](./plohoy-primer.png)

- «Бюджетные средства» и «Срочный платёж» — это нейтральные двусмысленные формулировки без глагола.
- «Добавить в шаблон» — хорошая формулировка. Но на практике это действие чаще используется на экране успеха в виде кнопки.
- «Пригласить партнёра в ПСБ и получить до 4000 ₽ на счёт» — реферальное предложение, которое не является моментальным действием. Свитчер перегружен двумя разными вещами «пригласить партнёра» и «получить до 4000 ₽». Клиент не получит деньги сразу.

Надо избегать подобных ситуаций в интерфейсе и искать другие варианты решения.

## Правило одиночного чекбокса

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

![Пример плохого решения](./checkbox.png)

## Итог: как выбрать свитчер или одиночный чекбокс

| | Свитчер | Чекбокс |
| ------------------------------------------------------------------------ | ------- | -------------------------------------------|
| Действие происходит сразу после переключения? | Да | Нет |
| Требуется подтверждение кнопкой («Сохранить», «Применить», «Отправить»)? | Нет | Да |
| Влечет за собой изменение в системе или интерфейсе? | Да | Нет, это выбор опции перед отправкой формы |

:::tip[Важно]

Правила применимы для всех платформ: web, IOS и Android

:::

## Ссылки

- [Material Design 3](https://m3.material.io/components/switch/guidelines#4f51b236-583e-4caa-9ae6-c8079325ef6b)
- [HIG.Toggles](https://developer.apple.com/design/human-interface-guidelines/toggles)
- [Руководство по использованию тогла. NN/g](https://www.nngroup.com/articles/toggle-switch-guidelines/)
- [Checkboxes vs. Switches in Forms](https://www.youtube.com/watch?v=EoEeRWHJ8xs)
- [UXtweak](https://blog.uxtweak.com/checkbox-vs-toggle-switch/)
- [DMC](https://www.dmcinfo.com/blog/22434/user-interface-design-tips-checkboxes-vs-toggle-switches/)
- [infyom](https://infyom.com/blog/user-interface-design-tips-checkbox-vs-toggle-switch/)
- [Бенчи](https://www.figma.com/design/JMCs26ymVvBrHBQ7LvfUsc/%D0%A1%D0%B2%D0%B8%D1%82%D1%87%D0%B5%D1%80%D1%8B-%D0%B8-%D1%82%D0%BE%D0%B3%D0%BB%D1%8B?node-id=4-83&t=VByaliHE8npiXdxr-1)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/patterns/switcher-checkbox/switcher.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 11 additions & 1 deletion src/pages/rdpk/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ hide_table_of_contents: false

## Кому мы доверяем

Используем эти источники, если в редполитике не указано иное.

При написании текстов руководствуемся [инфостилем](https://bureau.ru/projects/book-text/).\
Орфографию проверяем [в словаре Лопатина](https://www.slovorod.ru/orth-lopatin/index.html) и [на сайте «Орфограммка»](https://orfogrammka.ru/).\
Оформление сверяем со справочником Мильчина и Чельцовой.\
Expand Down Expand Up @@ -182,7 +184,7 @@ hide_table_of_contents: false

#### Процент и номер от числа

Знак «№» и знак «%» всегда отбиваем коротким неразрывным пробелом.
Знак «№» и знак «%» пишем без пробела.
Ставки и другие процентные выражения пишутся через запятую, если это десятичное число.

### Неразрывный пробел
Expand Down Expand Up @@ -218,6 +220,14 @@ hide_table_of_contents: false

Если знак ₽ недоступен по техническим причинам — пишем руб. с точкой.

### Сумма в месяц

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

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

![Разрядность](./rubly-v-mes.png)

### Номера и маскирование

#### Телефон
Expand Down
Binary file added src/pages/rdpk/rubly-v-mes.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.