Создавайте адаптивные пользовательские интерфейсы с помощью медиа-запросов предпочтений.

1. Прежде чем начать

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

Пользовательские предпочтения

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

Вот несколько примеров пользовательских настроек, которые можно использовать с помощью CSS:

• Размер области просмотра устройства
• Ориентация устройства (портретная | альбомная)
• размер шрифта
• Онлайн / офлайн
• Качество сети
• Цветовая гамма (светлая | темная)
• Анимация интерфейса (включена | уменьшена)
• Качество ввода (мышь | сенсорный экран | стилус)
• Направление письма и способ написания текста (слева направо, сверху вниз и т. д.)
• Режимы отображения (полноэкранный | автономный | минималистичный интерфейс | браузерный)

Вот несколько примеров пользовательских настроек, которые скоро появятся в CSS:

• Облегченный режим / режим с ограниченным объемом данных
• Диапазон цветов
• Контраст (меньше | больше | уменьшить)
• Цвета (принудительно отображает на странице цвета, заданные пользователем)
• Прозрачность (включена | уменьшена)

Запросы СМИ

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

Адаптивный к пользователю

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

Предварительные требования

• Знание HTML и CSS.
• Знание инструментов разработчика, таких как инструменты разработчика Google Chrome.

Что вы построите

В этом практическом задании вы создадите форму, адаптирующуюся к следующим условиям:

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

Что вы узнаете

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

• Создайте светлые и темные темы оформления.
• Создавайте анимированные и доступные формы.
• Адаптивная компоновка форм
• Используйте относительные единицы измерения и логические свойства.

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

Что вам понадобится

• Google Chrome 89 и выше или ваш предпочтительный браузер

2. Настройка

Получите код

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

Рекомендуется использовать Codepen.

1. Откройте новую вкладку браузера.
2. Перейдите по ссылке https://codepen.io/argyleink/pen/abBMeeq .
3. Если у вас нет учетной записи, создайте ее, чтобы сохранить работу.
4. Нажмите « Создать форк» .

Альтернативный вариант: Работайте на месте.

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

Используйте Git

1. Посетите https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces
2. Скопируйте репозиторий в папку.
3. Обратите внимание, что ветка по умолчанию beginning .

Используйте файлы

Скачать исходный код

1. Распакуйте загруженный zip-файл в папку.

Запустите проект

Используйте каталог проекта, созданный на любом из предыдущих шагов, затем:

1. Выполните npm install , чтобы установить зависимости, необходимые для работы сервера.
2. Запустите npm start , чтобы запустить сервер на порту 3000.
3. Откройте новую вкладку браузера.
4. Перейдите по адресу http://localhost:3000 .

О HTML

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

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

3. Адаптивные взаимодействия

Ветка Git : beginning

К концу этого раздела ваша форма настроек адаптируется следующим образом:

• Геймпад + клавиатура
• Мышь + сенсорный экран
• Программа чтения с экрана или аналогичная вспомогательная технология

Атрибуты для HTML

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

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

Группировка входных данных

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

Элементы заказа

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

Взаимодействие с клавиатурой

Пользователи веб-браузеров привыкли перемещаться по формам с помощью клавиши Tab, и, к счастью, браузер позаботится об этом, если вы укажете необходимые HTML-элементы. Использование таких элементов, как <button> , <input> , <h2> и <label> , автоматически становится адресами для клавиатуры или программ чтения с экрана.

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

style.css

input {
  outline-offset: 5px;
}

Что стоит попробовать

1. Просмотрите HTML-элементы, используемые в index.html .
2. Перейдите на демонстрационную страницу в вашем браузере.
3. Для перемещения фокуса между элементами формы используйте клавиши tab и shift+tab .
4. Используйте клавиатуру для изменения значений ползунков и флажков.
5. Подключите Bluetooth-геймпад и перемещайте фокус по элементам формы.

Взаимодействие мыши

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

Видите, как вы получаете две функции, улучшающие пользовательский опыт , для связи ваших меток и их входных данных?

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

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

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

Несвязанные: отсутствуют атрибуты, соединяющие элементы.

<input type="checkbox">
<label>...</label>

Связанные: атрибуты, соединяющие элементы

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

В предоставленном HTML-коде все поля ввода и метки уже атрибутированы. Если это для вас новая концепция, стоит изучить её подробнее.

Что стоит попробовать

1. Наведите курсор мыши на метку и обратите внимание на подсветку флажка.
2. Изучите элемент «метка» с помощью инструментов разработчика Chrome, чтобы визуализировать область, по которой можно щелкнуть и выбрать флажок.

Взаимодействие с программами чтения с экрана

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

Для пользователей, использующих программу чтения с экрана в Chrome для навигации по текущей форме, происходит ненужная остановка на элементе <picture> (это не является особенностью Chrome). Пользователь, использующий программу чтения с экрана, скорее всего, делает это из-за проблем со зрением, поэтому остановка на изображении не является полезной. Вы можете скрыть элементы от программ чтения с экрана с помощью соответствующего атрибута.

