Тактилното завръщане: дълбочина, стъкло и физическа обратна връзка в модерния потребителски интерфейс
Защо дълбочината, полупрозрачността и физическото движение се завръщат в дизайна на потребителския интерфейс след плоския дизайн, какво промениха Liquid Glass на Apple и Material 3 Expressive и как да го поддържаме използваем.
Ядро за вкъщи
След десетилетие на плосък дизайн, дълбочината и физическата обратна връзка се завръщат. През 2025 г. Apple представи Liquid Glass, полупрозрачен материал за управление и навигация, а Google представи Material 3 Expressive, подкрепен от изследвания за по-емоционален дизайн. Използвана добре, дълбочината показва какво е интерактивно, а движението потвърждава действията; използва се небрежно, полупрозрачността намалява контраста и вреди на четливостта.
Какво се промени през 2025 г
На 9 юни 2025 г. Apple обяви най-широката си актуализация на софтуерния дизайн, изградена около нов материал, наречен Liquid Glass. Той е полупрозрачен, отразява и пречупва това, което е зад него, и се простира в iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 и tvOS 26. Междувременно Google описва Material 3 Expressive като своята най-проучена актуализация на дизайнерската система, базирана на 46 проучвания с повече от 18 000 участници. Google съобщава, че участниците са забелязали ключови елементи на потребителския интерфейс до четири пъти по-бързо в изразителния дизайн и това предпочитание е било най-силно, до 87%, сред 18- до 24-годишните.
Дълбочина с работа за вършене
Указанията на Apple са специфични за това къде принадлежи материалът: Liquid Glass формира функционален слой за контроли и навигация, който плава над съдържанието и не трябва да се използва в самия слой със съдържание. Това е полезният принцип зад цялата тенденция: дълбочината трябва да обяснява структурата, като отделя това, върху което можете да действате, от това, което четете.
Цената за използваемост
Не всички са убедени. Nielsen Norman Group твърди, че Liquid Glass в iOS 26 затъмнява съдържанието и че всичко, поставено върху нещо друго, става по-трудно за виждане, особено текст върху натоварен фон. Практическият урок е, че полупрозрачността се нуждае от парапети: тествайте контраста върху реално съдържание, увеличете размазването или непрозрачността зад текста и поддържайте системните настройки за намалена прозрачност и увеличен контраст.
Физическата обратна връзка е трайната част
Визуалните тенденции идват и си отиват, но физическата обратна връзка продължава, защото помага на хората. Бутон, който се компресира леко при натискане, лист, който следва пръста и се установява с пружина, или превключвател, който щраква на място, всички потвърждават, че е регистрирано действие. Spring physics е естественият инструмент за това, защото реагира на прекъсванията и скоростта на жестовете по начина, по който го правят реалните обекти.
Как да го приемем внимателно
Започнете с обратна връзка, не с декорация:
- Добавете обратна връзка при натискане, плъзгане и освобождаване към контролите, които хората използват най-често.
- Използвайте наслояване и сенки, за да отделите контролите от съдържанието.
- Проверете контраста на текста върху всяка полупрозрачна повърхност.
- Спазвайте настройките за намалено движение, намалена прозрачност и увеличен контраст.
- Поддържайте ефектите последователни чрез жетони за движение и повдигане.
Ключове Principle, които трябва да запомните
- Apple представи Liquid Glass през юни 2025 г.; Google представи Material 3 Expressive
- Дълбочината работи, когато разделя контролите от съдържанието
- Полупрозрачността може да навреди на контраста и четливостта; тест с реално съдържание
- Физическата обратна връзка (натискане, плъзгане, пружиниране) е трайната част от тенденцията
- Уважавайте намаленото движение, намалената прозрачност и увеличения контраст
Често задавани въпроси
Източници
- Apple introduces a delightful and elegant new software design — Apple Newsroom (9 юни 2025 г.)
- Materials — Указания за човешкия интерфейс на Apple
- Liquid Glass Is Cracked, and Usability Suffers in iOS 26 — Nielsen Norman Group
- Expressive Design: Google's UX Research — Google дизайн