UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Что мы получим, если совместим адаптивный и отзывчивый дизайн?
Редакція
Редакція

Опубліковано

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

#ux

Что мы получим, если совместим адаптивный и отзывчивый подходы? Представляем адаптивную + отзывчивую модель (Adaptive + Responsive model). Отзывчивый и адаптивный дизайн – это две методологии проектирования, целью которых является сделать продукт доступным на любых устройствах и экранах любого размера, обеспечивая наилучший опыт всем пользователям. Обе методологии пытаются максимально использовать доступное пространство экрана и режим взаимодействия с пользователем. Прежде чем говорить о модели A + R, нам нужно разобрать оба метода по отдельности. Хотя отзывчивый дизайн использует CSS и / или JS для адаптации макетов и контента на основе предварительно определенных контрольных точек (breakpoints), адаптивный подход предоставляет предварительно структурированные шаблоны, которые будут обслуживаться на основе пользовательского агента (user agent) и типа устройства. Основное различие между ними заключается в DOM-структуре.  При отзывчивом дизайне у нас одинаковый HTML-код для всех ситуаций (если только вы не используете JS для удаления некоторых узлов DOM), тогда как при адаптивном у нас другая структура кода и потенциально разный опыт. Оба подхода к дизайну верны, просто спросите себя, сколько компонентов и сложностей в вашем проекте, и может ли один опыт подойти всем вашим пользователям. При разработке веб-приложений часто используется отзывчивый дизайн, например, создание особого опыта с помощью адаптивной разработки, как это делают мобильные версии Twitter и Facebook.

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

При создании отзывчивого опыта у нас есть три подхода к работе с нашими макетами и контентом: Изменение структуры (Reflow): мы можем изменить структуру макета, чтобы лучше соответствовать области просмотра. В большинстве случаев это приводит к тому, что контент складывается в стек (это не всегда хорошо). Изменение размера (Resize): некоторые компоненты интерфейса являются текучими, как большинство HTML-элементов. Они заполняют доступное пространство и при необходимости меняют структуру. Показать / Скрыть (Show/Hide): некоторые части интерфейса скрыты из области просмотра (но они все еще существуют) или отображаются, чтобы заполнить пространство.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Перевод статьи Mattia Astorino

Топ коментарі (0)