index.html

<picture aria-hidden="true">

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

Элемент ползунка input[type="range"] имеет специальный атрибут ARIA : aria-labelledby="media-volume" . Он предоставляет специальные инструкции для программы чтения с экрана, которые улучшают взаимодействие с пользователем.

Что стоит попробовать

1. Используйте технологию чтения с экрана вашей операционной системы для перемещения фокуса по форме.
2. Загрузите и попробуйте использовать на форме какое-нибудь программное обеспечение для чтения с экрана.

4. Адаптивные планировки

Ветка Git: layouts

К концу этого раздела страница настроек будет выглядеть следующим образом:

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

Расстояние

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

Пользовательские свойства

Данный семинар основан на наборе из семи нестандартных размеров недвижимости.

• Разместите эти строки в верхней части файла style.css :

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

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

Стили страниц

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

• Добавьте следующее в style.css :

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

Вот и первое использование пользовательских свойств отступов! С этого начинается ваше путешествие в мир пространств.

Типография

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

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

Стили для h1, h2 и h3 незначительны и носят стилистический характер. Однако small элементу требуется дополнительная line-height для случаев переноса текста. В противном случае он выглядит слишком сжатым.

Логические свойства

Обратите внимание, что padding в body используют логические свойства ( block-start , block-end ) для указания стороны. Логические свойства будут широко использоваться на протяжении всего остального практического занятия. Они, подобно единицам rem , адаптируются к пользователю. Этот макет можно перевести на другой язык и установить в соответствии с естественным направлением письма и документа, к которому пользователь привык на своем родном языке. Логические свойства обеспечивают поддержку этого с помощью всего одного определения пространства, направления или выравнивания.

Grid и flexbox уже являются контекстно-зависимыми , то есть стили, написанные для одного языка, будут контекстно-зависимыми и соответствующим образом применяться к другим. Адаптивная направленность: контент перемещается относительно направленности документа.

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

CSS Grid Layouts

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

Вот скриншот инструментов разработчика Chrome, на котором одновременно отображается каждый элемент CSS-сетки:

1. Далее добавьте каждый из следующих стилей в style.css :

<главное>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

По умолчанию Grid размещает каждый дочерний элемент в отдельной строке, что отлично подходит для наложения элементов друг на друга. Кроме того, он имеет дополнительное преимущество в использовании gap . Ранее для всех элементов устанавливался margin: 0 с помощью селектора * , что теперь важно, поскольку gap используются для отступов. Отступы — это не только единое место для управления пространством в контейнере, но и его относительным расположением.

<форма>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

Это самая сложная сеточная компоновка в дизайне, но именно она обеспечивает наиболее интересный адаптивный аспект:

• max-width задает значение, которое алгоритм компоновки использует при определении допустимого размера элемента.
• gap использует пользовательские свойства и передает значение row-gap отличное от column-gap .
• align-items установлен в flex-start , чтобы не растягивать высоту элементов.
• grid-template-columns имеет довольно сложный синтаксис, но его цель лаконична: ширина столбцов должна составлять 35ch , но никогда не меньше 10ch , и размещать элементы в столбцах, если есть место, в противном случае хорошо использовать строки.

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

<раздел>

section {
  display: grid;
  gap: var(--space-md);
}

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

<заголовок>

header {
  display: grid;
  gap: var(--space-xxs);
}

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

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

Этот макет отвечает за создание карточного вида и группировку полей ввода. overflow: hidden и gap: 1px становятся видимыми при добавлении цвета в следующем разделе.

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

Этот макет отвечает за центрирование значка и флажка вместе с соответствующими метками и элементами управления. Первый столбец шаблона сетки, var(--space-lg) , создает столбец шире значка, чтобы дочерний элемент мог быть центрирован внутри него.

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

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

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

<изображение> и [флажок] выравнивание

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

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

3. Замените picture > svg на .fieldset-item svg следующим образом:

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

Это задаёт размер SVG-иконки значением из системы размеров.

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

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

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

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

Что стоит попробовать

1. Откройте инструменты разработчика Chrome и найдите значки сетки в HTML-коде на панели «Элементы» . Щелкните по ним, чтобы включить инструменты отладки.
2. Откройте инструменты разработчика Chrome и наведите курсор на область в панели «Стили» .
3. Откройте инструменты разработчика Chrome, перейдите в панель «Стили» и переключитесь с «Стили» на «Макеты» . Изучите эту область, изменив ее настройки и включив макеты.

Запросы СМИ

Приведенный ниже CSS-код адаптирует стили в зависимости от размера и ориентации области просмотра с целью оптимальной настройки отступов или расположения элементов в контексте области просмотра.

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

<главное>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

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

<форма>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

