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

Главное

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


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

Google Material Design Guidelines

iOS Human Interface Guidelines

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

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

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

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

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

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

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

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

Названия

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

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

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

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

Иконки

Иконки приложения на Андроиде на Google.Drive

Иконки приложения на iOS на Google.Drive

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

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

В Андроиде допускается сложная форма иконок, поэтому правый верхний угол иконки оставляйте острым.

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

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

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

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

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

Мокап для Гугл Плея на Google.Drive

Мокап для iTunes на Google.Drive

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

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

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

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


  1. Общий текст про приложение — обязательная часть

  2. Тезисы с заголовками — если есть

  3. Текст про онлайн-сервис — если есть


Заставка

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

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

Вход и восстановление пароля

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

Дизайн модуля сделан по гайдлайнам Гугла и Эпла. Цвета, ссылки и тексты изменяются и настраиваются.

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

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

Если пользователь забыл пароль, модуль поможет восстановить.

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

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

Не забудьте, что при входе по номеру телефона на Андроиде приложение сможет прочитать смс и подставить код — пользователю будет приятно.

Навигация

В мобильных приложениях построить навигацию можно несколькими способами — табами, ссылками в нижней панели или с помощью бокового меню.

Табы

Табы помогают быстро переключаться между несколькими экранами.

Рекомендуются для:

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

Нижняя панель

Нижняя панель помогает быстро переключаться между несколькими экранами.

Рекомендуются для:

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

Боковое меню

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


Может вмещать много ссылок и другую информацию.

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

Рекомендуются для:

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

Боковое меню открывается свайпом от левого края экрана и по клику на иконке бургера. Закрывается при выборе пункта меню либо свайпом влево.

В меню показывается не только навигация, но и имя пользователя и ссылки для выхода или смены пользователя.

В стандартах для iOS нет бокового меню, но есть Tab Bar, в который обычно помещается 3-5 пунктов.

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

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


Настройки приложения

Настройки в Андроиде

Настройки приложения группируйте на отдельном экране.

Настройки в iOS

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

В общие настройки выносите только настройки уведомлений и mobile data.