В этом разделе материалы размещаются пользователями сайта и публикуются после одобрения модератором. Редакция не несет ответственности за орфографические и другие ошибки, хотя и старается исправлять их по мере возможности.
Добавить свою заметку вы можете на этой странице.
27 августа 2015, 16:01
6377
0

Тренды в мобильном дизайне 2015 – 2016

Актуальные тренды в дизайне мобильных приложений и сайтов, которые определенно укрепятся в 2016 году.


С середины года выходят статьи о актуальных трендах в дизайне, которые определенно будут укрепляться в 2016. Такой материал полезно использовать не только при разработке дизайна, но и для его презентации клиенту. Ну а продакт-менеджеру или маркетологу знания необходимы при постановке задачи дизайнеру. Мы в Vitamin Group заботливо перевели свежий материал по теме.

Будь то экран приложения, ноутбука, или iWatch — дизайн в вебе имеет ключевое значение для пользовательского опыта. Сегодня мы видим сильные тренды в UX, которые даже можно считать систематизацией и правилами хорошего тона, а не временными “фишками”.

1. Легкость

тренды в дизайне 2016

Автор: Ghani Pradita

Суть

На место градиентов, теней и детализации пришел «плоский» дизайн с его минимализмом, легкостью, воздухом — новая эстетика, которая уже стала привычной. Чистота создает простоту интерфейса, фокусируя внимание на целевых объектах, а декоративные элементы исчезают, создавая контраст. Здесь отмечу, что material-дизайн — это развитие широкого понятия flat-дизайн. «Материальный» подход Google так же про минимализм и простоту, но здесь внимание уделено анимации, интерактиву, слоям. Он напоминает бумагу с тонкими краями, а листы двигаются по оси Z.

Прокачай свои digital-скиллы!

COSSA рекомендует крутые практические онлайн-курсы для прокачки ваших digital-скиллов:

  • UX-Аналитика развернуть программу
    • Введение в специальность. UX-Аналитика в digital
    • UX Аналитика. Data-Driven / Data-Informed
    • Обзор аналитических инструментов
    • Продвинутый разбор Google Analytics
    • Построение и оптимизация воронок
    • Очные исследования
    • Удаленные исследования
    • Петля улучшений. Поиск гипотез и версионность тестов
    • A/B Тесты и другие способы проверки гипотез
    • Юнит-Экономика
    • Почему не обойтись без базовых знаний JS
    • Настройка Google Tag Manager
    • Зачем нужен SQL и как с ним работать?
    • Аналитика 360. Ваши персональные большие данные
    • AIC.Brain. Аналитическая система своими руками
    • Введение в BI. Обзор промышленных систем аналитики
    • Разбор кейсов
    Записывайтесь на курс! Старт ближайшего потока — уже 15 декабря.
  • Управление Digital-проектами развернуть программу
    • Экологичный путь менеджера
    • Релиз-менеджмент: готовим проекты к запуску
    • Требовательность digital-продюсера
    • Аналитика. Базовые навыки
    • Как пасти котов: правильное делегирование в IT
    • Переговорные навыки. Часть 1. Цикл продаж
    • Переговорные навыки. Часть 2. Провокации. Работа с возражениями
    • Оценка и декомпозиция digital-проектов
    • Планирование своего времени
    • Управляем дизайнерами. Scrum в дизайне
    • Выравнивание рабочего потока и балансировка нагрузок
    • Навыки ведения конструктивного диалога
    • Работа с кадрами: сложные вопросы
    • Тонкие моменты (рассмотрим по ходу дела)
    • Работаем с типовыми документами
    Записывайтесь на курс! Старт ближайшего потока — уже 15 декабря.
  • UX-Дизайн развернуть программу
    • Профессия дизайнера в эпоху цифровых перемен
    • Основные этапы проекта
    • Service design
    • UX-проектирование — качественные исследования
    • UX-проектирование — прототипирование
    • Data-driven design
    • Concept design творчество в дизайне
    • Visual design
    • Техника успешной презентации
    • Отраслевая специфика
    • Разбор кейсов из практики: «госуслуги» — проектирование и дизайн интерфейсов
    • Разбор кейсов из практики: 1C-битрикс и битрикс24 — разработка дизайна сайта, продуктов и единой экосистемы интерфейсов
    • Разбор кейсов из практики: нтв-плюс — разработка и развитие сайта
    • Специализация и карьера
    Записывайтесь на курс! Старт ближайшего потока — уже 15 декабря.
  • Скетчинг для дизайнеров развернуть программу
    • Понимание формы
    • Техники и инструменты. Светотень
    • Фактуры и текстуры
    • Перспектива и аксонометрия
    • Перспектива как инструмент
    • Построение теней и отражений
    • Изображение людей. Базовые пропорции и анатомия
    • Человек в движении. Одежда
    • Изображение головы и рук человека. Лицо, мимика, жесты
    • Анатомия животных
    • Рисование без натуры. Методы и возможности
    • Домашние заготовки. Типовые изображения часто встречающихся форм
    • Композиция. Основные принципы. Композиция иллюстрации. Взаимодействие пространства и формы
    • Скетч как инструмент креативности
    • От живого рисования — к цифровому. Обзор
    • Цифровое рисование. Технические приемы
    Записывайтесь на курс! Старт ближайшего потока — уже 15 декабря.

Мы гарантируем качество программ и обучения по всем этим образовательным программам.

Реклама

Цель

Легкость дизайна исключает отвлекающие факторы на пути пользователя. Это концентрирует внимание на значимом контенте и помогает в навигации. А бренд таким образом будет современным и актуальным.


2. Один шрифт

тренды в дизайне 2016

Автор: Brian Plemons

Суть

