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

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

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

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

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

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

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

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

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

Медиа-запросы

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

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

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

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

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

Что ты построишь

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

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

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

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

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

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

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

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

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

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

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

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

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

стиль.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 Grid для гибкого и гибкого выравнивания и интервалов.
• Используйте логические свойства для адаптивных макетов на международном уровне.
• Напишите медиа-запросы для адаптации между компактными и просторными макетами.

Расстояние

Ключом к хорошему макету является ограниченная палитра вариантов интервалов. Это помогает контенту найти естественное соответствие и гармонию.

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

Этот семинар основан на наборе из семи пользовательских размеров свойств.

• Поместите их вверху style.css :

стиль.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 следующее:

стиль.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-сетки

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

Вот скриншот Chrome DevTools, накладывающего каждый макет сетки CSS одновременно:

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

<основной>

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

Grid по умолчанию помещает каждый дочерний элемент в отдельную строку, что делает его идеальным для штабелирования элементов. Он также имеет дополнительное преимущество использования gap . Ранее вы установили margin: 0 для всех элементов с помощью селектора * , что теперь важно, поскольку вы используете gap в качестве интервала. 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 {
  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 <изображение>

.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-стек

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

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

ввод[тип="флажок"]

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 пикселей, принудительно создайте два столбца, переключив пользовательское свойство --repeat на число вместо ключевого слова auto-fit .

.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, которая поможет вам создать светлую и темную тему. Он основан на основной концепции 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 {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

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

.fieldset-item

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

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

.fieldset-item > изображение

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

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

.fieldset-item SVG

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

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

.fieldset-item:focus-in svg

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

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

<маленький>

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

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

Элементы управления темной формой

:root {
  color-scheme: dark light;
}

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

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

Ветка Git: animations

К концу этого раздела страница настроек будет:

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

Снижение движения по сравнению с отсутствием движения

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

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

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

<набор полей>

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 > изображение

@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

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

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