1 4 660x360 - Что мы получим, если совместим адаптивный и отзывчивый дизайн?

Что мы получим, если совместим адаптивный и отзывчивый подходы? Представляем адаптивную + отзывчивую модель (Adaptive + Responsive model).

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

Хотя отзывчивый дизайн использует CSS и / или JS для адаптации макетов и контента на основе предварительно определенных контрольных точек (breakpoints), адаптивный подход предоставляет предварительно структурированные шаблоны, которые будут обслуживаться на основе пользовательского агента (user agent) и типа устройства. Основное различие между ними заключается в DOM-структуре.  При отзывчивом дизайне у нас одинаковый HTML-код для всех ситуаций (если только вы не используете JS для удаления некоторых узлов DOM), тогда как при адаптивном у нас другая структура кода и потенциально разный опыт.

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

Методы отзывчивого дизайна

При создании отзывчивого опыта у нас есть три подхода к работе с нашими макетами и контентом:

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

2 1 80x39 - Что мы получим, если совместим адаптивный и отзывчивый дизайн?

Изменение размера (Resize): некоторые компоненты интерфейса являются текучими, как большинство HTML-элементов. Они заполняют доступное пространство и при необходимости меняют структуру.

3 80x39 - Что мы получим, если совместим адаптивный и отзывчивый дизайн?

Показать / Скрыть (Show/Hide): некоторые части интерфейса скрыты из области просмотра (но они все еще существуют) или отображаются, чтобы заполнить пространство.

4 80x39 - Что мы получим, если совместим адаптивный и отзывчивый дизайн?

Метод адаптивного дизайна

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

5 3 80x45 - Что мы получим, если совместим адаптивный и отзывчивый дизайн?

Представляем модель A+R

Оба подхода имеют свои плюсы и минусы, но что мы получим, если захотим использовать оба сразу? Модель A + R сочетает в себе как отзывчивый, так и адаптивный подходы, основанные на одной основной контрольной точке.

А обозначает Адаптивный

Как упомянуто выше, адаптивный подход позволяет нам дифференцировать пользовательский опыт, контент и даже функциональные возможности на основе пользовательского устройства. Рассматривая 960px, как главную адаптивную контрольную точку (определенную на основе глобальной статистики), мы имеем нечто похожее на:

6 2 80x45 - Что мы получим, если совместим адаптивный и отзывчивый дизайн?

  • Область просмотра слева представляет все экраны с разрешением меньше 960px с определенным макетом / контентом
  • Область просмотра справа представляет все экраны с разрешением 960px или более с другим макетом.

R обозначает Отзывчивый

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

7 3 80x45 - Что мы получим, если совместим адаптивный и отзывчивый дизайн?

Адаптивный + отзывчивый

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

8 1 80x45 - Что мы получим, если совместим адаптивный и отзывчивый дизайн?

Когда выбрать модель A + R

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

Используя модель A + R дизайнеры и разработчики (но также и владельцы продуктов) могут сосредоточиться на улучшении всех возможностей, которые может предложить продукт, вместо того, чтобы обеспечить «хороший» опыт только в одной среде.

Кто использует эту модель?

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

Подпишитесь на автора

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

Все изображения сделаны автором и ребятами из Contactlab UX.

Свежие вакансии
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
                        RJ Games RJ Games UI Motion Designer / Animator Удаленно Москва
Все вакансии

Оригинал: Mattia Astorino

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

3
Добавить комментарий
Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

Гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы

О Доне Нормане, вандализации UX и широком подходе к дизайну

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