Содержание

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

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

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

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

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

{«id»:63724,»type»:»num»,»link»:»https:\/\/vc.ru\/design\/63724-ostryy-kray-ne-raduet-glaz-ili-pochemu-my-predpochitaem-zakruglennye-ugly»,»gtm»:»»,»prevCount»:null,»count»:27}

{«id»:63724,»type»:1,»typeStr»:»content»,»showTitle»:false,»initialState»:{«isActive»:false},»gtm»:»»}

{«id»:63724,»gtm»:null}

8624 просмотров

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

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

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

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

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

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

{ «osnovaUnitId»: null, «url»: «https://booster.osnova.io/a/relevant?site=vc&v=2», «place»: «between_entry_blocks», «site»: «vc», «settings»: {«modes»:{«externalLink»:{«buttonLabels»:[«\u0423\u0437\u043d\u0430\u0442\u044c»,»\u0427\u0438\u0442\u0430\u0442\u044c»,»\u041d\u0430\u0447\u0430\u0442\u044c»,»\u0417\u0430\u043a\u0430\u0437\u0430\u0442\u044c»,»\u041a\u0443\u043f\u0438\u0442\u044c»,»\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c»,»\u0421\u043a\u0430\u0447\u0430\u0442\u044c»,»\u041f\u0435\u0440\u0435\u0439\u0442\u0438″]}},»deviceList»:{«desktop»:»\u0414\u0435\u0441\u043a\u0442\u043e\u043f»,»smartphone»:»\u0421\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u044b»,»tablet»:»\u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b»}} }

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

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

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

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

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

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

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

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

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

Маленькая подсказка: Делайте правильно скругленные углы

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

Кто тут педантичен?

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

Точно, вторая

Сделайте по-простому: если у вас есть два скругленных угла, которые находятся параллельно друг другу, внешний угол должен иметь больший радиус, который обтекает окружность внутреннего угла.

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

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

Сгибаем трубы

Думайте об эффекте, который вы создаете, как о сгибании труб:

Рабочий гнет трубы

Посчитайте

Интерфейсы, созданные на html/css, могут часто усложнить задачу по закруглению углов. Вспомните о формах или кнопках.

Здесь невозможно быть излишне точным; разница между обоими border radius должна равняться промежутку между ними. Просто!

И оно тоже может быть адаптивным, например:

<div>
  <div>

	</div><!--/ inner-->
</div><!--/ outer-->
.inner {
    width: 5em;
    height: 5em;
    background: black;
 
    border-radius: 1em;
}
 
.outer {
	display: inline-block;
    background: lightblue;
 
    padding: 3em;
    border-radius: 4em; /*offset + radius of .inner*/
}

Отлично закругленные углы (смотрите демо).

Исключения

Как и везде в дизайне, четких правил не существует и здесь. Вы всегда найдете исключения. Это дело ощущений.

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

Выпадающее меню – UI/UX с CSS3 от Джонатана Морейра

Те, кто сделали это правильно

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

Snooker Table icon by JJ-MaxerPostale Icon App by Aditya Nugraha PutraIcon by chnvanFound UI by Martin KarasekVeggie Meals app icon by Max RudbergUpload button by Fares FarhanBPM Lock Button (ON) by Paul Flavius NechitaSign In Button by Brad Haynes

Закругленные углы, Проводник, Центр уведомлений » MSReview


Давно ходят слухи об обновлении Windows Sun Valley, а недавние тизеры предполагали, что очевидный редизайн операционной системы для настольных ПК будет запущен с Windows 11, после преемника Microsoft Windows 10.

Благодаря тому, что произошла настоящая утечкой сборки Windows 11, мы получили ранний доступ к будущему дизайну. В дополнение к новому меню «Пуск» и центрированной панели задач Windows 11 также содержит ряд других улучшений дизайна, таких как закругленные углы и тени.


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

Проводник


Согласно просочившейся сборке, Windows 11 будет поставляться с тем же Проводником в составе обновленного рабочего стола.

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


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

К сожалению, вкладка свойств Проводника не поддерживает темный режим, по крайней мере, в данной сборке.

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

Диспетчер задач


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

Поиск Windows


Интерфейс Windows Search также подвергается серьезным изменениям.
Например, поиск Windows теперь будет плавать над Панелью задач, а также иметь закругленные углы, чтобы соответствовать внешнему виду обновленного меню «Пуск».

Контекстное меню


Мы, конечно, видели, как закругленные углы появляются в просочившихся сборках, когда мы кликаем правой кнопкой мыши в любом месте.
Фактически, Microsoft обновила как классическое, так и современное контекстное меню, добавив закругленные углы.
Исторически Microsoft использовала закругленные углы в Windows 7 и других операционных системах, но с приходом Windows 8 «Metro UI» Microsoft перешла на более прямолинейный вид и отказалась от закругленных углов для получения острых краев.

В Windows 11 Microsoft возвращается к своему первоначальному виду и позволяет повсюду использовать закругленные углы.

Центр уведомлений


Как мы видели в предварительных сборках, в Центре уведомлений запланированы некоторые незначительные изменения.

Просочившаяся сборка Windows 11 показывает несколько ключевых изменений пользовательского интерфейса в нескольких частях Центра действий Windows. Центр уведомлений Windows был обновлен элементами как WinUI, так и Windows 10X.


На самом деле он не отличается от существующего Центра уведомлений, но вполне вероятно, что мы увидим некоторые улучшения в более поздних сборках Windows 11.

Ожидается, что, как и меню «Пуск», поиск Windows и Центр уведомлений получат плавающий интерфейс, а также возможность проводить пальцем вверх и вниз, чтобы открывать быстрые настройки на планшете или устройствах 2-в-1.

В настоящее время Microsoft планирует анонсировать Windows 11 24 июня, а бесплатное обновление будет выпущено для потребителей уже осенью.

Как сделать скругленные углы. Маленькая хитрость

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

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

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

Этот способ мне рассказали когда-то давно на работе.

Сказать, что я была удивлена – это значит, не сказать ничего. От его простоты я была в легком шоке 🙂

Легко это или нет, вы можете сами оценить и, если кому-то понравится, то брать себе на вооружение 😉

Как сделать скругленные углы:

1. Есть у нас перед (допустим мой марман – это нагрудный карман на рубашке) и сам карман с таким круглым углом.

2. А теперь внимание!
Ставим крупный стежок и прокладываем строчку на 1 мм в сторону припуска от линии кармана.

3. Теперь слегка стягиваем эту строчку так, чтобы сформировался угол.
Заметываем припуск кармана.

Так это выглядит с изнаночной стороны:

4. А дальше все просто: накладываем карман на место пришива и накалываем его булавочками.

5. Прокладываем строчку на 1 мм от края (или две строчки параллельно – по модели), вытаскиваем наметку и приутюживаем карман.

Получается очень красивый и ровный карман.

ВАЖНО! Чем мягче и пластичнее ткань, тем будет проще скруглить углы. Если же ткань совершенно жесткая, то будет чуть сложнее, но все равно получится.
Этот образец я специально сделала не из пластичной ткани, а жесткой (капроновой) и тонкой ткани – все получилось идеально!

Желаю и вам всем таких же простых в исполнении и красивых внешне углов 🙂
Если у кого-то есть какие-то особые хитрости, то можете дополнять в комментариях – я рада общению и опыту!

Почему в некоторых домах Германии делают закруглённые углы? | Мой Домик

Добрый день всем читателям данной статьи! Недавно я был в германии, и приходил в гости к некоторым людям, с которыми подружился в этой прекрасной стране. И в один день я был в гостях у своего немецкого друга по имени Клеменс. Но когда я зашел в его дом я был очень сильно удивлён… Все углы в его доме были закруглённые. За разговором я спросил у него, почему в его доме нет углов, на что он мне рассказал очень интересную историю.


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


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

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

p.s.: Подписывайтесь на канал Мой домик — все самое важное, полезное, интересное еще впереди! Здесь каждый может поделиться опытом в строительстве, ремонте и обустройстве жилья, загородного участка.

Закругленные углы таблицы Только CSS

Во-первых, вам понадобится больше, чем просто, -moz-border-radiusесли вы хотите поддерживать все браузеры. Вы должны указать все варианты, включая простой border-radius, следующим образом:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Во-вторых, чтобы напрямую ответить на ваш вопрос, на border-radiusсамом деле не отображается рамка; он просто устанавливает, как будут выглядеть углы границы, если она есть.

Чтобы включить на границе, и , таким образом , получить ваши закругленные углы, вам также нужен borderатрибут ваших tdи thэлементов.

td, th {
   border:solid black 1px;
}

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

Стоит отметить, что некоторые старые браузеры не любят помещать border-radiusтаблицы / ячейки таблиц. Возможно, стоит поместить <div>внутрь каждой ячейки и стилизовать ее. Однако это не должно влиять на текущие версии любых браузеров (кроме IE, который вообще не поддерживает закругленные углы — см. Ниже).

Наконец, не то чтобы IE вообще не поддерживает border-radius(бета-версия IE9 поддерживает, но большинство пользователей IE будут использовать IE8 или меньше). Если вы хотите взломать IE для поддержки border-radius, посмотрите http://css3pie.com/

[РЕДАКТИРОВАТЬ]

Хорошо, это меня беспокоило, поэтому я провел небольшое тестирование.

Вот пример JSFiddle, с которым я играл

Похоже, что самое важное, чего вам не хватало, было border-collapse:separate;в элементе таблицы. Это мешает ячейкам связывать свои границы вместе, что позволяет им подбирать радиус границы.

Надеюсь, это поможет.

Закругленные углы в Photoshop Photoshop Tutorial

www.psd-чувак.com

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

Твитнуть

Скругленные углы и сглаженные края (экшены Photoshop)

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

Как создать закругленные углы в Photoshop

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

Формы со скругленными углами

Вы можете создать прямоугольник с закругленными углами в Photoshop с помощью инструмента Rounded Rectangle Tool .Еще одна форма с закругленными краями — это круг или эллипс. Но в Photoshop нет фильтра или другого инструмента для создания круглых углов . Illustrator, например, позволяет применять эффект неразрушающих закругленных углов практически к любому объекту. В Эффекты меню, просто выберите Стилизация > Скругленные углы .

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

Начнем с простого форма вектора звезды с острыми углами (отлично подходит и для прямых углов).

Теперь вам нужно растрировать фигуру; щелкните правой кнопкой мыши и выберите Rasterize Layer . Вам придется сделать то же самое, если вы используете Text Layers .

Перейдите в меню Фильтр > Размытие и выберите Размытие по Гауссу .Радиус размытия по Гауссу зависит от размера вашего изображения и результата, который вы хотите получить. я выберу 5 пикселей.

Нажмите CTRL и щелкните миниатюру слоя, чтобы создать Выбор фотошопа. Перейдите в меню Выберите и выберите Refine Edge со следующими настройками. Вы можете поэкспериментировать с параметрами Smooth и Feather , чтобы увидеть различные эффекты. Оставьте Contrast на 100.

Уточнить края в Photoshop CC

Чтобы вернуть Refine Edge в Photoshop CC , выполните следующие действия.

При активном выделении или маске нажмите и удерживайте Shift и перейдите к Select > Select and Mask . Это откроет окно Refine Edge вместо рабочего пространства Select and Mask!

Выберите цвет формы, в нашем случае желтый и Залейте выделение этим цветом. Нажмите SHIFT+F5 , чтобы заполнить цветом.

Последний шаг — добавить это выделение в качестве маски слоя, вот и все. У вас есть сейчас форма звезды с закругленными углами.

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

Изображения со скругленными углами

Добавьте прямоугольник со скругленными углами с помощью инструмента Rectangle Tool . Вы можете установить радиус. Я буду использовать радиус 100 пикселей, чтобы сделать прямоугольник с закругленными углами. Вы не можете изменить радиус прямоугольника после его рисования.

Затем поместите изображение над слоем с прямоугольником со скругленными углами.Щелкните правой кнопкой мыши и выберите Create Clipping Mask . Теперь у вас есть изображение с закругленными углами.

Экшен Photoshop

со скругленными углами | Скачать БЕСПЛАТНО

Используйте этот бесплатный экшен Photoshop «Скругленные углы», если вы хотите сделать закругленные изображения одним щелчком мыши!

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

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

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

Почему мы скругляем углы? →

The UX Collective — это независимое издание о дизайне без рекламы, которое возвышает неслыханные дизайнерские голоса и каждую неделю охватывает более 500 000 дизайнеров.Кураторы Фабрицио Тейшейра и Кайо Брага.

Выбор редакции

Навыки проектирования
Как разработать сетки навыков для вашей команды дизайнеров продуктов.

Обзор вспомогательных технологий →
Доступные технологии и дерево специальных возможностей.

Децентрализованные финансы →
10 вещей, которым я научился при разработке DeFi.

Математик и любитель игры в слова Али Ллойд делится своими мыслями о популярной интернет-игре Wordle.

Заставьте меня задуматься

Разница между правильностью и полезностью в дизайн-системе →
«В какой-то момент становится сложно решить, что должно быть в библиотеке Figma, а что должно быть в чем-то, что живет в сборнике рассказов. Размещаем ли мы все наши руководства по использованию этих компонентов в Figma? Или как насчет того, что можно и чего нельзя? А как насчет реквизитов и названий компонентов — точно ли мы следуем тому, что есть в Storybook, даже если это плохо или что-то, что нас смущает?»

Когда грядет революция в архитектуре? →
«Что-то ужасно не так с архитектурой.Почти все, что строится, скучно, безрадостно и/или уродливо, хотя для этого нет причин. Архитектурная профессия вознаграждает претенциозную и пресную работу. Города, которые мы строим, не чудесны».

Share The UX Collective Newsletter

Маленькие жемчужины на этой неделе

3 исторических примера, в которых dataviz спас человечество

Инструменты и ресурсы

Иконки.js →
Обозреватель значков с мгновенным поиском.

Заявление о видении UX →
Создание заявлений о видении для повышения согласованности команды.

Включение в первую очередь →
Как сделать ваш продукт доступным и инклюзивным.

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

Добавление закругленных углов к контейнерам в Outlook

Эта статья является последней частью серии Реализация электронной почты в 2021 году .Если вы пропустили введение, прочитайте Основы и как тестировать сгенерированные электронные письма.

Я обсуждал использование объектов VML для усиления поддержки закругленных углов в Outlook в своих предыдущих статьях о закругленных кнопках и закругленных встроенных тегах.

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

Что тут сложного?

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

Это не работает в случае обычных контейнеров, включающих:

  • Богатый контент, такой как заголовки, ссылки, таблицы
  • Вложенные объекты VML, например, кнопки, теги рабочего процесса — как я уже говорил в статье о закругленных кнопках, вложенные объекты VML на самом деле не поддерживаются Outlook

Кроме того, заставить объект VML, содержащий такое содержимое, вести себя аналогично элементам DIV , очень сложно.

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

  • v:textbox с style="mso-fit-shape-to-text:true" , который увеличивает высоту объекта до размера, необходимого для его содержимого.
  • v:rect / v:roundrect с style="mso-width-percent:1000;" , который не работал у меня в Outlook 2016, как предполагалось в статьях об этом. Либо что-то изменилось, либо я упустил какую-то часть головоломки.

Однако, что бы я ни пытался, мне не удалось успешно применить все эти функции одновременно. Что-то постоянно не получалось.

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

Что не получилось

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

  
    
        

1

2

3

4

5

6

[КОД КНОПКИ]

A

B

C

D

E

F

В этом примере используется:

  • v:roundrect контейнер с фиксированной шириной 568px , так как я не мог заставить mso-width-percent правильно работать, чтобы расширить объект до 100% ширины.
  • Ранее работающий код кнопки из статьи про закругленные кнопки.
  • v:textbox контейнер содержимого с mso-fit-shape-to-text:true для обеспечения автоматической высоты контейнера.
  • Содержимого достаточно для создания большей высоты, чем ширина контейнера.
  • arcsize="3%" , что примерно соответствует 16px/568px , так как желаемый радиус границы равен 16px .

Выдает следующий результат:

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

Более того, если мы посмотрим на определение элемента roundrect, свойство arcsize говорит следующее: «Определяет закругленные углы в процентах от половины меньшего размера прямоугольника ».

Это означает, что если содержимого недостаточно, а контейнер короче заданной ширины, наши закругленные углы уменьшаются.

Смешанное решение, которое работает

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

Позвольте мне обобщить некоторые факты, на которых мы будем основываться:

  • VML является мощным средством, но его нельзя использовать в качестве оболочки, поскольку нам также необходимо внутреннее содержимое, чтобы иногда использовать объекты VML.
  • TABLE и TD прекрасно работают в качестве обычных контейнеров.

Помните макет таблицы 3×3 с фиксированными размерами ячеек по периметру из предыдущей статьи? Настало время использовать его и расширить для наших нужд.

Наш контейнер body имеет отступ 24px и радиус границы 16px .

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

План следующий:

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

Поскольку объекты VML поддерживаются только Outlook, для других почтовых клиентов также будут стандартные радиусы границ и границы в угловых ячейках.

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

Изготовление углов

Прежде чем мы перейдем к полному контейнеру с 4 углами, давайте обсудим, как сделать дугу VML для определенного угла.

Используете элемент дуги для дуги?

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

  
  

Это дает нам следующий результат:

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

Элемент формы, чтобы спасти положение!

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

Я придумал следующий код верхнего левого угла с фоном:

  
    
  

Подобно SVG, фигура VML имеет поле просмотра, которое определяет локальную систему координат с атрибутами coororigin и coordsize .Я использую окно просмотра 2×2, так как мне нужно разместить несколько точек точно на половине стороны ограничивающего квадрата.

Мой путь всегда следующий:

  1. Начиная с конца дуги против часовой стрелки.
  2. Кривая Безье до конца дуги по часовой стрелке со средними точками в середине соответствующих сторон. Это делает четверть круга (фактическая дуга).
  3. Линия к центру круга.
  4. И, наконец, замыкание фигуры, образующей линию до ее начала.

Это его вывод, который делает именно то, что нам нужно:

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

  
    
  

 Со следующим выводом:

Уголок для стандартного почтового клиента

Я уже говорил об углах VML, но они применимы только к Outlook.Для других почтовых клиентов нам нужно придерживаться стандартного подхода с использованием свойств CSS.

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

  <тд>
  

Это дает тот же результат в стандартном почтовом клиенте, что и угол VML в Outlook. Нам нужно будет объединить их, чтобы получить стабильный результат, но я вернусь к этому через несколько минут.

Создание полного контейнера

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

Пограничный контейнер

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

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

Вот полный код контейнера только для границ с закругленными углами 16px и общим внутренним отступом 24px :

  
    
        
            
            
            <тд>
            
            
            
<тд>


            
            
            <тд>
            
            
        


<тд>

<тд>
[СОДЕРЖАНИЕ]


            <тд>


        
            
            
            <тд>
            
            
            
<тд>

        
            
            
            <тд>
            
            
        
    
  

Со следующим результатом:

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

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

Контейнер только для фона

Давайте посмотрим, что произойдет, если мы применим те же принципы к фоновому контейнеру. Контейнер только для фона работает точно так же, только используя немного другую форму и свойство background-color в ячейках таблицы вместо свойств границы CSS.

Вот полный код контейнера только для фона с закругленными углами 16px и общим внутренним отступом 24px :

  
    
        
            
            
            <тд>
            

            
            <тд>
            

            
            
            <тд>
            
            
        

        
            <тд>

            <тд>
                [СОДЕРЖАНИЕ]
            

            <тд>
        
    
        
            
            
            <тд>
            
            
            
            <тд>
            
        
            
            
            <тд>
            
            
        
    
  

Пробуя это, я намеренно сохранил исходное содержимое электронной почты, чтобы вы могли видеть, насколько хорошо оно поддерживает форматированный контент даже с объектами VML:

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

Комплексное решение с рамкой и фоном

Осталось решить две проблемы:

  1. Компенсация дополнительного места в Outlook.
  2. Разрешить контейнер с закругленными углами, имеющими границу и фон, что означает, по сути, использование двух фигур VML в одном месте. Это звучит знакомо?

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

Решением для обеих проблем является позиция: относительная .

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

Вот окончательный код контейнера с поддержкой как фона, так и границы . Я добавил дополнительную красную рамку к контейнеру body только для примера:

  
    
        
            
            
            <тд>
            
            
            
<тд>


            
            
            <тд>
            
            
        


<тд>

<тд>
[СОДЕРЖАНИЕ]


<тд>


        
            
            
            <тд>
            
            
            
<тд>

        
            
            
            <тд>
            
            
        
    
  

Это его окончательный вывод в Outlook:

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

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

Вот как выглядит наше стандартное тело электронной почты, используя только фон:

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

Другие возможные, но неэффективные решения

Были и другие потенциальные решения, которые я рассматривал, но ни одно из них не казалось «правильным» и не давало желаемых результатов:

Попиксельная компоновка

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

Это работает, однако ощущения такие же, как при рисовании Моны Лизы в Excel. Не то, что я бы посчитал эффективным решением.

Но если вы хотите узнать больше об этой попиксельной компоновке, прочтите эту статью.

Угловые изображения

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

Это все, что я могу сказать

Спасибо, что были со мной до самого конца! Надеюсь, мои выводы были вам полезны и помогут вам в развитии вашей электронной почты. Если вы хотите обсудить свои решения или поделиться своим опытом, присоединяйтесь к нашему Discord.

Если вы пропустили какие-то темы, вот ссылки на все мои предыдущие статьи о редизайне писем:

Приятного времяпрепровождения!

Применение закругленных углов к представлению UIKit или SwiftUI

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

Essential Developer: Если вы iOS-разработчик среднего или старшего звена и хотите улучшить свои навыки и повысить уровень заработной платы, присоединяйтесь к ускоренному курсу iOS Architect, который начнется 28 марта. Это на 100% бесплатно и проводится полностью онлайн. Нажмите, чтобы узнать больше.

Хотя сам UIKit не включает никаких API для изменения углового радиуса данного вида, тот факт, что каждый UIView поддерживается базовым CALayer , позволяет нам использовать Core Animation для выполнения таких настроек.

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

  let button = UIButton(type: .custom)
button.setTitle("Далее", для: .normal)
button.setTitleColor(.white, для: .normal)
button.backgroundColor = .синий
button.contentEdgeInsets = UIEdgeInsets(
    верх: 4,
    слева: 6,
    внизу: 4,
    справа: 6
)  

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

  кнопки.layer.cornerRadius = 10  

💡 Совет: вы можете использовать кнопку ПРЕДПРОСМОТР , чтобы увидеть результат вышеуказанного изменения.

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

Например, при применении несколько большего радиуса угла к заданному виду использование настроек по умолчанию может привести к тому, что углы будут не такими гладкими, как мы ожидали.Чтобы продемонстрировать, давайте увеличим размер шрифта и радиус угла нашей кнопки, и если вы воспользуетесь кнопкой ПРЕДВАРИТЕЛЬНЫЙ ПРОСМОТР ниже, вы увидите, что наши углы теперь выглядят довольно четкими : кнопка

 . titleLabel?.font = .systemFont(ofSize: 80)
button.layer.cornerRadius = 30  

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

 .layer.cornerCurve = .continuous  

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

  button.layer. maskedCorners = [.layerMinXMinYCorner]  

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

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

  Кнопка ("Следующий") {
    ...
}
.foregroundColor(.белый)
.padding(.горизонтальный, 4)
.padding(.vertical, 6)
.background(Цвет.синий)
.cornerRadius(10)  

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

Например, один из способов использования непрерывного стиля для скругления углов вида — использовать форму RoundedRectangle в качестве фона , а не использовать цвет в сочетании с модификатором angleRadius :

  Кнопка ("Следующий") {
    ...
}
.foregroundColor(.белый)
.padding(.горизонтальный, 4)
.padding(.vertical, 6)
.задний план(
    Прямоугольник с закругленными углами(
        уголРадиус: 10,
        стиль: .непрерывный
    )
    .fill(Цвет.синий)
)  

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

К сожалению, SwiftUI не включает какой-либо встроенный способ скругления только определенных углов, но мы всегда можем добиться этого, внедрив пользовательский Shape или UIView , который использует maskedCorners Core Animation API, который мы рассматривали ранее. Затем мы могли бы использовать любую из этих реализаций в качестве фона нашего представления (если идти по маршруту UIKit, нам пришлось бы сначала обернуть это представление, используя UIViewRepresentable ), точно так же, как мы использовали RoundedRectangle выше.

Essential Developer: Если вы iOS-разработчик среднего или старшего звена и хотите улучшить свои навыки и повысить уровень заработной платы, присоединяйтесь к ускоренному курсу iOS Architect, который начнется 28 марта. Это на 100% бесплатно и проводится полностью онлайн. Нажмите, чтобы узнать больше.

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

Спасибо за внимание!

Полноценный пользовательский опыт. Вы когда-нибудь задумывались, что за суета с… | by Sandhya Subramaniyan

Вы когда-нибудь задумывались, что за суета с закругленными углами на кнопках, карточках и других компонентах пользовательского интерфейса? Читай дальше что бы узнать.

Дизайн — Sandhya

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

Под скруглением пользовательских интерфейсов я в первую очередь подразумеваю скругление углов в объектах пользовательского интерфейса, которые по умолчанию острые.Наиболее часто закругленными объектами являются карточки и кнопки, особенно кнопки CTA (Call-To-Action).

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

Дизайн — SandhyaImage Источник — Google

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

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

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

Дизайн — Sandhya

Теперь возникает вопрос, использовать ли закругленные углы или полностью закругленные компоненты.

Закругленные углы идеально подходят для сеток,

  • Они способствуют дружескому общению
  • Они экономят место
  • Они привлекают внимание к содержимому, а не к компонентам
Дизайн — Sandhya

Полностью закругленные кнопки идеально подходят для CTA ,

  • Компонент должен быть автономным
  • У вас должно быть свободное место, так как полностью закругленные кнопки занимают больше места по горизонтальной оси. Это лучше видно на графике
Дизайн — SandhyaDesign — Sandhya

Bouba/kiki_effect

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

Если вам понравилась эта статья, хлопните в ладоши и поделитесь ею 🙂

дизайнов на https://dribbble.com/sandhya_subram

Твиты на https://twitter.com/sandhya_subram

Закругленные углы вместо острых углов | by Andrea Perera

Почему закругленные углы в тренде

Вы заметили, что самые популярные продукты, такие как Facebook, Netflix и Spotify, чаще используют закругленные/изогнутые углы в пользовательском интерфейсе?

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

Некоторые из вас, возможно, уже сталкивались с сообщениями в LinkedIn от дизайнеров UI/UX, спрашивающих: «Какой UI лучше?».

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

Однако самый волнующий вопрос заключается в том, стоит ли за этим какая-то наука?

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

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

Но, с другой стороны, изогнутые углы создают дружелюбную и безопасную атмосферу. Следовательно;

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

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

Кнопки (отдельные)

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

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

Слева: Острый угол | Центр: Изогнутый угол | Справа: Полностью изогнутый угол

Диалоговые окна (отдельные)

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

Слева: Острый угол | Центр: Изогнутый угол | Справа: полностью изогнутый угол

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

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

Нет! Существуют варианты использования острых углов. Давайте узнаем, когда людям нравится видеть Острые углы, на основе результатов моего опроса.

Кнопки и диалоговые окна (отдельные)

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

  • Ящики с важным и внимательным содержанием.
  • Кнопки, которые должны быть заметны.
Слева: Полностью изогнутый угол | Центр: Изогнутый угол | Справа: Острый угол

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

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

Группировка кнопок

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

Слева: Острый угол | Центр: Изогнутый угол | Справа: полностью изогнутый угол.

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

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

Слева: Острый угол | Центр: Изогнутый угол | Справа: полностью изогнутый угол

. Результаты оказались намного интереснее. Большинство предпочло иметь контейнер Sharp Corner для групп кнопок с изогнутыми углами.

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

Кнопка группировки: поэкспериментируйте с компонентами фильтра

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

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

1-й раздел: Теги фильтра острых углов

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

Поэтому не делайте поспешных выводов и принимайте результаты опроса за эмпирическое правило. Вместо этого я настоятельно рекомендую вам провести дополнительные A/B-тесты для аудитории вашего приложения.

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

Примечание: Выбор углов может различаться в зависимости от устройства или режима, например, мобильной версии или веб-версии.

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

Перенесите свою команду в Bit Cloud, чтобы совместно размещать компоненты и совместно работать над ними, а также значительно ускорить, масштабировать и стандартизировать разработку в команде.Начните с компонуемых интерфейсов, таких как Design System или Micro Frontends, или исследуйте компонуемый сервер. Попробуйте →

Самые популярные вопросы о закругленных углах

Самые популярные вопросы о закругленных углах | Ночные распечатки × Версия вашего браузера устарела, это может привести к проблемам с нашим сайтом. Обновите свой браузер найти руководство по обновлению браузера
  • Как создать дизайн для закругленных углов?

    Наш закругленный угловой радиус равен 0.25 дюймов. Пожалуйста, создавайте свои файлы без полей, чтобы учесть наш допуск на резку 1/16 дюйма со всех сторон. Держите весь текст в пределах безопасной зоны, чтобы обеспечить правильную обрезку закругленных углов.

  • Какие продукты предлагаются со скругленными углами?

    Закругленные углы доступны для большинства продуктов, которые будут напечатаны на карточках 15pt, например, визитных карточек премиум-класса, евровизитных карточек, открыток, объявлений, приглашений, стоечных карточек, закладок и некоторых размеров флаеров.

  • Каков радиус закругленных углов?

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

.

Добавить комментарий

Ваш адрес email не будет опубликован.