Что такое отзывчивый дизайн? — CloudMakers

Отзывчивый дизайн радикально изменил то, как мы потребляем контент в Интернете. Это ваше введение ко всему, что вам нужно знать о отзывчивом дизайне.

Публикация: 18.07.2018Kirill Lipovoy

CloudMakers

CloudMakersru

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

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

С тех пор Интернет пережил огромные изменения. Отзывчивый дизайн теперь является стандартной практикой и важными знаниями для любого дизайнера в этой области.

В этой статье мы рассмотрим:

• Принципы отзывчивого дизайна;
• Основные компоненты, которые содержат отзывчивый дизайн;
• Инструменты, которые вы можете использовать для гибкого проектирования

Что такое отзывчивый дизайн?

Отзывчивый дизайн — это подход, при котором контент и макет веб-и мобильных приложений изменяется в соответствии с поведением пользователя и средой.

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

Если пользователь открывает один и тот же сайт на настольном компьютере и мобильном устройстве, он должен иметь одинаковую возможность просмотра.

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

Зачем нам нужен отзывчивый дизайн?

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

Перед широким внедрением отзывчивого дизайн дизайнер пользовательского интерфейса мог бы создать только один макет веб-сайта, и он будет запущен в производство и выпущен в мир для всех пользователей. Были стандартные размеры, такие как 800 x 600 или 1024 x 786, к которым придерживались дизайнеры. Если вы использовали более крупный экран для просмотра содержимого или меньший, дизайн оставался бы того же размера.

« Веб переместился за пределы рабочего стола. Количество устройств, которые мы проектируем, растет так же быстро, как и мобильный трафик ». — Этан Маркотт

Проблема с этим подходом заключается в том, что он предполагает, что один макет подходит для всех.

Принципы отзывчивого дизайна

На приведенном выше изображении вы увидите один и тот же сайт на 4 разных устройствах. Все эти устройства имеют свои собственные размеры, но опыт просмотра на всех устройствах одинаковый.

Давайте сосредоточимся на настольной версии веб-сайта .

На ПК версии есть много пространства для дизайна пользовательского интерфейса. Как вы можете видеть выше, контент центрируется в середине страницы с жирным заголовком. Размер заголовка задан REM , что позволяет устанавливать размер шрифта на основе размера шрифта корневого элемента HTML. Это просто упрощает масштабирование по отношению к ширине экрана.

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

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

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

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

Вместе с тем, однако, опыт остается прежним. Вы заметите, когда вы измените размер браузера, текст заголовка и изображение также немного изменились по размеру, как если бы они отвечали на размер браузера. Это потому, что они меняются из-за того, что свойство width установлено на 100% в CSS.

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

Элементы, составляющие отзывчивый дизайн

Есть много элементов, которые составляют отзывчивый веб-сайт, помимо простого изменения размеров. Другие элементы, которые следует учитывать:

1. Типографика;
2. Навигация;
3. Производительность.

Что такое отзывчивая типографика?

Контент составляет большую часть Интернета. То, что вы сейчас читаете, — это контент. Каждый веб-сайт (или, по крайней мере, 99% из них) будет каким-то образом будет представлять текстовый контет.

«Веб-дизайн — это  95% типографики» — Оливер Райхенштейн

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

Окно просмотра представляет собой область, которая в настоящее время просматривается. Изменчивая типография будет меняться по размеру относительно размера окна просмотра. Это правило будет записано в CSS сайта.

Отзывчивая навигация

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

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

Отзывчивый дизайн, производительность и пользовательский интерфейс

Хотя многие элементы, которые составляют отзывчивый дизайн, являются наглядными, существуют также back-end элементы, которые повышают производительность адаптивного дизайна.

Например, если вы создали 4 отдельных файла HTML и CSS для каждого из ваших устройств, вы столкнетесь с проблемами производительности. Количество HTTP-запросов от устройства к серверу резко увеличит время загрузки. А медленное время загрузки может привести к тому, что на вашем сайте останется меньше людей.

