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

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

В свою очередь, мобильный дизайн – одна из областей графического дизайна, которая начала развиваться несколько лет назад. С запуском iPhone 9 января 2007 года и App Store 10 июля 2008 года, рынок создания мобильных приложений стал особенно интересен разработчикам и компаниям, так как появились аппараты, обладающие подходящей для работы приложений мощностью.

10 лет App Store: эволюция дизайна первых приложений

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

Для начала

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

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

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

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

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

Наверняка вы замечали, что держа устройство в одной руке, бывает довольно сложно дотянуться до некоторых иконок. То, что для простого пользователя просто мелкое неудобство, для разработчиков и дизайнеров – настоящая головная боль. Эти “труднодоступные” зоны сильно зависят от размеров устройства и его пропорций. При создании приложения это всегда нужно учитывать, так как иногда дизайнеры располагают самые важные кнопки там, куда сложно дотянуться.

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

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

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

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

Несколько базовых разрешений для примера:

• 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, суть сайта не заключается в движении и взаимодействии, в отличие от дизайна приложений. Дизайн взаимодействий и микро взаимодействий сложен не только потому, что требует понимания платформы и пользователя, но и из-за необходимости быть почти невидимым.

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

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

Прототипы

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

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

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

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

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

В наше время около 70% людей страдают заголовочным потреблением, то есть дальше первой строки никто не заходит. Суть должна быть написана коротко и понятно. В приложениях мало кто любит читать большие тексты, поэтому многие просто пропускают онбординги, подсказки и туториалы. Если у вас уже есть текст для сайта, то урежьте его минимум в два раза и вы придете к верному решению для мобильного приложения. А лучше всего обратиться к UX-писателю. Задачей UX-писателя является построение такого интерфейса, в котором пользователю не нужны были бы подсказки – все действия совершались интуитивно.

В завершении

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