главная страница приложения это
Гайд по дизайну страницы приложения в App Store и Google Play
Если вы собираетесь делать релиз приложения, вам нужно правильно оформить его страницу в сторе. В этом материале мы собрали основные технические требования, рекомендации и полезные ссылки. Пройдемся по главным визуальным элементам: иконка, скриншоты, видео и графика для фичеринга.
Сейчас разница между иконками в App Store и Google Play незначительна. В первую очередь иконки отличаются размерами. У App Store – 1024x1024px, у Google Play – 512x512px.
Google Play автоматически закругляет значки (исходник должен быть квадратной формы) и делает тень. Так все иконки приложений и игр визуально сочетаются. Здесь детально описаны требования и приведены примеры.
В обоих сторах скриншоты могут быть вертикальными и горизонтальными. У Apple разные требования к скриншотам в зависимости от девайса. Для телефонов универсальными будут скриншоты под 6,5- и 5,5-дюймовые экраны. Для планшетов – под 12,9- и 10,5-дюймовые. Отдельно добавляются скриншоты для Apple Watch, Apple TV и Mac App Store. На каждый тип устройства вы можете загрузить до 10 скриншотов. Точные размеры и нужное разрешение по ссылке.
С Google Play все проще. Можно загрузить до восьми скриншотов для каждого типа устройств: смартфоны, 7-дюймовые и 10-дюймовые планшеты, а также Android TV и Wear OS by Google. Точные размеры по ссылке.
На странице приложения в Google Play можно разместить одно видео. Для этого нужно сначала загрузить его в YouTube. Прикрепляемая ссылка на ролик должна быть полной и без тайм-кода. Также запрещена монетизация. Видео автоматически воспроизводится без звука в течение 30 секунд. Подробнее здесь.
В App Store на страницу приложения можно загрузить до трех видео. Минимальная длина – 15 секунд, максимальная – 30. По ссылке подробные требования. Обратите внимание на инструкции Apple, посвященные нюансам создания ролика и работе с iMovie и Final Cut (только для Mac).
Фичеринг – это шанс попасть в редакторские подборки сторов и получить дополнительный трафик пользователей. Для этого нужна специальная графика.
Основное требование к графике для фичеринга в Google Play – соответствие размерам 1024x500px. Остальные нюансы незначительны – помнить про «зону отсечения» (15% от краев графики), избегать призывов и перегруженности деталями. Подробнее здесь.
Графика для фичеринга в App Store называется Promo Artwork. Она отличается в зависимости от раздела публикации: подборки «Игра дня», «Приложение дня», избранный контент. Также могут понадобиться дополнительные изображения (например, скриншоты) и графика для «шапки» страницы продукта или разработчика в App Store. Читайте подробнее.
Графика должна не просто соответствовать техническим требованиям сторов, но и выделять вас среди других приложений. Следите за обновлениями ваших конкурентов, исследуйте, как менялся их визуальный стиль и какие стратегии они используют в сезонном ASO. Все это можно отслеживать в Checkaso с помощью инструментов Сравнительный анализ и Обновления конкурентов.
Евгений, здравствуйте! Давайте мы подробно все прокомментируем)
Про рекламу: любой материал создается на основании запросов. У нас были наши инструкции, которыми мы делились с клиентами, решили, что это может быть полезно более широкой аудитории. В официальных инструкциях очень много информации, не все нюансы ясны, мы выделили главное, поделились полезными ссылками. Что касается самопродвижения, его никто не скрывает, это ведь корпоративный блог Checkaso. У нас есть разные материалы: и новости индустрии, и большие исследования, и гайды. Что-то обязательно будет вам полезно, посмотрите.
Про цены: наш продукт подходит разной аудитории, платформой пользуются и инди, и крупные компании, в том числе есть кастомные тарифы – под нужды каждого. Мы доступны.
Про кейсы: мы постоянно проводим вебинары (как на русском, так и на анлийском), на которых делаем аудиты приложений и буквально показываем, как продвинуться. Все это с помощью аналитических данных платформы. Вот несколько ссылок: https://youtu.be/wfQ_kh7Cbpg и https://youtu.be/dfnV92OsDQw. Кстати, вы можете прислать ссылку на свое приложение, чтобы мы тоже разобрали его в следующий раз. 😉
Про отслеживание ключей и позиций по ним: отслеживать очень важно, чтобы постоянно расти по органике. Вручную это делать очень сложно, порой невозможно. Оптимизация – это не только про отслеживание позиций. Это про эксперименты, мониторинг конкурентов, их позиций по поисковым запросам и обновлений, постоянное расширение своей семантики, новые тесты, анализ результатов и динамики, работа с отзывами и графикой. У нас много инструментов, которые помогают в достижении целей.
Дизайн приложений
В создании мобильного софта главную роль исполняет дизайн приложения. Он фундамент приложения. И он же первый, кто цепляет внимание пользователя. Чтобы удержать внимание пользователя нужно продумать: внешний дизайн, структуру, удобство пользовательского интерфейса (конкретно UX и UI) и другие детали. Теперь подробнее.
Дизайн мобильных приложений
Разработка дизайна для приложения — это трудоемкий процесс, который, по исполнению, может оказаться сложнее, чем подготовка макета для сайта.
В среднем, дизайн мобильного приложения занимает от недели до 1 месяца. Если в приложении подразумевается множество уникальных экранов, то разработка может длиться более 1-го месяца.
Этапы дизайна приложения
Процесс создания мобильного приложения разделяется на этапы. Это помогает помнить о каждом шаге в разработке софта.
Этап тестирования приложения необходимо проводить еще и на этапе прототипа. Важно знать, что весь требуемый функционал реализуем и правильно работает. Посмотрите, каждая деталь приложения действует так, как задумывалось? Пользователю понятно, что делает та или иная кнопка? Если сомневаетесь, нужно переработать макет.
Принципы дизайна в разработке приложений
Помните выражение «черт в деталях»? Так вот, это про дизайн. Приятно, когда в дизайне мобильного приложения продуманы все мелочи: как выглядит экран, если контент не загрузился или загрузилась часть. Что будет на странице, если отключился интернет и другие не маловажные детали. Рассмотрим все детали по порядку.
Первое впечатление и обучение пользователя
Onboarding (произносится «онбординг») — это механизм искусственного создания первых впечатлений о приложении у пользователя.
Знакомство пользователя с приложение нужно начинать с onboarding. Онбординг формирует восприятие пользователя к продукту от первого контакта (открытие первого экрана) до момента оплаты (целевое действие). Функция обеспечивает легкий и комфортный старт за счет нескольких механик.
Мы используем onboarding как первый экран с короткой инструкцией / презентацией, где написано, как пользоваться сервисом (обучение). Предоставляет максимум информации по управлению приложением в сжатом объеме.
Применяется в зависимости от целей и результатов, которые нужно достигнуть. Например, стимулировать людей к совершению заказа, к приобретению премиум аккаунта или привязке банковской карты.
Реализация онбординга нужна для конкретной задачи. Не применяйте просто красивые картинки. Создайте эту мини-презентацию исходя из поставленных целей и задач. Другими словами, научите пользователя делать то, для чего создано ваше приложение.
Детали в дизайне приложения
Сделайте акцент на важных кнопках. Например, кнопку «заказать» нужно сделать больше и заметнее, чем кнопку «подробнее», которую можно оставить просто ссылкой.
Задавайте шрифт правильно. Некоторые компании применяют для каждого мобильного приложения разные шрифты. Для пользователя это не всегда удобно. К примеру, в его смартфоне может не оказаться задуманного вами шрифта. Как приложение будет работать в этом случае? Идеально использовать функцию «использовать дефолтный шрифт» (по умолчанию).
Количество действий / переходов в приложении
Оцените, есть ли в приложении лишние действия? Если есть, от них лучше отказаться. Дизайнеры нашей компании, при разработке сайта, приложения или программы, всегда проверяют продукт на наличие лишних действий. Проще говоря, если пользователя можно привести к оформлению заказа в 3-и действия вместо 7-ми, то лучше так и сделать.
Разница между UX и UI дизайном приложений
Фундаментом разработки приложения, программы или сайта, всегда является UX и UI дизайн. Эти две составляющие влияют на весь рабочий процесс в целом.
UX-дизайн (User eXperience, в переводе с англ. «пользовательский опыт») — это привлекательность и эффективность привлечения пользователей к выполнению целевого действия через графические элементы. Суда входит разработка: цветовой гаммы, шрифтов изображений и паттернов.
Если с удобством и логикой построения экранов все в порядке, то можно переходить к разработке визуальной части мобильного приложения. То есть, к UI-дизайну.
UI-дизайн (User Interface, в переводе с англ. «пользовательский интерфейс») — это удобство, интуитивно понятный дизайн для использования. Оценивается по опыту взаимодействия пользователя с дизайном на этапе тестирования.
Как видим из определений, разница между UX и UI есть. На практике, цель у UX и UI общая: сделать приложение удобным, привлекательным и интерактивным. UX и UI связаны между собой и отдельно не действуют.
На заметку: По нашему опыту, 90% пользователей прекращают использовать приложение еще на этапе знакомства, если один из пунктов (UX и UI) не доработан.
Структура экранов мобильного приложения
Чтобы создать работающее мобильное приложение, дизайнеру нужно изучить его особенности, разобраться в построении структуры и переключении экранов, функциональности. Сейчас индустрия мобильных приложений настолько захватила наш мир, что описать стандартный набор экранов стало сложной задачей. И все же, мы попробуем перечислить основной набор экранов.
Главные экраны и меню
В мобильное приложении главный и меню являются основными экранами. Главный экран проектируется с учетом задумки продукта, его назначения и цели. Он же отправная точка для пользователя. Поэтому, главный экран содержит элементы навигации, по которым можно перейти к разным разделам мобильного приложения.
В 50% мобильных приложений дизайнеры помещают меню на главный экран. При этом, меню может быть 2-х видов: выпадающее меню или его отдельный экран. Из практики нашей компании, при создании мобильного приложения следует ограничить количество действий во взаимодействии пользователя с меню.
В идеале, количество кнопок в меню должно быть не более 7-ми, а остальную информацию сделать в подкатегориях.
Экран входа и профиль
На заметку: чтобы приложение завоевало сердца вашей целевой аудитории, нужно изучить площадки конкурентов и тренды в дизайне мобильного приложения в конкретной сфере.
Экран электронной коммерции, каталог
Основная цель создания коммерческого проекта — это продажа продуктов, товаров или услуг. Визуальная презентация товара имеет сильное воздействие на принятие решения пользователем. Задача дизайнера — создать каталог компании в мобильном приложении таким образом, чтобы он был максимально удобным и привлекательным для клиента.
Отсюда слегка выбивается количество карточек товара (продуктов), которое помещается на один экран. Потому что их количество зависит от ширины экрана пользователя. Как показать товар — это уже задача маркетинга.
Контрольный экран
Процесс оформления заказа — это последний шаг в совершении целевого действия пользователем. Дизайнер отлично поработал над мобильным приложением и клиент смог дойти до покупки. Теперь важно не отпугнуть его.
Основная часть экрана — это форма оформления покупки, где клиент вводит личные данные для покупки и ее оплаты. Количество требуемой информации зависит от типа интернет-магазина или сервиса. На этом этапе нужно показать, что данные, вводимые пользователем, останутся в безопасности и не будут переданы мошенникам. Для этого нужно оставить убеждающие фразы.
Сама же задача «защита персональных данных» выполняется программистом. Дизайнер готовит макет, как контрольный экран будет выглядеть.
Социальный экран
Лента активности, новостей, событий — это все социальные экраны. Feed (производится «фид»), должен иметь четкую схему сканирования и отображения событий в ленте, которая не будет перегружена лишними деталями.
Контакты
Говоря об интернет-магазине, само собой разумеется, что в мобильном приложении будет страница «Контакты». Дизайн этой страницы формировался в течении долгих лет, пока не пришел к имеющемуся виду. Экран должен быть представлен в виде отсортированного списка (номер телефона, почта, контакты для месенджерров и т. д.).
На заметку: Для упрощения поиска нужного контакта можно установить маленькую иконку рядом с контактом.
На этом мы заканчиваем повествование о дизайне мобильного приложения. Следите за обновлениями нашего блога, чтобы узнать больше информации по теме. Новая статья выходит 1 раз в неделю. Подписка внизу.
Навигация мобильных сайтов и приложений: базовые принципы юзабилити
Навигация мобильных версий сайтов и приложений должна быть наглядной, понятной и вдобавок занимать минимум места на экране. По сути, она должна дополнять собой инструменты поиска, а иногда — и заменять их, и этому есть несколько причин:
На мобильных устройствах правильная навигация еще более актуальна: занимая существенную часть экрана, она привлекает намного больше внимания, чем на десктопе. Из-за недостатка места строка поиска и ссылки меню в верхней части страницы могут помешать быстро получить нужную информацию. Не заставляйте пользователей скроллить, обращайте пристальное внимание на эти элементы — они должны быть заметны с первого взгляда, но при этом не нарушать главный принцип юзабилити мобильных сайтов: приоритет контента перед интерфейсом.
На сегодняшний день это одна из главных проблем мобильных интерфейсов: как сделать навигацию заметной и удобной для использования, и при этом не отвлекать от содержимого. Рассмотрим ключевые принципы построения навигации мобильных сайтов и приложений на конкретных примерах.
Верхняя панель навигации
Верхняя панель навигации досталась мобильным сайтам в наследство от десктопных устройств. Эта полоска в верхней части экрана, на которой размещены основные навигационные ссылки — популярный и достаточно эффективный инструмент, однако имеет два существенных недостатка. Во-первых, он хорош, только когда на сайте относительно мало других элементов навигации, и во-вторых — занимает слишком ценное пространство в верхней части экрана.
Вот, например, как выглядят главные страницы мобильной версии сайта BBC и приложения Google Play Apps:
Обратите внимание, что Google Play смог уместить больше элементов в панели навигации, используя «карусель»
Панель вкладок
Панель вкладок — ближайший родственник верхней навигационной панели, который часто используется в приложениях. Она может размещаться как в верхней части
страницы (в основном, Android), так и в нижней (IOS).
Панели вкладок, как правило, присутствуют в большинстве мобильных приложений и имеют те же недостатки, что и панель навигации. Существенное их отличие в том, что панель вкладок закреплена, то есть постоянно видна на экране, даже когда пользователь прокручивает страницу вниз, а панель навигации, как правило, просто прокручивается вместе содержанием страницы. Хотя иногда применяется и так называемая «липкая навигация» (sticky navigation), когда навигационная панель остается в верхней части экрана либо автоматически появляется там, когда пользовать начинает скроллить страницу вверх.
В качестве примеров можно привести ленту новостей Facebook на мобильных платформах. Facebook на iPhone (слева) и Android (справа) использует панель вкладок для основной навигации по приложению. Вкладки расположены в соответствии с официальными принципами данных операционных систем: внизу — на iPhone и в верхней части страницы — на Android. При этом навигационные иконки на IOS еще и подписаны:
Если их более пяти, становится трудно уместить их все на панели, сохранив при этом оптимальный для сенсорного экрана размер. Конечно, можно использовать «карусель», как в примере с Google Play — то есть разбить пункты навигации по категориям, но это не всегда уместно. Пользователь не всегда может догадаться, что за пункты скрываются за следующим элементом карусели, и не всегда станет проверять их.
Пример — старая версия приложения Weather Channel: здесь панель вкладок реализована так, что не сразу понятно, что каждая вкладка внизу скрывает под собой еще несколько. И тем более сложно угадать, какие именно пункты там содержатся:
Если вы решите использовать панель навигации или панель вкладок, они должны быть основным элементом интерфейса, но еще немного места стоит отвести на другие инструменты — например, на окно поиска.
Если на сайте 4-5 основных вариантов навигации, возможно, имеет смысл сделать их видимыми постоянно, особенно если они ведут к часто используемым страницам и опциям. Однако, не забывайте, что навигация должна соответствовать контексту приложения. Так, если есть другие обязательные элементы — например, иконка корзины, вход в учетную запись и т. д, то их тоже нужно учитывать, чтобы в целом интерфейс не занимал слишком много места.
Например, вот как выглядит страница результатов поиска сайта AutoZone:
Хотя в панели навигации содержится всего четыре основных пункта (Магазин, Консультации по ремонту, Заказ и Найти магазин), помимо них на страницу выводится еще несколько элементов интерфейса (логотип, корзина, строка поиска, вкладки с результатами поиска и т. д.), так что суммарно они занимают около трети экрана.
Скрытые меню (сэндвич и другие варианты)
Сэндвич-меню, или меню-гамбургер — это навигационное меню, содержащее в себе несколько пунктов или даже несколько подменю и разворачивающееся, только когда пользователь кликает по нему. В свернутом состоянии оно занимает минимум места, и в этом одновременно его преимущество и недостаток, так как данный элемент навигации менее заметен, чем обычное меню.
Пример использования сэндвич-меню — сайт USA Today. Здесь оно применяется для основных навигационных опций. Открывается нажатием на значок в левом верхнем углу экрана:
Еще один вариант скрытой навигации — меню обнаруживается, только когда пользователь проводит пальцем по экрану. Например, в приложении Sephora на внутренних страницах меню можно вызвать, проведя пальцем слева направо:
Однако самой кнопки меню не видно, поэтому многие пользователи, скорее всего, не обнаруживают эту функцию и ограничивают себя в функционале, используя только видимые кнопки.
В целом, как уже говорилось выше, скрытое меню имеет одно существенное преимущество перед навигационной панелью — оно занимает минимум места. Однако имейте в виду, что большую часть времени навигационные ссылки будут скрыты. Чтобы воспользоваться ими, юзер должен целенаправленно зайти в меню и выбрать один из пунктов, к чему он еще не совсем привык, несмотря на то, что в мобильных версиях сайтов гамбургер-меню встречаются уже довольно часто. В связи с этом, стоит доработать систему навигации с помощью дополнительных инструментов — например, перекрестных ссылок.
Навигационный хаб
Так называют страницу (обычно это главная страница сайта), на которой размещены все ключевые навигационные элементы. Это узловая точка, перекресток всех дорог, куда пользователь возвращается каждый раз, когда ему нужно перейти в другой раздел.
Недостаток данного подхода в том, что домашнюю страницу приходится полностью отдать под нужды навигации, а пользователя вынудить делать лишний шаг (возвращение на главную) при перемещении по сайту.
Это, прежде всего, сайты и приложения, используемые не для просмотра контента, а для достижения очень конкретных задач — например, регистрации на рейс или изменения тарифа мобильной связи. В таких случаях пользователь редко выполняет более одной задачи за посещение, поэтому необходимость возвращаться на главную страницу для выбора другой ветви навигации его не будет раздражать.
Наглядный пример — мобильная версия сайта авиакомпании United. На главной странице расположены ключевые навигационные элементы, а на внутренних в верхней части страницы предусмотрена кнопка «Home» для возврата на главную. Причем пользователи редко совершают два типа действий (например, покупку билета и регистрацию на рейс) за одно посещение. Так что большинству из них эта кнопка не понадобится.
Выводы
Сделать мобильную навигацию простой и удобной не так просто из-за ограничений, связанных с небольшим размером экрана. Можно по-разному пробовать решать эту задачу, но почти всегда вы будете сталкиваться с проблемами юзабилити.
Суть в том, чтобы выбрать такие решения, недостатки которых меньше всего будут проявляться конкретно на вашем сайте:
Смартфоны сегодня присутствуют практически во всех сферах человеческой деятельности. Различные приложения помогают людям и делают их жизнь проще. Задача дизайнера заключается в том, чтобы создать такой интерфейс приложения, который отвечал бы всем потребностям пользователя и при этом был красивым и удобным в использовании. Для того, чтобы создать эффективно работающий интерфейс, дизайнеру нужно хорошо изучить особенности мобильных приложений, разобраться в их структуре и функциональности. В настоящее время довольно трудно описать стандартный набор экранов для «стандартного» приложения, поскольку мобильная индустрия, а вместе с ней и дизайн приложений, развиваются очень быстро. Однако есть смысл разобраться в том, какие мобильные экраны являются наиболее популярными и распространенными и какие конструктивные элементы в них используются.
Общие экраны
Работа с мобильным приложением начинается с заставки. Первое впечатление – это один из ключевых моментов, влияющих на мнение пользователя о мобильном приложении. Когда пользовательский интерфейс нравится с самого начала взаимодействия с приложением, есть хорошие шансы, что он станет популярным у целевой аудитории. Вот почему заставке должно быть уделено столько же внимания, сколько и любому другому экрану приложения, включая самые важные.
Заставка это именно то, что видит пользователь при запуске приложения. Как правило, дизайн заставки лаконичен и включает в себя название, логотип и иногда слоган продукта. Чтобы убедиться, что заставка будет хорошо смотреться на разных устройствах, дизайнеры часто располагают элементы в середине экрана. Заставка не должна раздражать: не рекомендуется использовать ее более 4-8 секунд, так как это может вызывать раздражение пользователей. Хорошим выходом из положения будет показ прогресс-бара, для того, чтобы самые нетерпеливые пользователи могли узнать, сколько времени осталось до запуска приложения.
Экран с вводной информацией
Онбординг (onboarding) – это набор экранов, представляющих мобильное приложение, его навигационную систему, функции и преимущества. Эти экраны видят пользователи, которые впервые запускают приложения. Онбординг помогает пользователям разобраться с функционалом, приложения, понять, как работают элементы управления и решить, может ли это приложение помочь им в решении их повседневных проблем.
Структура и содержание экранов, входящих в обучающий набор, очень индивидуальны и создаются исключительно под конкретный проект. Тем не менее, есть некоторые общие тенденции в дизайне экранов онбординга. Во-первых, в обучающих экранах часто используются иллюстрации, представляющие определенную функцию или выгодную услугу в привлекательном и легко декодируемом виде. Кроме того, дизайнеры часто используют талисманы-маскоты, которые персонализируют приложение и устанавливают эмоциональную связь с пользователем. Сильные, хорошо продуманные текстовые блоки также очень важны для данной группы экранов. Текстовые фрагменты должны быть краткими, полезными и хорошо читаемыми.
Меню и главные экраны
Главный экран является неотъемлемой частью любого приложения. В контексте мобильных приложений это основной экран, с помощью которого пользователи взаимодействуют с большинством опций приложения. Главный экран проектируется с учетом типа продукта и его назначения, но есть основные элементы, типичные для домашних (Home) экранов. Прежде всего, на основном экране обычно присутствует поле поиска или кнопка. Они нужны для того, чтобы пользователи могли легко найти нужные данные. Кроме того, нужно помнить, что домашний экран является отправной точкой пользовательского путешествия, поэтому он часто включает в себя элементы навигации, обеспечивающие доступ к разным разделам приложения.
Чтобы упростить процесс взаимодействия, дизайнеры часто помещают на таких экранах меню, которое содержит список возможных действий и направлений, куда пользователь может попасть за один клик. Существует два варианта представления меню в мобильных приложениях: меню может быть частью главного экрана или занимать отдельный экран. Практика показывает, что следует ограничить количество опций в меню, их должно быть не более семи, то есть должны показываться только самые важные разделы. Если это сделать не удается, то можно использовать подкатегории.
Экраны входа и профиля
Сегодня многие мобильные приложения предлагают пользователям создавать свои личные учетные записи, поэтому дизайнеры должны знать, как работать с экранами входа и профиля. Входной экран должен быть минималистичным и понятным, пользователям не должны испытывать трудности с доступом к приложению. Как правило, на экране есть два поля, в которых пользователь может ввести свое имя (логин) и пароль, а также кнопка подтверждения действий. Для людей, впервые запустивших приложение, должна быть опция регистрации.
Профиль делает взаимодействие с мобильным приложением более персонализированным и позволяет эффективно работать с данными. Кроме того, личная учетная запись является ключевой частью любого приложения социальной сети, так как позволяет делиться личной информацией с другими людьми. Основная задача дизайнеров – минимизировать риски с помощью UX. Это означает, что страница профиля прежде всего должна быть простой. Объем информации на ней должен быть ограничен, иначе экран будет выглядеть слишком сложным. Более того, очень важно, чтобы навигация на профильном экране была интуитивно понятной. В результате пользователям не придется прилагать много усилий для того, чтобы разобраться в устройстве приложения. И последнее: экран профиля должен быть ориентирован на целевую аудиторию приложения. Исследования пользовательской аудитории — обязательное условие для дизайнера, если он хочет, чтобы его приложение стало популярным.
Экран статистики
Часто мобильные приложения предоставляют доступ к статистике действий пользователя. Чем больше данных показывает приложение, тем сложнее создать для статистики отдельный экран. Дизайнеры должны удостовериться, что пользователь увидит всю ключевую информацию, которая будет при этом понятной и пригодной для использования. Графики, диаграммы, цифры и символы могут сделать экран статистики очень информативным и при этом привлекательным внешне. Более того, такие экраны часто требуют отдельной типографики, облегчающей сканирование информации.
Календарь
Приложения-планировщики предоставляют пользователям возможность пользоваться персональным календарем. В зависимости от типа приложения, календарь может выполнять разные функции, например, отображать расписание или совершать напоминания. Визуальный стиль экрана календаря должен соответствовать общему дизайну приложения и хорошо вписываться в общий функционал.
Экран электронной коммерции
Основная цель любого проекта, связанного с электронной коммерцией – продавать продукты или услуги. Визуальная презентация оказывает большое влияние на решения пользователей. Каталог – это список товаров, которые компания, создавшая приложение, предлагает своим потенциальным клиентам. Задача дизайнера – создать каталог, который привлечет внимание людей и поспособствует приобретению продукта. Список продуктов в мобильных каталогах может быть очень похожим на каталоги обычных интернет-магазинов, где элементы располагаются в определенном порядке и могут просматриваться с помощью прокрутки страницы.
Количество продуктов в одной строке в этом случае зависит от ширины экрана. Фотографии продуктов должны быть высококачественными, чтобы пользователи могли в деталях рассмотреть товар. Также экран каталога должен включать кнопку действия, с помощью которой пользователь мог бы добавить товар в корзину, не переходя на отдельную страницу с этим продуктом.
Контрольный экран
Сегодня покупки все чаще совершаются с помощью смартфона, поэтому многие компании пытаются сделать процесс мобильных покупок максимально удобным. Процесс оформления заказа — это последний шаг перед приобретением товара. Для дизайнеров крайне важно сделать все, чтобы людям было комфортно совершать покупку. Основная часть контрольного экрана это форма, где пользователь заполняет поля с личными данными, такими, как имя, адрес и номер банковской карты. Тип требуемой информации зависит от вида онлайн-магазина или сервиса. Людям очень важно быть уверенными в безопасности, так что дизайнерам нужно сделать все возможное, чтобы убедить покупателей в том, что их конфиденциальные данные не попадут в распоряжение третьих лиц.
Социальные экраны
Говоря об этом типе экранов, прежде всего нужно упомянуть ленту событий или новостную ленту. Люди часто используют социальные сети для общения и мониторинга новостей. Feed – это постоянно меняющийся список новостей и других данных, которые просматривают пользователи. Практика показывает, что мобильные пользователи предпочитают быстро сканировать новостной канал, поэтому им нужна четкая схема, которая не будет перегружена визуальными деталями. Новости могут располагаться последовательно, в виде списка. Чтобы сделать навигацию более интуитивной, на экране должны показываться насколько новостей, некоторые из которых только частично.
Контакты
Дизайн списков контактов развивался в течение долгого времени. От заметок на бумаги до различных цифровых вариантов он менялся визуально, при этом обеспечивая главную цель – хранение данных о друзьях и близких. Экран контактов в мобильном приложении должен предоставлять пользователям список данных, отсортированных в алфавитном порядке. Каждый контакт должен быть доступен, он должен включать подробную информацию, такую, как номер телефона, электронную почту, а также контакты в различных мессенджерах. Чтобы упростить процесс поиска, можно сопроводить каждый контакт фотографией или автатаркой.
Музыкальные экраны и плейлисты
Любителям музыки нравится создавать собственные плейлисты с музыкальными композициями. Очевидно, что музыкальное приложение должно предоставлять своим пользователям подобный функционал. Экран списка воспроизведения может быть похож на разные экраны приложений: в нем должен иметься список треков, в которых указано название песни и исполнителя, а также продолжительность записи. Кроме того, дизайнеры могут добавить небольшое изображение альбома, с которого был взят конкретный трек. Если у песни не графического изображения, его можно создать, разместив в этом поле какой-нибудь значок.
Плеер
Люди могут слушать музыку и управлять воспроизведением с помощью плеера. Функция плеера позволяет переключать, останавливать и запускать музыкальный трек, пользуясь стандартными кнопками, которые хорошо знакомы пользователям. Обычно блок управления плеером располагается в нижней части экрана приложения. Основную часть экрана при этом занимает изображение. Иногда вместо картинки или фотографии дизайнеры используют цифровой визуализатор, который сопровождает воспроизведение композиции.
В этой статье перечислены основные виды экранов мобильных приложений. Сегодня появляется множество новых дизайнерских решений, так как мир не стоит на месте и у пользователей возникают новые потребности. Дизайнеры должны быть готовы к вызову времени, поэтому им внимательно нужно следить за всеми тенденциями в сфере мобильных приложений.