Twórz interfejsy adaptacyjne użytkowników z wykorzystaniem preferowanych zapytań o multimedia

1. Zanim zaczniesz

Użytkownicy wskazują obecnie na swoich urządzeniach wiele preferencji. Chcą, aby system operacyjny i aplikacje wyglądały i działały tak, jak sobie tego życzą. Interfejsy adaptujące się do użytkownika to takie, które są gotowe do wykorzystania tych preferencji w celu zwiększenia wygody użytkownika, aby czuł się w nich jak u siebie. Jeśli wszystko zostanie wykonane prawidłowo, użytkownik może nigdy nie dowiedzieć się, że wrażenia użytkownika są dostosowywane lub zostały dostosowane.

Ustawienia użytkownika

Wybór sprzętu urządzenia jest preferencją, system operacyjny jest wyborem, kolory aplikacji i systemów operacyjnych są preferencjami, a języki dokumentów aplikacji i systemów operacyjnych są preferencjami. Liczba preferencji użytkownika stale rośnie. Strona internetowa nie ma dostępu do wszystkich informacji i nie bez powodu.

Oto kilka przykładów ustawień użytkownika, które mogą być używane przez usługę porównywania cen:

• Rozmiar widocznego obszaru urządzenia
• Orientacja urządzenia (pionowa lub pozioma)
• Rozmiar czcionki
• Online / offline
• Jakość sieci
• Schemat kolorów (light | dark)
• Animacje interfejsu (włączone | ograniczone)
• Jakość danych wejściowych (mysz | dotyk | rysik)
• Kierunek dokumentu i tryb pisania (od lewej do prawej, od góry do dołu itp.)
• Tryb wyświetlania (pełny ekran | samodzielny | minimalny interfejs | przeglądarka)

Oto kilka przykładów ustawień użytkownika, które wkrótce będą dostępne w usłudze porównywania cen:

• Mniej danych / wersja uproszczona
• Zakres kolorów
• Kontrast (mniejszy | większy | zmniejsz)
• Kolory (wymusza użycie kolorów użytkownika na stronie)
• Przejrzystość (włączona | ograniczona)

Zapytania o media

CSS i internet umożliwiają dostosowywanie i elastyczność dzięki zapytaniom o media, czyli deklaratywnym warunkom, które zawierają zestaw stylów, jeśli warunek jest spełniony. Najczęstszym warunkiem jest rozmiar obszaru wyświetlania urządzenia: jeśli jest mniejszy niż 800 pikseli, zastosuj te lepsze style.

Dostosowywanie do użytkownika

Interfejs nieadaptacyjny to taki, który nie zmienia się, gdy użytkownik go odwiedza. Zapewnia on wszystkim użytkownikom takie same wrażenia i nie można go dostosować. Interfejs dostosowujący się do użytkownika może mieć 5 różnych wyglądów i stylów dla 5 różnych użytkowników. Funkcjonalność jest taka sama, ale estetyka jest lepiej odbierana, a interfejs jest łatwiejszy w obsłudze dla użytkowników, którzy mogą go dostosować.

Wymagania wstępne

• Znajomość języków HTML i CSS
• Znajomość narzędzi dla programistów, takich jak Narzędzia deweloperskie w Chrome.

Co utworzysz

W tym ćwiczeniu utworzysz formularz dostosowujący się do użytkownika, który będzie się zmieniać w zależności od tych czynników:

• preferencje dotyczące kolorów systemu, oferując jasny i ciemny schemat kolorów elementów sterujących formularza i otaczających je elementów interfejsu;
• ustawienia ruchu systemu, oferując różne typy animacji;
• Widoki na małych i dużych urządzeniach, aby zapewnić wygodę korzystania z telefonów i komputerów.
• Różne rodzaje wejść, takie jak klawiatura, czytnik ekranu, dotyk i mysz.
• Dowolny język i tryb odczytu/zapisu

Czego się nauczysz

Z tego ćwiczenia dowiesz się, jak korzystać z nowoczesnych funkcji internetowych, aby utworzyć formularz dostosowujący się do użytkownika. Dowiesz się, jak:

