Введение
После поступления на работу я продолжал разрабатывать дизайн с акцентом на веб-интерфейсы. Затем я был включен в проект Bizend, и на основе системы дизайна Bizend продолжил работу над дизайном веб-экранов, в течение более года постепенно накапливая веб-ориентированное восприятие. Я понял, сколько пространства нужно оставить для дыхания, какой шрифт должен быть для удобочитаемости, где разместить кнопки так, чтобы к ним тянулись руки…
Затем начался новый проект мобильного приложения «Бантон», и, к счастью, мне было назначено быть ответственным дизайнером. Когда я столкнулся с мобильной платформой, привыкнув к компонентам Bizend, я понял, что это не просто уменьшение экрана. Я整理 разные моменты, когда на самом деле это было иначе, сравнивая веб и мобильные платформы.
Шрифт
Перед началом работы над экранами я сначала整理овал дизайн-токены и типографику. Когда я работал над вебом, использовал размер шрифта 12px для основного текста, а для работы с мобильным приложением «Бантон» установил 13px как минимальный размер, за исключением меток и чипов.
На первый взгляд это странно. Смартфоны находятся на расстоянии 30–40 см от глаз, что ближе, чем мониторы (50–70 см). Разве при близком расстоянии не виднее?
В принципе, это правильно. Однако причина, по которой текст на мобильных устройствах кажется меньшим, заключается в разрешении. 1px на мониторе и 1px на смартфоне имеют разный физический размер. Хотя экран у смартфона небольшой, его разрешение крайне высоко, что делает фактическую площадь, занимаемую 1px, гораздо меньшей. То есть, даже если количество пикселей одинаковое, на мобильных устройствах они рендерятся как гораздо меньшие точки. Чтобы это исправить, на мобильных устройствах используются единицы sp (Android) и pt (iOS), чтобы автоматически масштабироваться в соответствии с разрешением устройства.
Согласно рекомендациями, iOS Human Interface Guidelines рекомендуют минимум 17pt, а Android Material Design - минимум 12sp, в реальной практике текст в основном используют размером от 14 до 16sp. Платформенные руководства - это лишь минимумы, и если целевая возрастная группа выше, то размер должен быть увеличен. То есть, стандарты должны основываться на том, кто читает текст.
Безопасная зона
При разработке веб-интерфейсов основой для макета является область просмотра браузера. Хотя это может варьироваться в зависимости от прокрутки или размера экрана, в основном, контент должен быть размещен внутри области просмотра.
На мобильных устройствах, даже если экран существует, нельзя использовать весь доступный участок. Такие участки, как вырез (notch), динамический остров, статусная строка, индикатор домашнего экрана и т.д., находятся вне контроля дизайнера. Это пространство, которое предоставляет система, и если контент попадает сюда, он может быть скрыт или недоступен для касания. Эти участки, которые следует избегать при размещении контента, называются безопасности областью (Safe Area), и это необходимо учитывать в мобильном дизайне.
При проектировании мобильных экранов дизайнеры должны заранее зарезервировать область статусной строки и индикаторов домашнего экрана. Особенно при проектировании закрепленной кнопки в нижней части (Fixed Footer), игнорирование области индикатора домашнего экрана может привести к тому, что кнопка будет перекрыта индикатором или срезана, что создаст неудобства при использовании устройства. Если в вебе одно ощущение срабатывало, что достаточно разместить внутри области просмотра, то в мобильной среде нужно изменить мышление, чтобы помещать в безопасную область.
На самом деле, я четко определил это как правило в реальной работе. Для страниц деталей без нижней навигационной панели я зафиксировал нижнюю безопасную область на уровне 48px и основывался на размещении контента и кнопок выше этой области.
На мобильных устройствах размеры вырезов, высота индикаторов домашнего экрана и другие параметры различаются в зависимости от производителя и модели. Вместо того чтобы работать под конкретное устройство, разумно начинать с широкой безопасной зоны, чтобы безопасно реагировать на различные условия.
Положение навигации
На веб-сайте GNB (Глобальная навигационная панель) обычно расположена в верхней части, а LNB (Локальная навигационная панель) — в левом боковом меню. Это устоявшийся паттерн, поэтому пользователи воспринимают его как должное.
Но мобильные приложения отличаются. Поскольку управление осуществляется главным образом большим пальцем, основное меню размещается в нижней части экрана, что называется Bottom Navigation (Нижняя навигация). Когда смартфон держат одной рукой, область, до которой естественным образом касается большой палец, — это нижняя часть экрана. Напротив, верхний угол — это область, до которой труднее всего добраться одной рукой.
Если часто используемая навигация находится вверху, пользователю каждый раз придется перемещать руку или поправлять телефон. Это понятие называется Thumb Zone (Зона большого пальца), и оно влияет на весь мобильный UX. Обычно часто используемые действия размещаются внизу, а менее важная информация — вверху. Закрепление кнопки CTA внизу экрана также связано с этой причиной. Применение паттерна верхней централизованной навигации веб-сайта к мобильному устройству уменьшает удобство использования. Всегда следует учитывать, что способы физического управления различаются на разных платформах.
Наведение
При проектировании веб-интерфейса элемент hover является обязательным для добавления. Когда курсор мыши наводится на кнопку, цвет меняется, подчеркивание появляется при наведении на ссылку, а при наведении на карточку тень становится более явной — это самый простой способ сообщить пользователю, что здесь можно кликнуть.
Но в мобильной среде самого курсора мыши нет, поэтому hover не существует. В момент касания пальцем уже происходит переход в состояние pressed (нажатие), и времени для hover нет. В мобильных устройствах интерактивные элементы отображаются иначе.
-
Состояние нажатия: изменение цвета фона или непрозрачности в ответ на касание
-
Эффект Ripple (Android): визуальная обратная связь в виде волн, распространяющихся от точки касания
-
Тактильная обратная связь: физическое уведомление о касании с помощью вибрации
То, что решалось с помощью hover на веб-сайте, должно быть переведено на другой язык взаимодействия в мобильных устройствах. Более того, поскольку hover в принципе отсутствует, необходимо четко показать, что это элемент, на который можно нажать, посредством самого пользовательского интерфейса. Визуализировать область, которая может быть нажата, с помощью цвета фона или границы, или разместить текстовые метки вместе с иконками — это некоторые из методов.
Поток информации
Веб-экран широкий. Используя горизонтальные 2- и 3-колоночные макеты, можно вместить довольно много информации на одном экране. Например, структура, позволяющая развернуть информацию сбоку, добавив панель с деталями рядом с таблицей.
Мобильные устройства узкие в горизонтальном направлении и длинные в вертикальном, и места для разворачивания информации сбоку нет. Поэтому информация в мобильном устройстве проектируется с учетом глубины (depth). Это структура, где экран со списком переходит в детальный экран, а затем в экран с настройками. То, что отображалось на одном экране в вебе, может быть разбито на 2-3 уровня на мобильном устройстве.
Поскольку количество информации, которую можно разместить на одном экране, ограничено, становится гораздо более важным определять приоритеты, что показывать первым, а что скрывать. Если вопрос в вебе заключался в том, как расположить информацию, то в мобильной среде важным становится, что показать первым.
Однако чрезмерное дробление информации может увеличить глубину и в итоге затруднить пользователю понимание его текущего местоположения. Обычно рекомендуется проектировать в пределах 3 уровней глубины, и именно поэтому. Делая разделение информации, важно также задумываться о структуре, чтобы пользователь не потерялся — это важное чувство в мобильном дизайне.
Расположение кнопок
На веб-сайте кнопки чаще всего размещены внутри потока контента. Пользователь заполняет форму, а внизу находится кнопка отправки, или же рядом с заголовком области, требующей действий, располагается кнопка редактирования. При прокрутке страницы кнопки поднимаются вверх вместе с ней, и большинство кнопок остаются видимыми.
На мобильных устройствах часто встречаются другие паттерны.
-
Фиксированная кнопка внизу : кнопка CTA, фиксированная в самом низу экрана, которая всегда находится на одном и том же месте, независимо от прокрутки. Пользователь может получить мгновенный доступ к основному действию, где бы он ни смотрел.
-
Плавающая кнопка действия (FAB) : круглая кнопка, которая плавает над экраном. Она всегда видима, перекрывая контент.
Эти паттерны можно использовать и на веб-сайте, но они работают гораздо естественнее на мобильных устройствах. Это связано с зоной для больших пальцев, о которой говорилось ранее, поскольку фиксированная кнопка находится в наиболее удобном для нажатия месте.
На практике вопрос о том, фиксировать ли эту кнопку или размещать ее внутри потока контента, является решением, которое повторяется для каждого экрана. Если контент короткий, фиксированная кнопка может выглядеть неуместно, а если прокрутка длинная, наличие фиксированной кнопки улучшает удобство использования. Мы применили фиксированное расположение на экранах с длинной прокруткой, например на экране деталей объявления, и разместили элементы на экранах с коротким контентом внутри потока.
Еще одним фактором, который мы учитывали, является уровень риска, связанного с кнопками. Кнопки, которые могут привести к проблемам в условиях ограниченного пространства или случайного нажатия, должны быть намеренно размещены подальше от зоны для больших пальцев, и мы разработали их так, чтобы проходить через дополнительный этап с кнопкой «еще», чтобы избежать ошибок.
Заключение
Мы рассмотрели различия между вебом и мобильными устройствами по очереди, и в конечном итоге оказалось, что обе платформы имеют довольно разные подходы. Если веб — это вопрос расположения пространства, то мобильный в большей степени связан с тем, что выбрать.
При изменении платформы меняются и способы физического взаимодействия пользователя, а также способы потребления информации и расстояние до экрана. Если не понять эти различия, то можно просто перенести паттерны, которые хорошо работали на вебе, на мобильные устройства. В результате работы я сам почувствовал, что при смене платформы необходимо также изменить свое восприятие.
Ссылки и источники
eykim