Прощаемся с интервалом в 4 px и привет Фибоначчи
Когда я работаю с новым дизайнером, у меня есть постоянный алгоритм действий. Я захожу в Google, ищу «сетка 8 пикселей Medium.com», нахожу подробное руководство Эллиота Даля и отправляю его им. Вот это руководство.
Это руководство просто фантастическое, и я очень рекомендую его. До этого года я считал, что числа, кратные 4 (а не 8!), — это практически моя библия дизайна. Новый элемент? Конечно, левое отступы — 16, верхнее — 12? Каждый… раз…
Хотя такой подход к проектированию может помочь в достижении предсказуемости и позволяет очень быстро настраивать компоненты, я не могу не думать о том, что мы оказались в мире, где, к сожалению, всё выглядит одинаково.
Нечетные числа
Возможно, нам стоит подумать о том, чтобы использовать для интервалов нечётные числа вместо чётных, чтобы внести разнообразие и сохранить здравый смысл.
Проблема, с которой я сталкиваюсь при использовании систем с чётным количеством пикселей в сетке, заключается в том, что они могут казаться немного растянутыми по вертикали или горизонтали.
Несмотря на то, что сейчас это де-факто стандарт в дизайне продуктов, я ловлю себя на том, что обращаю внимание на несколько пикселей лишнего пространства внутри наших компонентов.
Сравнения
Давайте посмотрим на сравнение.
На верхнем изображении слева компоненты расположены традиционно, с интервалом в 4 пикселя. Справа мы изменили их на нечётные числа. Мне такой вариант кажется более привлекательным. А вам?
Чтобы добиться более плотного расположения отступов, я вручную изменил размер компонентов на один-два пикселя вверх или вниз.
Особенно хорошо это заметно на второй и четвёртой кнопках сверху. Если сравнить, то можно увидеть, что отступы у нечётных чисел более равномерные.
А как насчет шрифтов?
Первым препятствием для реализации этой идеи может стать разница в том, как шрифты будут нарушать интервалы из-за унаследованных размеров.
Ощущения практически не отличаются. Вы по-прежнему получаете более плотный конечный результат при неравномерном интервальном наборе, независимо от того, используете ли вы моноширинный или курсивный шрифт.
Здесь важно отметить, что высота строки повлияет на то, как всё это будет выглядеть в целом. Это хорошо работает для однострочного текста с высотой строки 100%, но для больших объёмов текста нам придётся поэкспериментировать.
В этих кнопках все размеры шрифтов и иконок были установлены на одинаковый размер! Так что, возможно, сочетание чётного внутреннего и нечётного внешнего может обеспечить нам гармонию.
Примечание: в предыдущей версии этого ресурса были указаны неверные значения отступов для кнопки Notion. Они составляли 7 пикселей по вертикали и 15 пикселей по горизонтали, но на текущем сайте они составляют 6 пикселей по вертикали и 14 пикселей по горизонтали.
Недавно я наткнулся на подход Notions к этому вопросу, просматривая их новую
посадочную страницу для рассылки.
Они подошли к этому, смешав чётные и нечётные числа, и добились отличного результата. Они настроили отступы кнопки так, чтобы они были нечётными для ощущения, но затем использовали классический расчёт радиуса границы, чтобы получить точные, но рассчитанные радиусы для внутренних и внешних элементов.
Систематизация этого — Введение в Фибоначчи
Если бы я попытался воплотить эту идею в систему, то, вероятно, захотел бы, по крайней мере, попытаться найти метод в этом безумии.
Именно здесь мы можем положиться на такие системы, как последовательность Фибоначчи, чтобы справиться с тяжёлой работой.
В системе 4px мы используем такой подход: базовая единица — 4, затем умножаем на 1 (или на 0,5, если хотим поэкспериментировать), чтобы получить нашу систему:
Но система Фибоначчи работала бы, сложив два предыдущих значения вместе.
Если сравнивать системы на примере одного компонента, то различия незначительны, но разве не для этого мы здесь?