• Tworzenie jasnych i ciemnych motywów
• Twórz animowane formularze z ułatwieniami dostępu
• Układ elastycznych formularzy
• Używaj jednostek względnych i właściwości logicznych

To ćwiczenie koncentruje się na interfejsach dostosowanych do użytkownika. Nieistotne koncepcje i bloki kodu zostały pominięte. Można je po prostu skopiować i wkleić.

Czego potrzebujesz

• Google Chrome 89 lub nowsza albo preferowana przeglądarka

2. Konfiguracja

Pobierz kod

Wszystko, czego potrzebujesz do tego projektu, znajdziesz w repozytorium GitHub. Aby rozpocząć, pobierz kod i otwórz go w ulubionym środowisku deweloperskim. Możesz też utworzyć fork tego Codepena i pracować na jego podstawie.

Zalecane: użyj Codepen

1. Otwórz nową kartę przeglądarki.
2. Otwórz stronę https://codepen.io/argyleink/pen/abBMeeq.
3. Jeśli nie masz konta, utwórz je, aby zapisać pracę.
4. Kliknij Fork (Rozwidlenie).

Alternatywa: praca lokalna

Jeśli chcesz pobrać kod i pracować lokalnie, musisz mieć zainstalowaną Node.js w wersji 12 lub nowszej oraz skonfigurowany i gotowy do użycia edytor kodu.

Korzystanie z Gita

1. Otwórz stronę https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces
2. Sklonuj repozytorium do folderu.
3. Zwróć uwagę, że gałęzią domyślną jest beginning.

Używanie plików

Pobierz kod źródłowy

1. Rozpakuj pobrany plik ZIP do folderu.

Uruchamianie projektu

Użyj katalogu projektu utworzonego w jednym z powyższych kroków, a następnie:

1. Uruchom npm install, aby zainstalować zależności wymagane do uruchomienia serwera.
2. Uruchom npm start, aby uruchomić serwer na porcie 3000.
3. Otwórz nową kartę przeglądarki.
4. Otwórz stronę http://localhost:3000.

Informacje o HTML

Z tej lekcji dowiesz się, jakich elementów HTML używać, aby zapewnić interaktywność dostosowaną do użytkownika. Te warsztaty są poświęcone w szczególności CSS. Jeśli dopiero zaczynasz tworzyć formularze lub witryny, warto zapoznać się z podanym kodem HTML. Wybór elementów HTML może mieć kluczowe znaczenie w przypadku ułatwień dostępu i układu.

Gdy wszystko będzie gotowe, ten szkielet przekształcisz w dynamiczną i dostosowaną do potrzeb użytkowników stronę.

3. Interakcje adaptacyjne

Gałąź Git: beginning

Po zakończeniu tej sekcji formularz ustawień będzie dostosowywać się do:

• Pad do gier + klawiatura
• Mysz + dotyk
• czytnik ekranu lub podobna technologia wspomagająca osoby z niepełnosprawnością;

Atrybuty kodu HTML

Kod HTML podany w kodzie źródłowym to świetny punkt początkowy, ponieważ wybrano już elementy semantyczne, które pomagają grupować, porządkować i etykietować dane wejściowe formularza.

Formularze są często kluczowym punktem interakcji dla firmy, dlatego ważne jest, aby można było je dostosowywać do wielu rodzajów danych wejściowych, które można wprowadzać w internecie. Na przykład ważne jest, aby formularz był użyteczny na urządzeniach mobilnych z ekranem dotykowym. W tej sekcji, przed układem i stylem, zadbaj o użyteczność wprowadzania adaptacyjnego.

Dane wejściowe grupowania

<fieldset> Element w kodzie HTML służy do grupowania podobnych pól i elementów sterujących. Formularz zawiera 2 grupy: jedną dotyczącą głośności, a drugą powiadomień. Jest to ważne dla wygody użytkowników, ponieważ umożliwia pomijanie całych sekcji.

Porządkowanie elementów

Kolejność elementów jest logiczna. Jest to ważne z punktu widzenia wrażeń użytkownika, ponieważ kolejność elementów wizualnych powinna być taka sama lub podobna w przypadku gamepada, klawiatury i czytnika ekranu.