Чтобы этого не произошло, поместите все свои таблицы стилей и сценарии в один документ и используйте запросы @media .

Лучше иметь большую таблицу стилей с меньшим количеством HTTP-запросов, чем отдельные страницы, которые требуют нескольких запросов.

Использование чистого кода, отвечающего отраслевым стандартам, также является одним из способов повысить производительность вашего веб-сайта.

Аналогично, если вы используете несколько значков, вы можете объединить их в спрайты, чтобы одно и то же изображение использовалось для нескольких значков, что дополнительно уменьшало количество HTTP-запросов.

Общие адаптивные концепции дизайна

Mobile viewport

Mobile viewport — видимая область пользователя на веб-странице. Экран будет зависеть от используемого устройства. Например, iPhone X будет иметь более щедрый Mobile viewport, чем iPhone 5. Это связано с тем, что iPhone X больше.

Mobile viewport, поскольку он используется в HTML и CSS для рендеринга веб-сайта в нужном размере с помощью тега <meta>:

< meta name = «viewport» content = «width = device-width, initial-scale = 1.0»>

Как видно из width = device-width , код устанавливает ширину страницы, чтобы она соответствовала ширине устройства.

Media queries

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

Отзывчивые изображения

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

Отзывчивые изображения означают, что вы можете использовать разные версии изображений для разных сценариев отображения.

Что такое отзывчивый дизайн? — резюме

Дизайнеры не могут игнорировать отзывчивый дизайн. Это необходимо в мире, где наши устройства и потребности постоянно меняются.

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

Источник и иллюстрации

Отзывчивый дизайн: лучшие практики и примеры

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

Что такое отзывчивый веб-дизайн?

Отзывчивый дизайн — это процесс разработки сайта, который адаптируется под устройство посетителя, будь то компьютер, планшет или смартфон. Разработчики используют CSS-медиа-запросы, чтобы установить контрольные точки (breakpoints) для разных экранов, — так пользователи смогут просматривать сайт на любых девайсах без каких-либо ограничений.

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

Почему отзывчивый дизайн — это важно?

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

Отзывчивый веб-дизайн необходим, если вы хотите, чтобы поисковые системы индексировали и ранжировали ваш сайт. К примеру, Google отдает приоритет отзывчивым сайтам в результатах мобильного поиска.

По данным Google Search Central, «в США 94% обладателей смартфонов ищут нужную информацию со своих телефонов. Интересно, что 77% мобильных поисковых запросов производятся дома или на работе — то есть там, где, скорее всего, есть обычный компьютер«.

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

Google предлагает бесплатный тест “Mobile-Friendly Test”, который поможет оценить, насколько ваш сайт оптимизирован для смартфонов.

Отзывчивый дизайн: подход

Есть 2 основных фактора, которые должен учитывать дизайнер при разработке отзывчивого сайта:

• Контрольные точки;
• Визуальный контент. 

Контрольные точки

UX-дизайнер должен установить контрольные точки и оптимизировать макеты для нескольких устройств. В большинстве случаев создается 3 версии сайта:

• для смартфона/мобильного телефона;
• для планшета;
• для обычного компьютера. 

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

• смартфон/мобильный телефон — портретная ориентация;
• смартфон/мобильный телефон — альбомная ориентация;
• планшет — портретная ориентация;
• планшет — альбомная ориентация;
• обычный компьютер.  

Визуальный контент

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

10 лучших практик отзывчивого дизайна

1) Гибкость.

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

2) Меняйте изображения. 

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

У Mozilla есть отличная статья об отзывчивых изображениях с рекомендациями для дизайнеров и разработчиков.

3) Используйте векторную графику (SVG). 

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

4) Позаботьтесь о контрольных точках. 

У каждой веб-страницы должно быть как минимум 3 контрольные точки (для мобильных устройств, планшетов и компьютеров). Как упоминалось выше, мы рекомендуем использовать 5 точек для максимальной гибкости. Иногда дизайнерам также нужно учесть, как сайт будет работать на устройствах iOS и Android.

5) Подумайте о карточном интерфейсе. 

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

