Закругленные и острые углы в дизайне

Автор статьи:
,

Введение

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

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

Вы узнаете, почему закругленные углы так привлекательны, в чем их плюсы и минусы, а также в каких случаях вы все еще можете использовать острые формы.

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

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

Для этого есть несколько очевидных причин:

01
Девайсы с закругленными углами тактильно приятнее при взаимодействии.
02
Закругленные углы безопаснее, так как о них нельзя пораниться.
03
Смартфоны с закругленными углами получают меньше повреждений при падении.

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

Так сложилось, что с древних времен человек привык видеть в острых предметах опасность. Этот механизм так прочно закрепился в нашем подсознании, что мы до сих пор предпочитаем плавные, закругленные формы. Этот феномен называют предвзятостью в отношении контуров (contour bias).

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

Ассоциации с закругленными формами

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

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

Автор: Mila Vasileva, ученица UPROCK

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

lamoda.ru

Преимущества закругленных углов в интерфейсах

Мы рассмотрели привлекательность закругленных углов с точки зрения восприятия и обработки информации человеческим зрением и мозгом. Давайте посмотрим, какие еще плюсы есть у использования округлых форм в интерфейсах.

Закругленные углы легче воспринимать и обрабатывать

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

Автор: Alina Lykova, ученица UPROCK

Закругленные углы лучше указывают траекторию движения глаз

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

Автор схемы User Flow: Daria Shi, ученица UPROCK

Элементы с закругленными углами привлекают внимание к контенту

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

Авторы: Kseniya Kalganova, Nastasia Bubentsova, ученицы UPROCK
monprojetgaz.fr

Закругленные края экономят пространство

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

pinterest.com

Адаптация под разные устройства

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

Автор: Ivan Nikitin, ученик UPROCK

Острые углы

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

Почему дизайнеры избегают острых углов

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

1. Мозгу в целом сложнее обрабатывать острые углы и края фигур, при просмотре страницы это вызывает у пользователя лишнее напряжение.

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

2. Прямоугольники и квадраты с острыми углами, которые находятся близко друг к другу, визуально часто выглядят «склеенными» для пользователя.

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

Для каких тематик подходят острые углы

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

Автор: Sofia Derevianko, ученица UPROCK

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

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

Чаще всего остроугольные интерфейсы (допустимо минимальное скругление у элементов) используются для следующих тематик:

1. Сайты СМИ и новостных порталов.

Автор: Kristina Savina, ученица UPROCK

2. Сайты с премиальными товарами.

Автор: Kseniya Kalganova, ученица UPROCK

3. Строительство и тяжелая промышленность.

Автор: Yuri Ugarov, ученик UPROCK

4. Транспортные компании и логистика.

Автор: Elizaveta Karas, ученица UPROCK

5. Крупная, серьезная техника и транспорт.

Автор: Marya Verhutina, ученица UPROCK

Закругленные VS. острые углы в кнопках

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

1. Оформление кнопок с ключевыми действиями.

Автор: Marina Talipova, ученица UPROCK

2. Объединение группы кнопок общими полями.

3. Оформление кнопок-фильтров.

4. Если скругленные кнопки больше похожи на теги и путают пользователя.

5. Если кнопка должна содержать вложенные опции, которые раскрываются при нажатии на стрелку.

Заключение

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

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

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

Бесплатный учебник по UX/UI‑дизайну
Все лонгриды