Дизайн мобильных приложений
и адаптивный дизайн

Особенности дизайна для мобильного экрана

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

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

Подход «Mobile first»

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

Все плюсы и минусы мобильных приложений связаны с необходимостью пользователем сначала установить приложение на телефон из App Store или Google Play.

Преимущества мобильного приложения — это возможность использовать инфраструктуру платформ iOS и Android:

• Push-нотификации
• Доступ к камере, фотоальбому, контактам
• Прием платежей
• Отзывы, топы, подборки в App Store и Google Play
• Быстрый доступ через иконку на рабочем столе

Недостатки мобильного приложения по сравнению с мобильной версией следующие:

• Разные средства разработки под разные платформы (Android/iOS). Тут скорее всего не получится сэкономить и придется разрабатывать два приложения под две платформы.
• Обновления происходит только через App Store/Google Play, то есть они приходят на вашу ЦА неравномерно и с задержкой.
• Нельзя быстро начать работу с продуктом, просто открыв браузер. Нужно скачивать приложение — барьер для части аудитории 40+.

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

Мобильная (адаптивная) версия

Почему всем десктоп сайтам нужно делать мобильную версию?

• Доля мобильного трафика в интернете сегодня больше 50% и она продолжает расти
• Место в выдаче поисковиков (даже для для десктопа) зависит от того, насколько хорошо у вас работает мобильная версия
• Мобильная версия работает сразу на всех телефонах, обновляется одновременно с десктопом и не требует отдельной команды разработки, процедуры деплоя и т.п.

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

С точки зрения дизайна самый экономный способ реализовать адаптацию под планшеты — взять десктопную версию и сделать ее поуже (на 800px или 1024px шириной). Некоторые сайты просто «отбрасывают» правую/левую колонки, если они у них есть, и масштабируют оставшийся контент на 100% ширины экрана планшета.

В нишах, где доля планшетов высока (продукты для авторынка, СМИ/медиа, обучение, игры, музыка/искусство/фото), часто возникает необходимость более детальной проработки под этот формат:

• под разрешение различных моделей планшетов
• под две ориентации (portrait/landscape)
• под управление только с помощью нажатия (то есть без ховера и правой кнопки мыши)