Interakcja z klawiaturą

Użytkownicy internetu przyzwyczaili się do poruszania się po formularzach za pomocą klawisza Tab, co na szczęście jest obsługiwane przez przeglądarkę, jeśli podasz oczekiwane elementy HTML. Elementy takie jak <button>, <input>, <h2> i <label> automatycznie stają się miejscami docelowymi klawiatury lub czytnika ekranu.

Powyższy film pokazuje, jak za pomocą klawisza Tab i strzałek można poruszać się po interfejsie i wprowadzać zmiany. Niebieski kontur jest jednak bardzo blisko elementów wejściowych. Dodaj te style, aby ta interakcja miała trochę więcej miejsca.

style.css

input {
  outline-offset: 5px;
}

Warto spróbować

1. Sprawdź elementy HTML użyte w index.html.
2. Kliknij stronę demonstracyjną w przeglądarce.
3. Naciśnij klawisz tab i shift+tab, aby przenieść zaznaczenie elementu w formularzu.
4. Użyj klawiatury, aby zmienić wartości suwaków i pól wyboru.
5. Podłącz kontroler Bluetooth i przesuwaj fokus elementu w formularzu.

Interakcja z myszą

Użytkownicy internetu przyzwyczaili się do obsługiwania formularzy za pomocą myszy. Spróbuj użyć myszy w formularzu. Suwaki i pola wyboru działają, ale można je ulepszyć. Pola wyboru są zbyt małe, aby można było w nie kliknąć myszą.

Widzisz, jak zyskujesz 2 funkcje związane z UX, które umożliwiają połączenie etykiet i ich danych wejściowych?

Pierwsza funkcja to opcje interakcji, a etykieta jest znacznie łatwiejsza do kliknięcia myszą niż mały kwadrat.

Drugą cechą jest dokładne określenie, do którego pola wejściowego odnosi się etykieta. Bez CSS trudno jest określić, która etykieta odpowiada któremu polu wyboru, chyba że podasz odpowiednie atrybuty.

To jawne połączenie ułatwia też korzystanie z czytników ekranu, o których piszemy w następnej sekcji.

Niepowiązane: brak atrybutów łączących elementy.

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

Powiązane: atrybuty łączące elementy.

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

Podany kod HTML ma już przypisane wszystkie dane wejściowe i etykiety. Jeśli to dla Ciebie nowość, warto dowiedzieć się więcej.

Warto spróbować

1. Najedź kursorem myszy na etykietę i zwróć uwagę na wyróżnienie pola wyboru.
2. Sprawdź element etykiety za pomocą Narzędzi deweloperskich w Chrome, aby zobaczyć obszar klikalny, który umożliwia zaznaczenie pola wyboru.

Interakcja z czytnikiem ekranu

Technologia wspomagająca osoby z niepełnosprawnością może wchodzić w interakcję z tym formularzem, a kilka atrybutów HTML może ułatwić korzystanie z niego.

W przypadku użytkowników, którzy poruszają się po bieżącym formularzu za pomocą czytnika ekranu w Chrome, występuje niepotrzebne zatrzymanie przy elemencie <picture> (nie dotyczy to tylko Chrome). Użytkownik korzystający z czytnika ekranu prawdopodobnie ma wadę wzroku, więc zatrzymywanie się na zdjęciu nie jest pomocne. Elementy można ukryć przed czytnikami ekranu za pomocą atrybutu.

index.html

<picture aria-hidden="true">

Teraz czytniki ekranu pomijają element, który był czysto wizualny.

Element suwaka input[type="range"] ma specjalny atrybut ARIA: aria-labelledby="media-volume". Zawiera specjalne instrukcje dla czytnika ekranu, które poprawiają wygodę użytkowników.

Warto spróbować

1. Użyj czytnika ekranu systemu operacyjnego, aby przenosić zaznaczenie w formularzu.
2. Pobierz i wypróbuj na formularzu oprogramowanie czytnika ekranu.

4. Układy adaptacyjne

Gałąź Git: layouts

