13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

Опубликовано 08 March 2020

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


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

Функциональность и пользовательский опыт - это еще не все. Первые впечатления на 94% связаны с дизайном. Что первое, что человек видит в приложении? Интерфейс. Таким образом, UI/UX дизайнеру необходимо выбрать среди различных типов пользовательских интерфейсов тот, который обеспечит, чтобы пользователь следил и наслаждался просмотром приложения.


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


13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

Анимация приложения EventlyLife от Shakuro.


Заставка/Splash screen


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

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

Есть несколько деталей, которые UX дизайнеры должны учитывать, чтобы произвести неизгладимое впечатление:

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

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


13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

JELL заставки от Пракхар Нил Шарма


Встроенный экран / Onboarding screen


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

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

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

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

И, само собой разумеется, покажите входящие в систему новичкам, а не возвращающимся.


13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

EventlyLife App Анимация


Главный экран / Home screen


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

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

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

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


13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер


Экраны входа и профиля / Log-in and profile screens


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

Рассмотрим следующие предложения:

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

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

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

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


13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

Фитнес-профиль Fit-In-Turn


Экран статистики / Stats screen


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

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

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

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



13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

Mi Fit Редизайн Окончательная концепция


Экран календаря / Calendar screen


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

Календарь должен иметь удобный интерфейс с визуальным стилем, соответствующим дизайну мобильного приложения. Сделайте акцент на UX и UI, положитесь на простой и несложный дизайн мобильного приложения, чтобы пользователи могли сосредоточиться на основных функциях вашего приложения. Ожидайте, что они захотят синхронизировать его со своими аккаунтами в Google, iCloud и т. д.


13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

Блоки управления проектами Юрия Гока


Экраны электронной коммерции


Экран каталога


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

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

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

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

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


13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

Представлять концепцию приложения.


Экран карточки продукта / Product card screen


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

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


13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

Концепт анимации на странице продажи мотоциклетного шлема.


Экран оформления заказа / Checkout screen


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

Чтобы избежать отказа от формы и сделать процесс оформления заказа гладким, дизайнер должен подумать над следующими предложениями:

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


13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

DailyUI заказ № 002 от Душана Журайки.


Социальные экраны / Social Screens


Экран ленты / Feed screen


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

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

Некоторые рекомендации для них:

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


13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

Лента вдохновение от Semas.


Экран контактов / Contacts screen


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

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


13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

Ролодекс. Dark Tiles & Light List Взгляды Ярослава Зубко


Музыкальные экраны / Music Screens


Экран плейлиста / Playlist screen


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

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


13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

Редизайн приложения SoundCloud


Экран плеера / Player screen


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

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


13 основных шаблонов мобильного интерфейса, о которых должен знать каждый UI / UX дизайнер

Редизайн пользовательского интерфейса приложения SoundCloud



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

Statista утверждает, что через Apple App Store ежедневно выпускается 1434 мобильных приложения. Таким образом, количество вариаций мобильного пользовательского интерфейса ошеломляет, и дизайнеру легко потеряться во всем этом изобилии.

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