А+О модель
Автор Mattia Astorino
Источник Medium
Источник Medium
Что будет, если объединить адаптивный подход и отзывчивый?
Представляем вашему вниманию Модель «Адаптивный + Отзывчивый».
Представляем вашему вниманию Модель «Адаптивный + Отзывчивый».
Отзывчивый и адаптивный дизайн - это две методологии дизайна, целью которых является сделать продукт доступным на любых устройствах и экранах любого размера, обеспечивая при этом наилучшее взаимодействие со всеми пользователями. Оба они по-максимуму используют доступное пространство экрана и режим взаимодействия с пользователем. Прежде чем говорить о модели А+О, давайте разберем оба эти метода отдельно друг от друга.
В то время как отзывчивый дизайн использует CSS и / или JS для адаптации макетов и содержимого на основе предварительно определенных точек останова, адаптивный подход предоставляет предварительно структурированные шаблоны, которые будут обслуживаться на основе личности пользователя и типа устройства. Основное различие между ними заключается в структуре DOM: при подходе с отзывчивым мышлением у нас одинаковый HTML-код для всех ситуаций (если только вы не используете JS для удаления некоторых узлов DOM), тогда как в адаптивном у нас другая структура кода и потенциально разный опыт.
Оба подхода к дизайну верны, просто спросите себя, сколько компонентов и сложностей в вашем проекте, и может ли один опыт подойти всем вашим пользователям. При разработке веб-приложений часто используется отзывчивый дизайн, например, при создании особого опыта с помощью адаптивной разработки, как в мобильных приложениях Twitter и Facebook.
Техника отзывчивого дизайна
При создании отзывчивого опыта у нас есть три подхода к работе с нашими макетами и контентом:
Изменение структуры
Мы можем изменить структуру макета на более подходящую для области просмотра.
В большинстве случаев это приводит к тому, что контент складывается (это не всегда хорошо).
В большинстве случаев это приводит к тому, что контент складывается (это не всегда хорошо).
Изменение размера
Некоторые UI-компоненты являются подвижными, как большинство HTML-элементов. Они заполняют доступное пространство и при необходимости изменяются.
Показать/Спрятать
Некоторые UI-части скрываются из области просмотра (но они все еще существуют) или отображаются, чтобы заполнить пространство.
Техника адаптивного дизайна
Реструктуризация: с помощью этого подхода мы можем разрабатывать и поставлять различные макеты, чтобы обеспечить наилучшее взаимодействие с конкретной средой, такой как мобильное устройство с сенсорным управлением или гибридное устройство с сенсорным экраном.
Представляем модель А+О
Оба подхода имеют свои плюсы и минусы, но что мы получим, если хотим использовать их одновременно? Модель А+О сочетает в себе как отзывчивый, так и адаптивный подходы, основанные на одной основной точке останова.
«А» обозначает Адаптивный
Как упомянуто выше, адаптивный подход позволяет нам дифференцировать пользовательский опыт, содержание и даже функциональные возможности на основе пользовательского устройства. Рассматривая 960 пикселей как главную адаптивную точку останова (по данным мировой статистики), мы имеем нечто похожее:
Область обзора слева представляет все экраны с разрешением до 960 пикселей с определенным макетом / содержимым
Область обзора справа представляет все экраны с разрешением 960 пикселей или больше с другим макетом.
«О» обозначает Отзывчивый
Определенная нами основная точка останова создает два контекста опыта, которые могут отличаться друг от друга, в которых мы можем применять методы отзывчивости. Внутри каждого опыта мы можем определить второстепенные точки останова, чтобы адаптировать макет под доступное пространство. Например, пользователи планшета, могут увидеть сенсорную оптимизацию (адаптивную), но мы все равно можем адаптировать макет, ориентированный на устройство (отзывчивый).
Адаптивный + Отзывчивый
Соединяя Адаптивный подход и Отзывчивый мы получаем А+О модель. С помощью адаптивной техники мы будем работать с опытом и функциональностью, создавая два разных контекста. С отзывчивым подходом мы обрабатываем UI-компоненты и макеты, которые находятся внутри контекстов.
Когда выбрать модель А+О
Такой подход к дизайну требует, чтобы дизайнеры действительно понимали, какой опыт они хотят предоставить, чтобы определить, какой модели следовать. Эта модель хорошо подходит для больших приложений, которые должны быть удобны на небольших мобильных устройствах с меньшими функциональными возможностями или с совершенно другой структурой. Как вы можете видеть, вы получите большую гибкость, но и сложность, потому что вам придется обрабатывать разные кодовые базы и среды (не обязательно).
С мышлением модели A + О дизайнеры и разработчики (но также и владельцы продуктов) могут сосредоточиться на улучшении всех возможностей, предложенные продуктом, вместо того, чтобы обеспечить «хороший» опыт только в одной среде.
Кто следит за этой моделью?
Вы можете заметить, что этот шаблон используется Twitter, Facebook и GitHub для своих мобильных веб-сайтов. Если вы перемещаетесь по этим сайтам на своем мобильном устройстве, вы можете проверить, как они изменяют пользовательский интерфейс, основанный на ожиданиях мобильных пользователей.