Po zakończeniu tej sekcji strona ustawień będzie:

• Utwórz system odstępów z właściwościami niestandardowymi i jednostkami względnymi zdefiniowanymi przez użytkownika.
• Pisz CSS Grid, aby uzyskać elastyczne, responsywne wyrównanie i odstępy
• Używaj właściwości logicznych w przypadku układów dostosowanych do różnych krajów
• Pisz zapytania o media, aby dostosowywać się do układów kompaktowych i przestrzennych.

Odstępy

Kluczem do ładnego układu jest ograniczona paleta opcji odstępów. Dzięki temu treści mogą znaleźć naturalne dopasowania i harmonijne połączenia.

Właściwości niestandardowe

Te warsztaty opierają się na zestawie siedmiu rozmiarów właściwości niestandardowych.

• Umieść te elementy u góry 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;
}

Nazwy są zbliżone do słownictwa, którego ludzie używają do opisywania przestrzeni. Jednostki rem służą wyłącznie do określania rozmiarów w całych jednostkach, które są dostosowywane i uwzględniają preferencje użytkownika.

Style strony

Następnie musisz ustawić style dokumentu, usunąć marginesy z elementów i ustawić czcionkę na ładną czcionkę bezszeryfową.

• Dodać te boty do pokoju „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);
}

To pierwsze użycie niestandardowych właściwości odstępów. To początek Twojej kosmicznej podróży.

Typografia

Czcionka w tym układzie jest adaptacyjna. Słowo kluczowe system-ui będzie używać czcionki interfejsu, którą system operacyjny użytkownika uzna za optymalną.

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

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

small {
  line-height: 1.5;
}

Style h1, h2 i h3 mają charakter stylistyczny i są nieznaczne. Element small wymaga jednak dodatkowego elementu line-height, który jest potrzebny, gdy tekst jest zawijany. W przeciwnym razie będzie zbyt mocno ściśnięta.

Właściwości logiczne

Zwróć uwagę, że element padding w przypadku elementu body używa właściwości logicznych (block-start, block-end) do określenia strony. W dalszej części tego ćwiczenia będziemy często używać właściwości logicznych. Podobnie jak rem, dopasowują się do użytkownika. Ten układ można przetłumaczyć na inny język i ustawić w taki sposób, aby był zgodny z naturalnym kierunkiem pisania i dokumentu, do którego użytkownik jest przyzwyczajony w swoim języku ojczystym. Właściwości logiczne umożliwiają obsługę tego za pomocą tylko jednej definicji odstępu, kierunku lub wyrównania.

Siatka i flexbox są już względne w stosunku do przepływu, co oznacza, że style napisane w jednym języku będą kontekstowe i odpowiednio stosowane w innych językach. Kierunek adaptacyjny: treść przepływa zgodnie z kierunkiem dokumentu.

Właściwości logiczne pozwalają docierać do większej liczby użytkowników przy użyciu mniejszej liczby stylów.

Układy siatki CSS

Właściwość grid CSS to zaawansowane narzędzie do tworzenia układów z wieloma funkcjami do wykonywania złożonych zadań. Utworzysz kilka prostych układów siatki i jeden złożony układ. Będziesz też pracować od zewnątrz do wewnątrz, od makro do mikro. Niestandardowe właściwości odstępów staną się kluczowe nie tylko jako wartości dopełnienia lub marginesu, ale także jako rozmiary kolumn, promienie obramowania i inne.

Oto zrzut ekranu przedstawiający Narzędzia deweloperskie w Chrome z nałożonymi na siebie układami siatki CSS:

1. Wykonaj te czynności: dodaj każdy z tych stylów do style.css:

<main>

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

Domyślnie siatka umieszcza każdy element podrzędny w osobnym wierszu, co sprawia, że świetnie nadaje się do układania elementów jeden na drugim. Ma też dodatkową zaletę, jaką jest używanie gap. Wcześniej ustawiono margin: 0 na wszystkich elementach z selektorem *, co jest teraz ważne, ponieważ do określania odstępów używasz gap. Gap to nie tylko jedno miejsce do zarządzania przestrzenią w kontenerze, ale także jego przepływ względny.

