Не проектируйте для мобильных устройств (Mobile-first)

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

  • Мобильные телефоны – сенсорное управление, персональные компьютеры управление с помощью курсора
  • На мобильных устройствах медленный интернет, на компьютерах – быстрый.
  • Мобильные устройства работают медленно, компьютеры работают быстро.
  • и т.д…

Но в современной среде устройств эти предположения начинают создавать ряд проблем.

Современные мобильные устройства намного мощнее обычных ноутбуков или персональных компьютеров. Появляется все больше и больше гибридных устройств, которые управляются как при помощи сенсорного экрана, так и с помощью мыши. Планшеты – это мобильные или десктопные устройства? Или это вообще новая категория?

Возможности устройства

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

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

Не проектируйте для мобильных устройств (Mobile-first)

Раньше у нас была версия для десктопных устройств и версия для мобильных устройств, удобная для сенсорного ввода. Такое разделение работало довольно хорошо. Хотя примерно в то же время мы также занимались разработкой Canva Design Lab.

Не проектируйте для мобильных устройств (Mobile-first)

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

Мы ориентировались на разделение «мобильные устройства или настольные компьютеры», хотя вместо этого нам следовало ориентироваться на определенные возможности устройства. В данном конкретном случае это был бы курсор, который по сути соответствует сенсорному управлению или мыши.

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

Область просмотра

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

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

  • Ширина – ширина области просмотра составляет 1518px, а размер экрана – 1536px
  • Высота – высота области просмотра составляет 644px, а размер экрана – 864px
  • Соотношение сторон – соотношение сторон области просмотра составляет 33:14, а экрана – 16: 9.
  • Покрытие – область просмотра покрывает 74% экрана.

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

Распространенный способ проектирования для устройств разного размера – использовать точки останова. Самая большая ошибка с точками останова заключается в размещении их в точках, которые точно соответствуют обычным размерам устройств (375 пикселей, 768 пикселей, 1024 пикселей и т. д.).

Это превращается в кошмар, когда наступает сентябрь и Apple решает выпустить новый iPad – в настоящее время у них в продаже есть 4 модели iPad разных размеров.

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

0px и больше

  • iPhone 5
  • iPhone 11
  • Pixel 2
  • Note 9
  • OnePlus 8

600px и больше

  • iPhone 11 (Ls)
  • iPhone 6 Plus (Ls)
  • Pixel 2 (Ls)
  • Note 9 (Ls)
  • iPad Pro 10.5

900px и больше

  • iPad (Ls)
  • iPad Pro 10.5 (Ls)
  • iPad Pro 12.9
  • MacBook Air 11″
  • Surface Go 2

1200px и больше

  • MacBook Pro 13″
  • MacBook Pro 15″
  • Surface Studio
  • Проекторы
  • Телевизоры

Есть фантастическая статья Дэвида Гилбертсона о 100% правильном способе создания точек останова CSS, в которой подробно рассматривается эта тема.

Указатели (курсоры)

Далее идут указатели. Типичный подход – сенсорное управление vs. мыши – это даже отражено в спецификациях pointer media query – хотя на самом деле это скорее спектр:

Не проектируйте для мобильных устройств (Mobile-first)

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

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

Не проектируйте для мобильных устройств (Mobile-first)

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

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

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

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

Многие устройства поддерживают сенсорный ввод, но не считаются «мобильными», а другие поддерживают несколько разных типов указателей – последнее обновление iPad добавило первоклассную поддержку мыши и трекпада.

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

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

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

Случай использованияМышьСенсорное управление
Третичные действияКлик правой кнопкойДолгое нажатие
ВыделениеДвойной кликТап двумя пальцами
ЗумСпециализированный элемент интерфейсаЩипковое движение

Клавиатура

Клавиатура имеет только два доступных варианта: виртуальная клавиатура или физическая клавиатура. Большинство устройств поддерживают один или другой тип, хотя растет число устройств, поддерживающих оба типа, но никогда одновременно. Например, iPad не будет отображать виртуальную клавиатуру, если подключена Bluetooth-клавиатура сторонних производителей или Smart-клавиатура от Apple.

Не проектируйте для мобильных устройств (Mobile-first)

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

Вначале я упоминал, что есть всего два варианта клавиатуры, хотя это не совсем так. Если вам интересен этот вопрос, вот хорошая статья по альтернативам клавиатуры.

Датчики и оборудование устройств

Датчики устройств и оборудование – вот где все становится интереснее. К ним относятся гироскопы, GPS, haptic engine, камеры, сканеры отпечатков пальцев и датчики внешней освещенности.

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

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

К сожалению, поддержка многих из этих API на различных платформах и в разных браузерах невелика, поэтому будьте осторожны. Большинство из них находится в активной разработке, поэтому стоит быть в курсе доступных API для более интересных опций, таких как haptic feedback и датчики внешней освещенности.

Скорость сети

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

Самая простая проверка – убедиться, что вы вообще подключены к сети. Navigator.onLine API проверяет подключение.

Вы сейчас онлайн! Попробуйте временно отключить соединение…

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

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

Также стоит уточнить, что мобильное соединение не гарантирует медленных скоростей, так же как проводное или WiFi-соединение не гарантирует высоких скоростей. Относительная разница в скорости между Wi-Fi и мобильным интернетом сильно различается по всему миру:

WIFI быстрее

  • Китай
  • Россия
  • Сингапур
  • Южная Корея
  • Великобритания
  • США

Одинаковая скорость

  • Бельгия
  • Бразилия
  • Финляндия
  • Венгрия
  • Норвегия
  • Новая Зеландия

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

  • Австралия
  • Египет
  • Греция
  • Южная Африка
  • Турция
  • Катар

Есть и другие ситуационные факторы, которые могут повлиять на скорость – я уверен, что каждый из вас когда-то использовал нестабильное Wi-Fi соединение в аэропорту или кафе.

И так далее…

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

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

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

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

Total
8
Shares
Добавить комментарий
Related Posts
Руководство по стилям для дизайнеров. “Дизайн, обмен и контроль”
Подробнее

Руководство по стилям для дизайнеров. “Дизайн, обмен и контроль”

Артефакты руководства по стилям используются командами дизайнеров для общего согласования элементов дизайна в руководстве по стилям, и обычно представлены в виде файлов Sketch. В этой статье я опишу рабочий процесс, который я называю Дизайн, обмен и контроль.

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
19
Share