UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Когда дело доходит до дизайна, лучше полагаться на глаза, чем на математику
Редакція
Редакція

Опубліковано

Когда дело доходит до дизайна, лучше полагаться на глаза, чем на математику

#ui

Краткий обзор, почему математика не является основным источником правды для дизайна.

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

Давайте рассмотрим несколько случаев:

Не все логотипы созданы равными

Работая над страницей клиентского раздела, я изначально хотел создать сетку, содержащую прямоугольники размером 256px * 200px с логотипами и именами клиентов.

Хотя мой компьютер говорит, что все логотипы имеют высоту 24px, мои глаза говорят, что результат не выглядит визуально привлекательным.

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

Ограничительная рамка реальна

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

Проблема в том, что компьютер видит изображения не так, как люди. Мы видим массу объекта, в данном случае футбольного мяча, но компьютер видит нечто, называемое ограничивающей рамкой (которая является невидимой рамкой, охватывающей каждый возможный пиксель на изображении). В приведенном ниже примере ограничивающей рамкой является синий прямоугольник.

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

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

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

Разные буквы одного шрифта могут не совпадать

Вот быстрый пример экспериментального логотипа для фирмы, занимающейся дизайном интерьеров. Выбран шрифт Helvetica Neue 64points, кернинг установлен на auto, а трекинг – на 60 точек. Базовая линия шрифта установлена на середину.

Но мои глаза говорят мне, что между I и + больше пространства, чем между + и T. Мои глаза также говорят мне, что + не установлен по середине.

Итак, давайте исправим это:

Сначала базовая линия. Я бы обвел все слово, а затем вертикально выровнял буквы по центру.

Затем, мы доверимся нашим глазам и настроим кернинг между + и T, чтобы он соответствовал кернингу I и +. Интервал по умолчанию смещает + слишком сильно влево. У I прямой вертикальный штрих, а у T – поперечная черта. Нам нужно проигнорировать ее большую часть, так как она занимает мало места относительно вертикальной черты.

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

Вам не нужно придерживаться десятичных знаков

Когда я начинаю дизайн-проект, я обычно посещаю такой сайт, как type-scale.com, чтобы найти базовую шкалу шрифтов. Но обычно для большинства масштабов размеры шрифтов получаются в виде десятичных дробей.

Вам нужно создать несколько основных страниц с этой шкалой шрифтов, а затем вручную на глаз отрегулировать текст, прежде чем принимать решение о том, округлять значения в плюс или в минус. Это абсолютно субъективно и зависит от проекта, над которым вы работаете. Шкалы определенного шрифта лучше подходят для разных архетипов сайтов. Целевые страницы обычно имеют больший контраст между размерами шрифта, чем блоги или сайты продуктов.

Примечание: нет ничего плохого в том, чтобы оставить десятичные значения (лично мне это не нравится, особенно когда я делаю CSS). Здесь необходимо подчеркнуть, что, в целях достижения визуального баланса, ваш взгляд может помочь вам выйти за рамки измерений.

В книге «4 Hour Body», Тим Феррис объясняет, что весы не являются единственным источником правды, когда речь идет о потере веса. Вы можете весить 72 кг в прошлом месяце и 72 кг в этом месяце, но ваш жир будет перераспределен более правильно, так как в целом вы стали здоровее, чем были, и теперь ваша облегающая одежда идеально вам подходит.

Автоматизированные инструменты нашего софта помогают нам экономить время. Но эти инструменты созданы на языках программирования и поэтому очень математичны в своем подходе к интерпретации замысла дизайна. Ваши глаза – отличный инструмент. Используйте их.


Перевод статьи uxdesign.cc

Найстарші коментарі (0)