Инструкция по созданию дизайна с ориентацией на мобильные устройства

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

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

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

Что подразумевается под «мобильным подходом»?

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

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

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

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

Mobile-first значит «Контент в первую очередь»

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

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

Однако стоит помнить, что мобильным пользователям иногда нужен контент, отличный от того, который предназначен для ПК. Выбор контента для определенного устройства следует делать, учитывая контекст использования — что будет наиболее ценным для пользователя в данной ситуации и окружении. Создание сценариев использования поможет вам угадать потребности пользователей.

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

Как же реализуется стратегия?

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

Наш подход включает следующие этапы:

1. Составление списка содержимого — подготовьте электронную таблицу или аналогичный документ, в котором будут перечислены все компоненты, которые вы планируете использовать.
2. Визуальная структура — установите приоритеты для элементов из списка содержимого и решите, как выделить наиболее значимые из них.
3. Разработка начинается с минимального размера, затем расширяется — сначала создайте макет для мобильных устройств, а потом используйте его в качестве основы для дизайна под большие экраны. Увеличивайте макет до тех пор, пока не появится избыточное пустое пространство.
4. Размеры интерактивных элементов — учитывайте, что пальцы пользователей крупнее, чем курсор мыши, и потребуют более обширных областей для комфортного взаимодействия. К примеру, Apple советует использовать для интерактивных элементов размер в 44 пикселя. Обеспечьте достаточное пространство для ссылок, увеличьте размер кнопок и не забывайте про пространство вокруг активных элементов.
5. Не полагайтесь на эффекты наведения — многие дизайнеры привыкли использовать эффекты при наведении курсора, но для мобильных устройств это не актуально.
6. Ориентация на приложения — пользователи мобильных устройств привыкли к интерактивности и контролю. Включите в дизайн такие элементы, как скрытые меню, раскрывающиеся виджеты и другие компоненты, с которыми можно взаимодействовать без перезагрузки страницы.
7. Избегайте использования больших изображений — широкоформатные фото и сложные визуальные элементы могут плохо смотреться на небольших дисплеях. Подбирайте изображения, оптимизированные для отображения на экранах портативных устройств.
8. Тестирование на реальном устройстве — ничто не заменит проверку удобства использования сайта на смартфоне или планшете. Отложите в сторону компьютер и проверьте, как ваш продукт работает на мобильном устройстве. Проверьте удобство навигации, скорость загрузки, читаемость текстов и графики.

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

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

• Шаг 1: Определение приоритетов содержания.
• Шаг 2: Разработка мобильной версии.
• Шаг 3: Адаптация под планшеты.
• Шаг 4: Разработка версии для десктопов.

Этап 1: Определение приоритетов содержания

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

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

1. Последняя модель велосипеда
2. Лидер продаж среди велосипедов
3. Призыв к действию «Подобрать идеальный велосипед»
4. Логотип компании и главное изображение
5. Меню навигации
6. Функция поиска
7. Велосипед, занимающий второе место по продажам
8. Сертификаты на подарок
9. Отзыв покупателя
10. Свежая публикация в блоге

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

Этап 2: Дизайн для мобильных устройств

Что на самом деле необходимо пользователям?

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

Этап 3: Разработка для планшетов

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

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

Сопротивляйтесь этому порыву. Ориентируйтесь на структурированный список содержимого. Как и в случае с мобильными устройствами, пространство всё же ограничено.

Этап 4: Создание десктопной версии

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

• Откройте прототип в UXPin.
• Кликните на кнопку «Add new adaptive version» в нижнем правом углу редактора UXPin.
• Выберите заранее заданный размер или укажите свои параметры.
• Вам не придется начинать всё с чистого листа. Выберите размер, с которого будут скопированы элементы вашего дизайна.

Вот и всё. Переключайтесь между точками разрыва, кликая на разные размеры над холстом, и настраивайте их в соответствии с вашими потребностями. Если вы хотите попробовать прототипирование для мобильных устройств самостоятельно — вперед к экспериментам!