У iOS есть материалы (или эффекты размытия), которые создают полупрозрачный эффект, который можно использовать для создания ощущения глубины. Эффект материала позволяет вьюшкам и контролам как бы подсказывать, что есть какой-то контент на фоне, не отвлекая юзера от контента переднего плана. Чтобы создать этот эффект, материалы позволяют информации о цвете фона просачиваться через вью переднего плана, а также размывать фоновый контекст для сохранения разборчивости переднего плана (ниже примеры).
Когда вы используете материалы, встроенные в систему, ваши элементы отлично смотрятся в любом контексте, потому что эти эффекты автоматически адаптируются к светлым и темным темам.
<aside> 📌 Материалы требуют наличия вью визуального эффекта в иерархии вьюшек для создания эффекта размытия (эта информация больше для разработчиков).
</aside>
Пример вьюшек с визуальным эффектом для создания эффекта размытия
Руководствуйтесь материалами, используемыми системой. По возможности, сравнивайте свои кастомные вью с системными вьюшками, которые дают аналогичную функциональность и используют одни и те же материалы.
Воспользуйтесь преимуществами системных цветов для текста, заливок, иконок и разделителей. Системные цвета автоматически конвертируют эти элементы, которые прекрасно смотрятся на полупрозрачном фоне.
По возможности используйте иконки SF. Когда вы используете систему динамического-цвета для заливки иконки или применяете к нему эффект насыщенности цвета (когда усиляется сочность цветов), иконка отлично смотрится в любом контексте. И напротив, полноцветные картинки могут не иметь достаточного контраста с фоном и могут показаться неуместными при использовании внутри вью с полупрозрачным фоном.
Пример эффекта насыщенности цвета (vibrancy)
<aside> 📌 От автора: в этом блоке информация и ссылки, которые ведут на документацию с кодовой базой, что в свою очередь мало полезно дизайнерам. Общее правило из остатка материала можно описать следующим образом: при работе с материалами (напоминаю, что это про эффект размытия) и эффектом насыщенности нет строгих правил, кроме рекомендаций:
</aside>
В iOS есть конкретные материалы, которые вы можете использовать в определенных областях, чтобы контролировать визуальное разделение контента переднего плана и того, что будет фоном. Материалы, которые вшиты в систему, уже включают как светлую, так и темную темы, которые хорошо работают на большинстве фонов.
<aside> 📌 От автора: данные “конкретные” материалы непонятно как использовать дизайнеру-новичку (из-за нехватки опыта), а более опытному (напр. мидлу) нужно будет погружаться в код, поэтому я опущу это в переводе намеренно. Делаю это потому, что более опытные пойдут сразу общаться к разработчикам про каждый уровень прозрачности и его название/назначение тет-а-тет в зависимости от контекста. Новичку же лучше разобраться с общей базой проектирования мобильных приложений под iOS и больше общаться с разработчиками тогда, когда захочет использовать размытие, как основну для построения всего интерфейса.
</aside>
iOS 13 также имеет конкретные значения для эффекта насыщенности (Vibrancy) для лейблов, заливок и разделителей, специально разработанных для работы с каждым материалом. Этот эффект осветляет или затемняет элементы интерфейса, беря цвет фона и изменяя его насыщенность и значение. При использования эффекта Vibrancy элементы интерфейса лучше интегрируются с материалами и усиливают эффект прозрачности.
У лейблов и заливов есть несколько уровней насыщенности; разделители же имеют один уровень насыщенности для всех материалов. Названия уровней указывают на относительную контрастность между элементом и фоном: уровень по умолчанию имеет наибольший контраст, в то время как четвертичный (если он существует в вашем дизайне) имеет наименьший контраст.
Корректируйте эффект насыщенности на основе его смыслового значения. Избегайте смешивания этих эффектов; например, не используйте эффект метки для разделителя.