Как Apple использует Soft-UI: дизайн будущего

Автор Павел Сумцов 17:30 04.07.2020
- 1 +  8 888 5
Как Apple использует Soft-UI: дизайн будущего

UI-дизайнер Михал Малевич (Michal Malewicz) проанализировал изменения в интерфейсе macOS Big Sur, чтобы показать, куда движется отрасль. По его мнению, Apple взяла курс на Soft-UI.

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

Что такое Soft-UI?

Источник: dribbble

Это новый тренд в создании пользовательских интерфейсов. Он использует тени и блики, чтобы создать эффект, будто объекты выдавлены или наоборот вдавлены в экран.

Soft-UI также называют ньюморфизмом и неоморфизмом. Полагается, что название стиля произошло от сочетания слов «новый» и «скевоморфизм». Его мы тоже коснёмся, но чуточку позже.

Куда всё идет?

Сосредоточимся на том, как изменялся пользовательский интерфейс macOS. Он прошёл через первые растровые представления, затем был стиль Aqua, потом более современные стили и, наконец, всё собрано в совершенно новом последовательном языке дизайна.

Основные стили дизайна Mac OS

Изменения в мобильных и настольных ОС показывают, как стиль дизайна работает сейчас лучше всего. Михал предполагает, что Soft-UI останется фаворитом до появления морфинговых дисплеев, способных создавать рельефные кнопки из плоской поверхности дисплея.  

Это подтверждает Fluent UI от Microsoft. Дизайнер отмечает сходство стилей Apple и Microsoft, вспоминая, как Apple высмеивала сходство Windows Vista с OS X.

Для примера, вот последовательный «разгром» Windows Vista на презентации WWDC 2006 года. А спустя 14 лет Apple перенимает веяние дизайна у Microsoft. Такие дела.

А теперь перейдём к конкретным проявлениям Soft-UI в macOS.

Больше закруглённых углов

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

Первые версии iPhone OS (да, она называлась именно так) включали довольно квадратные переключатели и панели. Но острые углы выглядят более пугающими и менее дружелюбными.

Слева — первые версии iPhone OS. Справа — более современное исполнение тумблеров

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

Скриншот из macOS Big Sur

Но на этом в компании не остановились и также изменили угловой радиус значков. Теперь похожий стиль иконок приходит на macOS.

Окна, панели и страницы запросов действий (Action sheet) также немного округлились. Причём не без помощи iPhone X.

UI соответствует закруглению дисплея

Вы же заметили, что после «десятки» почти все последующие iPhone получили дисплей с закруглёнными углами. Линейка iPad Pro пошла в ту же сторону. Вот и интерфейс iOS и iPadOS округляется, чтобы соответствовать.

В общем, округлые углы тут явно надолго.

Прозрачность и размытие фона

Домашний экран iOS 6
Домашний экран iOS 7

Большинство пользователей невзлюбило ультраминимализм в сочетании со сверхтонкими шрифтами в iOS 7. Но релиз этой ОС принёс большую популярность размытию фона и прозрачности.

Так выглядит боковая панель
Так выглядят подсказки

Теперь размытие фона становится заметнее как на боковой панели, так и во всплывающих подсказках. Позволяя частям фона просвечивать, размытие фона показывает, что конкретная часть окна «связана» со всей ОС. Особенно хорошо этот трюк работает с боковой панелью.

У Microsoft похожий подход к использованию прозрачности. Он основан на слоях.

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

Михал сомневается в таком исполнении и считает, что сплошной цвет сделает разделение более чётким.

Унифицированные иконки (отчасти)

Михал считает, что переход к унифицированным иконкам будет постепенным. Apple хотела сохранить достаточно «реализма» в стиле иконок для macOS, но в то же время приблизить его к мобильной ОС.

Вот как изменился значок Finder:

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

