Кто, куда и зачем они идут: тенденции в мобильном дизайне 2016



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

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


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

    К 2016 эта разница частично компенсируется применением многослойных интерфейсов, по своему устройству напоминающих программный стек или стопку бумаг (кому какая аналогия ближе). Суть такого подхода — предоставлять пользователю одно функциональное окно в определенный момент времени, сохраняя при этом простой и быстрый доступ ко всем остальным окнам.

    В построении многослойных интерфейсов часто используются:

    • Панели вкладок. Как в браузерах для ПК или других привычных приложениях, назначение данного элемента — «упаковать» большое количество информации в единственный элемент интерфейса (вкладку). При использовании вкладок хорошим принципом является «одна вкладка = 1 окно».

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

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

    • Модальные окна. Как и в десктопном дизайне, используются для перекрывания собой всех остальных окон. Благодаря этому к их содержимому привлекается всё внимание пользователя.

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





    Карточная раскладка


    Эта тенденция относительно недавно перекочевала из веб-дизайна (где её популяризовали, в частности, Facebook и Twitter) но уже завоевала немало сторонников.

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



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

    Что касается самого контента, то обычно блок карточного дизайна сочетает следующие элементы:

    • Заголовок.
    • Фоновое изображение карточки.
    • Кнопки управления.
    • Текстовое содержимое (сокращенное, с возможностью разворачивания).
    • Вторичный текст (дата, автор, размер контента и т.д.).

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

    Дизайн для больших устройств


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

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

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

    Сравнение размеров дисплея линейки IPhone:



    Осмысленная анимация


    Речь идёт не только и не столько об анимировании интерфейса ради повышения привлекательности, сколько об улучшении удобства использования и добавлении интерактивности.

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

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

    Эволюция в применении жестов


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

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

    Распространенные жесты:



    Новые приемы в навигации


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

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

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

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

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

    Цветовое оформление и типографика


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

    Любопытный практический момент, касающийся цветового оформления: по результатам тестирования, проведённого ресурсом Greenbot, при использовании черного цвета в интерфейсе (#000000) достигается существенная экономия заряда батареи на устройствах с AMOLED-дисплеями. Однако на обычных LCD-дисплеях такой зависимости не наблюдается.

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

    Типографика с акцентом на цветах:


    Особенности и закономерности современных тенденций


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

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

    Дополнительно стоит упомянуть о превратившемся в очередную дизайнерскую тенденцию переходе от Flat Design к Material Design: первый предельно минималистичен и строится на нескольких базовых цветах, а второй представляет собой всё тот же Flat, но с использованием анимации, теней, переходов и других эффектов, сочетание которых придаёт ему больше сходства с классическими подходами (в частности, скевоморфизмом). Flat Design получил широкое распространение с 2010 года, когда Microsoft начала внедрять в своих продуктах так называемый metro-design. Тогда это было свежим веянием, нарочито упрощённой и функциональной картинкой по сравнению со скевоморфными и перегруженными графическими эффектами интерфейсами. В 2014 году Google пошёл дальше и внедрил во Flat Design ряд принципов, благодаря которым он «превратился» в Material Design. В основном изменения касались не графической составляющей, а построения и взаимодействия элементов, их поведения. Сегодня Material повсеместно смещает Flat с пьедестала «самого прогрессивного» дизайна в мобильном сегменте.

    Другой любопытной тенденцией, уже практически превратившейся в дизайнерский must have, является вёрстка в стиле Pixel Perfect, когда макет страницы подгоняется под конкретное разрешение с точностью до пикселя. С одной стороны, это позволяет избежать проблем при масштабировании и автоматической адаптации макетов под множество разрешений, имеющих место в мобильном сегменте. Но у этого подхода есть существенные недостатки: трудность в поддержке, во внесении изменений и т.д.

    Тенденции на примере реальных приложений


    Google Play Music


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

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

    Карточки в интерфейсе:


    Модальное окно и фиксированное меню многослойного интерфейса:


    Streaks


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

    Цветовая схема и оформление элементов управления:



    All in one Gestures


    Данное приложение для Android примечательно реализацией новинок в сфере управления жестами. В качестве утилиты, расширяющей функционал устройства, она хорошо демонстрирует преимущества «ручного» управления.


    Полезный инструментарий


    Спецификации материального дизайна от Google:
    » https://material.google.com/

    Информация по дизайну от Apple:
    » https://developer.apple.com/design/

    Подборка сервисов для построения прототипов:
    » https://spark.ru/startup/componentix/blog/4781/20-instrumentov-dlya-dizajnera-mobilnih-prilozhenij

    Блоги для UX-дизайнеров:
    » https://www.smashingmagazine.com/category/uxdesign/
    » http://theuxintern.com/
    » http://uxmyths.com/
    » http://boxesandarrows.com/
    » http://usabilitygeek.com/
    » http://uxmovement.com/
    Scorocode
    24.62
    Готовый облачный backend для любых приложений
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 14

      +5
      Ничего нового, к сожалению. Всё это уже года два развивается и устаканивается. Другое дело, что повторение — мать учения, и, несмотря на прошедшие годы, удачных примеров интерфейса до сих пор очень и очень мало.
        –2
        Я давно замечаю, что аудитория на хабре сильно расслоилась. Не знаю, помогло бы или нет деление материалов «для начинающих», или «обзор». Но сейчас получается, что есть аудитория, которой интересно, и та, которой не очень.
          0
          Да, думаю поможет оставить заметку в начале статьи об уровне подготовки читателей. Тогда и деления не нужно, и циничные самодовольные профи участвовали бы в обсуждении с позиции советчиков для неофитов, а не жаловались бы на устаревший материал :)
          • UFO just landed and posted this here
              +1
              Ох, за сообществом я слежу давно.

              Про npm статья в самом разгаре :)
              • UFO just landed and posted this here
          +2
          Статья ради статьи.
          Я конечно понимаю, что хочется прорекламить свой чудо сервис, но блин Хабр для полезной, своевременной информации, это не доска рекламы.

          Очень огорчен, что этот замечательный ресурс скатывается к низам.

          Мне кажется, или на хабр так сильно повлиял его выкуп? (ранее часть принадлежала Mail.ru, а теперь с деньгами напряг и давят все соки из него).
            –2
            Руслан, я с вами не согласен. Постараюсь объяснить почему.

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

            Кстати, как ваш стартап?
            –1
            Как по мне так важен каждый новый взгляд и оценка.
            Без этого развитие направления пойдет на минус.
            Я прочитал и мне понравилось.
              +1
              Нового мало. Рассматривание яиц в разных сторон и сильный запах того, что называется «мода». А «мода» — это очень плохо.
              Лично мне интерфейсы нравятся всё меньше и меньше.
                –1
                Ага, еще мода пошла постоянно улучшать интерфейс. Этим занимаются многие. В итоге, если по долгу службы приходится юзать жирный программный стек, то переучиваться приходиться постоянно. От этого мои глаза постоянно дёргаются. Что самое смешное — глюки в программах не чинят, а графический интерфейс меняют.
                • UFO just landed and posted this here
                    0
                    А я и не разработчик, дизайнер я. И речь вёл про программы, которые мне приходится использовать — их много, и они постоянно меняются.
                      0
                      Лучшее — враг хорошего. Я не припомню, когда интерфейс менялся от хорошего к лучшему. Обычно, изменения от хорошего к худшему. Изменения к лучшему (например, появление bootstrap) бывают крайне редко. Или плоский дизайн iOS>6, когда графическое юзабилили де-факто развалилось.

                Only users with full accounts can post comments. Log in, please.