1067,3
рейтинг
20 августа 2011 в 20:16

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

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

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

Скруглённые углы легче воспринимаются мозгом
Некоторые эксперты считают, что фигура со скруглёнными углами легче для восприятия, чем фигура с острыми углами, потому что требует меньше когнитивных усилий для визуальной обработки. Зрение быстрее всего справляется с окружностью. Обработка углов вовлекает больше нейронов головного мозга [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 Movement
Анатолий Ализар @alizar
карма
683,6
рейтинг 1067,3
Редактор
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое

Комментарии (114)

  • +127
    В рисунке «ABC» хочется искать смысл. Кажется, что «B» предпочтительней. Простите за шизофрению.
    • +48
      Таки да, я тоже это подметил. Да и к тому же мне кажется что та диаграмма где линии с прямыми углами — более приятная для восприятия. Возможно тут сказывается техническое образование и привычка рисовать определенным образом блок-схемы к алгоритмам по программированию.
      • +1
        опередили.
      • +9
        Строгость приятна там, где она нужна, и блок-схемы — тому пример. Сомневаюсь, что чертежи в NASA рисуют с закругленными углами лишь потому, что так «приятнее смотреть».
        • +1
          Пардон, поспешил, не понял, что написал. Правильно было сказать так: "… в NASA рисовали бы с ...".
      • +4
        Я думаю автор забыл нарисовать скругление вправо. И удалить черту между получившимися скруглениями, ибо она будет наводить технический разум на некое независимое от «А» взаимодействие «В» и «С». Примерно как на рисунке habrahabr.ru/blogs/design/126726/#comment_4177860.
        Но, как верно подмечено ниже: радиус скругления имеет значение. Чем больше радиус — тем больше я думаю о сиськах!
        Похоже это просто такой «тренд», видимо в связи с херовой усвояемостью черчения современными школьниками (черчение вообще преподают до сих пор?).
    • +50
      Мне этот пример того, что закруглённость лучше, тоже не очень понравился, второй вариант выглядит лучше. Вообще, я думаю, имелось ввиду что-то вроде этого:

      image

      Первый вариант всё равно кажется более привлекательным, но и второй имеет свои преимущества.
      • +3
        мне кажется, что ваш (правый) вариант лучше еще и из-за «одинаковости» отношения верхней линии к B и С. У автора кажется, что линия идет от A к B, а от A к С — второстепенная и непонятно как связанная линия
      • +4
        Думаю нужно так:
        • 0
          Можно и так. Вариантов радиуса и толщины линий очень много, это — один из них.
      • +1
        Второй вариант вызовет судороги, рвоту и много-много мата у тех, кто хотя бы раз рисовал блок-схемы и у кого было черчение.
        Про сопромат я вообще умолчу, дабы не травмировать людей.
      • +5
        Тогда уж во втором варианте совсем надо от прямых углов избавляться:
        • 0
          Здесь кажется, что из B и C следует A (линии похожи на фигурную скобку), а на самом деле наоборот.
    • 0
      ИМХО, это потому что «В» левее «С», а у нас пишут/читают слыве на право, тоесть подсознательно — то, что левее — первое, а первое — лучше чем последнее
      • +6
        там скругление верхней линии направлено в сторону B, а не C
    • 0
      Согласен, а еще направление скругления (справа налево) весьма непривычно и тоже вызывает некий дискомфорт.
  • +42
    Ох уж эти женские изгибы в дизайне
    • +7
      ох уж эти женские изгибы
  • +4
    Пример с диаграммой, как по мне, неудачный. Мне кажется, наоборот, именно в случае с диаграммой прямые углы связующих стрелок предпочтительнее.
    • +2
      Скорее всего это связано с тем, что диаграммы обычно ассоциируются с бизнесом либо наукой, то есть с точностью и строгостью, потому мягкие скругленные углы вызывают диссонанс.
      • +2
        Это связано с тем, что нужно думать, а не прикидывать. Акцентировать внимание.
        Так же с графиками. Если линии плавные — я сразу считаю, что где-то меня обманывают.
  • +6
    Я неправильный. Мне лучше смотреть на прямые углы. Если есть возможность сделать интерфейс какой-либо софтины (начиная с темы оформления виндовс) прямоугольным, я делаю его таковым. Особенно меня раздражают скругленности строки адреса Фаерфокса.

    Вообще отрисовка скругленностей в общем случае занимает не меньше ресурсов (а чаще все же больше), чем рисование прямого угла. Я всегда выбираю более экономичный вариант.
    • +1
      Кулер охлаждения процессора тоже руками крутите? Наверняка так экономичнее.
      • +3
        Последний абзац про ресурсы конечно абсурден (все же это очень ничтожные затраты на общем фоне, а иногда их вообще нет — например в случае растра), но мне тоже не нравится куча скруглений везде и всюду.
        • +2
          Разумеется, меру знать надо.
          • 0
            Примеры бывают разными. Например, дизайн UI Андроида 2.3 мне тоже сильно нравится (прямоугольные кнопки, поля ввода и пр, сплошные заливки), чем 2.2, где были скруглённые углы, градиенты и пр. К тому же было ощущение пластиковости (цвет, градиенты).
      • 0
        Я вручную, не знаю насчет экономичнее, но однозначно удобнее, когда чувствуешь что-то материальное.
  • +7
    Выходит, к примеру, в Metro UI нужно сделать плитки не квадратными, а скруглёнными и восприятие интерфейса будет более простым?
    • +10
      Это было бы просто ужасно, мне кажется.
      • 0
        Полностью согласен, поэтому и спросил мнение других :)
  • +15
    Немаловажным лично для меня является радиус скругления. С моей точки зрения (то есть для меня) радиус от 2 до 5 px выглядит действительно более привлекательно острых углов, но больший радиус бесит еще больше, чем острые углы.
    • +7
      Да, согласен, и этому есть объяснение.

      Автор (с большой буквы А!) забыл отметить еще одну подсознательную причину, почему мы любим немного скругленные углы. Дело в том, что в реальной жизни мы абсолютно острых углов и не видим! Разве что на ножах и пило-резательных инструментах.

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

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

      Те инструменты, которые имеют настоящее заострение таят угрозу. Это ежедневная привычка.

      Так что я соглашусь с предыдущим оратором − легкое скругление смотрится практически всегда хорошо. А большое скругление воспринимается неестественно.

      С другой стороны: компьютерно-дисплейная культура тоже существу уже довольно давно, одним только персоналкам уже 30 лет. И прямые углы без скругления − часть ее. Так что эстетика острых углов и скруглений − это всегда допустимый художественный прием.
  • +4
    Может так?


    Вряд ли это связанно с мозгом и зрением.
    Скорее это просто личные пристрастия, как вкусовые ощущения. Например, одним нравится рыба, а другим нет (мне, кстати нет).
    Мне вот нравятся прямые и острые углы. Следовательно мой мозг отличен от множества других?
    • +3
      И да, есть еще Metro UI. Прямые углы там очень даже кстати.
    • +13
      Говно.
      • 0
        Вот именно
        • –1
          Согласен.
  • +3
    Компьютеру проще распознавать прямые углы!
  • 0
    Я считаю, что еще одна причина восприятия закругленных краев идет прямо из нашего организма. В нашем теле не так много острых углов(ногти, зубы, волосы(?)) и возможно это тоже играет некую роль в восприятии.
  • +21
    Фрейд ни чего про закругленные углы не писал? )
    • +6
      Ёпта! Теперь я понял, почему мне нравятся более круглые сиськи!
      • +25
        Более, чем квадратные?
  • +3
    Этот пост натолкнул меня на мысли о всенародной любви к фишай-объективам. ;)
  • +7
    Не забыть бы про скругления, когда буду рисовать
    плакаты на защиту диссера
    .

    Вдруг такая мелочь добавит белых шаров.
    • +3
      Наоборот. Всякие визуальные рюшечки вызывают, обычно, подозрение: а не пытаются ли нам втюхать бред под красивой обёрткой?
      • 0
        Тоже вариант.
        Это уже логики высших порядков :)
        Но от этого только виртуозное владение предметом может защитить.
        • 0
          Да не. Просто реально очень сложно воспринимать содержимое, если очень много визуального оформления. Используйте самый простой стиль в Beamer — он лучше всего воспринимается.
  • +6
    Широко раскрыта тема, но не нравится, что автор текста навязывает использование закругленных углов везде.
    Вот где точно должны быть закругленные углы, так это у мебели в спальной. Вечно ногой об острый угол в темноте бьюсь.
  • 0
    да, я согласен с восприятием, ведь дома в старых районах города отличаются от спальних районов. В спальних районах дома одинаковые и примоугольные. А в старых присутствуют старые архитектуры и тп. с неординарными дизайнами.
    Где вам больше нравится гулять? В спальнем районе города или в старой части?
    • 0
      Это не от углов зависит. Одинаковые дома всем надоели, в них нет никакого дизайна, голый кирпич. Когда прямых углов в интерфейсе нет совсем, как то неприятно. Все должно быть в меру. А то мы так совсем перестанем мозг напрягать.
      • 0
        Люди перестанут напрягать мозг из-за отсутствия прямых углов в дизайне интерфейсов?
        Адово доставило.
        • 0
          Надеюсь, не восприняли это всерьез
  • +105
    image
    Какой объект вы доверите своему ребёнку?
    • +30

      Тогда уж этот
      • +9
        image Главное чтоб не острые были =)
        • 0
          Зачем ребенку игрушки отца? Логотип win seven круглый. Не буду нагружать бесполезными логотипами
    • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Зачет :)
    • 0
      Чёрт, опередили. Только я хотел еще и вилку на карандаш заменить.
  • +5
    Когда перешел с Android 2.2 на 2.3, сразу глаз начал радоваться отсутствию скруглений. Наверное, это связано с тем, что они уже в печенках сидят.
    • НЛО прилетело и опубликовало эту надпись здесь
  • +15

    Какой объект вы доверите своему ребёнку? )
    • 0
      И что это Bestie забыл в месте где GNU и Столлман (простите за тавтологию) висит на столе?
      • +5
        Вообще-то GNU и Столлман там на стене висят, а не на столе.
    • +2
      В комнате не должно быть окон.
      • +1
        Не будет окон, будет очень темно, Саша :)
    • +1
      Напомните: вот этот, в ку-клукс-клановском капюшоне и с чайником, что символизирует?
  • +6
    Странно, но, например, рамку окна (компьютерного) мне приятнее видеть прямоугольной.

    P.S. Да, я поклонник «классической» темы Windows.
  • +1
    От большого количества скруглений тоже иногда подмучивает.
    • +1
      Верно подмечено, на сайтах часто вижу скругленный блок, разделенный на еще 2 блока (разумеется скругленных). Выглядит жутко. Все хорошо, но в меру.
  • +1
    Не знаю как всех, но меня закруглённые углы в веб-дизайне уже бесят.

    А девайсы имеют такие углы, чтоб в руке держать приятно было. Вон, у макбука не скруглённый край — так я порезался об этот углище алюминиевый!
    • +3
      Подайте в суд на эппл и выиграйте млн долларов
      • +1
        Меня порезала однокурсница. В таком случае сомневаюсь, что на производителя холодного оружия можно подавать в суд.
  • +21
    «Я с детства не любил овал,
    я с детства угол рисовал»
  • +13
    Билл запустил демо и быстро заполнил экран Lisa овалами разной величины, быстрее чем кто-либо мог себе представить. Однако что-то беспокоило Стива Джобса. «Ладно, окружности и овалы это здорово, но как насчет прямоугольников со скругленными углами? Мы можем сделать это тоже?»

    «Нет, это невозможно. Более того, я не думаю, что это вообще нам может когда либо понадобиться». Я думаю, что Билл был слегка растроен, что Стив не был в восторге от его новых алгоритмов и хотел чего-то еще.

    Стив внезапно вошел в раж. «Скругленные прямоугольники окружают нас повсюду. Ты только посмотри вокруг себя.» Действительно, он был прав, кругом было полно таких предметов. Затем он показал на улицу. «Посмотри снаружи, там их еще больше, они со всех сторон». Он потащил Билла на улицу и они сделали круг вокруг здания. Стив показывал на каждый скругленный прямоугольник, который встречался им на пути.

    Наконец Стив и Билл подошли к знаку «No parking», который тоже обладал скругленными углами. «Ладно, я сдаюсь», сказал Билл. «Я посмотрю, что можно сделать». Он пошел домой и продолжил работу.

    Билл вернулся в Texaco Towers на следующий день с большой улыбкой на лице. Он показал демку, которая рисовала прямоугольники с замечательно скругленными углами и делала это потрясающе быстро. Он добавил этот код в LisaGraf, назвав этот примитив «RoundRects». Через несколько месяцев скругленные прямоугольники проникли во все элементы пользовательского интерфейса и стали незаменимы.
    история из создания Macintosh
    • +6
      Отличный отрывок! А то «в наши дни», «в наши дни» :)

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

      А этой доске так вообще уже более 80 лет:

      • 0
        Обратите внимание, как время скругляет углы «экрана» пылью )
        Вообще удивлён, что у ай-девайсов экраны без скруглений, было бы однородно.
        • 0
          Вы лучше обратите внимание на запатентованую Эпплом форму девайса — ну ведь одни-в-один! %)
    • +5
  • +6
    Разговоры о закруглениях всегда вызывают у меня ассоциации с «Квадратурой круга» О. Генри.
    • +3
      Очень любопытный рассказ, заставил задуматься. С удовольствием бы отплюсовал…
    • +36
      А словосочетание «квадратура круга» вызывает у меня ассоциации с этой картинкой:

      Trollface: pi*D = 4*D
  • 0
    Metro UI остался не у дел?
  • +2
    может разработчики IE прочтут этот пост, чтобы можно было использовать border-radius в IE7
    • 0
      На это не может быть никакой надежды: они не вернутся доработать ни IE7, ни IE8, ни даже IE9.

      Для употребления border-radius в IE7 следует воспользоваться мегакостылём PIE 1.0 beta 4.
    • 0
      Гуглите Nifty Corners. Nifty Corners — rounding corners since IE6.
      C бордюром — Snazzy Borders
  • 0
    Думается, что неправильно обсуждать визуальное впечатление от закруглений в отрыве от содержимого кнопки или блока с этими закруглениями.
    К примеру, если у нас строка браузера с закруглениями (как кто-то выше заметил), это может выглядеть менее красиво (там всего одна строка), чем большой блок с теми же закруглениями, но большим количеством текста (пусть и тем же шрифтом).
    В первом случае неэффективно используется пространство и это может восприниматься как «некрасиво».
    Когда народ выше приводит примеры, ставя единственную букву внутрь блока — это довольно редкий случай (типа кнопок с иконками).
    • 0
      Да ладно. В Хроме тоже адресная строка со скруглёнными краями, но я не ощущаю неудобств от этого.
  • +1
    Дети просто в радости от квартиры с закруглёнными углами.
    • 0
      И с мягкими стенами.
  • +4
    image

    Кто будет первым?
    • +7
      >Кто будет первым?

      Microsoft %)

    • +2
      image
      моторола уже давно, более того она открывается по кругу)
  • 0
    Any questions, dudes?

    • 0
      Да, картинка)

      • 0
        Еще раз)
        • +5
          Обладателям отрицательной кармы на Хабрахабре запрещается употребление элементов HTML.

          В дальнейшем используйте кнопку «предпросмотр» для проверки, и тем избегнете засорения комментариев.
  • 0
    Углы бывают разные, но вот дизайнеры, скругляющие вообще все углы в макете — обычно тупые и ничего кроме этого выдумать не смогли

    Люто, бешено ненавижу. Пока нативно не будет поддерживаться — буду заставлять перерисовывать макеты, ладно там в паре мест, но не везде же
    • –1
      Где вас таких берут, лютых ненавистников?
      • +3
        Всё приходит с опытом :) Если скругленные углы — это единственный «илимент дизайна» — нафиг нужен такой дизайн
        • +3
          Голодные студенты с фотошопом – это не дизайнеры.
  • 0
    браво:) Честно говоря даже не задумывался над этим, очень интресно. Спасибо!
  • +1
    В UML диаграммах просто так скруглять ничего нельзя — может измениться смысл.
  • +1
    Дизайнеры — такие дизайнеры. Как всегда, берёте очень общее утверждение и начинаете его доказывать/опровергать. Я бы стал что-то утверждать только в конкретных случаях.
    Хотя, на хабре такие темы популярны, так как дают хороший повод для дискуссий. Вот видите, я написал этот комментарий :)
    • 0
      +1
  • 0
    Все это притянуто за уши.
    Вывод находится уже в формулировке вопроса.
    И доводы более чем странные и выводы из них тоже.
    Скругленные углы — это просто мода, вот и все.
    Через какое-то время все будут говорить, что прямые углы — это нормально для восприятия.
  • 0
    Мне кстати на двух картинках с кругами и иголками понравился именно «игольчатый» вариант.

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