Использование единства и разнообразия в макетах

Unity измеряет, насколько хорошо элементы дизайна работают вместе для создания единой дизайнерской идеи.

Разнообразие означает диверсификацию элементов вашего дизайна, чтобы разрушить монотонность и создать визуальный интерес.

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

Давайте рассмотрим пару реальных примеров единства и разнообразия в действии.

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

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

• Как элементы совмещаются друг с другом
• Форма элементов
• Непрерывность внутри текстовых элементов.

Вы можете увидеть выделенные элементы в приложении YouTube Music ниже:

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

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

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

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

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

В приложении Google Photos есть одно решение для внесения разнообразия в его дизайн.

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

Чтобы стать успешным UX-дизайнером, нужно найти способы поддерживать интерес пользователей к вашему продукту. Даже если этот продукт не очень интересен! Применение некоторого разнообразия к вашим элементам может иметь большое значение для поддержания интереса ваших пользователей к созданному вами дизайну. Есть ли в ваших шутках какие-то области, которые, по вашему мнению, слишком повторяются? Подумайте о том, что вы узнали о разнообразии, и попробуйте что-нибудь немного другое.

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

Чтобы понять, как принцип единства работает в графическом дизайне и как вы можете применить его в своих проектах, посмотрите видео от DesignMantic: Что такое Unity?. Затем узнайте, как один UX-дизайнер понял, что разнообразие может улучшить дизайн их продукта, прочитав статью от UX Collective: Разнообразие: соль дизайн.