Неоморфизм (Neumorphism) — это стиль, который сочетает минимализм и реалистичность в интерфейсах. Его отличительные черты — мягкие тени, плавные формы, пастельные цвета и сочетание выпуклых и утопленных элементов. Благодаря своей эстетике, этот подход часто используется в веб-дизайне для привлечения внимания и создания современной визуальной идентичности. В этой статье мы расскажем, как разработать дизайн в стиле неоморфизма и внедрить его в проекты.
1. Что такое неоморфизм?
Неоморфизм объединяет элементы минимализма и скевоморфизма, создавая эффект трёхмерности через использование теней и света. Вот его ключевые характеристики:
- Мягкие тени. Элементы интерфейса выглядят слегка приподнятыми или утопленными.
- Однородные цвета. Гладкие фоны с минимальными переходами.
- Пастельные оттенки. Используются мягкие, ненасыщенные цвета.
- Простота форм. Элементы, такие как кнопки и карточки, выполнены в округлённых формах.
Пример использования: в финансовых приложениях кнопки «Оплатить» или «Перевести» в стиле неоморфизма создают ощущение удобства и простоты.
Этот стиль подходит для интерфейсов, где важна визуальная лёгкость и минимализм.
Как разработать дизайн в стиле неоморфизма?
Шаг 1: Выберите цветовую палитру
Основой стиля являются светлые, пастельные оттенки. Фоновые элементы обычно выполнены в одном цвете, с более светлыми и тёмными оттенками для теней.
Пример палитры:
- Основной цвет: #E0E0E0
- Тёмная тень: #C8C8C8
- Светлая тень: #FFFFFF
Шаг 2: Создайте базовые формы
Используйте простые геометрические фигуры — прямоугольники с закруглёнными углами, овалы или круги. Радиус закругления границ может варьироваться от 8 до 20 пикселей.
Шаг 3: Настройте тени
Для создания эффекта неоморфизма добавьте одновременно светлую и тёмную тени:
- Внешняя тень (тёмная): 6px 6px 12px #C8C8C8.
- Внутренняя тень (светлая): -6px -6px 12px #FFFFFF.
Пример CSS-кода:
.box {
background: #E0E0E0;
border-radius: 12px;
box-shadow: 6px 6px 12px #C8C8C8, -6px -6px 12px #FFFFFF;
}
Шаг 4: Добавьте контраст
Для текстов и иконок используйте тёмные оттенки серого или чёрного, чтобы улучшить читаемость.
Шаг 5: Интерактивные элементы
Для кнопок добавьте эффект при наведении, меняя тени на внутренние:
.box:hover {
box-shadow: inset 6px 6px 12px #C8C8C8, inset -6px -6px 12px #FFFFFF;
}
Реализация неоморфизма
Инструменты для дизайна:
- Figma или Adobe XD: подходят для создания макетов с использованием теней и градиентов.
- CSS3: позволяет создавать эффекты прямо в браузере.
Пример кнопки в стиле неоморфизма
HTML:
<button class=»neumorphism-btn»>Кнопка</button>
CSS:
.neumorphism-btn {
background: #E0E0E0;
border: none;
border-radius: 20px;
box-shadow: 6px 6px 12px #C8C8C8, -6px -6px 12px #FFFFFF;
color: #555;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.neumorphism-btn:hover {
box-shadow: inset 6px 6px 12px #C8C8C8, inset -6px -6px 12px #FFFFFF;
}
или
/* Основной фон страницы */
body {
background-color: #ECECEC;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* Неоморфический элемент */
.button {
width: 200px;
height: 60px;
background: #ECECEC;
border-radius: 30px;
box-shadow:
6px 6px 12px #C4C4C4, /* Тёмная тень */
-6px -6px 12px #FFFFFF; /* Светлая тень */
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #333;
cursor: pointer;
transition: 0.3s ease-in-out;
}
/* Эффект нажатия */
.button:active {
box-shadow:
inset 6px 6px 12px #C4C4C4,
inset -6px -6px 12px #FFFFFF;
}
Что здесь происходит?
- box-shadow создаёт эффект теней.
- inset используется для теней при нажатии (они становятся «внутренними»).
- border-radius закругляет углы элемента.
Основные стили страницы
css
body {
background-color: #ECECEC; /* Устанавливает фоновый цвет страницы */
display: flex; /* Активирует flexbox для выравнивания элементов */
justify-content: center; /* Выравнивает содержимое по центру по горизонтали */
align-items: center; /* Выравнивает содержимое по центру по вертикали */
height: 100vh; /* Устанавливает высоту страницы на 100% высоты видимой области */
margin: 0; /* Убирает отступы */
}
Комментарии:
— `background-color` задаёт серый цвет фона.
— `display: flex` позволяет выравнивать дочерние элементы внутри `body`.
— `justify-content` и `align-items` центрируют содержимое.
— `height: 100vh` делает высоту страницы равной 100% высоты экрана.
— `margin: 0` убирает стандартные отступы у body.
Неоморфический элемент (кнопка)
css
.button {
width: 200px; /* Ширина кнопки */
height: 60px; /* Высота кнопки */
background: #ECECEC; /* Фоновый цвет кнопки */
border-radius: 30px; /* Закругление углов кнопки */
box-shadow: /* Создание теней для эффекта неоморфизма */
6px 6px 12px #C4C4C4, /* Тёмная тень */
-6px -6px 12px #FFFFFF; /* Светлая тень */
display: flex; /* Включает flexbox для централизованного выравнивания текста */
justify-content: center; /* Центрирует текст по горизонтали */
align-items: center; /* Центрирует текст по вертикали */
font-size: 18px; /* Размер шрифта для текста кнопки */
color: #333; /* Цвет текста кнопки */
cursor: pointer; /* Меняет курсор на указатель при наведении */
transition: 0.3s ease-in-out; /* Плавный переход для изменений стилей */
}
Комментарии:
— Установка фиксированных размеров кнопки и фона.
— Свойство `border-radius` создаёт закруглённые углы.
— `box-shadow` добавляет тени для создания эффекта объёма.
— Flexbox используется для центрирования текста внутри кнопки.
— `transition` позволяет гладко изменять стили при взаимодействии.
Эффект нажатия
css
.button:active {
box-shadow:
inset 6px 6px 12px #C4C4C4,
inset -6px -6px 12px #FFFFFF; /* Внутренние тени при нажатии */
}
Комментарии:
— Когда кнопка нажата (`:active`), тени становятся внутренними (`inset`), создавая визуальный эффект углубления.
Этот код стильного дизайна с использованием неоморфизма создаёт визуально привлекательный интерфейс, с акцентом на кнопке, которая выглядит «нажатой» при взаимодействии.
Полезные ресурсы:
- Neumorphism Generator: генератор CSS-кода для неоморфных теней.
- UI Kits: готовые наборы компонентов для быстрого создания дизайна.
Плагины и библиотеки
- Neumorphism Generator: онлайн-инструмент для генерации CSS-теней в стиле неоморфизма.
- UI Kits: используйте готовые наборы компонентов в стиле неоморфизма для ускорения работы.
Доработка и адаптация
Поддержка разных устройств
Убедитесь, что дизайн выглядит хорошо как на компьютерах, так и на мобильных устройствах. Используйте media queries:
@media (max-width: 768px) {
.button {
width: 150px;
height: 50px;
}
}
Этот код использует медиазапросы в CSS для изменения стилей элементов в зависимости от ширины экрана.
Объяснение:
- @media (max-width: 768px) — этот медиазапрос применяется, когда ширина экрана устройства составляет 768 пикселей или меньше. Это полезно для адаптации дизайна на мобильных устройствах или маленьких экранах.
- .button — это класс, к которому применяются указанные стили. Это стиль для кнопок на странице.
- width: 150px; — задает ширину кнопки 150 пикселей.
- height: 50px; — задает высоту кнопки 50 пикселей.
Итог:
При ширине экрана 768 пикселей или меньше кнопки с классом .button будут иметь размеры 150×50 пикселей.
Анимация
Добавьте лёгкую анимацию при наведении:
.button:hover {
box-shadow:
8px 8px 16px #C4C4C4,
-8px -8px 16px #FFFFFF;
}
Этот код — это фрагмент CSS, который применяется к элементам с классом `.button`, когда на них наводят курсор мыши (эффект `hover`). Вот разбор стилей:
- **`.button:hover`**: Это часть селектора указывает, что стили внутри фигурных скобок будут применяться к элементам с классом `button`, когда на них наведён курсор.
- **`box-shadow:`**: Это свойство позволяет добавлять тень к элементу. В вашем коде указано два значения для создания сложной тени.
- **`8px 8px 16px #C4C4C4`**: Это первая тень:
— `8px` — смещение по оси X (вправо).
— `8px` — смещение по оси Y (вниз).
— `16px` — радиус размытия (насколько тень будет размыта).
— `#C4C4C4` — цвет тени (светло-серый).
- **`-8px -8px 16px #FFFFFF`**: Это вторая тень:
— `-8px` — смещение по оси X (влево).
— `-8px` — смещение по оси Y (вверх).
— `16px` — радиус размытия (также размыта).
— `#FFFFFF` — цвет тени (белый).
Таким образом, при наведении курсора на элемент с классом `button` создаётся эффект тени, которая выглядит так, словно кнопка «поднимается» над фоном, обеспечивая визуальную обратную связь для пользователя.
Проверка и тестирование
- Тестирование на разных устройствах и браузерах: Проверьте, как элементы отображаются в Yandex. Chrome, Firefox, Safari и на мобильных устройствах.
- Проверка доступности: Убедитесь, что контраст достаточный для всех пользователей. Для этого используйте онлайн-инструменты, такие как Contrast Checker.
Преимущества и недостатки
Преимущества:
- Эстетичный и современный стиль.
- Простота восприятия.
- Хорошо подходит для минималистичных интерфейсов.
Недостатки:
- Низкая контрастность, что затрудняет использование людьми с нарушениями зрения.
- Ограниченная цветовая палитра.
- Потенциальные сложности с читаемостью на мобильных устройствах.
Рекомендация: добавляйте акценты или тонкие обводки для улучшения контрастности.
Советы по работе с неоморфизмом
- Не переборщите: используйте стиль для отдельных элементов, таких как кнопки или карточки.
- Следите за контрастностью: важные элементы должны быть чётко видимы.
- Тестируйте дизайн: проверяйте, как элементы выглядят на разных устройствах.
- Адаптируйте для мобильных устройств: используйте упрощённые тени для маленьких экранов.
Неоморфизм — это способ сделать ваш интерфейс современным и визуально приятным. Экспериментируйте с формами, тенями и цветами, чтобы найти идеальный баланс между эстетикой и функциональностью.
Примеры элементов, которые можно сделать в стиле неоморфизма: Для вдохновения
- Кнопки
- Представьте, вы заходите в мессенджер и видите большую выпуклую кнопку «Отправить». Она буквально кричит: «Нажми меня, и я всё сделаю за тебя!». Благодаря её объёмности, вы даже на секунду сомневаетесь: а вдруг она настоящая и на самом деле нажмётся?
- А как насчёт переключателя Wi-Fi? Если он утоплен, значит, интернет отключён — грусть и тоска. А если выпуклый — сигнал включён, и вы уже смотрите любимый сериал или отправляете мемы друзьям.
- Карточки
- Заходите в интернет-магазин, выбираете телефон. Каждая карточка товара выглядит так, будто её можно взять в руки: фото телефона слегка выпуклое, кнопка «Купить» выделяется. Вам остаётся только нажать — и телефон уже на пути к вам.
- Или представьте карточку в приложении погоды: утопленный блок показывает температуру, а выпуклая иконка солнца как бы говорит: «Наслаждайся теплом, пока можешь!»
- Иконки
- Иконка «Настройки» — та самая шестерёнка, без которой не обойтись. Сделайте её выпуклой, и она сразу начнёт выглядеть так, будто она настоящая и её можно покрутить.
- А если вы видите иконку «Домой» или «Профиль», то она должна как будто обнимать вас: «Не бойся, я всегда здесь, чтобы помочь тебе вернуться».
- Поля ввода
- Поле для ввода пароля, которое слегка утоплено, как бы подсказывает: «Секреты здесь в безопасности, только ты можешь их видеть». Вы вводите пароль, а оно смотрит на вас и молчит.
- Выпадающий список выбора страны в форме бронирования может быть выполнен так, будто он вежливо спрашивает: «Так куда же мы едем, в Париж или в Рим?».
- Слайдеры
- Представьте регулятор громкости. Вы видите утопленную дорожку и бегунок, который так и хочется сдвинуть: «Чуть тише, соседи уже стучат!».
- Или бегунок яркости. Утопленный фон говорит: «Сделай темнее, дай глазам отдохнуть», а выпуклый бегунок отвечает: «Нет-нет, включи свет, тут слишком темно!».
- Календарь
- Сегодняшняя дата выглядит выпуклой, будто напоминает: «Не забудь про встречу в 15:00!». А дни выходных — утоплены, как будто притворяются, что их не существует (но вы-то знаете, что они уже близко).
- Или календарь в приложении: утопленные дни недели, а выбранная дата выпуклая и сияет пастельным цветом, как будто говорит: «Я важная, отметь меня!».
- Подсказки и уведомления
- Уведомление о новом сообщении: небольшая карточка с закруглёнными углами и мягкой тенью. Кажется, что она парит в воздухе и тихо подсказывает: «Привет! Ты не забыл о своём друге?».
- Подсказка, которая всплывает над кнопкой «Купить», как бы поддразнивает: «А ты уверен, что тебе не нужны ещё наушники к этому телефону?».
- Переключатели
- Переключатель ночного режима выглядит так: в выключенном состоянии он утоплен и притворяется ненужным. Но стоит его включить, как он приподнимается, мягко загорается, и вам кажется, что ночь стала немного уютнее.
- Или представьте переключатель в умном доме: утопленный светильник выключен, а включённый слегка выпуклый, как будто извиняется за то, что потревожил вашу тишину.
- Шкалы прогресса
- Шкала выполнения задач в приложении для фитнеса: вы видите утопленную линию, которая постепенно заполняется выпуклым цветом. Кажется, что она говорит: «Ты молодец, продолжай в том же духе!».
- А шкала загрузки файла? Пока она не заполнилась, утопленный фон намекает: «Потерпи ещё немного». Но как только всё готово, выпуклая линия кричит: «Сделано!».
- Меню навигации
- Выпадающее меню: каждый пункт утоплен, как будто ждёт вашего выбора. Но стоит навести курсор, как он становится выпуклым и, кажется, даже улыбается: «Выбери меня, не пожалеешь!».
- А в приложении заметок активный пункт меню можно выделить лёгким свечением, чтобы вы сразу знали, где остановились.
История из жизни:
Представьте, вы пользуетесь приложением будильника. Утопленные цифры текущего времени выглядят, как встроенные в экран, а выпуклая кнопка «Отложить» будто специально кричит: «Давай, нажми на меня, и поспим ещё 5 минут!». Конечно, вы не удерживаетесь и нажимаете.
Или калькулятор: выпуклые кнопки цифр напоминают старые добрые кнопочные телефоны. Их так и хочется нажимать, чтобы вспомнить, как это было в детстве, когда считали на настоящем калькуляторе.