6) Обратитесь к минимализму. 

Вот 3 причины, по которым минимализм можно назвать самым эффективным решением для отзывчивого интерфейса:

• Чем меньше контента, тем меньше беспорядка — в этом случае людям проще читать и воспринимать информацию.
• Проще поддерживать единообразие на различных устройствах и экранах разного размера.
• Веб-страницы с меньшим количеством контента, HTML, CSS и Javascript загружаются быстрее, что делает опыт посетителей приятнее и улучшает SEO.

7) Подход mobile-first (“сначала мобильные”). 

Mobile first — это подход, при котором вы начинаете проектирование с экрана самого маленького размера и от него двигаетесь к десктопной версии. Дизайнерам, которые начинают с самого большого экрана, часто приходится удалять некоторые элементы или идти на другие компромиссы при уменьшении масштаба. 

Узнайте больше об этом подходе из нашей бесплатной электронной книги «Отзывчивый и адаптивный веб-дизайн», где мы анализируем сайты 10 крупных компаний, включая Facebook и Hulu.

8) Расставляйте приоритеты и скрывайте контент. 

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

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

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

9) Увеличивайте кликабельную область кнопок. 

Закон Фиттса (описан в книге «Лучшие практики дизайна взаимодействия: Книга I») гласит, что кнопки с большой кликабельной областью облегчают взаимодействие пользователя с интерфейсом. Кроме того, дизайнер должен оставить достаточно свободного пространства между ссылками и кнопками, чтобы люди случайно не нажали не туда. 

10) Изучайте конкурентов и лидеров отрасли. 

Один из лучших способов оставаться в курсе последних тенденций отзывчивого веб-дизайна — исследование конкурентов и лидеров отрасли. Например, если вы разрабатываете сайт электронной коммерции, посмотрите, как это делают крупные мировые бренды Nike, Asos, H&M и другие. Такие компании тратят миллионы на исследования и тестирование лучших практик, так почему бы не использовать соответствующие разработки в своих интересах.

Примеры отзывчивого веб-дизайна

Мы разберем 3 всемирно известных сайта с правильным отзывчивым дизайном.

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

1. The Guardian

The Guardian — известная британская газета, которую многие читают онлайн. Это отличный пример единообразного дизайна, ориентированного на мобильные устройства.

Давайте начнем анализ The Guardian с самого маленького экрана в соответствии с подходом mobile first:

Смартфон

На смартфоне сайт выглядит целостно и привлекательно и может похвастаться четкой визуальной иерархией.

• В верхней части мы видим баннер, который включает все самое необходимое: кнопку входа в систему, поиск и название сайта.
• Прямо под ним расположены наиболее популярные пункты меню (“главная” — иконка дома, «США», «мир» и т.д.) для быстрого доступа. The Guardian скрывает дополнительную навигацию за иконкой гамбургера (в соответствии с принципом постепенного раскрытия информации). 
• Главная статья с интригующим изображением занимает большую часть экрана. Так дизайнер показывает, что это самый важный элемент на странице. 
• Прокрутив страницу вниз, пользователи могут быстро получить доступ к нескольким второстепенным публикациям, что упрощает поиск и дает им ощущение контроля над ситуацией.

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

Планшет

• В планшетной версии над баннером размещено рекламное объявление, что выгодно The Guardian с точки зрения бизнеса.
• Сам баннер остается прежним, но в нем нашлось место для дополнительных элементов (пункт «вакансии» и выбор страны), иконок с подписями и подзаголовка под логотипом.  
• Гамбургер-меню осталось, но в навигации появилось больше видимых категорий, чем в мобильной версии.
• Самое существенное отличие заключается в том, что на планшете отображается больше статей, а количество колонок увеличивается с 1 до 4. Креативное применение карточного интерфейса позволяет дизайнерам расставить статьи в приоритетном порядке — для создания иерархии используются карточки разных размеров.

Десктоп

Десктопная версия демонстрирует, насколько продуманным является сайт The Guardian. Дизайн, как и опыт взаимодействия, остается единообразным на всех устройствах.

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