<form>

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));
}

To najbardziej skomplikowany układ siatki w projekcie, ale uwzględnia najbardziej interesujący aspekt elastyczności:

• max-width podaje wartość, której algorytm układu może użyć do określenia, jak duży może być element.
• gap używa właściwości niestandardowych i przekazuje inny parametr row-gap niż column-gap.
• Wartość align-items jest ustawiona na flex-start, aby nie rozciągać wysokości elementów.
• grid-template-columns ma dość złożoną składnię, ale cel jest prosty: kolumny mają być szerokie na 35ch i nigdy nie mniejsze niż 10ch. Jeśli jest miejsce, umieszczaj elementy w kolumnach, w przeciwnym razie w wierszach.

2. Sprawdź, czy możesz zmienić rozmiar przeglądarki. Zobacz, jak formularz zwija się do wierszy w małym obszarze wyświetlania, ale w razie potrzeby dodaje nowe kolumny, dostosowując się bez zapytań o media. Ta strategia stylów elastycznych bez zapytań o media jest szczególnie przydatna w przypadku komponentów lub układów opartych na treści.

<section>

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

Każda sekcja powinna być siatką wierszy ze średnimi odstępami między elementami podrzędnymi.

<header>

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

Każdy nagłówek powinien być siatką wierszy z bardzo małymi odstępami między elementami podrzędnymi.

<fieldset>

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

Ten układ odpowiada za wygląd karty i grupowanie danych wejściowych. overflow: hidden i gap: 1px staną się widoczne, gdy w następnej sekcji dodasz kolor.

.fieldset-item

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

Ten układ odpowiada za wyśrodkowanie ikony i pola wyboru z powiązanymi etykietami i elementami sterującymi. Pierwsza kolumna szablonu siatki, var(--space-lg), tworzy kolumnę szerszą niż ikona, dzięki czemu element podrzędny ma miejsce, w którym może być wyśrodkowany.

Ten układ pokazuje, ile decyzji projektowych zostało już podjętych w przypadku właściwości niestandardowych. Wypełnienie, odstępy i kolumna zostały dopasowane do systemu za pomocą zdefiniowanych przez Ciebie wartości.

.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;
}

Ten układ odpowiada za ustawienia, rozmiar okręgu ikony, tworzenie kształtu okręgu i wyśrodkowywanie obrazu w nim.

<picture> & [checkbox] alignment

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

Ten układ izoluje wyśrodkowywanie elementów obrazu i pola wyboru za pomocą :is pseudoselektora.

3. Zastąp selektor picture > svg selektorem .fieldset-item svg w ten sposób:

.fieldset-item <svg>

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

Ustawia rozmiar ikony SVG na wartość z systemu rozmiarów.

.sm-stack

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

Ta klasa narzędziowa jest przeznaczona dla elementów etykiety pola wyboru, aby umieścić tekst pomocy dla pola wyboru.

input[type="checkbox"]

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

Te style zwiększają rozmiar pola wyboru, używając wartości z naszego zestawu odstępów.

Warto spróbować

1. Otwórz Narzędzia deweloperskie w Chrome i znajdź plakietki siatki w HTML-u w panelu Elementy. Kliknij je, aby włączyć narzędzia do debugowania.
2. Otwórz Narzędzia deweloperskie w Chrome i najedź kursorem na przerwę w panelu Style.
3. Otwórz Narzędzia deweloperskie w Chrome, przejdź do panelu Style i przełącz się z Style na Układy. Poznaj ten obszar, przełączając ustawienia i włączając układy.

Zapytania o media

Poniższy kod CSS dostosowuje style na podstawie rozmiaru i orientacji widocznego obszaru, aby optymalnie dopasować odstępy lub układ do kontekstu widocznego obszaru.

Uwaga: kod CSS każdej sekcji należy dodać po selektorze, który modyfikuje w style.css.

<main>

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

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

Te 2 zapytania o media zapewniają main więcej dopełnienia, ponieważ dostępna jest większa przestrzeń widocznego obszaru. Oznacza to, że zaczyna się od niewielkiego dopełnienia, ale w miarę zwiększania się dostępnej przestrzeni staje się coraz bardziej przestronny.

