Проиллюстрированы и анимированы для ясности

Как и большинство UI-дизайнеров, я начал со стороны дизайна, прежде чем узнал о технических аспектах пользовательских интерфейсов. Мне всегда хотелось понять, как все работает, и пользовательский интерфейс ничем не отличался. Прежде чем я узнал об этом, я программировал сложные интерфейсные приложения. Раньше мы использовали ActionScript в Macromedia Flash, а затем Adobe Flash Builder, HTML, CSS, jQuery, вплоть до полностью оптимизированных для поисковых систем веб-приложений JavaScript, сочетающих Next.js, React и системы управления контентом, такие как Contentful, которые Это фантастично.

«GotoAndPlay (25);»

- ActionScript 2.0, 15 лет назад.

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

Пятнадцать лет назад - но так же много сегодня - хороший графический дизайнер знал основы печати. Он знал типы и вес бумаги; он знал разные техники печати; он знал недостатки и сильные стороны этих техник, как их сочетать и так далее. Точно так же хороший (UI) дизайнер должен знать основы CSS и то, как на самом деле построены пользовательские интерфейсы.

Сегодня мы рассмотрим пять самых фундаментальных концепций CSS, которые должен знать каждый дизайнер.

1. Родители и дети

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

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

Думайте о своем дизайне как о коллекции предков и потомков, на самом верху которого находится корень: холст. Если предок перемещается, его потомки тоже перемещаются. Если предок изменяет размеры, его дочерние элементы также перераспределяют или изменяют размер.

2. Маржа (личное пространство)

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

У объектов могут быть разные поля для каждой стороны. Например, квадрат может предпочитать оставлять 100 пикселей слева от него, но только 50 пикселей сверху. Общее практическое правило состоит в том, что объекты с одним и тем же родителем (братьями и сестрами) имеют один и тот же набор полей. Это помогает дизайну выглядеть организованным.

Изменение поля объекта изменяет расстояние между этим объектом и другими объектами.

3. Набивка (мех)

Тесно связано с полями, но принципиально отличается от отступов. Набивку можно рассматривать как мех: это неотъемлемая часть объекта, а не пространство вокруг него. Как и поля, отступы могут иметь разные значения для верхнего, левого, правого и нижнего края.

Заполнение вступает в игру только тогда, когда у объекта есть дочерние элементы (или когда у объекта есть предопределенная ширина или высота, но давайте не будем усложнять ситуацию). Если родительский объект имеет заполнение 20 пикселей и один дочерний объект имеет ширину 100 пикселей и высоту 50 пикселей, родительский объект будет иметь ширину 140 пикселей и высоту 90 пикселей, потому что мех добавляется к размерам родительского объекта.

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

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

Контейнеры могут иметь - и часто имеют - и отступы, и поля. Заполнение увеличивает фактические размеры контейнера, поле затем определяет пространство между контейнером и другими объектами:

4. Flexbox (раздача)

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

Выровнять: Направление (стек)

Первое, что нужно учитывать, - это то, как объекты будут располагаться внутри их родительского элемента. Как правило, есть два варианта: складывать их боком (сверху вниз или снизу вверх) или вертикально (слева направо или справа налево).

В CSS это называется свойством flex-direction, а допустимые значения - row | row-reverse | column | colum-reverse.

Выровнять: начало, центр, конец

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

  • Начало выравнивает дочерние элементы по верхнему краю родительского в стопке слева направо.
  • По центру выравнивает дочерние элементы по вертикальному центру родительского элемента в стопке слева направо.
  • Конец выравнивает дочерние элементы по нижнему краю родительского в стопке слева направо.

В CSS это поведение регулируется свойством align-items, а допустимые значения - flex-start | flex-end | center | stretch | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe.

Обоснование: начало, центр, конец

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

Здесь также есть три обычных подозреваемых: начало, центр и конец.

Обоснуйте на стероидах: Пространство между, Пространство вокруг, Пространство равномерно

К счастью, есть еще одно оправдание. Вот где действительно начинает проявляться логика флексбоксов.

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

Примечание о гибких боксах и полях

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

5. Относительное и абсолютное

Наконец, есть понятие абсолютных значений в сравнении с относительными значениями. В дизайне объект может иметь ширину 200 пикселей, 500 или 1171 пикселей. Но как только этот объект станет частью реального пользовательского интерфейса, как он будет себя вести? Он растянется? Если да, то насколько широким он может быть? И когда область просмотра сузится, объект будет сдавлен? Как далеко вы позволите его раздавить?

Вот о чем вам нужно подумать. Один совет: возьмите за привычку использовать относительные ценности. Вряд ли что-либо в пользовательском интерфейсе должно иметь абсолютные размеры. Вряд ли - потому что бывают исключения. Например, важная кнопка, которая прилипает к нижней части области просмотра, может иметь фиксированную ширину или высоту. Или всплывающее модальное окно. Или индикатор загрузки. Для чего-нибудь еще: используйте проценты и определите максимальную и минимальную ширину и высоту.

🙏 Спасибо, что прочитали мой контент! Если вы подумываете о подписке на Medium, сейчас самое лучшее время, чем когда-либо. Когда вы зарегистрируетесь, используя мою личную реферальную ссылку, 50% вашей абонентской платы будет напрямую поддерживать мое письмо. Начните читать Medium за здесь всего 5 долларов в месяц.