2. Smashing Magazine

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

Смартфон

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

Планшет

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

Десктоп

Десктопная версия сайта Smashing Magazine практически идентична планшетной, но основная навигация и категории контента здесь смещены влево.

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

3. Lookout

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

Компьютер и планшет

Сайт Lookout выглядит одинаково на планшетах и компьютерах. Навигация, кнопка входа в систему, CTA и иконка поиска остаются видимыми и там, и там, хотя в десктопной версии между элементами остается больше свободного пространства.

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

Смартфон

• Основная навигация скрыта за стандартной иконкой гамбургера, при этом кнопка входа в систему, CTA и иконка поиска — видимы и доступны для пользователей.
• Lookout придерживается той же дизайн-стратегии в мобильной версии сайта: мы видим заметные, яркие CTA-кнопки для лид-магнитов.

Каждый из 3 рассмотренных сайтов — отличный пример единообразного дизайна и четкой визуальной иерархии на всех устройствах: от компьютера до мобильного телефона.

Заключение

Отзывчивый веб-дизайн перестал быть чем-то, о чем дизайнер “может подумать”. Сегодня вы просто обязаны сделать его неотъемлемой частью вашего рабочего процесса.

Основной принцип — уделять особое внимание мобильной версии, а не десктопной: используйте подход mobile-first или метод прогрессивного раскрытия.

Отзывчивый пользовательский интерфейс — Макет — Дизайн материалов

Контрольные точки

Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.

Для оптимального взаимодействия с пользователем пользовательские интерфейсы в материальном дизайне должны адаптировать макеты для следующих значений ширины контрольной точки: 480, 600, 840, 960, 1280, 1440 и 1600 dp.

Предварительный просмотр контрольных точек Material Design с помощью этого интерактивного средства просмотра на настольных компьютерах, мобильных устройствах и планшетах

1. Сводка и подробный просмотр контента в макетах

• Макеты шириной менее 600 dp могут заполнять экран одним уровнем иерархии содержимого (либо сводка, либо подробное содержимое, но не оба)
• Макеты шириной более 600 dp могут разместить на экране два уровня иерархии контента (обобщающий и подробный контент)

2. Максимальная ширина экрана

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

• Выровнять по центру с увеличенными полями
• Оставаться выровненным по левому краю, пока растет правое поле
• Продолжать увеличиваться при отображении дополнительного содержимого

Система точек останова

экраны, устройства, и ориентации.

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

* 16 dp, когда наименьшая ширина устройства <600

** Точки останова рабочего стола на 16 dp ниже указанных значений, чтобы учесть различия в Chrome браузера.

9004 8

Сетка

Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.

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

Эта анимация показывает, как поверхности и панели могут выравниваться, чтобы влиять на сетку из 12 столбцов.

Поля и промежутки

Адаптивная сетка ориентирована на постоянную ширину полей и промежутков, а не на ширину столбца. Поля и столбцы в материальном дизайне следуют квадратной базовой сетке размером 8 dp. Поля и промежутки могут быть шириной 8, 16, 24 или 40 dp.

Поля и промежутки могут не совпадать. Например, в одном и том же макете допустимо использовать поля 40 dp и отступы 24 dp.

Эта анимация показывает взаимодействие следующих вариантов ширины полей и переплетов:

1. Поля и промежутки 8 dp
2. Поля и промежутки 16 dp
3. Поля и промежутки 24 dp
4. Поля и промежутки 40 dp

9 0015 Поля 40dp и промежутки 24dp

Полный -width vs Centered

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

Центрированные сетки использовать фиксированные столбцы и переформатировать макет, когда все столбцы (плюс определенное поле) больше не помещаются на экране.

1. Полноразмерные сетки
2. Центрированные сетки

Влияние панели на сетку

Как определено в шаблонах навигации, боковая навигация может быть постоянной, постоянной или временной. Это поведение применимо к любой панели, а не только к боковой панели навигации.

Постоянная