<form>

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;
  }
}

Formularz był już dostosowany do rozmiaru widocznego obszaru dzięki auto-fit, ale podczas testowania na urządzeniu mobilnym obrócenie urządzenia do orientacji poziomej nie powoduje umieszczenia dwóch grup formularzy obok siebie. Dostosuj się do tego kontekstu orientacji poziomej za pomocą orientationzapytania o multimedia i sprawdzenia szerokości widocznego obszaru. Jeśli urządzenie jest w orientacji poziomej i ma co najmniej 640 pikseli szerokości, wymuś 2 kolumny, zmieniając właściwość niestandardową --repeat na liczbę zamiast słowa kluczowego 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;
  }
}

To zapytanie o multimedia to kolejne rozszerzenie odstępów, gdy dostępna jest większa przestrzeń widocznego obszaru. Szablon siatki rozszerza pierwszą kolumnę, używając w szablonie większej właściwości niestandardowej (var(--space-xxl)). Dopełnienie jest również pompowane do większych właściwości niestandardowych.

Warto spróbować

1. Zwiększaj i zmniejszaj rozmiar przeglądarki, aby zobaczyć, jak zmienia się dostępna przestrzeń.
2. Wyświetlanie podglądu na urządzeniu mobilnym
3. Wyświetlanie podglądu na urządzeniu mobilnym w trybie poziomym

5. Kolor adaptacyjny

Gałąź Git: colors

Po zakończeniu tej sekcji formularz ustawień będzie:

• Dostosowywanie do preferencji dotyczących ciemnych i jasnych kolorów
• mieć schemat kolorów wywodzący się z szesnastkowego kodu koloru marki;
• używać kolorów ułatwiających dostęp,

HSL

W kolejnej sekcji utworzysz system kolorów z HSL, który pomoże Ci stworzyć jasny i ciemny motyw. Opiera się na tej podstawowej koncepcji w CSS: calc().

HSL to skrót od barwy, nasycenia i jasności. Odcień to kąt, podobnie jak punkt na zegarze, a nasycenie i jasność to wartości procentowe. calc() potrafi wykonywać obliczenia matematyczne na procentach i kątach. W CSS możesz wykonywać obliczenia jasności i nasycenia na podstawie tych wartości procentowych. Połącz obliczenia kanałów kolorów z własnymi właściwościami, aby uzyskać nowoczesny, dynamiczny schemat kolorów, w którym warianty są obliczane na podstawie koloru podstawowego. Dzięki temu nie musisz zarządzać wieloma kolorami w kodzie.

Właściwości niestandardowe

W tej sekcji utworzysz zestaw właściwości niestandardowych do wykorzystania w pozostałych stylach. Podobnie jak w przypadku odstępów ustawionych wcześniej w tagu :root, dodasz kolory.

Załóżmy, że kolor marki Twojej aplikacji to #0af. Twoim pierwszym zadaniem jest przekształcenie tego szesnastkowego kodu koloru na wartość HSL: hsl(200 100% 50%). Ta konwersja ujawnia kanały kolorów Twojej marki w HSL, których możesz użyć calc() do obliczenia różnych pomocniczych kolorów marki.

Uwaga: ta aplikacja preferuje ciemny schemat kolorów, a następnie dostosowuje się do jasnego motywu. Jest to ważne, ponieważ pierwszy schemat kolorów będzie ciemnym motywem.

Każdy z tych bloków kodu należy dodać do tego samego selektora :root.

Kanały marki

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

3 kanały HSL zostały wyodrębnione i umieszczone we własnych właściwościach niestandardowych.

1. Użyj wszystkich 3 właściwości w niezmienionej postaci i odtwórz kolor marki.

Marka

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

