Секрет формы иконок iOS: это сквиркл? Разбор

    Давайте сыграем в игру. У нас есть два ряда знакомых всем пользователям iOS-иконок. На первый взгляд иконки сверху и снизу одинаковые. Но это не так. В одном ряду вы видите настоящие иконки, а в другом подделку.





    Можете ли вы определить, где какие? Не торопитесь, посмотрите внимательно? Ну что, выбрали?

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

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

    Но! В интерфейсе iOS нет ни одного квадрата с закруглёнными углами. Все элементы в iOS, это не квадраты и прямоугольники — это суперэллипсы!

    Сегодня мы поговорим про секреты в дизайнах продуктов Apple. Что такое суперэллипс? В чём магия формы иконок? И почему HomePod — это суперяйцо.





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

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

    Это геометрическая кривая, которая строится при помощи уравнения вот такого вида:



    Это уравнение задаёт замкнутую кривую, ограниченную прямоугольником. При этом меняя значение n мы можем регулировать степень выпуклости каждого угла (можно поиграться тут). При n меньше единицы, мы получаем вогнутые стороны, а форма напоминает звезду.



    Увеличивая значение n, форма становится всё более выпуклой. При n=2 получается ровный круг. А при n равной 4 или 5 мы получаем привычную всем форму иконки.



    У такой формы даже есть своё название — сквиркл. И, нет, сквиркл — это не ваш любимый раздел на PornHub. Это производное от слов square и circle. Т.е. по русски сквиркл — это квадрокруг или квадратный круг.

    Кстати, формула описывающая иконку iOS выглядит вот так:



    Т.е. иконка в iOS — это и не круг и не квадрат, а математически — это что-то среднее между ними.

    Кольцо и суперяйцо


    Историческая справка. Популяризировал суперэллипсы и сквирклы датский ученый Пит Хейн. В 60-х годах он спроектировал транспортное кольцо в Стокгольме в виде суперэллипса со значениями n = 2.5, a/b = 6/5.



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



    Кстати, трехмерные суперэллипсы — это суперэллипсоиды. А всякие неправильные суперэллипсоиды — это суперквадрики.

    Непрерывность кривизны


    Но вернёмся к иконкам! Чем всё-таки квадрокруг отличается от скругленного квадрата? И чем он не угодил дизайнерами Apple? Давайте посмотрим!

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








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



    Казалось бы, разница — пара пикселей. Но плавные переходы, позволяют добиться так называемой непрерывности кривизны. И это даёт потрясающий эффект — форма объекта из искусственной, как бы собранной из разных форм становится естественной и завершенной.

    Именно поэтому Apple очень активно использует суперэллипсы не только в интерфейсе, но и в дизайне всех своих продуктов.

    Mac Mini, Apple TV,  iPhone, iPad, MacBook и конечно HomePod — своего рода всё это суперэллипсы. Даже в их новом кампусе нет ни одной прямой стены.

    Плавное перетекание форм и отсутствие резких переходов делает продукты Apple не только привлекательными внешне. На этот счёт есть отличная статья Николая Геллара, которую я процитирую:

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

    Например если сравнить по дизайну HomePod и Яндекс.Станцию, становится понятно в почему станция выглядит менее привлекательно, её как будто только выпустили с завода. А HomePod будто нашел в своём саду японский мастер суйсэки — искусства любования камнями.





    Хотя сама Яндекс.Станция — девайс отличный. А HomePod красивый, но туповатый (русского не знает).

    Примеры


    Но, конечно, Apple тоже не сразу к этому пришли. Например, иконки и другие элементы интерфейса стали суперэллипсами только в начиная с iOS 7.



    Такая же история с Apple Watch. В Series 4 увеличили не только дисплей, но и обновили форму. Да-да, Apple Watch с четвёртой версии это тоже — суперэллипс (как сам экран).




    Другие компании


    Естественно, не только Apple играется с суперэллипсами. Те же иконки в One UI на смартфонах Samsung, гораздо более явные квадрокруги, чем у Apple. Но, на мой взгляд, у Samsung выбранная форма не работает.

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



    Но это не самое главное. Основная проблема в интерфейсе Samsung. Я говорю про отсутствие единства. Плавные суперэллипсы тут соседствуют с грубоватыми скруглёнными. Как внутри интерфейса так и в дизайне самих девайсов.



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

    Эти чуваки показали миру, что красивыми могут быть не только автомобили и предметы роскоши, но обычные ноутбуки и и телефоны. Поэтому вся техника сейчас так круто выглядит.
    Droider.Ru
    Company
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 101

      +6
      Исправьте заголовок, пожалуйста. «!?!» — это вообще что? «?!» — это уже ужас, достаточно одного знака. И ими вообще лучше не злоупотреблять в заголовках.
        0

        Лучше уж "неправильные" заголовки, чем мертвая сеть "medium" и проекты вида "wct lang".

          +2
          Извините, но всё-таки лучше уж мёртвая сеть «medium» и проекты вида «wct lang», чем токсичные комментарии на Хабре.

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

          К чему здесь вообще это упоминание?
            0
            От токсичных комментариев на хабре люди время/деньги не потеряют, в отличие от траты времени на развитие таких «проджектов» как Medium. Кроме того, ваш первый комментарий — крайне токсичный наезд на знаки препинания в заголовке, такие вещи принято в лс писать.
            А вообще — авторы удаляющие свои посты, к которым люди оставили кучу интересных комментариев, потратив на это своё время, вызывают у меня личную неприязнь, так что да, буду припоминать.
        –8

        Да всем тоже пофиг.
        Какие то заметки аудиофила. Главное, не забыть "прогреть" суперэллипсы, чтоб они не укатились с экрана

          +13
          Что-то я уже подобное тут читал
          habr.com/ru/post/353082
              +3
              да, так и есть, но имхо. статья по ссылке более техничная, а здесь более развлекательная = быстрее и легче читается, так что обе статьи точно нужны.
              а про метро скорее похожий подход используется
              +5

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

                +19
                Я так и не смог увидеть разницу между иконками… И да, форма яндекс.станции моему глазу нравится больше, чем это непонятное яйцо.
                  –6
                  Поддерживаю. Разница есть, кнопка фотоаппарата, например. Но при этом «подделка» выглядит лучше оригинала.
                  P.S. Никогда не понимал дизайн эппл и фанатских хороводов вокруг. Самый большой эпик-фейл, это настольное мусорное ведро за 3000 вечнозеленых президентов от Эппл.
                    +2
                    Ну не знаю. Не вижу разницы, даже если специально искать…
                    И вообще — я люблю прямые углы в дизайнах. Одна из причин, по которой мне нравился Windows Phone/Windows 10 Mobile.
                      0
                      Согласен с тем, что «подделка» приятнее глазу. Особенно если убрать «правильный» серый фон. Так что это всё дело вкуса или кто к чему привык.
                        +5
                        Никогда не понимал дизайн эппл и фанатских хороводов вокруг

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

                      +29
                      Я один не вижу разницы в форме иконок? Верхний ряд чуть ярче, цвет насыщеннее, контрастность повыше, да. Но это примерно как в салонах техники у телевизоров подороже изображение получше настраивают, чтоб разница в цене не смущала.
                        +8

                        Мне тоже показалось (и до сих пор так кажется, когда я смотрю на них в статье), что цвета отличаются.
                        Но цвета одинаковые. Открыл обе картинки в отдельных табах и листал — меняется только форма "квадрата".
                        Наверное, просто оптическая илюзия из-за градиента. Думаю, если расположить иконки вертикально, то эффект пропадёт.

                          0
                          Я просто поменял их местами и те, которые «поддельные» (они оказались сверху) теперь выглядят ярче, чем «настоящие». Так что видимо, дело действительно в градиенте: глаз сравнивает нижние края верхней картинки(которые ярче) с верхними краями нижней картинки(которые тусклее).
                          Ну что, тоже неплохой маркетинговый ход автора статьи.
                            +1
                            А монитор у вас с какой матрицей?
                              0
                              IPS
                                +2
                                Хмм, значит, дело, скорее всего, не в угле взгляда. А то был ещё один вариант.
                          +2

                          Я сразу заметил разницу, сверху настоящий айфон, снизу китайский.


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

                            +3
                            А мне было бы нормально если бы они были квадратными (привет Windows 10)
                              +5

                              Нормально бы было, если бы Microsoft не похоронила свою мобильную ОС.

                                +4
                                Windows CE? Я её в автобусных табло до сих пор вижу.
                            0
                            реальный объект так согнуть невозможно

                            старые часы от Apple, да и любой смартфон

                            Вполне возможно. И не нужно гнуть, есть резка.
                            +2

                            У тех что снизу видны углы

                              0
                              Я вижу разницу, и да, я узнал, где настоящие, а где поддельные. И видел её раньше, просто пользуясь телефоном.

                              И это проблема, потому что мне эта форма неприятна. Глаз цепляется за неидеальность окружности, непрямую границу, и эффект получается аналогичный картинкам серии «ад перфекциониста».
                              +24
                              Теперь хоть понятно за что деньги платишь!
                                +21
                                И, нет, сквиркл — это не ваш любимый раздел на PornHub

                                Странные ассоциации. Я вот про покемона первым делом подумал:


                                image
                                  0
                                  И вообще это не скврикл а сквёркл, если уж транслитерировать, хотя здесь, как справедливо отметили ниже, нужно переводить.

                                  Странные ассоциации.

                                  Ассоциации как раз предсказуемые, есть один жанр с названием, начинающимся на «squir»
                                    0
                                    есть один жанр с названием, начинающимся на «squir»
                                    Не то, чтобы это был прямо жанр, просто название одного физиологического процесса.
                                      0
                                      Так и Squirtle тоже произносится /ˈskwɜːrtəl/, а по-русски всё равно Сквиртл.
                                    +6
                                    Это производное от слов square и circle. Т.е. по русски сквиркл — это квадрокруг или квадратный круг.

                                    «Квадруг» тогда уж.
                                      +4
                                      Квадружность
                                        0
                                        «Кругват»! =)
                                          +2
                                          У вас вата в слово пробралась. Круграт, тогда уж.
                                        +9
                                        Как я ни вглядывался, не смог увидеть разницу (пришлось в графическом редакторе находить). Вам стоило добавить голосовалку, мне очень интересно какой процент увидит разницу, и какой процент из них — правильно определит, где оригинал а где «подделка». Отдельно мне было бы интересно, какой процент из увидевших разницу работает графическим дизайнером, но это боюсь слишком усложнило бы голосовалку.
                                          +8

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


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


                                          Дизайнеры эппл молодцы? Да. Захотел ли я айфон? Конечно же нет :)

                                            0
                                            Аналогия — неверная. У прямоугольника с закругленными углами прямые стороны — касательные к кривым закруглений, так что величина ускорения при входе в кривую растет от нуля, то есть плавно. Если же заменить прямую стороны и кривую закругления на одну аппроксимирующую кривую, которая аппроксимирует с хорошим приближением, составляющая ускорения, перпендикулярная стороне, будет на участке, соответствующем прямой, столь мала, что ее будет практически невозможно заметить (только измерить более точным прибором, чем человеческий вестибулярный аппарат).
                                              +3
                                              Нет же. Ускорение при движении по окружности a = ω^2 * R = v^2 / R. Если считать линейную скорость постоянной то следовательно в каждой точке окружности ускорение постоянно. При этом прямую можно представить как окружность бесконечного радиуса, где ускорение у нас равно нулю. Тогда в точке стыка окружности и прямой получаем резкий скачек ускорения.

                                              В иконках iOS радиус изменяется плавно, а значит плавно и изменяется ускорение. Как в современных лифтах, они стартуют не так резко как некоторые старые и не так сильно подкидывает, но за счет того что максимальная скорость выше — ездят быстрее. И при этом более плавно. (Хотя при этом максимальное ускорение у них может быть тоже довольно высоким что чувствуется вестибулярному аппарату, но скачков нет)
                                            +1
                                            Первая мысль — вы че, сперли контент с ютуба? Только же смотрел.
                                            А нет, это просто дройдер на хабре.
                                              +7
                                              Проведем эксперимент.
                                              Возьмем оба изображения, поместим в два разных слоя, верхнему назначим наложение Difference, склеим слои вместе, увеличим изображение в два раза (для наглядности) без интерполяции, вырежем только левую иконку вместе с куском рамки. Получим вот это:

                                              Разница видна, но она невелика. Заметит ли ее человек при слепом тестировании, а не когда ему уже заранее сказали? Возможно, но далеко не факт.
                                              Действительно ли это разница, которую можно описать как «будто один пиксель обрезали»? Фактически — нет, потому что иначе изображение разницы было бы в виде насыщенных пикселей.
                                              Считать это все «волшебными пузырьками» и оправданием своей нужности для дизайнеров или шедевром дизайнерской мысли — личное дело каждого. Правда, я подозреваю, что ни один пользователь продукции Apple не сделал свой выбор в ее пользу только благодаря этому.
                                                +4
                                                Считать это все «волшебными пузырьками» и оправданием своей нужности для дизайнеров или шедевром дизайнерской мысли — личное дело каждого.

                                                Дело же не в форме иконок — разницу между ними увидят не очень много человек, дело в «особенности».
                                                Если написать пару «правильных» статей (я не имею ввиду эту, скорее англоязычные ресурсы) и предоставить это все как некую «секретную заботу дизайнеров о перфекционизме пользователей», то у владельцев (в том числе будущих) продукции Apple создается впечатление, что продукт «особенный», «продуманный», а следовательно он «лучше». Так можно заработать пару бонусных очков своему продукту, Apple всегда отличался искусством продавать «исключительность» за дорого.
                                                Можно сказать, что маркетологи у Apple свои деньги отрабатывают.
                                                  –1
                                                  У меня ваш PNG отображается как однотонный чёрный.
                                                  Так и задумано?
                                                    +5
                                                    Думаю, пришло время менять монитор?
                                                      0

                                                      В темноте надо смотреть

                                                        0

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

                                                      +1
                                                      Разницы не увидел. Суперэллипсы не понравились. Возможно мне больше нравится «промышленный дизайн», чем какой-то камушек, которую нашли в саду у японца. Признаю, что возможно кому-то по душе такие формы и они готовы раскошелиться на немаленькую сумму ради них. В конце концов, beauty is in the eyes of the beeholder.
                                                        +7
                                                        «beeholder» — это пасечник? :)
                                                          0
                                                          Да, опечатка намеренная :)
                                                            –1
                                                            Пчелохранилище
                                                          +2
                                                          Иконки не отличаются. Дизайн яндекс станции, на мой взгляд, приятнее. Маркетологи Apple молодцы. Интересно, кстати, они как то с вами связывались? А то у вас как то в последнее время предвзятость просматривается.
                                                            0

                                                            Кто-нибудь наложит картинки под катом друг на друга, чтоб простые смертные увидели хоть какую-то разницу?
                                                            Про различия, если растянуть иконку до формата a5 все понятно

                                                              0

                                                              Тремя комментариями выше.

                                                              +3
                                                              Как по мне — иконки один хрен и не стоит это того, чтобы исследования проводить :)
                                                                +10
                                                                Серьёзно есть те, кто разницы по прежнему не видит? Я только сейчас понял, что мне так не нравилось, когда я в PS скругления делал по кругу.
                                                                  +2

                                                                  Да, спасибо, тут очень заметно.
                                                                  Кстати, istishev, на небезыизвестной Nokia N9 похоже тоже сквирклы.


                                                                  Заголовок спойлера

                                                                    +3
                                                                    Так они и в Symbian были, иконки-то оттуда. К Belle как раз все дорисовали в сквёрклы. И иконки, и кнопки в UI
                                                                    Скриншоты из обзора на Mobile-Review
                                                                    Очень нравились мне в своё время визуально. Жалко было, когда троянский Элоп всё похерил.
                                                                      0
                                                                      У них не пятая степень, а на глаз примерно третья.
                                                                      +1
                                                                      Строго говоря, в PS нет кругов. Круги там аппроксимируются кривыми Безье, которые принципиально неспособны передать окружность точно. Так что там подделка, хотя и очень приближенная к реальности.
                                                                      +15
                                                                      Для всех, кто не видит разницу, поясню что это не высосанная из пальца проблема. Действительно если прямая переходит в окружность то создается неприятный оптический эффект. Представим прямоугольник с углами окружностями — стороны прямоугольника кажутся втянутыми а закругления выпирающими а точка перехода цепляет глаз. На приведенных автором картинках этого не заметно, но если вы в векторном редакторе и на хорошем мониторе — то вы увидите. Ну или в полиграфическом качестве. Эффект проявляется по разному при разных пропорциях.

                                                                      Я лично пришел к этому самостоятельно при изготовлении шрифта (для логотипа надо было несколько букв, готовые шрифты не хотелось). Делал я этот шрифт в Иллюстраторе, так как всего несколько букв и вопросы кернинга и т.д. не интересовали, иначе бы взял специальную программу для создания шрифтов. Все закругления, не только окружности, при переходе в прямую визуально смотрелись плохо. Приходилось их руками чуть править. Сглаживал по своему, а вот детальной теории как это правильно сделать — не нашел.
                                                                      А для квадратов — иконок метод квадрата-эллипса как раз решает эту проблему. Но этот метод не очень понятно как юзать в случае произвольной фигуры.

                                                                      Если интересно, то ключевое слово — оптическая компенсация. Например если в строке стоят квадраты и круги — то если их высота одинакова — круги будут выглядеть меньше. Поэтому все округлые элементы делают чуть-чуть выступающими за строку. Но большинство людей этого не знают. Часто вижу этому подтверждение на вывесках из отдельных букв. Например вывеска «ТОП» — буква «о» больше чем остальные, из-за оптической компенсации, но монтажники этого не знают, и выставляют все буквы по линейке по нижнему краю. От этого «о» торчит над строкой, на две высоты компенсации. Выглядит забавно. Легко представить диалог монтажников, где они ругают тех, кто делал буквы.

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

                                                                      P.S. — В примере от artemerschow уже лучше заметно.
                                                                        0
                                                                        Например если в строке стоят квадраты и круги — то если их высота одинакова — круги будут выглядеть меньше.

                                                                        Интересно, это фиксится? Ну типа если много смотреть на одинаковые на самом деле круги с квадратами, то можно ли исправить это ощущение неправильности. А то может фиксим не в том месте, и нужно просто в школе на уроках рисования показывать, что есть на самом деле, а не костылить все вывески и иконки.
                                                                          +2
                                                                          Это не нужно фиксить, потому что на глаз мы определяем размер объекта как примерную площадь/объём, а не как габаритные размеры. И площади круга и квадрата одинаковой высоты вполне себе различаются.
                                                                          0
                                                                          Вопрос в том, какой процент пользователей заметит разницу. Если мы говорим о 0.1% от пользовательской базы, при этом все, кто входит в эти 0.1% — исключительно графические дизайнеры — то проблема высосана из пальца. То же самое касается и прочих оптических компенсаций в буквах и т.д. Если скажем хотя бы 30% заметят разницу — ну, тогда уже можно говорить о пользе подобных исследований и методик, полученных в результате таких исследований.
                                                                            +1
                                                                            А я не вижу проблемы, те кто не заметит продолжат спокойно жить. А те кто заметит не почувствует дискомфорт. И те кто замечают предпочтут более продуманный дизайн.

                                                                            Это называется воспитание вкуса.

                                                                            — Чтобы понимать живопись, нужно учиться ее понимать
                                                                            — Чтобы видеть в коде паттерны программирования нужно их изучать
                                                                            — Чтобы писать «правильный» код нужно учиться его распознавать и писать

                                                                            Логика, о том что если я не замечаю, то этого нет и не нужно — выглядит странной
                                                                              0
                                                                              Всё, опять же, зависит от ситуации. Если исследования проведены, результаты известны, есть конкретные рекомендации — то да, почему бы и нет, разницы никакой.
                                                                              А если ситуация как у Apple — «мы спустили кучу денег на исследования, чтобы 0.1% от пользовательской базы чувствовал себя лучше, поэтому ВСЕ должны платить за нашу продукцию в полтора раза больше, чтобы покрыть наши затраты» (да, я утрирую) — то нет, мне это совсем не нравится. Разница в дизайне, сама по себе, мне конечно не помешает (Хотя вот на картинке выше habr.com/ru/company/droider/blog/517298/#comment_22023406 мне больше нравится левый вариант. Но и правый не раздражает, так что ладно). А вот то, что мне за эту «отсутствующую» (в кавычках — потому что она отсутствует только для меня и таких как я) разницу придётся заплатить — я против. Собственно, для меня это ещё одна причина не покупать продукцию apple.
                                                                                +1
                                                                                Вы так пишете, будто они бы снизили цены на продукцию, если бы сквёрклов в UI не применили. Тут немного не так ценообразование работает.
                                                                                  0
                                                                                  Причем здесь исследования?

                                                                                  Есть армия граф. дизайнеров есть сотни книг по графическому дизайну. Вопрос компенсаций — это вопрос опыта тысячи профессионалов. И в противовес появилось ваше мнение. Но я все равно выберу мнение профессионалов накопленное десятилетиями.

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

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

                                                                                      Вам конкретные цитаты или сами сможете книги прочесть? Лень подборку делать. Выберите что нибудь удовлетворяющее вашим критериям авторитетности источника: store.artlebedev.ru/books/design-theory

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

                                                                            Т.е. тут обыкновенная «угадайка» как орёл или решка, 50 на 50. Половина читающих статью правильно случайно угадает где оригинал, и, естественно, напишут в комменте, что они сразу же узнали где оригинал. Но они не подумают о том, что это была простая угадайка, а будут думать, что узнали «правильную» иконку только потому, что она более «удобна», короче «стильно, модно, молодёжно».
                                                                            Вспоминается история про дедушку, к которому ходили мамочки узнать пол будущего ребёнка. Но дедушка был справедлив и возвращал деньги если неправильно определит пол ребенка. И ведь в 50% случаев он оказывался прав.

                                                                            Эта статья точно не троллинг? Неужели на полном серьёзе пишется про какое-то удобство и преимущество формы скругления уголка иконки? Если так, значит просто уже нечего больше предложить пользователям нового. Всё стало таким же как и у всех, теперь отличаться может только формой уголка иконки: «форму нашего уголка иконки считали два нобелевских лауреата на суперкомпьютере 2 года» — а это маркетинговый булшит и ничего более.

                                                                            Уверен, если бы все делали скругление как «суперэлипс», то Эппл бы сделали обычное круговое скругление, просто чтобы отличаться и была возможность написать статью об этом выдав за преимущество.
                                                                              +2

                                                                              Я как-то участвовал в процессе покупки дисплеев для работы художника.
                                                                              На дворе 2008-й год, а покупают две 22″ CRTшки с кучей рукояток сзади.
                                                                              Включили. На мой взгляд показывают отлично и одинаково.
                                                                              Пришла клиентка, два часа возилась, сказала "ну, не одинаково, но примерно похоже, с этим можно работать".


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


                                                                              Дизайном Эппла рулят художники. И не "они так видят", а они это таки видят.


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


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


                                                                              Уверен, если бы все делали скругление как «суперэлипс», то Эппл бы сделали обычное круговое скругление, просто чтобы отличаться

                                                                              Нет, они бы придумали что-то более хитрое.

                                                                              +7
                                                                              Мне кажется стоит организовать голосовалку: «вижу», «не вижу», «вижу, но пофиг».
                                                                              Была бы интересна статистика.
                                                                                +2
                                                                                «Не вижу, и пофиг»
                                                                                  0
                                                                                  «Не смотрел, но осуждаю»
                                                                                –2
                                                                                Да какая разница, как скруглены углы? Если за иконкой нет стОящего приложения. И если за вот той самой иконкой, у которой
                                                                                будто где-то был отрезан лишний пиксель
                                                                                будет приложение работать лучше, а вот за этой самой-самой красивой будет неудобным и медленным — я не думаю, что это заставит Вас петь дифирамбы суперэллипсам.
                                                                                  +2
                                                                                  Вы наконец объяснили что не так в иконках iPhone, всегда подозревал, что-то здесь не так, но всегда казалось/утешал что это обман зрения. А оказалось это просто сквирт,
                                                                                  Минус одна иллюзия.
                                                                                    0
                                                                                    справедливости ради, не у всех сквирт от этих иконок
                                                                                    +2

                                                                                    А прикиньте, что в CSS свойство border-radius задаёт именно радиус скругления угла окружностью. И нет никаких супер эллипсов, и все мы в вебе должны страдать. И разве можно это как-то исправить?

                                                                                      +1
                                                                                      Делать скругления гифками, как двадцать лет назад.
                                                                                        0
                                                                                        Сейчас можно накладывать максу обрезания в SVG. Веб спасён!
                                                                                        0

                                                                                        Если мне не изменяет память, гифки (и прочие костыли) использовали для поддержки ie6, потому что он косячил с прозрачностью png. А для нормальных браузеров таки предпочитали png, потому что, в отличии от gif, у него не один бит на прозрачность.


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

                                                                                        0
                                                                                        Неа, там аппроксимация окружности кривыми Безье.
                                                                                        0
                                                                                        а вот генератор )
                                                                                        squircley.app

                                                                                          +4
                                                                                          Не дан ответ на загадку века: тот самый прямоугольник со скруглёнными углами, за который Apple семь лет судилась с Samsung, — это сквёркл или подделка?
                                                                                            0
                                                                                            Разница заметна только если приглядеться к первому ряду пикселей (лучше — приблизить). Тогда явно видно, что градиент от общего фона к фону кнопки горазда более плавный (если смотреть по касательной к фигуре вдоль одной из осей).
                                                                                            Наверное, в этом суть «ощущения» — кто-то ловит не приближая.
                                                                                              0
                                                                                              У труъ эпплдрочера даже от иконок происходит множественный сквиртл.

                                                                                              Стоит отметить мастерство маркетологов эппла: внушить стаду барашков, что они станут более исключительными, если купят за 100500 денег эпловские товары и присоединятся к экосистеме эпла — это надо очень уметь в маркетинг.
                                                                                                +1
                                                                                                так маркетинг бы не сработал, если б техника действительно не была б лучше, с точки зрения той же эргономики. Фризы, тормоза, люфты, мелькание экрана, отсутствие дизайна и вменяемого интерфейса это действительно раздражает. Другие производители не могут предложить подобного, а если предложат, то стоить это будет столько же
                                                                                                  +1
                                                                                                  Проблема с вашим утверждением — в том, что вы исходите в нем из того, что технические пользовательские свойства являются единственным и универсальным критерием при выборе. Это, очевидно, не так, и доказывает это, например, существование имитации айфонов, которые ужасно работают, как телефоны, но, тем не менее, их покупают, потому что задача, которую перед ними ставят покупатели — не столько выполнять функции телефона, сколько служить имитацией статусного аксессуара. Статусные аксессуары — реальность (и это не только продукция Apple), и они вовсе не обязаны быть высокого качества, достаточно быть приемлемого качества.
                                                                                                0

                                                                                                Ждём-с на интервью по программированию!
                                                                                                Теперь вместо stackoverflow: How to draw circle будет How to draw squircle!

                                                                                                  +1
                                                                                                  Все элементы в iOS, это не квадраты и прямоугольники — это суперэллипсы!

                                                                                                  Тут по-моему кто-то врёт. Проблема в том, что если нарисовать прямоугольник суперэллипсом (например a=40, b=10), то закругление будет вытянуто, так же как если бы вы указали разные радиусы у border-radius через слэш, например
                                                                                                  border radius: 16px / 4px


                                                                                                  И вообще не-совсем понятно как рисовать «ровные» (близкие к скругленным прямоугольниам) суперэллипсы с разными сторонами. Наверное это уже будут не суперэллипсы.
                                                                                                    +4
                                                                                                    И нет бы кто заметил, что иконки — говно. Кстати, когда Apple отказалась от скевоморфизма, даже фанаты были в ступоре от новых значков. А теперь это дизайном зовётся. Всякие material-дизайны туда же.
                                                                                                      0
                                                                                                      «И почему HomePod — это суперяйцо» звучит эвфемистично

                                                                                                      image

                                                                                                          +3

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

                                                                                                            0

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

                                                                                                            0
                                                                                                            Совместил картинки в фотошопе — сошлись идеально
                                                                                                              +2
                                                                                                              Помнится, когда самсунг выпустил амолед экраны, куча людей заходилась истерикой «я на амоледе вижу лесенку, он овно, а IPS — он крутой»…

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

                                                                                                              В данной же статье я специально взял первый пример, повернул его на 90 градусов и сравнивал «сведением», когда глазами накладываешь одну картинку на другую, и дифф между ними сразу виден в виде особых артефактов.
                                                                                                              Учитывая, что размер на экране ноута явно раза в два больше, чем реальный на телефоне, я всё равно разницы не увидел.
                                                                                                              С лупой — да, можно найти, или увеличив ещё раза в 2-4. Но если вам необходимо включить телефон, найти кнопку вызова и запустить приложение, вы не останавливаетесь, рассматривая изгибы округлостей иконок. Вы на них просто нажимаете.
                                                                                                              И учитывая нонешнее разрешение экранов смартфонов, я думаю, разницу в менее, чем 5 пикселей я, например, и не увижу.
                                                                                                              К чему я это всё? Всю статью можно было описать в два абзаца. «Эппл вместо скругления углов использует форму, которая при большом увеличении выглядит более эстетичной». Ну и во втором абзаце — собственно описание формулы.

                                                                                                              Only users with full accounts can post comments. Log in, please.