Постоянная панель существует вне адаптивной сетки. Панель появляется в определенной точке останова (когда экран может вместить панель) и сжимает содержимое. Нет элементов управления для отображения/скрытия панели.

Эффекты постоянной панели на отзывчивой сетке

Эффекты боковой панели на сетке

Эта анимация происходит в два этапа:

1. Появляется постоянная боковая панель, сжимающая и содержимое, и сетку. Контент доступен, пока панель остается видимой. Панель скрывается при переключении.
2. Появляется временная боковая панель, выводящая содержимое сетки за пределы экрана. Прикосновение либо за пределами панели, либо к элементу внутри панели скрывает панель.

Влияние постоянной панели на адаптивную сетку

Временное наложение

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

Эффекты временной панели на адаптивной сетке

Поведение поверхности

Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.

При изменении размера экрана пользовательский интерфейс адаптируется с использованием следующих свойств поверхности.

Видимость

Ширина

Дескрипторы

Узоры

Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.

По мере увеличения пространства на экране могут применяться следующие адаптивные шаблоны:

• Показать
• Преобразовать
• Разделить
• Перекомпоновать
• Расширить
• Позиция

Отображение

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

Элементы, такие как боковая навигация, могут стать видимыми.

Простой пользовательский интерфейс может отображать более мощные или сложные параметры.

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

Преобразование

Элемент пользовательского интерфейса может преобразовываться из одного формата в другой.

Боковая навигация может трансформироваться во вкладки.

Список может трансформироваться в список сетки.

Элементы меню могут трансформироваться в значки на панели инструментов.

Разделить

Многоуровневый пользовательский интерфейс может быть разделен на вновь доступное пространство.

Боковая навигация, содержимое списка и подробное содержимое разделены для заполнения единого представления.

Левая панель, содержимое списка и правая панель разделяются в одном представлении по мере увеличения пространства.

Содержимое одного уровня с вкладками разделено в пределах одного представления.

Перекомпоновка

Пользовательский интерфейс может перекомпоновываться в доступное пространство.

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

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

Элементы могут перекомпоновываться внутри компонента в зависимости от нового соотношения сторон экрана или ориентации устройства.

Расширить

Пользовательский интерфейс может расшириться на большее пространство.

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

Диалоги могут расширяться пропорционально содержимому или с определенным приращением.

Положение

Положение компонентов пользовательского интерфейса может быть изменено на более подходящее.

Нижний лист на маленьком экране может трансформироваться в меню.

Плавающая кнопка действия (FAB) может перемещаться в более заметное место по сравнению с другими элементами пользовательского интерфейса.

Отзывчивый интерфейс

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

Система компоновки

Система компоновки Audi помогает дизайнерам создавать унифицированные дизайнерские решения и интерфейсы. Благодаря гибкой матрице интервалов и четким рекомендациям по компоновке Audi Layout System поддерживает проекты, которые работают на всех контрольных точках и устройствах, а также обеспечивает согласованность в передаче идентичности бренда. Подробная документация с примерами интегрирована в Audi React Library и Audi Sketch Kit, что позволяет дизайнерам работать с ней напрямую. Следующая терминология описывает систему компоновки:

Область содержимого

Область содержимого определяется размером поля страницы, которое отделяет ее от левой и правой сторон страницы.

Область макета

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

Система интервалов

Элементы можно размещать внутри области макета, используя систему интервалов для определения расстояний между ними.

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

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

Производительность

Веб-сайты Audi доступны по всему миру с различных устройств. Чтобы создавать страницы, которые быстро доступны для всех, необходимо разрешить использование плохих устройств и их доступ в Интернет.

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

Большие изображения обложек можно отформатировать для повышения производительности с помощью CSS Media Queries. Интеграция изображений в область просмотра с помощью JavaScript негативно влияет на производительность.

Контент и функции

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

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

Если какая-то информация или функция кажутся лишним на маленьком экране, стоит спросить, нужна ли она вообще.

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

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

Независимость от устройства

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

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

Element Queries

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

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

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

Параметры

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

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

This entry was posted in Популярное