Ponieważ domyślnie używasz ciemnego schematu kolorów, warto odbarwiać kolory, aby używać ich na ciemnych powierzchniach (w przeciwnym razie mogą być zbyt intensywne lub niedostępne). Aby zmniejszyć nasycenie koloru marki, użyj barwy i jasności w niezmienionej postaci, ale zmniejsz nasycenie o połowę za pomocą dzielenia: calc(var(--saturation) / 2). Kolor marki jest teraz prawidłowo dopasowany do motywu, ale odbarwiony, aby można go było używać.

Tekst

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

W przypadku tekstu do czytania w ciemnym motywie używasz odcienia marki jako podstawy, ale tworzysz z niego prawie białe kolory. Wielu użytkowników uzna, że tekst jest biały, choć w rzeczywistości jest bardzo jasnoniebieski. Używanie odcieni tego samego koloru to dobry sposób na stworzenie harmonijnego projektu. --text1 ma 85% bieli, a --text2 – 65% bieli. Oba mają bardzo małe nasycenie.

2. Po dodaniu kodu do projektu otwórz Narzędzia deweloperskie w Chrome i wypróbuj zmianę wartości tych kanałów. Sprawdź, jak HSL i jego kanały wchodzą ze sobą w interakcje. Może chcesz, aby nasycenie było większe lub mniejsze.

Platforma

: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%);
}

Tekst jest bardzo jasny, ponieważ w trybie ciemnym powierzchnie są ciemne. W przypadku kolorów tekstu, które miały wysokie wartości jasności (85% i więcej), powierzchnie będą miały niższe wartości (30% i mniej). Odpowiednia różnica w zakresie jasności między powierzchnią a tekstem zapewni użytkownikom czytelność kolorów.

3. Zwróć uwagę, jak kolory zaczynają się od najciemniejszej szarości o 10% jasności i 10% nasycenia, a następnie odbarwiają się, gdy stają się jaśniejsze. Każda nowa powierzchnia jest o 5% lżejsza od poprzedniej. Nasycenie jest też nieco obniżone na jaśniejszych powierzchniach. Spróbuj ustawić nasycenie wszystkich powierzchni na 10%. Podoba Ci się bardziej czy mniej?

Jasny motyw

Po określeniu w ciemnym motywie odpowiedniego zestawu kolorów tekstu i powierzchni nadszedł czas na dostosowanie go do preferencji jasnego motywu przez zaktualizowanie niestandardowych właściwości kolorów w prefers-color-scheme zapytaniu o media.

Aby zachować dobry kontrast kolorów, zastosuj tę samą technikę, czyli utrzymuj dużą różnicę w wartościach jasności między kolorami powierzchni i tekstu.

Marka

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

Pierwszy z nich to kolor marki. Nasycenie musi zostać przywrócone do pełnej mocy.

Text

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

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

Podobnie jak w przypadku ciemnego motywu, w jasnym motywie kolory tekstu są bardzo ciemnoniebieskie. Wartości jasności 10% i 30% w przypadku koloru HSL powinny sygnalizować, że są to ciemne kolory.

Powierzchnia

@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%);
  }
}

Te kolory powierzchni jako pierwsze łamią wzorce. To, co do tej pory wydawało się dość rozsądne i liniowe, teraz się załamało. Zaletą jest to, że możesz eksperymentować z kombinacjami kolorów jasnego motywu HSL bezpośrednio w kodzie i dostosowywać jasność oraz nasycenie, aby utworzyć ładny jasny schemat kolorów, który nie jest zbyt chłodny ani niebieski.

Korzystanie z systemu kolorów

Po zdefiniowaniu kolorów możesz ich użyć. Masz wyrazisty kolor marki, 2 kolory tekstu i 4 kolory powierzchni.

• W przypadku poniższych sekcji kodu znajdź pasujący selektor i dodaj do istniejącego bloku kodu kod CSS koloru.

<body>

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

Główne kolory strony to pierwsze kolory powierzchni i tekstu, które zostały przez Ciebie utworzone. Zapewniają one też maksymalny domyślny kontrast. Możesz zacząć testować przełączanie między trybem jasnym i ciemnym.

<fieldset>

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

Jest to element projektu przypominający kartę. Obramowanie o szerokości 1 piksela i odstęp o szerokości 1 piksela mają ten sam kolor i reprezentują powierzchnię za każdym elementem .fieldset-item. Zapewnia to przyjemną harmonię wizualną i jest łatwe w utrzymaniu.

