Анатомия всех интерфейсов

Часть I. Краткое описание того, как создаются все цифровые вещи, с которыми вы взаимодействуете.

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

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

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

Давайте рассмотрим пример выше. Простая кнопка, скажете вы? Давайте проанализируем её составляющие.

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

Для этого я использую 8-точечную грид-систему. По сути, это означает, что я использую кратность к восьми для определения размеров, внутренних и внешних отступов обоих блоков и элементов. Так будет понятней.

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

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

Все фронт-енд разработчики должны устанавливать внутренние и внешние отступы, шрифты и их размеры, цвета, фоновый цвет и т. д. в разметке. Поэтому вы очень поможете разработчикам, если придумаете систематический способ объявления этих значений. Я использую кое-что, называемое Design Tokens, чтобы помочь себе в этом процессе. Затем я создаю файл SASS, в который включены все мои компоненты. Фронт-ендер может помочь вам разобраться, если вы не знакомы с SASS.

В заключение, попробуйте приступить к созданию UI с помощью фреймворка, который позволит вывести ваш UI на новый уровень. Вы всегда сможете менять значения (оттенки, стили типографии, иконки), но вы должны иметь этот фреймворк. Он называется - система дизайна.

Дизайн-система — это постоянно эволюционирующий свод правил, который определяет порядок создания продукта. Она связывает в одно целое UX и дизайнерские решения и способствует гармонии.

В части II мы глубже рассмотрим Design System и как её составить.
Часть III будет посвящена совместному использованию и масштабированию вашей системы проектирования на команды дизайнеров и разработчиков.