Content © Onur Oral (https://medium.com/@oralonur) Перевод © Interweb Pro (https://medium.com/@interweb) Будь то экран приложения, веб-браузер или циферблат умных часов, дизайн является одним из наиболее важных факторов для привлечения интереса потребителей. Я проанализировал эволюцию трендов от плоского дизайна до материального и готов поделиться с вами некоторыми наблюдениями о том, что это за тренды, почему они полезны для пользователя и как они были созданы. Взглянем на то, как Flat Design и Material Design вступили в игру и стали трендами нашего времени.

1. Mobile 2015
UI/UX тренды

2. Будь то экран приложения, веб-браузер или циферблат умных часов, дизайн
является одним из наиболее важных факторов для привлечения интереса
потребителей. Я проанализировал эволюцию трендов от плоского дизайна до
материального и готов поделиться с вами некоторыми наблюдениями о том, что
это за тренды, почему они полезны для пользователя и как они были созданы.
Взглянем на то, как Flat Design и Material Design вступили в игру и стали трендами
нашего времени.
Content © Onur Oral (https://medium.com/@oralonur)

3. Облегченный дизайн

4. Что
Вместо применения широкого спектра градиентов и теней, переход к
плоскому дизайну создает более легкую эстетику приложения. Это значит,
что использование негативного пространства — вместо градиентов, теней и
прочего — позволяет создать упрощенный интерфейс, тем самым акцентируя
внимание только на основной информации, устраняя элементы дизайна,
которые не являются продуктивными для взаимодействия с пользователем.
Почему
Облегченный дизайн устраняет отвлекающие элементы, помогая направить
взгляд пользователя на значимый контент на экране. Это позволяет упростить
навигацию и в то же время придать бренду изящный, современный вид.

5. Единый шрифт

6. Что
Сокращение количества шрифтов на экране может раскрыть мощь
типографики. В отличие от использования различных шрифтов и различных
характеристик — например, курсив, жирный, полужирный — разные размеры
одного шрифта способны лучше разграничить отдельные области контента.
Почему
Применение единого типа шрифта во всем приложении ведет к
согласованности не только брендинга, но и всех каналов — например,
приложение, мобильный сайт, веб-сайт — а, следовательно, оптимизирует
мобильные элементы многоканального опыта. Кроме того, пользователи
предпочитают простоту использования одного шрифта, когда прокручивают
контент в поисках нужной информации.

7. Интервалы и блоки — больше никаких линий

8. Что
Хотя раньше линии и разделители использовались для четкого разграничения
конкретных разделов или категорий на экране, их добавление приводило к
уплотнению, перенасыщению интерфейсов. Уход от использования линий и
переход к интерфейсам, где контент сгруппирован по блокам и разделен
интервалами, освобождает пространство и устанавливает визуальный
порядок.
Почему
Устранение явных линий и разделителей создает современный вид,
сосредоточенный на функциональности; к примеру, изображения и/или
шрифты могут быть увеличены, обеспечивая визуальную четкость и
улучшенную простоту использования. Применение интервалов вместо линий
позволяет легко разграничить один раздел от другого.

9. Данные в центре внимания

10. Что
Так как предпочтения пользователей смещаются в сторону более простого
интерфейса, большие шрифты и яркие цвета все чаще используют для
выделения определенной информации. Выделенные данные могут
отличаться в зависимости от целевой аудитории.
Почему
Использование увеличенного размера шрифта и/или комбинации цветов
привлекает внимание пользователей к определенной области экрана — для
этого не требуется навязчивого подталкивания к действию или команды. В
результате, пользователи получают простую навигацию и быстрый доступ к
собранной информации.

11. Микровзаимодействие

12. Что
Микровзаимодействия — это небольшие визуальные улучшения (например —
анимация, звук и прочее), сосредоточенные вокруг взаимодействия с
пользователем. Они могут быть связаны с завершением операции, выбором
элемента или вызовом всплывающего сообщения. Эти взаимодействия
малозаметны, но они являются отличительной чертой продукта и
акцентируют внимание на нужном элементе.
Почему
Микровзаимодействия могут быть использованы в качестве сигнала, чтобы
побудить пользователя к действию во время выполнения задачи — например,
при регулировании настроек — и создают маленький кусочек контента,
например всплывающее сообщение. Приложения, с хорошо сделанными
микровзаимодействиями, характеризуются пользователями как более
простые, интересные и увлекательные.

13. Уменьшенная цветовая палитра

14. Что
Использование более простых цветовых схем стало трендом после
появления плоского дизайна в 2013 году, который отличается ясностью и
простотой. В результате, как дизайнеры, так и пользователи предпочитают
применение меньшего количества цветов, дабы добиться визуальной
гармонии.
Почему
Цвет играет важное значение в создании определенного настроения,
акцентирует внимание на определенном элементе, а также представляет сам
бренд. С помощью меньшего количества цветов образ бренда выражается
более ясно. Кроме того, пользователям нравится такая эстетика, так как она
не отвлекает внимание, как это делает большое скопление цветов. Также она
лучше подчеркивает ключевые особенности приложения, улучшая навигацию
в нем.

15. Многослойный интерфейс

16. Что
Раньше интерфейсы были сосредоточены вокруг принципа скевоморфизма — дизайна,
который подражает определенной структуре или объекту (например, цифровой
календарь, напоминающий бумажный календарь, «глубина» 3D-изображения иконки
приложения, щелчок при выключении мобильного телефона).
Теперь, когда плоский дизайн отошел от этого принципа, появилась возможность
создания глубины новыми способами. В первую очередь, использование слоев помогает
создать это чувство глубины и пространства, когда достигается большее ощущение
«реальности».
Почему
Плоский дизайн всегда рисковал стать «слишком плоским». Как пользователю
взаимодействовать с таким утонченным дизайном, перенося свой опыт
взаимодействия с физическим трехмерным миром (и ранними цифровыми
навигационными концепциями)? Слои дают возможность показать один элемент
над другим в вертикальной оси. Слои и увеличение глубины помогают установить
взаимосвязь между различными элементами и привлечь внимание к нужным
вещам.

17. Призрачные кнопки

18. Что
Призрачные кнопки — это прозрачные кнопки без заливки. Их границы очень
тонкие, а сама форма — простая — прямоугольная или квадратная, с
прямыми или смягченными углами. Текст в этих кнопках простой и
минималистичный.
Почему
Такие тонкие кнопки не только привлекают внимание пользователя, но и
обладают красотой, стилем и ненавязчивостью. Благодаря им возможна
иерархия кнопок на экране в случае, если на экране есть разные кнопки. Если
на одной странице много разных кнопок, они могут быть смоделированы и
размещены согласно приоритету (например, призрачные кнопки — для
необязательных или промежуточных действий). В некоторых случаях в
материальном дизайне используются тонкие тени, что помогает
пользователям понять установленную иерархию.

19. Жесты

20. Что
Благодаря интеграции гироскопов и датчиков движения, устройства
способны улавливать движения. Таким образом, взаимодействие между
пользователем и устройством переходит от кликов к естественным жестам.
Почему
Пользователи применяют жесты на интуитивном уровне. На вопрос как
удалить с экрана элемент, все они (независимо от возраста и пола) стараются
передвинуть его за пределы экрана. Преобладает меньшее количество
нажатий и большее количество прокруток, приложения становятся более
интерактивными, позиционируя экран больше, чем область нажатия.

21. Движение

22. Что
Благодаря инновациям программного обеспечения, дизайнеры теперь имеют
возможность контролировать движение с помощью таблиц стилей. Элементы
дизайна, основанные на движениях, можно увидеть в различных формах,
включая переходы, анимацию или даже текстуру, имитирующую 3D глубину.
Использование движений в дизайне помогает пользователям
взаимодействовать с дизайном и контентом, разграничивая один элемент
или данные/объект от остальных, с целью подчеркнуть его важность.
Почему
Движения могут привлечь внимание пользователя к определенной области на
экране или отвлечь от нее. Демонстрация визуального отклика увеличивает
вовлеченность пользователя, радуя его wow-фактором.

23. Упрощение взаимодействия

24. Что
Вместо навигации по разным страницам для завершения одной операции,
экран может включать в себя все промежуточные этапы и сократить время и
усилия, потраченные в приложении. Например, когда пользователь вводит
данные в поле формы, может автоматически открываться или выделяться
следующая зона ввода.
Почему
Мобильные пользователи предпочитают завершать операции в приложении
легко и быстро, на ходу. Дизайн приложений в соответствии с этим
пониманием минимизирует усилия пользователя и может увеличить скорость
и/или частоту открытия приложения.

25. Стандарты дизайна как лучшая практика

26. Что
Стандарты дизайна — это процесс настройки визуального языка в начале
проекта путем определения стандартов таких, как цвет, иконки и отступы.
Почему
Настройка стандартов дизайна помогает создать согласованность в
приложении и между различными платформами. Стандарт сводит к
минимуму возможные ошибки, приводит проект к жизни и позволяет легче
вносить изменения в будущем.

27. Прототипирование как лучшая практика

28. Что
Прототип — это предварительная или ранняя рабочая версия продукта. При
создании прототипов можно получить ценные идеи по функциональности
дизайна, увидеть изменения, необходимые для того, чтобы улучшить
пользовательский опыт. При этом большая потеря времени и усилий на
дизайн исключена.
Почему
Создание таких недорогих «экспериментов» может помочь выявить ключевые
компоненты проекта, в том числе в набора функций и требований. Создание
прототипов предоставляет необходимое время и ресурсы, чтобы сделать
выводы из эксперимента и осуществить итеративную разработку продукта на
основе полученных данных.

29. etsarkov@gmail.com
+7 916 9505029
skype: etsarkov
fb.com/etsarkov
linkedin.com/in/etsarkov
Евгений Царьков