.fieldset-item

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

Każde pole formularza znajduje się na osobnej powierzchni. Mam nadzieję, że widzisz, jak te elementy się łączą i jak nakładają się na siebie różne odcienie jasności.

.fieldset-item > picture

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

Jest to wybór stylistyczny, który ma na celu podkreślenie okrągłego kształtu otaczającego ikonę. W następnej sekcji dowiesz się, dlaczego tak jest.

.fieldset-item svg

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

Ikony w formularzu są ustawione tak, aby używać tekstu alternatywnego --text2. Projekty, w których wypełnione ikony są nieco jaśniejsze niż tekst, nie sprawiają wrażenia zbyt ciężkich.

.fieldset-item:focus-within svg

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

Ten selektor dopasowuje element kontenera wejściowego, gdy użytkownik wchodzi w interakcję z jednym z pól wejściowych, i kieruje na element SVG, aby wyróżnić go kolorem akcentującym Twojej marki. Zapewnia to dobrą reakcję interfejsu użytkownika, w której interakcja z polami powoduje wyróżnienie odpowiednich ikon.

<small>

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

To mały tekst. W porównaniu z nagłówkami i akapitami (treściami głównymi) powinien być nieco stonowany.

Ciemne elementy sterujące formularzem

:root {
  color-scheme: dark light;
}

Ten miły akcent informuje przeglądarkę, że strona obsługuje zarówno motywy ciemne, jak i jasne. Przeglądarka nagradza nas ciemnymi elementami sterującymi formularza.

6. Animacja adaptacyjna

Gałąź Git: animations

Po zakończeniu tej sekcji strona ustawień będzie:

• Dostosowywanie do preferencji użytkownika dotyczących ruchu
• Reagowanie na interakcje użytkowników

Mniej animacji a brak animacji

Ustawienia użytkownika dotyczące ruchu w systemie operacyjnym nie oferują wartości „brak animacji”. Opcja ta służy do ograniczania ruchu. Animacje przenikania, przejścia kolorów i inne efekty są nadal przydatne dla użytkowników, którzy wolą ograniczone animacje.

Na tej stronie ustawień nie ma zbyt wielu elementów, które poruszają się po ekranie. Ruch przypomina efekt skalowania, jakby element przesuwał się w kierunku użytkownika. Dostosowanie kodu CSS do ograniczonego ruchu jest tak proste, że możesz zmniejszyć przejścia skalowania.

Style interakcji

<fieldset>

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

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

Gdy użytkownik wchodzi w interakcję z danymi wejściowymi jednego z <fieldset>elementów przypominających karty, dodaje to efekt podniesienia. Interfejs wysuwa element do przodu, co pomaga użytkownikowi skupić się na grupie formularzy kontekstowych, która jest przesuwana w jego stronę.

.fieldset-item

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

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

Gdy użytkownik wchodzi w interakcję z polem wprowadzania, tło warstwy konkretnego elementu zmienia się na wyróżniony kolor powierzchni. Jest to kolejna funkcja interfejsu, która pomaga przyciągnąć uwagę użytkownika i sygnalizuje, że dane wejściowe są odbierane. W większości przypadków nie trzeba zmniejszać przejść kolorów.

.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%);
  }
}

Oto clip-path animacja, której używasz tylko wtedy, gdy użytkownik nie ma preferencji dotyczących ograniczonego ruchu. Pierwszy selektor i style ograniczają ścieżkę przycinania okręgu o 10% i ustawiają niektóre parametry przejścia. Drugi selektor i styl czekają, aż użytkownicy wejdą w interakcję z polem, a następnie powiększają okrąg ikony. Subtelny, ale fajny efekt, gdy jest w porządku.

7. Gratulacje

Gałąź Git: complete

Gratulacje! Udało Ci się utworzyć interfejs dostosowany do użytkownika.

Znasz już najważniejsze kroki, które należy wykonać, aby tworzyć interfejsy dostosowujące się do różnych scenariuszy i ustawień użytkowników.