Скругленные углы: Почему мы скругляем углы?

Содержание

Почему мы скругляем углы? — Дизайн на vc.ru

Перевод статьи Gonçalo Dias

6413
просмотров

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

Нижеприведенные примеры взяты из этой замечательной статьи

Закругленные углы кажутся менее яркими

Мы все можем оценить эстетическую красоту закругленных углов. Но можем ли мы объяснить, откуда именно берется наша к ним любовь? Ответ на этот вопрос кроется буквально в наших глазах.

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

Научное исследование углов, проведенное Неврологическим институтом Барроу, показало, что “воспринимаемая глазом заметность угла линейно изменяется в зависимости от остроты самого угла. Острые углы создавали более сильную иллюзорную заметность, чем мелкие углы”. Другими словами, чем острее угол, тем ярче он выглядит. И чем ярче виден угол, тем труднее на него смотреть.

На какую форму легче смотреть?

Мы привыкли к закругленным углам

С юных лет нас учат, что острые углы — это опасность. Поэтому в физическом мире мы склонны избегать их, и вместо этого ищем округлые, органические, безопасные объекты.

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

С каким предметом вы бы позволили своему ребенку поиграть?

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

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

За какой диаграммой легче следить вашим глазам?

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

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

Проблемы с округлением

Итак, после этого первоначального рассуждения о закругленных углах, в голову сразу приходит мысль: давайте применять закругленные углы ко всему, везде и каждый раз!

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

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

Давайте взглянем на некоторые логотипы:

Как смешанные, так и текстовые логотипы выполнены на основе базовых форм. Взято у Taime Koe

А теперь взгляните на некоторые шрифты:

Примеры трех разных шрифтов с отличительными основными формами и линиями. Взято у Taime Koe

Наглядно видно, как эти логотипы и шрифты в сравнении друг с другом вызывают разные отклики. И все это сводится к психологии формы:

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

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

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

Подытоживая

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

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

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

Оригинал статьи:

Острый край не радует глаз, или почему мы предпочитаем закруглённые углы — Дизайн на vc.ru

{«id»:13916,»url»:»\/distributions\/13916\/click?bit=1&hash=c42c0fd4ba9b82f6c1f003c4a5855cf44992f65b534faecb7fd653f0567d55e0″,»title»:»\u0412\u044b\u0440\u0443\u0447\u043a\u0430 \u00ab\u0426\u0438\u0430\u043d\u0430\u00bb \u0432\u044b\u0440\u043e\u0441\u043b\u0430 \u043d\u0430 40% \u0437\u0430 \u0433\u043e\u0434″,»buttonText»:»»,»imageUuid»:»»,»isPaidAndBannersEnabled»:false}

Перевод заметки с сайта Uxmovement.

10 015
просмотров

Дизайнеры сегодня используют закругленные углы настолько часто, что они уже стали стандартом нежели тенденцией дизайна. Однако закругленные углы встречаются не только в пользовательских интерфейсах, но и в промышленном дизайне. Так что же такого в закругленных углах и что делает их такими популярными? На самом деле все очень просто — они привлекательны. «И все ?» — спросите вы. Нет. Все куда глубже.

Закругленный угол не напрягает

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

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

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

Научные исследования, проведенные Неврологическим институтом Барроу, показали, что «заментная выраженность угла изменяется линейно и зависит от угла поворота. Тем самым острые углы являются более выраженными и заметными». Другими словами, чем острее угол, тем «ярче» он выглядит. А как мы знаем чем ярче объект, тем труднее на него смотреть. Сравните сами.

Острый угол наш враг с детства

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

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

Что из этого вы оставите наедине со своим ребенком ?

Закругленный угол выделяет контент

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

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

Подытожив хочу сказать что если присмотреться к предметам которые мы используем каждый день: телефон, компьютер, телевизор и т. д. Можно заметить что мы уже привыкли к закругленным углам. Ведь все в нашем мире циклично, а круг самый ярый пример цикличности(СПГС). Ладно ладно. Эта статья была написана с целью помочь в споре с клиентом. Ведь теперь при разговоре почему вы хотите использовать закругленные углы на кнопке, у вас будет что ответить, а не «ну так красивее смотрится».

Закругленные углы InDesign | Узнайте, как создавать и использовать закругленные углы?

Закругленные углы InDesign — это функция формы или изображения, с помощью которой мы можем сделать их углы круглыми, что означает, что мы можем создать дугу в углу фигуры. В InDesign есть функция, с помощью которой мы можем скруглять углы для разных целей. Не только для формы, но мы также можем сделать это с размещенным изображением и некоторыми другими вещами. Есть два способа, с помощью которых мы можем сделать закругленные углы. Первый — с использованием параметра «Угол», а второй — непосредственно с помощью опорных точек фигуры или изображения. Итак, позвольте мне рассказать вам, как вы можете это сделать?

Как создать и использовать скругленные углы в InDesign?

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

Сначала я создам новый документ, и для этого я нажму кнопку «Создать новый» на экране приветствия этой программы.

И я оставлю настройки диалогового окна «Новый документ» по умолчанию.