Сокращение числа шрифтов только усиливает значение типографики. Вместо использования нескольких шрифтов, возьмите один. Разные характеристики (italics, bold, semi-bold) и размер шрифта отлично создадут нужные смысловые блоки в контенте.

Цель

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


3. Пространство и блоки

тренды в дизайне 2016

Автор: Eric Atwell

Суть

Ранее для структуризации контента широко использовались линии и разные разделители, которые увеличивали плотность интерфейса. От них дизайнеры отказываются в пользу грамотных блоков и управления пространством. Наличие пустоты само по себе делит содержание, а дизайн остается чистым.

Цель

Избавление от линий и разделителей поддерживает функциональность и простоту. Теперь изображения и шрифт могут быть увеличены — так легче читать. 


4. Акцент на данных

тренды в дизайне 2016

Автор: Morgan Allan Knutson

Суть

Желание пользователя видеть удобный интерфейс, яркие чистые цвета, крупный шрифт приводит к выделению только главной информации — явно и очевидно.

Цель

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


5. Микро-интерактив

Автор: Ramotion Inc.

Суть

Микро-интерактив (Micro-interaction) — это реакция интерфейса на действия пользователя, например, анимация или звук. Прием можно использовать в разных сценариях, таких как завершение транзакции, добавление объекта в избранное или клик на промо-блок. Это небольшие, но заметные отклики интерфейса, которые привлекают внимание пользователя. Для дизайнеров уже есть ряд UX библиотек: UxarchiveUimovement и Useyourinterface.

Цель

Пользователям нравятся такие элементы. Подобные микро-взаимодействия побуждают, подсказывают, с ними приложение как-бы общается с человеком. Если в приложении хорошо продумана система реакций, можно рассчитывать на лучшее вовлечение и статиcтику по целевым действиям.


6. Ограничение цветов

Автор: Vitamin Group, приложение сети "Семья"

Суть

С рождения тренда на плоский дизайн в 2013 мы наблюдаем чистоту и простоту цветов. В результате и дизайнеры, и пользователи предпочитают минимум цветов в схеме приложения. См. Flatuicolors

Цель

Использование цвета — это часть брендинга и общего настроения продукта. Сокращение числа цветов точнее определяет бренд, ну а пользователям дает удобство в навигации, формируя акценты.


7. Слои в интерфейсе

Автор: Roman Nurik

Суть

Ранее в интерфейсе мы наблюдали cкевоморфизм – иконки и элементы были максимально схожи с объектами в реальной среде. Например, календарь, похожий на настольный, использование текстур кожи, дерева. Теперь глубина и перспектива создается за счет слоев и их взаимодействия.

Цель

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


8. Контурные кнопки (Ghost Buttons)

Автор: Gleb Kuznetsov

 Суть

Крепнет тренд на ghost buttons — прозрачные, без наполнения цветом. Тонкий контур, простая форма, минимум текста.

Цель

Они ненавязчиво привлекают внимание, сохраняя чистоту и легкость интерфейса. Такой стиль так же используется для создания иерархии, если кнопок на экране несколько, например, для вспомогательных или промежуточных действий.


9. Жесты

Автор: Javi Pérez

Суть

С изобретением гироскопа и тач-скрина наши устройства способны распознавать жесты. Теперь взаимодействия вышли за рамки клика, привычные в реальной жизни жесты работают и на экране. 

Цель

Жесты интуитивно понятны. Теперь пользовательский опыт в приложении становится интересным и эмоциональным.

 

10. Движение

 

Автор: Apple Insider

Суть

Технические возможности позволяют сегодня добавить движение в работу приложения. Это анимации, переходы, работа с текстурой. Такое подобие видео вовлекает, делает общение с системой живее, обучает пользователя.

Цель

Опять же, на первом месте — управление вниманием пользователя. Такие порой неожиданные элементы вызывают и wow-фактор, приятно удивляя. Однако здесь нужна мера, как во всем.

 

11. Кратчайший путь к цели

Автор: Jan Losert

Суть

Вместо навигации по нескольким страницам для завершения транзакции, один экран может включать и промежуточные этапы, сокращая время на целевое действие. Например, следующий шаг регистрации открывается или выделяется при заполнении предыдущего поля.

Цель

Люди используют мобильный в пути, в очереди, в пробке. Они минимизируют усилия при совершении действий и быстро переключаются, если что-то не вышло с первого раза. Таким образом число шагов напрямую воздействует на конверсию. Как и традиционно на сайтах, но еще существеннее.


12. Соответствие стандартам

Автор: Bill S Kenney

Суть

Стандарт — установленные в начале проекта правила и визуальный язык: цвета, иконки, сетка.

Цель

Соответствие стандарту создает постоянство: внутри приложения и между платформами. Подход сокращает вероятность ошибок и несоответствий, а в будущем проект удобнее развивать.

  

13. Проектирование

Автор: Ramil Derogongun

Суть

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

Цель

Эксперимент с прототипом не стоит много, но гарантирует продуманный результат. Этот этап нельзя считать самостоятельным трендом, но без него — все остальное не имеет смысла.

Вывод: Все тренды работают в одном направлении: упрощение пользовательского опыта и его разнообразие. Создавайте удобные и полезные продукты, а пользователи всегда оценят качественный дизайн!


Перевод материала Onur Oral с дополнениями команды Vitamin Group

Комментарии:

Ответить?

Самые интересные статьи, обзоры и размышления —
в рассылке!

Email *


Подпишись!


Вход на cossa.ru

Уже есть аккаунт?
Выбирай любой вариант входа:
Facebook Twitter Vkontakte

Используйте свой аккаунт в социальной сети Facebook или Twitter, чтобы пользоваться сайтом

Не забудьте написать email на странице своего профиля для управления рассылкой