Дизайн экрана мобильного приложения, веб-браузера или умных часов, является одним из важнейших факторов привлечения внимания пользователей.
Онур Орал проанализировал эволюцию трендов от Flat Design до Material Design и делиться своими наблюдениями — почему эти тренды в интерфейсах будут полезны для пользователя и как они создавались.
Давайте взглянем на то, как Flat Design и Material Design стали трендами в наше время.
Облегченный дизайн
Автор: Гхани Прадита
Вместо широкого спектра градиентов и теней, переход к плоскому дизайну создает легкую эстетику в приложениях. Это означает, что используя негативное пространство — вместо градиентов, теней и др — можно создать более простой интерфейс, ориентируясь только на наличие основной информации, устраняя элементы дизайна, которые не являются продуктивными для взаимодействия с пользователем.
Почему так
Облегченный дизайн устраняет отвлекающие элементы, помогая пользователю сфокусироваться на значимом контенте, что в свою очередь, позволяет упростить навигацию и придать бренду более изящный и современный вид.
Единый шрифт
Автор: Брайан Племонс
Уменьшение количества шрифтов на экране увеличивает силу типографики. Вместо использования нескольких шрифтов и различных характеристик — например, курсив, полужирный, жирный шрифт. Разные размеры одного шрифта могут лучше разграничить отдельные области контента.
Почему так
Использование единственного шрифта во всем приложении приведет не только к согласованности брендинга, но и всех каналов например, приложение, мобильный сайт, веб-сайт тем самым минимизировав элементы многоканального опыта. Кроме того, пользователи предпочитают простоту, имея один шрифт для прокрутки контент в поисках нужной информации.
Интервалы и блоки — больше никаких линий
Автор: Эрик Этвелл
В то время, когда линии и разделители использовались для четкого разграничения конкретных разделов или категорий на экране, добавление этих элементов приводило к уплотнению и перенасыщению интерфейсов. Отказ от использования линий и переход к интерфейсам, где контент сгруппирован по блокам и разделен интервалами, освобождает пространство и устанавливает визуальный порядок.
Почему так
Удаление явных линий и разделителей обеспечивает современный вид, делая акцент на функциональности: например — изображения и/или шрифты могут быть увеличены, обеспечивая четкость и улучшенную простоту использования. Использование интервалов вместо линий позволяет легко разграничить один раздел от другого.
Данные в центре внимания
Автор: Морган Аллан Кнатсон
Предпочтения пользователей сдвигаются в сторону более простого интерфейса, для выделения определенной информации все чаще используются большие шрифты и яркие цвета. Выделенные данные могут варьироваться в зависимости от целевой аудитории.
Почему так
Использование увеличенного размера шрифта или комбинации цветов обращает внимание пользователей к определенной области экрана. Поэтому не требуется навязчивого подталкивания к действию или команде. В результате, пользователи могут быстрее получить доступ к информации, за счет более простой навигации.
Микровзаимодействия
Автор: Кирилл
Микровзаимодействия — это небольшие визуальные улучшения (например — анимация, звук и т. д.), которые сосредоточенны вокруг взаимодействия с пользователем. Эти сценарии могут включать завершение сделки, оформление товара, или вызов всплывающего сообщения. Они малозаметны, но являются отличительной чертой продукта, акцентируя внимание пользователя на нужном элементе.
Почему так
Эти микровзаимодействия могут быть использованы в качестве сигнала для того, чтобы побудить пользователя к определенному действию при выполнении задачи — например, при настойке параметров — создают небольшой кусок контента, к примеру всплывающее сообщение. Приложения, имеющие хорошо сделанные микровзаимодействия, являются для пользователей более простыми, интересными и увлекательными.
Уменьшенная цветовая палитра
Автор: Ари
Использование более простых цветовых схем стало трендом после появления в 2013 году плоского дизайна, отличающегося своей ясностью и простотой. В результате, дизайнеры и пользователи предпочитают меньшее количество цветов, стремясь к визуальной гармонии.
Почему так
Использование цвета очень важно для создания определенного настроения, акцента внимания на определенном элементе. Используя меньшее количество цветов, образ бренда выражается более четко. Кроме того, пользователи могут предпочесть эстетику, так как она не отвлекает внимание, в отличии от большого скопление цветов. Также она подчеркивает ключевые особенности приложения, улучшая навигацию приложения.
Многослойный интерфейс
Автор: Роман Нурик
Раньше интерфейсы были сосредоточены вокруг принципа скевоморфизма — дизайна, подражающего определенной структуре или объекту. (например, цифровой календарь, напоминающий бумажный календарь, 3D «глубина» изображения иконки приложения, щелчок затвора мобильного телефона).
Теперь, когда плоский дизайн сместился подальше от этого принципа, открывается возможность создания глубины по-новому. В первую очередь, использование слоев помогает создать чувство глубины и объема, за счет достижения большего ощущения «реальности».
Почему так
Плоский дизайн всегда рисковал стать «слишком плоским». Как пользователь будет взаимодействовать с таким утонченным дизайном, перенеся свой опыт взаимодействия с физическим трехмерным миром? Слои дают возможность показать один элемент поверх другого, в полной мере воспользовавшись вертикальной осью. Слои и увеличение глубины позволяют выявить связь между различными пунктами меню, и обратить внимание на определенные вещи.
Призрачные кнопки
Автор: Глеб Кузнецов
Призрачные кнопки — прозрачные кнопки, не имеющие цвета заливки. Их границы очень тонкие, форма простая (прямоугольная или квадратная), с прямыми или закругленными углами. Текст в этих кнопках прост и минималистичен.
Почему так
Такие кнопки могут привлечь внимание пользователя, при этом оставаясь чистыми, модными и ненавязчивыми. Кроме того, возможна иерархия кнопок на экране. К примеру в случае, если на экране есть разные кнопки. Если на странице множество кнопок, они могут быть спроектированы и размещены согласно приоритету (К примеру, призрачные кнопки — дополнительных или промежуточных шагов). В некоторых случаях в материальном дизайне используются тонкие тени, чтобы помочь пользователям воспринимать эту иерархию.
Жесты
Автор: Джави Перез
С приходом интеграции гироскопов и датчиков движения, устройства способны улавливать движения. При этом, взаимодействие между пользователем и устройством переходит от кликов к естественным жестам.
Почему так
Пользователям интуитивно понятные жесты. Когда пользователей спрашивали, как удалить с экрана элемент, все пользователи (независимо от возраста и пола) пытались переместить объект за пределы экрана. Повышает удобство для пользователей меньшее количество нажатий и большее количество прокруток. Приложения становятся все более интерактивными, позиционируя экран больше, чем область нажатия.
Движение
Автор: Эдди Лобановский
Через инновации в области программного обеспечения, дизайнеры теперь имеют возможность контролировать движения при помощи таблиц стилей. Элементы дизайна, основанные на движениях, можно увидеть в различных формах, в том числе переходы, анимации и даже на текстуре для имитации глубины 3D. Использование движений в дизайн помогает пользователям взаимодействовать с контентом и усвоить, разграничение одного элемента или объекта от остальных, с целью подчеркнуть его важность.
Почему так
Движения могут привлечь внимание пользователя к определенной области — помочь или отвлечь от нее. Показывая визуальный отклик можно увеличить вовлеченность, радуя пользователя эффектом «Вау!»
Упрощение взаимодействия
Автор: Ян Лозерт
Вместо навигации по разным страницам для завершения одной операции, один экран может включить в себя все промежуточные этапы и сократить время и усилия, потраченные в приложении. Например, форма может автоматически открыть или выделить последующие области ввода, когда пользователь вводит данные в поле формы.
Почему так
Мобильные пользователи предпочитают завершать операции в приложении легко и быстро. Проектирование приложений в соответствии с этим минимизирует усилия пользователя и может увеличить скорость и/или частоту открытия приложения.
Стандарты проектирования как лучшая практика
Автор: Билл С Кенни
Стандарты проектирования — это процесс создания визуального языка в начале проекта путем определения стандартов, таких как цвета, значки и отступы.
Почему так
Настройка стандартов проектирования позволяет создавать последовательности внутри приложений, а так же между разными платформами. Это сводит к минимуму возможные ошибки при запуске проекта в жизнь и позволяет в будущем легче вносить изменения.
Прототипирование в качестве наилучшей практики
Автор: Рамил Дерогонган
Прототип является предварительной или ранней версией рабочей продукта. Использование прототипов дает ценное представление о функциональности дизайна, выделяя потенциальные изменения, необходимые для того, чтобы улучшить пользовательский опыт. При этом исключена большая потеря времени и усилий на дизайн.
Почему так
Создавая недорогие «эксперименты», прототипирование может выявить ключевые компоненты проекта, в том числе набор функций и требований. Разработка прототипов позволяет сделать выводы из эксперимента и осуществить итеративную разработку продукта на основе полученных данных.
Источник: Medium.com
