Почему скруглённые углы проще для восприятия / Хабр

В наши дни дизайнеры так часто используют скруглённые углы, что их уже можно считать индустриальным стандартом, а не модным трендом. Они встречаются не только в программах, но даже в дизайне аппаратных устройств. Что же делает их такими популярными?

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

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

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

Научные исследования углов, проведённые в Неврологическом институте Барроу, показали, что «воспринимаемая заметность углов линейно зависит от их остроты. Острые углы вызывают более сильную мнимую заметность, чем тупые углы» [2]. Другими словами, чем острее угол, тем больше он привлекает внимания. А чем больше он привлекает внимания, тем больше усилий затрачивается на его визуальную обработку.

На какой объект легче смотреть?

Мы приспособлены к скруглённым углам

Другое объяснение, почему мы предпочитаем скруглённые углы, состоит в том, что они более естественны для повседневных объектов в окружающем мире [3]. Скруглённые углы повсюду. Ещё детьми мы быстро усвоили, что острые углы ранят, а скруглённые — более безопасны. Вот почему, когда ребёнок играет с мячом, большинство родителей спокойны. Но если ребёнок начинает играть с вилкой, родители попытаются забрать вилку, чтобы он случайно себя не ранил. В неврологии это называется «реакция избегания» на острые углы. Мы склонны «избегать острых углов, потому что в природе они могут представлять опасность» [4].

Какой объект вы доверите своему ребёнку?

Скруглённые углы облегчают восприятие информации

Скруглённые углы лучше подходят для карт и диаграмм, потому что глазу проще следовать по линиям, которые «лучше соответствуют естественным движениям глаз и головы» [5]. Острые углы резко обрывают линию и сбивают ваш глаз с пути, вызывая неожиданную паузу, когда линия меняет направление. А со скруглёнными краями движение происходит плавно.

Какую диаграмму глазам удобнее рассматривать?

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

Заключение

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

Ссылки
[1] Realizations of Rounded Rectangles
[2] Corner salience varies linearly with corner angle during flicker-augmented contrast
[3] Why Do We Love Rounded Corners?
[4] NeuroFocus Study Reveals What Went Wrong With the Gap’s New Brand Logo
[5] FMC Visualization Guidelines

Скруглённые или остроугольные? / Хабр

Скруглённые или квадратные? Вот в чём вопрос.

Нужно ли менять обычные остроугольные кнопки на скруглённые? Какие из них лучше для юзабилити? Как мы вообще принимаем подобные решения?

Именно с такими вопросам вы столкнётесь, погрузившись в UX, связанный со круглёнными кнопками в приложениях. Мы уже знаем, что размер, контрастность и отбрасываемая тень сами по себе могут сделать кнопку заметной, но вот найти правильный баланс для элементов главного действия и вторичных не всегда просто. Скруглённость в этом случае может прийти на помощь.

Переменные, используемые для улучшения заметности

Скруглённые элементы легче для восприятия. Посчитать количество карточек в ряду легче, если их углы неострые.

Скруглённые элементы легче распознать, чем острые

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

В grid layout скруглённость работает ещё лучше.

Например, в дашборде на TurboTax глаз лучше цепляется за элементы со скруглёнными углами в верхней секции в сравнении со средней секцией, где у карточек углы острые.

Дашборд Turbotax

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

Скруглённые кнопки на Spotify

Вообще говоря, в данном конкретном примере, так как работа со Spotify всегда сводится к воспроизведению (треков, подкастов, плейлистов), главное действие определено однозначно. А полностью скруглённые кнопки воспроизведения очень хорошо отличимы от UI альбомов и плейлистов, что в свою очередь побуждает пользователя нажать на «Play».

“Play” на Spotify

В некоторых случаях скруглённость может ухудшить юзабилити, например:

1.

Когда скруглённые кнопки похожи на теги

Если отличить кнопку от тега (фильтра) непросто, это введёт людей в замешательство: «Я кликаю на кнопку или на фильтр?»

Что это: кнопки или фильтры? Совсем неочевидно.

2. Скруглённые кнопки не способны показать вложенные опции

Полностью скруглённые кнопки обычно используют иконку со «стрелочками», чтобы показать наличие вложенных опций. Но область клика (или тача) для отображения опций у них лимитирована размером иконки (обычно 16×16 или 24×24 px).

Удобно ли будет просматривать опции в каждом из случаев?

Если использовать лишь слегка закруглённые кнопки, мы сможем прятать стрелочку, чтобы кнопка вела себя похоже на pop-up кнопку. Такой подход работает лучше.

Apple не рекомендует использовать скруглённые кнопки для действий (см. push buttons). Полностью скруглённые кнопки зарезервированы для «Помощи» или предоставления взаимоисключающих вариантов (см. radio buttons).

Иллюстрации из Human Interface Guidelines от Apple

3. Полностью скруглённые кнопки не подходят для стеков

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

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

Кнопки «без границ» в стеке

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

