Мы первые
среди партнёров 1С-Битрикс
в Астрахани
+7 8512 41-41-61

Тенденции современного мобильного дизайна в 2016 году

16.11.2016

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

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

Современные тенденции мобильного интерфейса

Объёмность интерфейса

Главное отличие мобильных устройств и их экранов – малые размеры. Это также можно считать одновременно и их недостатком, и преимуществом. Благодаря малым размерам телефона его очень удобно брать с собой туда, куда вы, конечно же, не сможете потащить с собой ноутбук.

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

Представьте, что перед вами лежит книга. На каждой её странице размещается определённая информация, а при желании вы легко можете перейти от чтения страницы 42 к странице 371. Для удобства у вас есть оглавление, содержащее в себе указание того, что на какой странице располагается.

В каком-то плане современные интерфейсы напоминают книгу. Их создатели не стремятся вместить всё содержание книги на одной странице – они делят его и равномерно распределяют по сайту. Удобный и быстрый переход от одного раздела к другому можно осуществить не только при помощи ссылок, разбросанных по тексту и в основной области страницы, но и при помощи специального меню, напоминающего книжное оглавление. А для того, чтобы визуально выделить необходимые элементы, можно затемнить ненужную в данный момент часть интерфейса.

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

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

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

Выпадающие списки – объёмные меню, которые также могут быть многослойными и включающими в себя различные категории и списки. Как правило, на экране такие списки занимают солидную часть полезного пространства. В то же время, они не мешают, так как в то время, когда они не нужны, их можно легко спрятать.

Модальное окно – окно, буквально загораживающее собой все остальные элементы страницы. Здесь чаще всего размещаются наиболее привлекательные и заманчивые предложения, например, предложение оставить свой e-mai lадрес и подписаться на рассылку в обмен на скидку на следующий заказ. А ещё модальные окна можно использовать для регистрации и авторизации на сайте или подтверждения того или иного действия.

Модальное окно

Интерфейс в виде блоков

Организация интерфейса в виде своеобразных кирпичей – одна из наиболее популярных на данный момент тенденций. Его главным преимуществом является удобство. Интерфейс в виде блоков легко адаптировать к различным вариантам разрешений экрана. С ним легко работать вне зависимости от того, сидите вы за компьютером с большой диагональю экрана или заглянули на сайт с телефона.

Визуально блоки делают яркими и информативными. Они зачастую не содержат в себе каких-либо текстовых указаний, их заменяют символичные изображения. Посмотрите, например, на интерфейс меню «Пуск» в Windows 10. Здесь располагаются именно блоки различных размеров, нажатие по которым приводит к переходу к нужному приложению. В каком-то плане именно Windows являются одними из «Законодателей моды» на подобный интерфейс.

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

Блоковый интерфейс Windows

Анимация как способ повышения отзывчивости интерфейса

Анимация, добавленная на сайт в умеренном количестве и в необходимых местах, способна не только визуально преобразить сайт, но и сделать его интерфейс более удобным для работы. Хорошая проработка анимации и логичность её использования позволяют сделать сайт запоминающимся и интерактивным. Главное – помнить, что все подобные эффекты оказывают существенное влияние на скорость работы сайта, и важно с ними не переборщить.

Вариативность размеров

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

Телефонами с большими экранами может быть неудобно пользоваться одной рукой, особенно если вы обладатель небольших ладоней. Сравните, например, размеры телефонов Apple. Модель 6 Plus значительно крупнее «стандартного» 4s. Обратите внимание на интерфейс: размеры значков не претерпели изменений, однако расстояние между рядами существенно увеличилось. И, конечно, такой экран «вмещает» в себя большее количество значков приложений – 24 против 16.

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

Размеры телефонов Apple

Управление жестами

Сенсорные экраны за последние 5 лет перешли из категории «круто» в категорию «норма». Работа с сенсорными экранами становится разнообразнее и комфортнее для пользователей. Многие интерфейсы приветствуют использование жестов для совершения ряда действий. Если подойти к этому делу с логикой и разумностью, то возможно получить интерфейс, работать с которым легко и приятно. А если думать лишь о том, чтобы сделать интерфейс моднее и современнее, забывая о том, что жесты могут быть не только ненужными в данной ситуации, но ещё и сложными для освоения людьми, то результат будет плачевен. Жесты должны не только упрощать работу, но и быть простыми для освоения.

Управление жестами

Разнообразие способов навигации

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

Бесконечная прокрутка, или скроллинг – отличный способ «зацепить» человека и буквально вынудить его провести больше времени на вашем сайте. Информация постоянно пополняется и пополняется, а человек всё глубже увязает в ней. Конечно, скроллинг имеет и свои недостатки. Он может оказать негативное влияние на скорости работы сайта и, уж конечно, он не подходит для использования в интернет-магазинах, где пользователям порой необходимо быстро перейти к той или иной странице. А вот для развлекательных и новостных порталов бесконечная прокрутка – то, что нужно.

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

Скрытая прокрутка позволяет экономить свободное пространство на экране и не загромождать его самими элементами прокрутки. Она очень удобна для просмотра изображений. Параллакс – отличный способ привлечения внимания человека к тому или иному элементу на странице.

Бесконечная прокрутка

При написании статьи использовались материалы Habrahabr.