Дизайн тренды постоянно меняются, не так ли? Каждый месяц появляется новый визуальный эффект или трюк, который становится «самой горячей фишкой». Но этот пост не об этом. Мы можем поспорить, глубокие тени удобны для пользователя, градиенты горячие или нет, нейморфизм убийца доступности, или каждый маленький элемент нашего дизайна должен быть плоским (как наша любимая мать-земля, верно?).
Моя точка зрения - до тех пор, пока это доступно, до тех пор, пока это полезно, до тех пор пока пользователь это понимает - все нормально.
Используйте все тренды, которые вы хотите, и получайте удовольствие от того что делаете. Если бы каждый цифровой продукт выглядел одинаково это было бы ужасно скучно.
Ключевое - стиль продукта должен соответствовать вашим пользователям.
Лично я обожаю все, что сделано с красивыми тенями и градиентами. Они заставляют интерфейсы выглядеть живыми и привлекательными. Элементы с тональными переходами и тени имитируют то, что мы воспринимаем в реальной жизни и именно поэтому они более дружелюбны и понятны даже для пользователей, не разбирающихся в технологиях.
В этой статье я хочу поделиться своими способами достижения хороших эффектов пользовательского интерфейса и общего визуального ощущения легкого, дружественного дизайна интерфейса. В качестве примера я создал фальшивое «Финансовое приложение для подростков / молодых людей».
Общая визуальная согласованность
Как сделать наш дизайн красочным и согласованным? Начните с подготовки этого:
- Выберите цвета, которые вы хотите использовать (вспомните нежные пастели для фона, CTA, который будет очень контрастным цветом, более нежные цвета для второстепенных элементов и поп-цвет для акцентов).
- Выберите шрифт, который вы хотите использовать (Я использовал Brandon Grotesque, который является одним из моих любимых шрифтов - у него такая дружелюбная, игривая атмосфера, и он читается одновременно). Создайте несколько размеров шрифта (желательно до 5 и не превышать этот предел) - больший размер для заголовков и подзаголовков, меньший для контента, наименьший для наименее важных деталей. Вы можете смешивать строчные и прописные (старайтесь не использовать заглавные буквы в длинных предложениях, потому что это может отрицательно повлиять на читабельность - на кнопках это выглядит лучше всего).
- Решите, насколько глубокими / размытыми должны быть ваши тени.
- Если вы используете значки, решите, хотите ли вы использовать сплошные или контуры. Старайтесь не смешивать их.
К настоящему времени вы создали свою маленькую дизайнерскую систему. Как круто!
Теперь вы должны придерживаться этого.
Достижение этой мягкой, мечтательной атмосферы на элементах
При разработке интерфейса помните, что острые края делают интерфейс более серьезным и «профессиональным». Закругленные углы работают противоположным образом интерфейс выглядит менее серьезным, игривым и беззаботным.
То, что делает наш дизайн нежным и легким, это гладкие глубокие тени. Когда мы добавляем тени к элементам, мы создаем визуальную иерархию. Предметы, которые отбрасывают большую, более глубокую тень, - это те, что ближе к нам. Элементы, которые отбрасывают тонкую, легкую тень, - это те, которые находятся ближе к поверхности. Вот почему только несколько элементов должны отбрасывать глубокую тень, а остальные должны работать в качестве фона - в любом другом случае это будет выглядеть неестественно!
Выберите элемент и дайте ему эффект размытия. Не бойся и играй с числами. Вот мои различные элементы, которые я использовал в своем интерфейсе:
Если вы хотите, чтобы ваши тени выглядели еще более причудливыми, сделайте тень того же цвета, что и элемент, который ее отбрасывает, затем уменьшите непрозрачность. В идеале фон тоже должен иметь похожий тон.
Делаем градиенты более гладкими и нежными
Чтобы градиенты выглядели хорошо, я выбрал противоположные цвета из той же цветовой палитры. Это может быть даже тот же цвет, но сделайте один из цветов ярче и добавьте к нему немного оттенка (H) (от 5 до 10 баллов). Теперь растяните якоря градиента, чтобы переход цвета стал очень плавным. Градиент будет едва заметен, но все равно заставляет элемент выглядеть немного выпуклым.
Для белых элементов создайте градиент, используя белый и очень нежный цвет, соответствующий фону. Просто убедитесь, что он достаточно контрастный и не смешивается слишком много.
Выберите правильный цвет для шрифта, чтобы он соответствовал фону.
Черный и монохромный оттенки серого - это классические цвета шрифта, используемые для содержимого, но чтобы шрифт визуально соответствовал фону, добавьте шума в цвет. Например, если у нас есть зеленый фон, добавьте немного серого в зеленый. Это будет выглядеть намного более смешанно!
Подумайте о мелких деталях, которые сделают ваш проект более привлекательным.
Они могут быть не нужны вообще. Вы можете также пропустить это, и ваш дизайн тоже будет в порядке. Но лично мне нравятся все мелочи и детали, которые делают интерфейс восхитительным и привлекательным. Мне нравится ощущение, что кто-то действительно приложил немного усилий и добавил немного «лишнего» в дизайн.
Так что же это может быть?
Предположим, у вас есть скучная форма, которая работает в качестве заголовка для вашего интерфейса. Сделайте его округленным и добавьте маленький треугольник. Теперь это похоже на речевой пузырь. Таким образом, интерфейс визуально говорит с вами.
Простой белый фон? Добавьте что-нибудь, что сделает его более интересным. Это может быть простой значок, который вы скопировали и вставили несколько раз и создали шаблон. Просто убедитесь, что это не делает контент менее читабельным.
Скучные данные? Сделайте список транзакций похожим на небольшую квитанцию на временной шкале. Если вы можете, добавьте несколько значков для визуального представления различных типов информации.
Сделайте все, чтобы ваш интерфейс выглядел более креативно - возможности безграничны. Если у вас нет идеи, ищите вдохновение в реальных предметах и процессах.
Будьте настолько экстраординарны, что вы меняете цвета на аватаре пользователя, чтобы он соответствовал интерфейсу.
Этот шаг, скорее всего, совершенно не нужен, но я делаю это каждый раз, черт возьми. Я просто не могу с этим поделать.
Иногда я нахожу красивую фотографию лица для моего пользователя. Но цвет глаз или макияж не соответствуют остальному интерфейсу. Это расстраивает мою перфекционистскую душу. Поэтому я использую инструмент выбора цвета и беру некоторые цвета из интерфейса. Поэтому я использую инструмент выбора цвета и беру некоторые цвета из интерфейса. Скажем, зеленый для глаз, красный для губ. Я создаю формы для глаз и губ, чтобы они соответствовали тем, что на фотографии. Я их раскрашиваю, переключаю режим наложения на «Цвет» и уменьшаю непрозрачность до 50%.
Тада! Теперь аватар идеален.
Несмотря на стиль, который вы используете для своего интерфейса, согласованность, доступность и удобство использования являются наиболее важными факторами. Убедитесь, что ваш дизайн соответствует этим правилам, и используйте свое воображение для создания потрясающих, креативных, выдающихся интерфейсов, которые понравятся вашим пользователям!
Спасибо, что дочитали. Я надеюсь, что это было интересно и полезно!
Перевод статьи: How to Achieve Soft, Friendly and Consistent UI Design