В Хроме после недавнего апдейта (прошло полгода с момента публикации оригинальной статьи — прим. перев.) адресная строка стала скруглённой, чтобы лучше выразить доступность одновременного использования для поиска. Пользователи могут увидеть часть результатов поиска прямо во время печати, ещё до перехода на страницу.

Новая строка поиска в Chrome (источник — Google blog)

Вписываясь в новую концепцию, кнопки на тулбаре стали подсвечиваться скруглёнными при наведении. Несложно найти скруглённые элементы и в других приложениях Гугла типа Calendar, Gmail и Drive.

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

Use round shapes in Material Designs

Characteristics of rounded corners

Why rounded corners are easier on the eyes

Изображения границ CSS

❮ Предыдущая
Далее ❯

Изображения границ CSS

С помощью свойства CSS border-image можно установить изображение, которое будет использоваться в качестве рамки вокруг элемента.

Свойство CSS border-image

Свойство CSS border-image позволяет указать изображение, которое будет использоваться вместо обычной границы вокруг элемента.

Свойство состоит из трех частей:

1. Изображение для использования в качестве границы
2. Где разрезать изображение
3. Определите, должны ли средние части повторяться или растягиваться

Мы будем использовать следующее изображение (называемое «border.png»):

Свойство border-image берет изображение и разделяет его на девять частей,
как доска для игры в крестики-нолики. Затем он помещает углы в углы, и
средние разделы повторяются или растягиваются, как вы укажете.

Примечание: Для граница изображения для работы элемент также нуждается в
граница набор свойств!

Здесь средние части изображения повторяются для создания границы:

Изображение в качестве рамки!

Вот код:

Пример

#borderimg
{
  граница: 10 пикселей сплошная прозрачная;
  отступ: 15 пикселей;
  изображение границы: url(border. png)
30 патронов;
}

Попробуйте сами »

Здесь средние части изображения растягиваются для создания границы:

Изображение в качестве рамки!

Вот код:

Пример

#borderimg
{
  граница: 10 пикселей сплошная прозрачная;
отступ: 15 пикселей;
  изображение границы: url(border.png)
30 стрейч;
}

Попробуйте сами »

Совет: Свойство border-image на самом деле является сокращенным свойством свойства
источник изображения границы , фрагмент изображения границы , ширина изображения границы ,
граница-изображение-начало
и свойств border-image-repeat .

CSS border-image — Различные значения фрагмента

Различные значения фрагмента полностью изменяют внешний вид границы:

Пример 1:

border-image: url(border. png) 50 round;

Пример 2:

border-image: url(border.png) 20% округление;

Пример 3:

border-image: url(border.png) 30% округление;

Вот код:

Пример

#borderimg1 {
  граница: 10 пикселей сплошная прозрачная;
отступ: 15 пикселей;
  изображение границы: url(border.png)
50 патронов;
}

#borderimg2 {
граница: 10px сплошная прозрачная;
  отступ: 15 пикселей;
border-image: url(border.png) 20% округление;
}

#borderimg3 {
 граница: 10 пикселей сплошная прозрачная;
отступ: 15 пикселей;
  border-image: url(border.png)
30% круглый;
}

Попробуйте сами »

Проверьте себя с помощью упражнений

Упражнение:

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

<стиль>
дел {
  граница: 10px сплошная прозрачная;
  : url(border. png) 30 раундов;
}

<тело>
  
Это элемент div. Там есть текст.

 

Начать упражнение

Свойства изображения границы CSS

❮ Предыдущий
Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

9 Примеры Top6
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM |
О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Rounded Corners (2019) — IMDb

• Awards
  • 4 wins

Videos1

Trailer 1:01

Watch Rounded Corners Movie Trailer

Photos32

Top cast

Marie Check

• Сара Филлипс

Тинуке Адетунджи

• Нелли Грей

Paul Check

• Steve Phillips

James Zeiss

• Rob Olson

Arden Haselmann

• HR Representative #1

Dawn Aneada

• HR Representative #2

Nimo Gandhi

• Представитель управления зданием

Лео Гудман

• Дэйв, историк

Марк Энтони Эштон

• Фредерик Дуглас

Xiomi Frans-Cuber

• Jennifer Davenport

Gabriela Deyanira Holguin

• Teacher

Ryan Nieves

• Boy on Bus

Olivia Jeanette Carr

• Kittens Are Your Friend Volunteer

Деннис Хунда

• Сотрудник Peter the Waffle Cart

Эли Браунинг

• Служба корпоративной безопасности

Алекс Седено

• Wall Street Office Worker #1

Brittaney Wellington

• Wall Street Office Worker #2

Arsonval Faria

• Wall Street Office Worker #3

• • Paul Check
• • Пол Чек
• Весь актерский состав и съемочная группа
• Производство, кассовые сборы и многое другое на IMDbPro

Еще нравится это

Nightwing: Escalation

All Hallows ‘Eve 2

Terrifier

All Hallows’ Eve

Terrifier

Сюжетная линия

.