Мобильные приложения

Главное

Делайте дизайн приложений, основываясь на привычные для платформ паттерны.

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

Google Material Design Guidelines

iOS Human Interface Guidelines

Предусматривайте разные размеры телефонов (4-5 дюймов), фаблеты (5-6 дюймов) и планшеты (7-12 дюймов). Используйте альбомную ориентацию — на фаблетах и планшетах ее часто используют. Используйте адаптивную верстку приложений.

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

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

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

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

Предусматривайте как приложение будет выглядеть и работать на старых версиях операционных систем — Андроид до версии 4.4, iOS до версии 8.

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

Используйте 3D тач в iOS и долгий тап в Андроиде. В том числе и по иконке приложения на рабочем столе. Это поможет пользователю проще получить нужную информацию. Но не используйте форс тач и долгий тап для главных функций — не все пользователи о нем знают.

Названия

В магазинах, на промосайтах и в рекламе используйте полное название — Контур Приложение. Например, Контур Агент, Контур Диадок, Контур Календарь.

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

На рабочем столе приложение называйте коротко — Приложение. Например, Агент, Диадок, Календарь.

На рабочем столе место ограничено, короткие названия не обрезаются и легче читаются.

Иконки

Иконки приложений в Figma

Иконки приложений делайте совпадающими с иконками сервисов — так пользователям легче найти нужное приложение в магазине.

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

Описание приложений в магазинах

Скриншоты приложения

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

Мокап для Гугл Плея и iTunes в Figma

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

Используйте от 3 до 6 скриншотов, чтобы ясно показать приложение пользователям. Видеоролик приветствуется, но стандарта по видео у нас пока нет.

Описание приложения

Структура описания в эппсторе и гуглплее такая:

  1. Общий текст про приложение — обязательная часть
  2. Тезисы с заголовками — если есть
  3. Текст про онлайн-сервис — если есть

Заставка

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

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