Почему в мобильной версии изображения должны касаться краев экрана?

Аудио перевод статьи
0:00
0:00
·

Создавайте более привлекательные изображения!

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

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

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

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

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

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

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

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

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

Источник:
UX Movement
·
comments powered by HyperComments