Закругленные углы (суперэллипс) в экосистеме Apple
Если вы присмотритесь повнимательнее, то редко найдете острый угол в продуктах компании Apple. Начиная с HomePod, кнопок клавиатуры и заканчивая элементами в собственных приложениях Apple, формы настолько плавно округляются, что не видно, где заканчиваются прямые линии и начинаются скругления углов.
Squircle
Для этой фигуры есть термин. Она называется squircle (суперэллипс), и представляет собой помесь круга и квадрата. В отличие от обычных закругленных прямоугольников, у которых угол имеет идеальный полукруг, суперэллипс имеет более сжатую форму. Скругление угла не начинается внезапно, вместо этого кривая начинается глубоко внутри прямой и постепенно перерастает в видимую кривую (как показано на изображении 1.1). Изображение 1.0 Третья комбинированная фигура усиливает этот эффект. Видимая синяя часть подрезается, чтобы получились более гладкие и мягкие углы Изображение 1.1 Суперэллипс (красная фигура) начинает округляться глубже по прямой линии, чем простой прямоугольник с закругленными углами (синяя фигура) В то время, как прямоугольники с закругленными углами имеют постоянный угловой радиус, угловой радиус суперэллипса уменьшается или сжимается по мере углубления кривой, а затем снова симметрично расширяется на другой стороне кривой. (Подробнее о математических расчетах, лежащих в основе этой фигуры стоит прочитать в этой статье).
Эффект
Полное отсутствие острых краев и внезапных переходов устраняет ощущение фабричности, к которому мы так привыкли в товарах массового потребления. Вместо того, чтобы напоминать нам о промышленных цепочках поставок, конвейерном производстве и химических лабораториях, эти более мягкие формы напоминают о красоте природы. Это кажется органичным и вызывает приятные ощущения. Помимо эстетического и тактильного эффекта, существует также аспект прагматической оптимизации. Например, теоретически вождение по извилистым горным дорогам должно быть более безопасным и комфортным при постепенном изменении кривизны дороги.
Примеры
Мне стало любопытно, насколько распространена форма суперэллипса в экосистеме Apple, поэтому я начал фотографировать все, что мог, и накладывать фигуры на изображения (см. изображение 2.2). Я рассмотрел HomePod, где суперэллипс очевиден, а также iPad, клавиши новой клавиатуры iPad, Apple Watch и кнопки покупки в приложениях Apple TV, Apple News и Apple Music. Как оказалось, суперэллипс есть везде. Изображение 2.0 HomePod. При любом освещении вы не найдете острого угла Изображение 2.1. Клавиатура iPad Изображение 2.2 Типичный прямоугольник с закругленными углами, наложенный на силуэт iPad. Обратите внимание на едва заметные розовые участки, где закругленный прямоугольник выступает за суперэллипс (корпус iPad) Изображение 2.3 Пункт управления, элементы управления внешним видом и подписка в Apple News +. Обратите внимание, что, несмотря на нарушение руководящих принципов Apple по поводу встроенных в приложение покупок, кнопка «Get Started» имеет форму суперэллипса Изображение 2.4 Суперэллипс дебютировал на iPhone в iOS 7, представив новую, более мягкую форму иконок приложений Мой любимый пример – HomePod. В отличие от большинства колонок, которые прячут, чтобы не нарушать интерьер, HomePod предназначен стать элементом декора комнаты. Подобно керамическим изделиям ручной работы, HomePod прекрасно смотрится при любом освещении. Ключевым моментом является его форма – независимо от того, как свет падает на устройство, зритель не может выделить острый край. Попытки использования кривых линий, как средства смягчения продукта не новы. Пит Хейн использовал squircle в 1959 году для решения транспортных проблем в Стокгольме. Центральное место в архитектурном стиле Захи Хадид занимали мягко округленные формы, чтобы напомнить о природе и придать новым строениям ощущение футуристичности. Что примечательно, так это необычайная простота суперэллипса. Эту фигуру можно использовать в наборе продуктов – цифровых или физических – без изменения основополагающих принципов или необходимости выполнения сложных математических расчетов. Именно это Apple сделала для своих аппаратных и программных интерфейсов. В результате вся экосистема компании из Купертино кажется более дружелюбной, доступной и восхитительной. Мне пришла идея написать эту статью, когда я добавлял суперэллипс в наше приложение Minimal | Notes. Если вы дизайнер или iOS-разработчик, который хочет добавить суперэллипс в свой продукт, ознакомьтесь с этими простыми инструкциями. Перевод статьи medium.com
Как называется прямоугольник с закруглёнными углами?
Как называется этот округлённик? Или у него нет научного названия?
Голосование за лучший ответ
https://ru.wikipedia.org/wiki/Суперэллипс
5 секунд потребовалось, чтобы загуглить
Каиркан КульжановПрофи (755) 1 год назад
Не то, так как это целая категория фигур, а не только скруглённый прямоугольник
. Мыслитель (8249) Каиркан Кульжанов, Так скругленный прямоугольник это частный случай суперэллипса.
RomanПрофи (767) 1 год назад
Сквиркл — симметричен, такой ответ бы подошел, если бы вопрос звучал: как называется квадрат со скруглёнными краями.
Но вопрос про прямоугольник
Сквиркл. суперэллипс с определенными параметрами
Каиркан КульжановПрофи (755) 1 год назад
Сквиркл это скруглённый квадрат
Краткое название отсутствует, есть частный случай сквиркл (square (квадрат) + circle (круг)), т. е квадрокруг.
Похожие вопросы
Ваш браузер устарел
Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.
Типы четырехугольников
Четырехугольник — это геометрическая фигура, которая состоит из четырех точек, соединенных линиями.
В четырехугольниках имеются четыре стороны, четыре угла, две диагонали и четыре вершины.
Различные типы четырехугольников имеют разные свойства, которые определяются различным соотношением сторон и углов четырехугольника. Вполне возможно иметь четырехугольник, в котором никакие две стороны и никакие два угла не совпадают. С другой стороны, любые две или более сторон могут быть равны по длине, а любые два или более углов могут быть одинаковой величины.
Свойства четырехугольников
- Углы: Сумма всех углов в четырехугольнике равна 360 градусов.
- Диагонали: Четырехугольник имеет две диагонали, которые соединяют противоположные вершины. В ромбах и квадратах, диагонали равны между собой, а в прямоугольниках диагонали равны попарно.
- Стороны: Все стороны четырехугольника могут быть разной длины, но в некоторых специальных четырехугольниках, таких как квадрат и ромб, все стороны равны между собой.
- Периметр: Периметр четырехугольника — это сумма длин всех его сторон.
- Площадь: Площадь четырехугольника можно вычислить разными способами, в зависимости от типа четырехугольника. Например, для прямоугольника площадь равна произведению длины на ширину, а для ромба — половина произведения диагоналей.
- Симметрия: Некоторые четырехугольники имеют оси симметрии, такие как квадрат и прямоугольник. В этих случаях, фигура выглядит одинаково при отражении относительно оси симметрии.
Виды четырехугольников
Квадрат — самый простой тип четырехугольника. Квадрат называется равносторонним, потому что все четыре стороны имеют одинаковую длину, то есть квадрат является правильным многоугольником, и все четыре внутренних угла равны девяносто градусов. Диагонали в квадрате имеют одинаковую длину, пересекают друг друга перпендикулярно, то есть пересекаются под прямым углом.
Как выглядит четырехугольник? Как фигура с четырьмя сторонами и таким же количеством углов: ромб, трапеция, квадрат, параллелограмм, прямоугольник.
- Квадрат имеет четыре равные стороны и четыре прямых угла.
Прямоугольник — четырехугольник, где все четыре внутренних угла имеют прямые углы (т. е. девяносто градусов), только противоположные стороны имеют равную длину. Смежные стороны могут быть разной длины. Какие бывают прямоугольники? По определению прямоугольник является и параллелограммом.
- Только противоположные стороны прямоугольника должны быть равны
Параллелограмм — обе пары противоположных сторон параллельны (отсюда и название), противоположные стороны равны, и противоположные углы равны по величине. Диагонали, хотя и одинаковой длины, когда параллелограмм представляет собой квадрат или прямоугольник, всегда разделяют друг друга. Диагональ разбивает параллелограмм на два равных треугольников. Последовательные углы являются дополнительными (т. е. они всегда составляют сто восемьдесят градусов). Обратите внимание, что параллелограмм, в котором смежные стороны имеют разную длину и в котором все внутренние углы наклонены, иногда называют ромбом (в отличие от ромба, который является параллелограммом, в котором все четыре стороны имеют одинаковую длину).
- Параллелограмм, показанный здесь, является ромбом
Ромб представляет собой равносторонний параллелограмм, т. е. имеет четыре стороны равной длины. Поскольку это параллелограмм, противоположные стороны параллельны, противоположные углы имеют равную величину, последовательные углы являются дополнительными (т. е. они составляют сто восемьдесят градусов), а диагонали разделяют друг друга. Диагонали ромба также рассекают внутренние углы и ортодиагональны (т. е. пересекаются под прямым углом).
- Ромб — равносторонний параллелограмм
Трапеция — это выпуклый четырёхугольник, у которого две стороны параллельны, а две другие стороны не параллельны. На рисунке ниже показаны три возможных варианта трапеции. На рисунке слева изображена равнобедренная трапеция, в которой углы, прилегающие к каждой из параллельных сторон равны. Центральная фигура имеет одну сторону, перпендикулярную обеим параллельным сторонам, поэтому трапеция содержит два прямых угла. Последняя, самая правая, фигура имеет стороны разной длины, и все внутренние углы разные.
Векторные инструменты: Прямоугольник со скруглёнными углами и Эллипс
В стартовом материале о векторных фигурах Photoshop я рассказал, как в этой программе выбирать различные векторные инструменты формы на панели инструментов, как выбрать нужный тип заливки и обводки и назначить им цвет.
Первый инструмент в стеке векторных форм — это «Прямоугольник» (Rectangle Tool), подробная инструкция по работе с ним здесь.
В данном материале я расскажу о двух следующих инструментах векторных форм — Эллипсе и Прямоугольнике со скруглёнными углами.
Прямоугольник со скруглёнными углами (The Rounded Rectangle Tool)
Рассмотрим следующий инструмент в стеке инструментов формы Photoshop — это «Прямоугольник со скруглёнными углами» (The Rounded Rectangle Tool).
Выбор инструмента «Прямоугольник со скруглёнными углами».
«Прямоугольник со скруглёнными углами» очень похож на стандартный «Прямоугольник», за исключением того, что он позволяет нам добавлять к прямоугольнику закругления на углах. Значение округлости углов задаётся при помощи опции «Радиус» (Radius) в панели параметров. Чем выше значение, тем более округлыми становятся углы. Вы должны заранее установить значение опции «Радиус», прежде чем начнёте создавать вашу форму, так что я сейчас установлю его на 20 пикселей:
Используйте опцию «Радиус» (Radius), чтобы установить величину округлости углов.
После того как вы установите значение радиуса скругления, рисуйте прямоугольник точно так же, как бы и рисовали обычный прямоугольник. Начните с нажатия левой клавишей мыши внутри документа, чтобы установить начальную точку для фигуры, затем, не отпуская клавишу, протащите курсор по диагонали, чтобы нарисовать остальное. Так же, как и при рисовании обычного прямоугольника, отобразится пустой контур фигуры:
Рисование прямоугольника со скруглёнными углами в Photoshop, методом протаскивания курсора, после установки значения радиуса углов в панели параметров.
Когда вы отпустите клавишу мыши, Photoshop завершит создание фигуры и заполнит её цветом:
Форма заполняется цветом, когда вы отпустите кнопку мыши.
Вот еще один пример прямоугольника с закругленными углами, на этот раз у меня значение радиуса установлено в 150 пикселей, что достаточно много в данном случае (радиус скругления больше половины высоты прямоугольника), так, что левая и правая стороны прямоугольника получились полностью изогнутыми:
Чем выше значение радиуса, тем больше скругление углов.
К сожалению, в Photoshop CS6 нет никакого способа предварительного просмотра скруглений, чтобы просмотреть, как округлые углы будут соотноситься по размеру с прямоугольником, это можно сделать только при создании прямоугольника, и мы, если понадобится, не сможем изменить размер радиуса «на лету».
Все это означает, что рисование прямоугольников со скруглёнными углами является методом «проб и ошибок».
Если вы нарисуете такой прямоугольник и решите, что вам не нравится округлость углов, всё, что вы действительно можете сделать, это только отметить шаг, нажав Ctrl+Z и попытаться создать новый, предварительно задав другое значение радиуса скруглений в панели параметров.
Но в Photoshop CC редактирование скруглений уже возможно, и присутствуют другие приятные функции, об новшествах прямоугольника со скруглёнными углами в Photoshop CC подробно рассказано здесь.
Те же сочетания клавиш, которые мы узнали о для стандартного инструмента «Прямоугольник», также применяются и к «Прямоугольнику со скруглёнными углами». Применение клавиш Shift и Alt вместе или в отдельности позволит создавать правильный квадрат от угла или от центра.
Инструмент Эллипс (Ellipse Tool)
В Photoshop инструмент «Эллипс» позволяет нам создавать эллиптические или круглые формы. Я выберу его на панели инструментов:
Выбор инструмента «Эллипс» (Ellipse Tool)
Так же, как и с другими инструментами формы, которые мы рассмотрели выше, чтобы нарисовать эллиптическую форму, нажмите левой клавишей мыши внутри документа, чтобы установить начальную точку, и, не отпуская клавишу, протащите курсор, чтобы нарисовать остальное:
Рисование эллиптической формы с помощью инструмента «Эллипс» (Ellipse Tool).
Отпустите кнопку мыши, чтобы завершить создание формы и Photoshop зальёт его выбранным цветом:
Заполненная цветом форма
Чтобы с помощью Ellipse Tool нарисовать круг правильной формы, во время протаскивания курсора зажмите клавишу Shift и отпустите её только после того, как закончите протаскивать курсор, т.е. точно по аналогии с созданием правильного квадрата инструментом «Прямоугольник». Чтобы начать рисовать эллиптическую форму от её центра, а не края, зажмите клавишу Alt:
Правильный круг, нарисованный инструментом «Эллипс» (Ellipse Tool).
В следующем материале я расскажу о двух оставшихся инструментах Photoshop — «Многоугольник» (Polygon Tool) и «Линия» (Line Tool), а также,о построении с помощью этих инструментов звёзд и указательных стрелок.