Liquid Glass и цикличность в UI-дизайне

от автора

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

Опять история, скевоморфизм

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

Macintosh System and Finder

Macintosh System and Finder

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

Microsoft Bob

Microsoft Bob

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

iPhone OS 1.0

iPhone OS 1.0
Заметки iPhone

Заметки iPhone

2000, Aqua

В начале тысячилетия Apple проводила масштабную революшн в macOS. Сильно изменился и стиль, ставший соответствовать тогдашним моделям компьютеров – Aqua. Вместо серых интерфейсов из 90х, характерных для WIndows и Mac, в UI стали присутствовать стеклянные прозрачные элементы.

Mac OS X 10.0 Cheetah с интерфейсом Aqua

Mac OS X 10.0 Cheetah с интерфейсом Aqua
Aqua-кнопочка

Aqua-кнопочка

2006, Aero

Такое ответвление скевоморфизма как Frutiger Aero появился и раньше, но стал более массовым после внедрения в Windows Vista в 2006 и позже в 7. Прозрачным и стеклянным стало уже куда больше элементов, например, сами окна. Это было футуристическое направление в графическом дизайне, символизирующее единение технологий с природой. Максимально ударялись в такое единения уже производители Android-смартфонов в начале 10х, например Samsung и LG, у которых всё булькало и светилось как, например, в оболочке Touch Wiz Nature UX. При этом чистый Google’овский Android был очень даже плоским и минималистичным давно.

Windows Vista с интерфейсом Aero

Windows Vista с интерфейсом Aero
Android 4 с интерфейсом Samsung TouchWiz

Android 4 с интерфейсом Samsung TouchWiz
Android 4 с интерфейсом Holo

Android 4 с интерфейсом Holo

2009, интерфейсы будущего, Metro

Microsoft неймётся и порой, если посмотреть на их хронологию изменений дизайна цифровых продуктов, можно заметить кашу, т.к. они часто делали прогрессивные шаги и уже в уже 2009, почти в одно время со стеклянной Windows 7, в своём плеере Zune HD они делают UI в абсолютно другом стиле – Frutiger Metro. Здесь уже никакого объёма, природы и реальных объектов – всё максимально просто, строго, плоско и тоже стильно. Позже этот стиль внедрится и в Windows Phone, Windows 8 и Xbox.

Zune HD

Zune HD

Metro использует текст в качестве основной формы навигации с минимумом иконок и иллюстраций. Без накрученных стилистик в UI лучше акцентировалось внимание на информации, которую мы считываем для прохождения UX-сценариев. Это было неизбежное течение, т.к. пользователи с компьютерами уже на Ты и ставить иконки песочных часов им не нужно, для понимания достаточно многоточия, а для обозначения кнопок достаточно обводки или заливки, а не всего сразу, с прозрачностями и тенями. В 10х годах похожему подходу подверглись все основные ОС, сайты, сервисы и приложения, например, Android Holo, позже iOS 7 и Google Material Design.

Windows Phone 7 с интерфейсом Metro

Windows Phone 7 с интерфейсом Metro

2013, iOS 7

Масштабный плоский редизайн добрался и до Apple в iOS 7 в 2013, а позже и в macOS. Теперь плоские все, везде акцент на контенте, а интерфейс лишь является посредником, не требующий накрученных стилистик.

iOS 7

iOS 7
Заметки iOS 7

Заметки iOS 7

2017, Fluent

В мае 2017 года на конференции Microsoft Build 2017 был представлен стиль Microsoft Fluent Design. Тут я и начал чуять что-то ностальгическое. Windows 10 тогда приблизилась по визуалу к тому, что сейчас имеем в Windows 11, но до этого момента она была скрее как Windows 8.

Windows 11 с интерфейсом Fluent

Windows 11 с интерфейсом Fluent

2025

И опять Apple на WWDC 25 делает тренд, который вводила Microsoft несколько лет назад и называет его Liquid Glass. Только, если редизайн сделали Apple, этот тренд достигнет теперь уже небывалых масштабов.

Nowadays

Сейчас всё выглядит как шаг назад. Особенно это видно по иконке камеры в iOS 26. которая чертовски напоминает такую из iOS 6. Всё время до Windows 11 и современной iOS индустрия стремилась к максимальному упрощению и выставлению правильных акцентов на функциях и контенте в интерфейсах. Мы видели, как иногда постепенно, а иногда резко в разных версиях всех ОС уменьшалось колличество стилистик на элелементах, потому что они не являются главным. Главным является контент / информация, которую мы просматриваем, редактируем, создаём, уже зная, где какая кнопка находится. Лишь первые разы мы учимся ориентироваться в приложениях, после чего, внимание заостряется на контенте внутри сервися, которым пользуемся. Все красивости и стеклянные поверхности лишь ухудшают читаемость и мешают быстро пройти нужный сценарий.

Когда способ взаимодействия со смартфонами / ПК всё ещё не изменился, такие изменения выглядят как попытка что-то поменять просто, чтобы было и потому что это свежее выглядит для многих. Упрощение и минимализм что раньше, что сейчас обосновываются лучшим практическим использованием акцентов. Apple на своей презентации Liquid Glass обосновывает тем, что устройства стали powerful и можно сделать beautiful. Никакого практического обоснования таким изменениям в дизайне нет.

Обоина идеально под

Обоина идеально под


ссылка на оригинал статьи https://habr.com/ru/articles/917296/


Комментарии

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *