Лого vc.ru

Жесты, движение, шрифты: Тренды в мобильных интерфейсах в 2015 году

Жесты, движение, шрифты: Тренды в мобильных интерфейсах в 2015 году

Дизайнер Онур Орал (Onur Oral) в своём блоге на Medium опубликовал заметку о современных трендах мобильных интерфейсов.

Команда Interweb Pro подготовила для рубрики «Интерфейсы» перевод заметки.

Поделиться

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

Взглянем на то, как Flat Design и Material Design вступили в игру и стали трендами нашего времени.

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

Автор: Гхани Прадита

Что

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

Почему

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

Единый шрифт

Автор: Брайан Племонс

Что

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

Почему

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

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

Автор: Эрик Этвелл

Что

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

Почему

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

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

Автор: Морган Аллан Кнатсон

Что

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

Почему

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

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

Автор: Кирилл

Что

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

Почему

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

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

Автор: Ари

Что

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

Почему

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

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

Автор: Роман Нурик

Что

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

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

Почему

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

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

Автор: Глеб Кузнецов

Что

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

Почему

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

Жесты

Автор: Джави Перез

Что

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

Почему

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

Движение

Автор: Эдди Лобановский

Что

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

Почему

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

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

Автор: Ян Лозерт

Что

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

Почему

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

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

Автор: Билл С Кенни

Что

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

Почему

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

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

Автор: Рамил Дерогонган

Что

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

Почему

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

В Pixate нету экспорта в распространенные форматы анимации, сейчас попробовал.

0

Оригами еще более, не дружелюбная, блин, мне просто анимированный прототип накидать, с экспортом в gif, или любой видеоролик.
В After Effects что ли все пилить придется.

0

Зачем нужен именно GIF? Везде же есть просмотр на вебе или в приложении. Экспорт в видео есть только в AE. Либо можно использовать любой инструмент, а потом записывать экран. Так посоны для дрибббла делают.

0

Ну вот для дрибббла и хочу сразу экспорт в гиф, без записей экрана.
Ладно, я уже After Effects выбрал, там анимирую.

0

Еще есть такая штука www.quartzcodeapp.com, не юзал правда, но выглядит вкусно

0

И тут совершенно внезапно оказалось, что всё это уже было в парадигме Metro UI в далёком 2010 году.

Жаль, что мир не был готов к этому пять лет назад и не принял дизайн Windows Phone, который тогда шокировал на фоне объёмной iOS и копирующего его Android.

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

У Metro вечно куда-то надписи уезжают (см. скриншот People). Знаю, что это не баг, а фича, но выглядит все равно как баг. Да и как-то пустовато что ли. Только Material Design, только хардкор.

У iOS этот минимал смотрится аккуратно и весь контент как на ладони. С виндоус было сложнее

Да, Метро был крут. Но он, к огромному сожалению, выносил мозг двумя моментами:
- повсеместной квадратностью плиток (есть в психологии восприятия такое понятие "агрессивное поле", это оно);
- огромными надписями, не помещающимися в экран и из-за этого непонятно что содержащими.
В общем, в нём несколько чистых идей довлеют над практическим UX.

1

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

0

У виновс не было рынка, поэтому и фейл. перефразируя: У кого нет платформы тот идет в жопу.

Не обязательно. Скорее, у кого нет платформы, тот не может себе позволить сомнительные эксперименты и стремление пересилить тренды.

0

А если таки пытается, то да — идёт в жопу. =)

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Iziah Moscow

Название так себе и их апп в сторе не пашет, но молниеносная подача, хорошие машины и гуманные цены

Неизвестные загрузили в App Store приложения-клоны Gett, Uber и других такси-сервисов
0
Олег Дергилёв

Не ну конечно, для данного продукта эффективен контент-маркетинг. Есть ЦП с большой аудиторией и она во многом ЦА, есть есть спарки,роему,секретыфирмы и прочие косса.ру куда можно писать полезные статьи и они попадут в длительное юзанье потенциальной ЦА.
А вот например взять строительную компанию в провинции,работающую только в своем регионе. Блогеров там нет, ну не считая девочек с шелаком в инстаграме и ВК, контентных порталов тоже там нет.
Писать в тот же ЦП - бессмыслено, его в регионе читают 3,5 айтишника и 2 сектанта из БМ, покупатели даже не узнают.
Ну есть там городской новостной портал, форумок местный, но там и так баннеры висят и журналисты пишут про каждую пролетевшую мимо птицу, включая про стройку-новостей же крайне мало.
И в таких условиях эффективность контент-маркетинга сложно оценить,так как пристроить его некуда:)

Кейс из России: Как увеличить оборот B2B-сервиса с нуля до 14 млн рублей в год с помощью контент-маркетинга
0
ObliQ Brutale

А ведь могли обойтись просто теннисным мячиком ?

: )))))))

Олег Тиньков потребовал от сотрудников есть один раз за рабочий день и «не красть время» акционеров перерывами на кофе
0
Павел Леонидович

Не пытайтесь использовать программы для развития предпринимательства с целью трудовой эмиграции или просто для получения свободы перемещения по шенгенской зоне. Это легко вычисляется и неприятно заканчивается.
Резиденты РФ, начиная трудовую или предпринимательскую деятельность в ЕС, не игнорируйте требования Постановления Правительства РФ от 12.12.2015 N 1365 (не забывайте, в РФ крепостное право ещё не отменили).
Простая, пошаговая инструкция – как начать предпринимательскую деятельность в ЕС через Эстонию, здесь: www.plm.pw/2016/10/E-Estonia.html

Эстония запустила стартап-визы для иностранных предпринимателей и специалистов
0
Дмитрий Трипалюк
hyper weapon

Был когда-то такой ресурс о рекламе - Adme.ru, где публиковались лучшие мировые рекламные кейсы. Теперь это ресурс про котиков и няшечек. Сражение за качество рекламной продукции в России окончательно проиграно, но почему? Сложный вопрос. Коротко - заказчики не любят креативную рекламу, а рекламщики не хотят терять заказчиков. Молодые таланты если и появляются, то им быстро указывают на место. Общая энтропия в России стремительно растет, и как это остановить - пока непонятно.

«Конечно, Нектаринчик»: бренд соков «Любимый» решил привлечь зрелую аудиторию при помощи мини-ситкома
0
Показать еще