Шесть размеров, а не пятьдесят: композиция и шрифт

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

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

В этом хорошая новость статьи: визуальный слой — самая обучаемая часть дизайна, потому что бо́льшая его часть является арифметикой, которую решают один раз.

Реши числа один раз

Два списка, составленные до начала проектирования, делают основную работу.

Шкала отступов. Почти геометрическая последовательность на базовой единице — 4 или 8 пикселей выбирают практически все: 4, 8, 12, 16, 24, 32, 48, 64. Любой зазор в интерфейсе обязан быть значением из этого списка. Другого не существует.

Шкала кеглей. Пять-шесть размеров, не больше, у каждого определённая роль: заголовок страницы, заголовок раздела, подзаголовок, основной текст, мелкий, подпись. Умножай вверх на постоянный коэффициент (1,2 для спокойной шкалы, 1,5 для драматичной) и округляй до разумных чисел.

Когда ты на это подписываешься, происходят две вещи. Очевидная — единообразие, которое люди читают как качество, не умея это назвать. Менее очевидная и более ценная — ты перестаёшь принимать по сотне микрорешений на экран. «Сколько тут отступа?» перестаёт быть вопросом вкуса и становится выбором между 16 и 24: секунда вместо минуты, и это можно защитить на ревью.

Ограничения не сужают работу дизайнера. Они удаляют ту часть, которая никогда не была дизайном.

Выравнивание: одна ось, удержанная

Сбитое выравнивание — самый громкий любительский сигнал, и чинится он бесплатно.

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

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

Оптическое сильнее математического. Круг того же числового размера, что квадрат, выглядит мельче; иконка, центрированная по габаритной рамке, часто смотрится смещённой из-за пустоты внутри неё. Когда глаз и число расходятся, верь глазу — но именно в таких случаях, а не как общей индульгенции.

Сетка и строка

Сетка раскладки — колонки, промежутки, максимальная ширина контента — существует, чтобы отвечать на вопрос «куда это встанет?» до того, как ты его задал.

Два правила, которые важнее числа колонок:

Длина строки. Чтение ломается на длинных строках, потому что обратный переход к началу следующей строки становится ошибкоопасным. Традиционная типографская рекомендация, сформулированная Робертом Брингхерстом, — примерно 45–75 символов в строке при комфортных 66. На широком мониторе неограниченный абзац растягивается до 150 символов и по-настоящему утомляет — поэтому максимальная ширина текста не является эстетическим предпочтением.

Точки перелома следуют за контентом, а не за устройствами. Не проектируй под «айфон, айпад, десктоп» — этот список меняется каждый год. Расширяй окно, пока раскладка не перестанет работать, и ставь точку перелома там. Где ломаться, решает твой контент.

Шрифт, практически

Типографика в интерфейсах — короткий список решений, и большинство из них скорее настройки, чем искусство.

Кегль. 16px — практический минимум для основного текста в вебе: меньше — и мобильные браузеры начинают масштабировать, а люди начинают растягивать пальцами. Интерфейсные подписи можно опустить до 14; ниже 12 ты проектируешь то, что никто не читает.

Интерлиньяж. Примерно 1,4–1,6 для основного текста; плотнее (1,1–1,25) для крупных заголовков, потому что большому кеглю пропорционально нужно меньше воздуха. Слишком плотный интерлиньяж — самая частая типографская ошибка в интерфейсах, и из-за неё текст выглядит «тесным», а винят в этом шрифт.

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

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

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

Пространство говорит, что с чем вместе

Это принцип близости из статьи про гештальт, превращённый в измеримое правило.

Пространство внутри группы должно быть заметно меньше пространства вокруг неё. Не немного меньше — заметно. Если заголовок равноудалён от абзаца сверху и абзаца снизу, он не принадлежит ни одному, и глазу приходится выводить структуру из смысла, а не из формы.

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

Цвет и проектирование без него

Даже в монохромном интерфейсе дисциплину цвета стоит держать при себе.

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

Никогда не неси смысл одним цветом. Примерно у 8% мужчин та или иная форма нарушения цветового зрения; сверх того, люди пользуются тёмной темой, дешёвыми экранами, ярким солнцем и распечатками. Каждому состоянию, закодированному цветом, нужен второй сигнал: иконка, подпись, форма, положение.

Контраст — это число, а не мнение. WCAG требует минимум 4,5:1 для основного текста на фоне и 3:1 для крупного текста и интерфейсных элементов вроде рамок и иконок. Серое по серому в подсказках полей — самый частый провал, и делает его обычно дизайнер на идеальном экране в полутёмной комнате.

Плотность — это решение, а не добродетель

Господствующий стиль говорит «больше пространства, больше воздуха». Это верно для продуктов, которыми пользуются изредка люди, их не знающие, и неверно для инструментов, в которых живут по восемь часов в день.

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

На практике

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

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

Проверь длину строки. Всё длиннее ~75 символов получает максимальную ширину. Сделай это на самом длинном абзаце прямо сейчас.

Сделай серый проход. Убери весь цвет и посмотри, стоит ли иерархия. Почини там, потом возвращай цвет.

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

Назови, по чему всё выровнено. Ткни в пять элементов и скажи, какое ребро каждый с кем-то делит. Всё, на что нет ответа, дрейфует.

Проверь себя

Закрой статью и ответь своими словами:

В чём конкретная разница между экраном, собранным по системе, и экраном, собранным из догадок?
Что, кроме единообразия, реально экономит подписка на шкалу отступов?
Почему ограничение ширины основного текста — функциональное решение, а не стилистическое?
Почему точки перелома должны следовать за контентом, а не за размерами устройств?
Сформулируй правило вложенных отступов и объясни, что оно чинит.
Почему смысл нельзя нести одним цветом и какие два числа контраста надо помнить?
Когда плотная раскладка — правильный ответ, а не ленивый?

Коротко

Видимая разница между любительской и профессиональной раскладкой обычно и есть система: четыре значения отступов и пять размеров вместо девятнадцати и одиннадцати.
Ограничения убирают сотни микрорешений на экран и делают выбор защитимым на ревью.
По умолчанию выравнивай влево, дай каждому элементу ось и верь оптике, когда она расходится с числом.
Длина строки примерно 45–75 символов; точки перелома там, где ломается твой контент, а не там, где имена устройств.
Основной текст от 16px, интерлиньяж 1,4–1,6, иерархия из начертания и размера, а не из лишних гарнитур, разряд для прописных, табличные цифры для чисел.
Пространство внутри группы должно быть заметно меньше пространства вокруг — это чинит большинство «перегруженных» экранов.
Проектируй сначала в сером, не неси смысл одним цветом и держи 4,5:1 для текста и 3:1 для крупного текста и элементов.
Плотность должна соответствовать частоте использования: редкому нужен воздух, ежедневным инструментам — компактность.