Форма уже адаптировалась к размеру области просмотра с помощью auto-fit , но при тестировании на мобильном устройстве при повороте устройства в альбомную ориентацию две группы форм не располагаются рядом. Адаптируйтесь к этому альбомному контексту с помощью медиа-запроса orientation и проверки ширины области просмотра. Теперь, если устройство находится в альбомной ориентации и имеет ширину не менее 640 пикселей, принудительно разместите две колонки, заменив ключевое слово auto-fit на число в пользовательском свойстве --repeat .

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

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

Что стоит попробовать

1. Расширяйте и сужайте окно браузера, и вы увидите, как изменяется занимаемое пространство.
2. Предварительный просмотр на мобильном устройстве
3. Предварительный просмотр на мобильном устройстве в альбомной ориентации.

5. Адаптивный цвет

Ветка Git: colors

К концу этого раздела ваша форма настроек будет выглядеть следующим образом:

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

HSL

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

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

Пользовательские свойства

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

Предположим, что фирменный цвет вашего приложения — #0af . Ваша первая задача — преобразовать это шестнадцатеричное значение цвета в значение цвета HSL: hsl(200 100% 50%) . Это преобразование покажет цветовые каналы вашего бренда в HSL, которые вы можете использовать с функцией calc() для вычисления различных вспомогательных фирменных цветов.

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

Каждый из следующих блоков кода в этом разделе следует добавить в один и тот же селектор :root .

Каналы бренда

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

Три канала HSL были извлечены и помещены в собственные пользовательские свойства.

1. Используйте все три свойства в неизменном виде и воссоздайте фирменный цвет.

Бренд

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

Поскольку ваша цветовая схема по умолчанию тёмная, рекомендуется уменьшать насыщенность цветов для использования на тёмных поверхностях (иначе они могут вибрировать или быть недоступными для восприятия). Чтобы уменьшить насыщенность вашего фирменного цвета, используйте оттенок и яркость как есть, но уменьшите насыщенность вдвое с помощью деления: calc(var(--saturation) / 2) . Теперь ваш фирменный цвет соответствует теме, но имеет меньшую насыщенность для использования.

Текст

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

Для текста в нашей темной теме вы используете фирменный оттенок в качестве основы, но отталкиваетесь от него, создавая почти белые цвета. Многие пользователи подумают, что текст белый, хотя на самом деле он очень светло-голубой. Соблюдение оттенков — это эффективный способ создать гармонию в дизайне. --text1 — это 85% белого, а --text2 — 65% белого, и оба имеют очень низкую насыщенность.

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

Поверхность

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

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

3. Обратите внимание, как цвета начинаются с самого тёмного серого с яркостью 10% и насыщенностью 10%, а затем постепенно теряют насыщенность по мере осветления. Каждая новая поверхность на 5% светлее предыдущей. Насыщенность также немного снижается на более светлых поверхностях. Попробуйте установить насыщенность всех поверхностей на 10%. Вам больше нравится или меньше?

Светлая тема

Имея достаточное количество текстовых и поверхностных цветов, определяющих темную тему, пришло время адаптироваться к светлой теме, обновив пользовательские свойства цвета в медиа-запросе prefers-color-scheme .

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

Бренд

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

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

Текст

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

Подобно тому, как в темной теме текст был очень светло-голубого цвета, в светлой теме цвет текста очень темно-синий. Значения яркости 10% и 30% для цвета HSL должны подсказать вам, что это темные цвета.

Поверхность

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

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

Используйте цветовую систему

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

• Для следующих фрагментов кода найдите соответствующий селектор и добавьте CSS-код цвета к существующему блоку кода.

<тело>

body {
  background: var(--surface1);
  color: var(--text1);
}

Основные цвета страницы — это первые цвета поверхности и текста, которые вы задали, а также установите максимальный уровень контрастности по умолчанию. Можно начинать тестировать переключение между светлым и темным цветом!

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

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

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

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

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

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

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

Для значков в форме задан альтернативный текст --text2 . Дизайн, в котором заполненные значки немного светлее текста, предотвращает ощущение излишней тяжести.

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

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

<маленький>

small {
  color: var(--text2);
}

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

Управление темной формой

:root {
  color-scheme: dark light;
}

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

6. Адаптивная анимация

Ветка Git: animations

К концу этого раздела страница настроек будет выглядеть следующим образом:

• Адаптировать к предпочтениям пользователя в отношении движений.
• Реагировать на взаимодействие с пользователем

Ограниченная подвижность против полного отсутствия движения

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

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

Стили взаимодействия

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

Когда пользователь взаимодействует с полями ввода одного из элементов <fieldset> , напоминающих карточки, это создает эффект «поднятия». Интерфейс как бы выдвигает элемент вперед, помогая пользователю сосредоточиться, поскольку контекстная группа форм приближается к нему.

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

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

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

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

7. Поздравляем!

Ветка Git: complete

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

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