Числа в русском интерфейсе. Руководство для фронта и UI
В статье описаны наиболее распространенные случаи использования цифр в интерфейсе: форматы отображения, типографика, правила и нормы с примерами верстки. Это выжимка из авторитетных статей, книг для проектировщиков интерфейсов и призвано предупредить ошибки, послужить справочным материалом при решении спорных вопросов.
Поводом для написания руководства послужил случай на реальном проекте: команда заказчика использовала в рамках одного интерфейса два стандарта записи чисел — американский 253.45 ₽ и русский 253,45 ₽. Данные, которые выводились из баз, отображались через точку, а те, что вычислялись на фронте — через запятую.
Странный подход как с точки зрения дизайна, так со стороны обычной человеческой логики, особенно учитывая то, что ситуация исправляется очень легко, и даже не затрагивая сырые данные в базе.
Поэтому мы собрали в краткое руководство все частые случаи использования цифр в интерфейсах, используя статьи сайта «Бюро Горбунова», «Ководство» Артемия Лебева, «Справочник издателя и автора» А. Мильчина, советы с курса «Таблицы и прочие радости» И. Штанга, Википедию, и делимся им с вами. Изучайте и не совершайте ошибок.
Дробная часть и разряды
Общие правила
Мы в России, поэтому дробная часть отделяется запятой. Группы разрядов (классы) рекомендуется отделять тонким пробелом «thin space». Группы разрядов в дробной части пробелом не отделяются. Вместо тонкого пробела допустимо использовать обычный.
Оформление в HTML-коде:
Фронту на заметку
Как выкручиваться в коде, чтоб пробел не копировался при выделении числа https://bureau.ru/bb/soviet/20121018/
В финансовом секторе иногда разделяют разряды точкой или апострофом (15.354,156 или 15’354,156), но это редкое и спорное явление, скорее, дань традиции.
Число в текстовом наборе
4-значное число в тексте, как правило, читается хорошо без отделения групп разрядов. При этом отделение разрядов обычным пробелом может даже ухудшить восприятие. Группы разрядов в 5-значном и больше лучше отделять тонким пробелом.
Пример, где отделение разрядов обычным пробелом ухудшило восприятие (единица оторвалась и кажется, что заплатишь 399 ₽):
See the Pen Thin and inextricable spaces by Oustinger (@oustinger) on CodePen.
Числа в таблице
В числах в таблице, особенно, если это сравниваемые данные, все классы стоит отделять пробелом даже в 4-значных числах.
Числа в колонке выравниваются по разделителю дробной и целой части (по запятой). Если дробной части нет — по правому краю.
Выравнивание по разрядам имеет смысл лишь в случае, когда предполагается сравнение данных. Когда представлены несвязанные величины, выравнивание по разрядам излишне:
Также рекомендуется представлять сравниваемые данные с одинаковой точностью. Даже если в исходных данных точность отличается от значения к значению. Как правило, используется максимальная точность, присутствующая в наборе данных.
Числа в таблице лучше отображать шрифтом, в котором у цифр одинаковая ширина кегельной площадки, или
моноширинным шрифтом — это гарантирует одинаковое положение всех разрядов друг относительно друга
и облегчит визуальное сравнение.
Например:
Больше примеров про таблицыВ некоторых шрифтах есть несколько наборов цифр:
- пропорциональные
- моноширинные
- минускульные … и т.д.
Большинство серьезных дизайн-пакетов позволяют выбирать нужный набор. Даже Figma. Так что проверьте свой шрифт, прежде чем от него отказаться.
На скриншоте из Figma шрифт Inter обычный (слева) и с включенными моноширинными цифрами (справа).
А на следующем примере Georgia с минускульными и строчными цифрами:
В случае размеров, обозначенных через ×, или допусков с ±:
Сноски, «сбоки», иконки — свешиваем:
See the Pen Spaces in table by Oustinger ( @oustinger ) on CodePen.
Размерности
Общие правила
Размерность отделяется от числа тонким пробелом. Можно отделять и обычным.
140 м²
12 шт.
1 054,5 млрд
15 °С
Единицы угла
Градусы, минуты и секунды — не отделяются от предстоящего числа, но отделяются от последующего.
54° 40’ 21”
Знаки валют и процента
Лучше отделять тонким пробелом или обычным:
15 654 ₽
15 654 руб.
98,05 %
- А в США пишут $400.
- А мы не в США, а в России. Но учтите, что интерфейс в сфере финансов может опираться на традиции международной банковской сферы, и это уже другой мир.
Номера телефонов
Общие правила
В общем случае номер телефона, независимо от того городской он или сотовый, записывается в таком формате:
+7 982 113-08-82
Большинство людей сразу поймет какая это страна, сотовый или стационарный, а разделение номера дефисами облегчит пользователю набор.
Есть мнение (А. Лебедев, «Ководство» ), что коды в городских телефонах стоит выделять скобками, а в сотовых — пробелами:
+7 (495) 113-08-82
+7 982 113-08-82
По мнению автора — это устаревший прием из эпохи, когда городские телефоны были распространены и существовало разделение в тарифах операторов: разная стоимость звонка на городской, сотовый, внутри сети, и людям было важно, куда они сейчас будут звонить. Необходимость разделения в наше время отпала.
Локальные городские номера
В случае локальных городских номеров иногда имеет смысл опускать (или делать менее заметной) часть с кодом страны и города:
224-08-82
+7 351 224-08-82
Указание городского номера с кодом страны и города облегчит жизнь пользователю, который будет пытаться набрать номер на сотовом телефоне, т.к. не все операторы сотовой связи могут сами обработать дозвон по номеру без кодов в пределах города. Часто требуется набор полного номера.
+7… или 8…
Используйте «+7». Так надежней.
Все операторы связи в России умеют обрабатывать коды «8» и «+7» одинаково хорошо. Но «8» — это код, пришедший со времен СССР и стационарных телефонов. Означал «выход на межгород». Он работает локально в России. «+7» — это международный код и он сработает корректно при звонке из любой локации и оператор сможет обеспечить корректный биллинг.
Номера колл-центров 8-800
Логично записывать в формате «+7 800 ХХХ-ХХ-ХХ».
Правило то же, что и для обычных номеров: +7 800... сработает откуда угодно, 8 800... — только внутри страны.
Особенность номеров 8-800 в том, что звонок бесплатен для звонящего, платит всегда владелец номера. Но только, если звонок происходит внутри страны.
По сути, код «800» ничем не отличается от, например, «932» (Мегафон, Урал), с той лишь разницей, что присваивается не по географическому признаку, а по функциональному:
800 — звонок оплачивается вызываемым абонентом (бесплатно для вызывающего)
801 — звонок с автоматической альтернативной оплатой (платно для вызывающего)
802 — звонок по кредитной карте (платно для вызывающего)
… и т.д. (подробней на https://ru.wikipedia.org/wiki/DEF )
Формат «8-800...» привычней для глаз и однозначно определяется пользователем, как «номер поддержки». Но если человек попытается дозвониться на него из-за рубежа, у него не получится, независимо от того, готов он оплатить разговор или нет.
Добавочные номера
Лучше всего (понятно и достаточно коротко) указывать добавочные в следующем формате:
+7 351 224-08-82, доб. 201, 202
Для кодирования номера в QR или URI добавочный номер рекомендуют писать через запятую без пробела:
+73512240882,201
В таком случае велик шанс, что АТС абонента сможет обработать набор с добавочным автоматически и пользователю не придется набирать его в тоновом режиме.
Несколько номеров подряд
Выносим одинаковые коды:
Лучше избегать указания нескольких номеров без их функционального разделения. Стоит разобраться, для чего используется каждый конкретный номер и явно это указать:
See the Pen Phone numbers by Oustinger (@oustinger) on CodePen.
Дата и время
Самый удачный формат даты и времени в интерфейсе:
24 авг 1981, 12:30:15 — минимальное количество символов и максимальная понятность
Все месяцы сокращаем до 3 букв без точки: янв, фев, мар, апр, мая, июн, июл, авг, сен, окт, ноя, дек. Конечно, месяц можно писать и полностью, если этого требует контекст, например, когда дата — это один из основных фактоидов на экране:
Можно использовать привычный цифровой формат с полным годом или сокращенным:
24.08.1981, 12:30:15
24.08.81, 12:30
Бывают случаи, когда дата выступает основным визуальным идентификатором для поиска данных или должна корректно сортироваться «по алфавиту», например в логах, тогда дату можно записывать в «компьютерном» формате:
2023-03-29 23:15:21 Critical error
2023-03-29 23:15:20 Critical error
Формат записи обеспечивает удобную иерархию для визуального поиска в огромном объеме данных.
See the Pen DateTime formats by Oustinger (@oustinger) on CodePen.
Диапазоны
Диапазоны величин
Для указания диапазона используем многоточие в техническом контексте и предлоги «от» и «до» в гуманитарном (чаще всего в текстовом наборе).
−5…+2 °С
10…100 м²
Найдется от 10 до 20 штук
Диапазоны величин в столбце таблицы выравниваются по знаку «…» или «—». Например:
See the Pen Value ranges in tables 1 by Oustinger (@oustinger) on CodePen.
Диапазоны дат и времени
Тире отлично подходит для диапазонов дат и времени. Тире в таком случае не отбивается пробелами:
5—7 декабря 1952 г.
5 ноя—7 дек
12:30—14:00
Не путаем
- дефис «-»
- минус «−»
- среднее (короткое, en-dash) тире «–» иногда выглядит как минус, но имеет свой собственный код и символ
- тире (em dash) «—»
Есть мнение (М. Ильяхов, https://bureau.ru/bb/soviet/20121104/ ), что в таблицах для уменьшения шума диапазоны времени можно использовать в следующем формате:
12.30…14.00
По мнению автора — спорное решение.
Обелюс (немного экзотики)
Кроме того для обозначения интервала в техническом контексте допускается использовать обелюс:
Длиной 5÷10 метров
Больше примеров про диапазоны в таблицах
Например, показываем диапазоны, но при этом еще и сами границы даем в удобном для сравнения виде:
See the Pen Value ranges in tables 2 by Oustinger (@oustinger) on CodePen.