Адаптивность — обязательное условие проектирования интерфейса. Если у сайта нет мобильной версии, его не существует. Пользователь это, скорее всего, переживёт и просто уйдёт, пожав плечами, но для бизнеса это может иметь серьёзные последствия. Всё больше людей сидит в интернете именно с мобильных устройств: если сайт не будет к этому готов, конверсия скажет всё сама за себя.
Чек-лист для мобильной версии:
- сохранён общий дизайн, а значит, пользователь понимает, что находится на том же самом сайте;
- на страницах соблюдена иерархия: все ключевые элементы расположены так, что сразу привлекают внимание;
- на все элементы удобно нажимать пальцем;
- с меню удобно работать;
- если есть поисковая строка, то она находится в быстром доступе;
- изображения уменьшены или кадрированы. Если на них есть текст, его удобно читать и он не занимает всю их площадь;
- размер шрифта основного текста не меньше 15–16 px;
- заголовки пропорциональны основному тексту, и сохранена визуальная иерархия;
- форма сокращена или разбита на несколько шагов.
Рассмотрим работу с изображениями
У изображений есть два варианта поведения в мобильной версии. Вариант первый: фото или иллюстрацию можно просто пропорционально уменьшить по ширине мобильного устройства. Такой способ подходит для изначально небольших картинок или изображений, на которых объект важно показать именно полностью.
Вариант номер два — кадрирование, когда из картинки вырезается определённый участок.
Так же ещё стоит заметить еще один важный момент при работе с изображениями в мобильной версии, это взаимодействие картинок и текста. Дизайнеры часто ставят текст прямо поверх картинки. В десктопной версии это выглядит стильно и экономит место на странице. На мобильном же устройстве тексту приходится ужиматься, занимая при этом почти всю площадь изображения. В этом случае лучше располагать текст ниже изображений. Выглядеть будет не так эффектно, зато ничего не потеряется — текст можно будет прочитать, а картинку рассмотреть.
Спасибо что проявили интерес к материалу. Информация пополняется .
Чтобы не пропустить следующие интересные статьи, рекомендую подписаться на канал.
#сайт #паттерн #дизайн #ux #ui #разработка #верстка #чек-лист #фон #интернет
