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

Главное

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


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

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 нет бокового меню. Для приложений Контура для iOS мы нарисовали кастомное боковое меню. Он выдвигается слева при свайпе от левого края экрана либо при нажатии на иконку бургера. Иконка при этом поворачивается на 90 градусов, а топ-бар с иконками скрывается.

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

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

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

Настройки в iOS

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

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