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

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

1. Сохраняем наполнение и функционал страницы.

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

2. Соблюдаем последовательность информации.

Паттерн чтения (паттерн – это определенный повторяющийся образец поведения) информации у нас соответствует буквам «Z» и «F», т.е. взгляд скользит слева направо сверху вниз. Поэтому при сборке дизайн-макета мы следуем этому паттерну.
Т.к. ширина экрана мобильных устройств меньше, чем экран компьютера, то нам необходимо перекомпоновать элементы из горизонтального повествования в вертикальное, сохранив последовательность этого повествования.

3. Используем паттерны взаимодействия

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

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

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

4. Обеспечиваем доступность интерфейса.

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

Для комфортного чтения текстовой информации в мобильной версии сайта следует использовать кегель шрифта не менее 12, при условии, что выбран шрифт с достаточными четкими штрихами букв. Лучше избегать начертания «light», т.к. штрихи букв могут быть очень тонкими и плохо видны.

Важно следить, чтобы в макетах интерактивные элементы были достаточного размера для удобства нажатия на сенсорном экране. Хорошим размером является область нажатия 40 на 40 рх. Допустимо делать элементы визуально меньше, но при этом нужно оставить достаточное количества пространства вокруг.

5. Сохраняем визуальный дизайн и структурность информации.

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

6. Скрываем то, что можно скрыть.

Все элементы в интерфейсе делятся на 3 группы:

- Функциональные
- Информационные
- Декоративные

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

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

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

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