diff --git a/docs/patterns/switcher-checkbox/checkbox.png b/docs/patterns/switcher-checkbox/checkbox.png new file mode 100644 index 0000000..c37c13e Binary files /dev/null and b/docs/patterns/switcher-checkbox/checkbox.png differ diff --git a/docs/patterns/switcher-checkbox/index.md b/docs/patterns/switcher-checkbox/index.md new file mode 100644 index 0000000..6ff74ee --- /dev/null +++ b/docs/patterns/switcher-checkbox/index.md @@ -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) diff --git a/docs/patterns/switcher-checkbox/plohoy-primer.png b/docs/patterns/switcher-checkbox/plohoy-primer.png new file mode 100644 index 0000000..caa94e1 Binary files /dev/null and b/docs/patterns/switcher-checkbox/plohoy-primer.png differ diff --git a/docs/patterns/switcher-checkbox/switcher.png b/docs/patterns/switcher-checkbox/switcher.png new file mode 100644 index 0000000..7025bd1 Binary files /dev/null and b/docs/patterns/switcher-checkbox/switcher.png differ diff --git a/src/pages/rdpk/index.md b/src/pages/rdpk/index.md index a3e010b..b4ac2a3 100644 --- a/src/pages/rdpk/index.md +++ b/src/pages/rdpk/index.md @@ -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/).\ Оформление сверяем со справочником Мильчина и Чельцовой.\ @@ -182,7 +184,7 @@ hide_table_of_contents: false #### Процент и номер от числа -Знак «№» и знак «%» всегда отбиваем коротким неразрывным пробелом. +Знак «№» и знак «%» пишем без пробела. Ставки и другие процентные выражения пишутся через запятую, если это десятичное число. ### Неразрывный пробел @@ -218,6 +220,14 @@ hide_table_of_contents: false Если знак ₽ недоступен по техническим причинам — пишем руб. с точкой. +### Сумма в месяц + +В таблицах, карточках тарифов и других повторяющихся блоках, где важна компактность, используем сокращение ₽/мес. + +В тексте, если позволяет место, сокращений лучше избегать — пишем полностью ₽ в месяц. + +![Разрядность](./rubly-v-mes.png) + ### Номера и маскирование #### Телефон diff --git a/src/pages/rdpk/rubly-v-mes.png b/src/pages/rdpk/rubly-v-mes.png new file mode 100644 index 0000000..ae38c40 Binary files /dev/null and b/src/pages/rdpk/rubly-v-mes.png differ