Как бросить веб-дизайн и заняться мобайлом

Коротко

Материал впервые опубликован в 2018 году. Перечень устройств и отдельные платформенные примеры ниже отражают практику того периода; перед новым проектом сверяйтесь с актуальными гайдлайнами iOS и Android.

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

Историю веб-дизайна обычно отсчитывают от первой веб-страницы, которую Тим Бернерс-Ли опубликовал 6 августа 1991 года. Она состояла из текста и ссылок. В 1993 году графический браузер Mosaic расширил возможности представления страниц.

Мобильный дизайн начал активно развиваться после появления iPhone в 2007 году и App Store в 2008-м: смартфоны получили достаточную производительность, а разработчики — массовый канал распространения приложений.

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

Для начала

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

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

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

Взаимодействие

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

При работе с мобильным устройством ваш курсор — это палец. И так же, как и в вебе, надо думать о том, чтобы пользователь не проклинал вас, пытаясь ткнуть в нужную область экрана. В мобайле нужно делать поправку еще и на антропометрию: площадь соприкосновения пальца с экраном. При создании дизайна приложений вы столкнетесь с таким понятием, как минимальная область касания. На момент публикации статьи рекомендации платформ предлагали ориентироваться на зону касания 44×44 пункта в iOS и 48×48 dp в Android. В редких случаях можно уменьшить зону нажатия, но это уже большой риск: пользователь может просто перестать попадать по нужной иконке. Еще надо учитывать, что палец всегда находится около экрана, и каждое неаккуратное касание приравнивается к клику. Соответственно, возникновение ошибки возрастает.

Области касания по версии Скотта Херффа иллюстрируют зоны, куда может дотянуться большой палец

Разнообразие устройств

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

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

Примеры базовых разрешений устройств, актуальные для практики 2018 года:

• 320×480 (iPhone 4)
• 320×568 (iPhone 5)
• 375×667 (iPhone 6,7,8)
• 375×812 (iPhone X)
• 414×736 (iPhone 6+,7+,8+)
• 360×640 (большая часть Android-устройств)
• 412×732 (Pixel 2)
• 360×720 (Pixel XL)
• 360×740 (Galaxy S8)

В практике автора на момент публикации макет для iOS создавался в размере 1×. Это значит, что на устройстве он потом будет увеличен, так как плотность пикселей совершенно другая. На iPhone 3 разрешение было 320×480. Пропорции экранов от iPhone 6 до iPhone 8+ не менялись и остаются 375×667. В Android принято рисовать под 360×640.

Обычно именно в таких размерах нужно создавать дизайн мобильных приложений. При этом у каждого дизайнера есть свои стандарты и наработки. Например, я использую только два разрешения — 375×667 и 360×640, так как это наиболее распространенные пропорции экранов на устройствах. Что удобнее для вас — подскажет практика.

Различие платформ

Когда вы только начнете создавать приложения, первое время будете постоянно напоминать себе о том, что в Android существует кнопка «назад» и что боковое меню — это основной элемент навигации. А на iOS наиболее распространенным элементом навигации является tab bar, а в боковом меню спрятаны наименее важные функции. И это лишь малая часть различий.

Не стоит забывать о гайдлайнах — iOS Human Interface Guidelines и Android Material Design Guidelines, но помимо их изучения вам нужен опыт использования мобильных устройств с различными платформами. Рекомендую вам хоть немного разбираться в технических аспектах и для общего понимания просматривать документацию разработчиков. Так вы сможете наладить более простую коммуникацию с техническими специалистами. Знать наименование структурных элементов тоже полезно, так как, например, навбар в iOS — это верхняя навигационная панель, а в Android — это нижняя навигационная панель, и они совершенно разные в поведении. В iOS линия, разделяющая ячейки в табличном представлении, называется сепаратор, а в Android — дивайдер.

Помните, что переносить дизайн на 100% предназначенный для одной платформы на другую — это верный способ убить юзабилити. У пользователей есть свои привычки и особенности использования смартфона. Несколько лет назад никто не мог представить, что при просмотре приложения на iOS и на Android дизайн будет одинаковый. Если такое случалось, то приложение на одной из платформ просто погибало. И когда пользователь iOS видел дизайн и навигацию из Android, то у него было ощущение, что ему подсовывают что-то низкопробное. А потом заходил в App Store и искал то, что будет соответствовать нативному дизайну платформы. Но времена меняются и сейчас все больше и больше приложений выглядят очень похоже на разных платформах. При этом в большинстве случаев учитывается то, как пользователи привыкли взаимодействовать с конкретной системой.

Не все так легко, как кажется

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

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

В целом процесс продумывания и создания дизайна для веб-сайтов, как правило, довольно статичен и не учитывает переходы между страницами. Например, сайтам не нужна кнопка «назад», ведь она есть в окне браузера. Поэтому у веб-дизайнеров при создании приложения возникают вопросы по взаимодействию внутри приложения. Несмотря на то, что за последние годы произошли улучшения в создании сайтов при помощи JavaScript и CSS3, суть сайта не заключается в движении и взаимодействии, в отличие от дизайна приложений. Дизайн взаимодействий и микровзаимодействий сложен не только потому, что требует понимания платформы и пользователя, но и из-за необходимости быть почти невидимым.

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

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

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

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

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

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

Какие тексты?

Пользователи часто просматривают интерфейс по заголовкам и коротким фрагментам. Суть должна быть написана коротко и понятно. В приложениях мало кто любит читать большие тексты, поэтому многие просто пропускают онбординги, подсказки и туториалы. Не сокращайте веб-текст механически: оставьте информацию, которая помогает выполнить действие в мобильном сценарии. А лучше всего обратиться к UX-писателю. UX-писатель помогает сделать действия и последствия понятными без лишних инструкций.

В завершение

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

Впервые опубликовано: 2 августа 2018 года.