Теперь давайте создадим прямоугольную форму, угол которой мы преобразуем в круглую форму. Для этой цели я возьму инструмент «Прямоугольник» с панели инструментов, или вы можете нажать M в качестве его сочетания клавиш.

Я создам вот такой прямоугольник.

В этом прямоугольнике нет заливки, есть только обводка.

Я увеличу ширину обводки на 2 точки, чтобы мы могли ее четко видеть.

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

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

Здесь на панели «Свойства» у нас есть опция «Угол», поэтому нажмите на нее. После того, как вы нажмете на нее, откроется диалоговое окно «Параметры угла».

Это диалоговое окно также можно открыть из меню «Объект» строки меню. Итак, перейдите в меню «Объект» и нажмите на него. В прокручиваемом списке у нас есть параметры угла. Нажмите на него, чтобы включить его.

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

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

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

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

Есть еще один вариант скругления углов, но он скругляет углы в обратном направлении. На этот раз я выберу его из списка угловых стилей.

И вы можете видеть, что углы будут скруглены в обратном направлении. Здесь также можно изменить значение дуги.

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

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

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

На краю этого прямоугольника есть точка привязки желтого квадрата.

Нажмите на эту опорную точку, и она превратится в четыре опорные точки, которые будут на всех углах.

Удерживайте эту желтую опорную точку инструментом выделения и перетащите внутрь.

И он будет огибать углы столько, сколько вы перетащите точку привязки внутрь.

Если вы хотите скруглить только один угол, удерживайте кнопку Shift на клавиатуре и перетащите эту желтую опорную точку внутрь.

И он превратит выбранный угол в круглый угол.

Если вы удерживаете кнопку Alt на клавиатуре, а затем щелкаете по этой желтой опорной точке, то стиль угла изменится, и в этой последовательности вы можете изменить угол скругления.

Теперь позвольте мне рассказать вам, как этот круглый угол будет работать с изображениями. Для этой цели я размещу изображение в этом программном обеспечении, поэтому я нажму на пункт «Поместить изображение» в меню «Файл» или вы можете нажать Ctrl + D в качестве его сочетания клавиш.

Я выберу это изображение.

И поместите его в область документа вот так.

Вы видите ту же желтую опорную точку, что и в форме. Так что нажмите на нее.

И я потащу его внутрь вот так.

И превращается в круглые углы.

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

Это были некоторые важные аспекты функции круглых углов этого программного обеспечения.

Заключение – закругленные углы InDesign

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

Как скруглить углы изображения

NYBÖRJARE · 8 МИН

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

Важная информация

Получить файлы

Примеры файлов для практики (ZIP, 162 КБ)

Знакомство с файлом

Откройте файл edit-rounded-rectangles.psd в Photoshop. См. панель «Слои» в правой части рабочего пространства. Если вы его не видите, перейдите в «Окно» > «Слои». На панели «Слои» щелкните значок «Фон» слой.

Нарисуйте прямоугольник

Выберите инструмент Rectangle Tool на панели инструментов в левой части рабочего пространства. Если вы не видите панель инструментов, выберите Windows > Инструменты. Выберите белый цвет для цветовой заливки в параметрах в верхней части рабочего пространства. Задает заливку прямоугольника белым цветом. Выберите «Нет цвета» для обводки.

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

Добавьте закругленные углы с панели свойств

После того, как вы закончите рисовать прямоугольник, обратите внимание, что панель свойств открывается автоматически. Если вы его не видите, перейдите в «Окно» > «Свойства». На панели «Свойства» измените угловой радиус только что нарисованного живого прямоугольника. Введите «65 пикселей» в качестве радиуса угла. Панель «Свойства» применяет настройку радиуса угла ко всем углам прямоугольника, поскольку на панели есть связанные углы (значок цепочки), выбранные по умолчанию.

Применение обводки

На панели «Свойства» вы можете изменить обводку и заливку фигуры. Щелкните значок цвета обводки. На появившейся панели образцов цвета выберите голубой цвет, чтобы добавить цветную обводку к прямоугольнику. Измените ширину обводки на «15 pt», чтобы сделать цветную обводку толще.

Настройка существующего прямоугольника

Чтобы отредактировать уже нарисованный прямоугольник, его необходимо сначала выделить. Нажмите «A» на клавиатуре, чтобы выбрать Инструмент выбора пути или щелкните, чтобы выбрать этот инструмент на панели инструментов. Щелкните слой «Прямоугольник — Местоположение», чтобы активировать этот слой для редактирования.

Настройка существующего прямоугольника (продолжение)

С помощью инструмента «Выделение контура» щелкните голубой квадрат «Местоположение». На панели «Свойства» измените радиус угла на «17 пикселей» для всех углов этой фигуры.

Эксперимент

Выберите другие прямоугольники на изображении, чтобы поэкспериментировать с настройкой свойств Live Shape. Попробуйте смешивать и сопоставлять различные значения радиуса угла, щелкнув значок ссылки на панели «Свойства».

Скругленные углы: Почему мы скругляем углы? — Дизайн на vc.ru