Skip to content
Merged
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.
61 changes: 61 additions & 0 deletions docs/patterns/switcher-checkbox/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
# Свитчер или одиночный чекбокс

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

## Подпись

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


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

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

![Пример для свитчера](./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.
16 changes: 13 additions & 3 deletions 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 @@ -176,13 +178,13 @@ 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.