Значки панели инструментов macOS также становятся более единообразными со значками iOS и iPadOS. Стиль иконок снова округлен, дружелюбен и открыт. Штрихи достаточно толстые, чтобы их было легко понять, а сами иконки не имеют лишних украшений.

Скевоморфизм?

macOS оставалась одним из последних бастионов скевоморфных элементов. Теперь они собраны в ньюморфизм и объединены с современными плоскими поверхностями. Это придаёт ОС новый современный облик, но также сохраняет её собственный стиль.

Михал считает, что сейчас macOS в середине пути перед более масштабным редизайном, направленным на минимализм.

Кардинальных изменений в интерфейсе macOS не происходит, чтобы избежать опыта с iOS 7. Да, в новой версии ОС сильно преобразится, но она берёт уже знакомые элементы из iOS и iPadOS.

Справка: скевоморфизм в интерфейсах проявляется в копировании внешнего вида настоящих объектов. За пример возьмём молоток на иконке Xcode или заметки в iOS 6, которые напоминали настоящий бумажный блокнот.

Вывод

В предыдущих релизах macOS появились «тёмный режим» и шрифт San Francisco с мобильных ОС. Теперь система Apple Design близка к согласованности на всех своих платформах.

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

Подписывайтесь на Rozetked в Telegram, во «ВКонтакте» и обязательно в YouTube.
Хабы: apple

17.08.2020
Презентация iQOO 5
22.08.2020
DC FanDome
02.09.2020
Презентация Intel
03.09.2020
IFA 2020
03.10.2020
​​Comic Con Russia 2020
13.08.2020
Премьера «Довод»
20.08.2020
Премьера «Мулан»
20.08.2020
Премьера «Поезд в Пусан 2: Полуостров»
05.11.2020
Премьера «Чёрная Вдова»
16.12.2021
Премьера «Аватар 2»
Все события


Реклама на сайте



Комментарии

  1. Привет! Извиняюсь, что совершенно не по теме, но, кажется, это единственное место, где с вами можно связаться.

    Я тут попытался опубликовать на сайте один материал, тоже перевод. Когда нажал «Сохранить», абсолютно всё форматирование, включая абзацы и фотографии, слетело, а теперь статья вообще удалена. С этим можно что-нибудь сделать?
    - 0 +
    1. Добрый день! У нас есть блок контактов на сайте. Напишите на [email protected] У нас для гостей закрыт доступ на публикации.
      - 0 +
  2. Если так подумать, то неоморфизм, это новый и улучшенный вариант скеврморфизма. Однако как мы знаем он имитировал реальные объекты мира (дерево, металл, бумага) и если мы посмотрим детальнее то увидим старый добрый material design. Который по сути и построен на принципе карточек, а тени и цвет помогают отделять функциональные слои. И никакого размытия. Хотя конечно это красиво и в материал его не хватает. Ибо на тенях и цвета далеко не уедешь.
    - 0 +
  3. Неоморфизм красив и интересен, но его в принципе нереально встроить в пользовательский интерфейс. А даже если это и сделают, мы услышим волну негативной критики в сторону создателей, ибо это неудобно и непрактично.
    - 0 +
    1. Его можно сочитать с карточным дизайном, что даст неплохой результат. Сейчас только все зарождается и со временем будет перестроено и улучшено.

      Так же многие элементы взяты со старого дизайна. Но раньше тени были грубее, цветов меньше, поэтому неоморфизм можно встроить при желании уже сейчас
      - 0 +
17.08.2020
Презентация iQOO 5
22.08.2020
DC FanDome
02.09.2020
Презентация Intel
03.09.2020
IFA 2020
03.10.2020
​​Comic Con Russia 2020
13.08.2020
Премьера «Довод»
20.08.2020
Премьера «Мулан»
20.08.2020
Премьера «Поезд в Пусан 2: Полуостров»
05.11.2020
Премьера «Чёрная Вдова»
16.12.2021
Премьера «Аватар 2»
Все события


Реклама на сайте