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

1. Zanim zaczniesz

Użytkownicy mają obecnie wiele preferencji na swoich urządzeniach. Chcą, aby system operacyjny i aplikacje wyglądały i działały tak, jakby były ich własnością. Interfejsy dostosowujące się do użytkownika to takie, które są gotowe do wykorzystania tych preferencji w celu poprawy wrażeń użytkownika, aby czuł się on jak u siebie. Jeśli zostanie to zrobione prawidłowo, użytkownik może nigdy nie zauważyć, że interfejs się dostosowuje lub został dostosowany.

Ustawienia użytkownika

Wybór sprzętu i systemu operacyjnego to preferencje, kolory aplikacji i systemów operacyjnych to preferencje, a języki dokumentów aplikacji i systemów operacyjnych to preferencje. Liczba preferencji użytkownika wydaje się tylko rosnąć. Strona internetowa nie ma dostępu do wszystkiego i nie bez powodu.

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

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

Oto kilka przykładów preferencji użytkowników, które już wkrótce będą dostępne w CSS:

• Ograniczone dane / wersja uproszczona
• Zakres kolorów
• Contrast (less | more | reduce)
• Kolory (wymusza kolory użytkownika na stronie)
• Dźwięki otoczenia (włączone | ograniczone)

Zapytania o multimedia

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 widocznego obszaru urządzenia: jeśli jest mniejszy niż 800 pikseli, w tym przypadku lepiej sprawdzą się inne style.

Dostosowywanie do użytkownika

Interfejs niedostosowujący się nie zmienia się, gdy użytkownik go odwiedza, co oznacza, że zapewnia wszystkim takie same wrażenia bez możliwości dostosowania. 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. Funkcje są takie same, ale estetyka jest postrzegana lepiej, a użyteczność interfejsu jest łatwiejsza 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 Google Chrome;

Co utworzysz

W tym ćwiczeniu utworzysz formularz, który dostosowuje się do użytkownika:

• preferencje dotyczące systemowego schematu kolorów, oferując jasny i ciemny schemat kolorów dla 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, które umożliwiają korzystanie z aplikacji na urządzeniach mobilnych i komputerach.
• różne typy wprowadzania danych, np. klawiatura, czytnik ekranu, dotyk i mysz;
• Dowolny język i tryb czytania/pisania

Czego się nauczysz

W tym ćwiczeniu poznasz nowoczesne funkcje internetowe, które pomogą Ci utworzyć formularz dostosowujący się do użytkownika. Dowiesz się, jak:

• Tworzenie jasnych i ciemnych motywów
• Tworzenie animowanych i dostępnych formularzy
• Układ – formularze elastyczne
• 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 wersja albo preferowana przeglądarka.

2. Konfiguracja

Pobierz kod

Wszystko, czego potrzebujesz do tego projektu, znajdziesz w repozytorium GitHub. Aby rozpocząć, musisz pobrać kod i otworzyć go w ulubionym środowisku programistycznym. Możesz też utworzyć rozwidlenie tego Codepena i pracować na nim.

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ć swoją pracę.
4. Kliknij Fork (Rozwidlenie).

Alternatywa: praca lokalna

Jeśli chcesz pobrać kod i pracować lokalnie, musisz mieć zainstalowane środowisko 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 domyślna gałąź to beginning.

Korzystanie z 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

W tej lekcji omówimy aspekty kodu HTML, które służą do obsługi interaktywności dostosowanej do użytkownika. Te warsztaty są poświęcone usłudze porównywania cen. 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 dla ułatwień dostępu i układu.

Gdy wszystko będzie gotowe, możesz zacząć przekształcać ten szkielet w dynamiczny i adaptacyjny interfejs użytkownika.

3. Interakcje adaptacyjne

Gałąź Git: beginning

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

• Pad do gier i klawiatura
• Myszka i dotyk
• Czytnik ekranu lub podobna technologia wspomagająca osoby z niepełnosprawnością

Atrybuty HTML

Kod HTML podany w kodzie źródłowym to świetny punkt wyjścia, ponieważ elementy semantyczne, które pomagają grupować, porządkować i oznaczać dane wejściowe formularza, zostały już wybrane.

Formularze są często kluczowym punktem interakcji z firmą, dlatego ważne jest, aby można je było dostosować do wielu typó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, zapewnisz użyteczność adaptacyjnych danych wejściowych.

Grupowanie danych wejściowych

Element <fieldset> w kodzie HTML służy do grupowania podobnych danych wejściowych i elementów sterujących. W formularzu masz 2 grupy: jedną dotyczącą głośności, a drugą powiadomień. Jest to ważne dla wygody użytkowników, ponieważ pozwala im pomijać całe sekcje.

Porządkowanie elementów

Elementy są wyświetlane w logicznej kolejności. Jest to ważne dla wygody użytkownika, ponieważ kolejność elementów wizualnych jest taka sama lub podobna w przypadku pada do gier, 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 przeglądarka obsługuje, jeśli podasz oczekiwane elementy HTML. Elementy takie jak <button>, <input>, <h2> i <label> automatycznie stają się miejscami docelowymi klawiatury lub czytnika ekranu.

Film powyżej pokazuje, jak za pomocą klawisza Tab i strzałek można poruszać się po interfejsie i wprowadzać zmiany. Niebieski kontur jest jednak bardzo ciasny wokół elementów wejściowych. Dodaj te style, aby zapewnić tej interakcji trochę przestrzeni.

style.css

input {
  outline-offset: 5px;
}

Do wypróbowania

1. Sprawdź elementy HTML używane w index.html.
2. Kliknij stronę demonstracyjną w przeglądarce.
3. Naciśnij klawisze tab i shift+tab, aby poruszać się po formularzu.
4. Użyj klawiatury, aby zmienić wartości suwaków i pól wyboru.
5. Podłącz kontroler pada do gier Bluetooth i przenieś zaznaczenie elementu na formularz.

Interakcja za pomocą myszy

Użytkownicy internetu przyzwyczaili się do interakcji z formularzami za pomocą myszy. Spróbuj użyć myszy w formularzu. Suwaki i pola wyboru działają, ale można to zrobić lepiej. Te pola wyboru są dość małe, aby można było je kliknąć myszą.

Zauważ, że otrzymujesz 2 funkcje ułatwiające korzystanie z aplikacji, które łączą etykiety i pola do wprowadzania danych.

Pierwsza funkcja to opcje, z którymi można wejść w interakcję, a etykieta jest znacznie łatwiejsza do kliknięcia myszą niż mały kwadrat.

Druga funkcja to możliwość sprawdzenia, do którego pola wejściowego odnosi się etykieta. Bez CSS trudno jest określić, która etykieta jest przeznaczona dla którego pola wyboru, chyba że podasz pewne atrybuty.

To wyraźne połączenie poprawia też działanie czytników ekranu, które zostały opisane 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>

W podanym kodzie HTML wszystkie dane wejściowe i etykiety są już przypisane. Jeśli jest to dla Ciebie nowe pojęcie, warto dowiedzieć się o nim więcej.

Do wypróbowania

1. Najedź kursorem na etykietę i zwróć uwagę na podświetlone pole wyboru.
2. Zbadaj element etykiety za pomocą Narzędzi deweloperskich w Chrome, aby zwizualizować klikalny obszar, który może zaznaczyć pole wyboru.

Interakcja z czytnikiem ekranu

Technologia wspomagająca osoby z niepełnosprawnością może wchodzić w interakcje z tym formularzem i dzięki kilku atrybutom HTML może ułatwić użytkownikom korzystanie z niego.

Użytkownicy, którzy poruszają się po bieżącym formularzu za pomocą czytnika ekranu w Chrome, niepotrzebnie zatrzymują się na elemencie <picture> (nie dotyczy to tylko Chrome). Użytkownik korzystający z czytnika ekranu prawdopodobnie robi to z powodu wady wzroku, więc zatrzymanie się na obrazie nie jest pomocne. Możesz ukryć elementy przed czytnikami ekranu za pomocą atrybutu.

index.html

<picture aria-hidden="true">

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

Element suwaka input[type="range"] ma specjalny atrybut ARIA: aria-labelledby="media-volume". Zawiera on specjalne instrukcje dla czytnika ekranu, które ułatwiają użytkownikom korzystanie z aplikacji.

Do wypróbowania

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

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 użyj jednostek względnych.
• pisanie kodu CSS Grid, aby uzyskać elastyczne, responsywne wyrównanie i odstępy;
• Używaj właściwości logicznych w układach dostosowanych do różnych języków.
• pisanie zapytań o media, aby dostosowywać układy kompaktowe i przestronne;

Odstępy

Kluczem do dobrego układu jest ograniczona paleta opcji odstępów. Dzięki temu treści są naturalnie dopasowane i harmonijne.

Właściwości niestandardowe

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

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

Nazwa jest zbliżona do sformułowań, których ludzie używają między sobą do opisywania przestrzeni. Używasz też wyłącznie jednostek rem, aby uzyskać czytelne rozmiary całych jednostek, które dostosowują się i uwzględniają preferencje użytkownika.

Style stron

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

• Dodaj do pliku style.css ten kod:

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 właściwości niestandardowych odstępów. To początek Twojej podróży kosmicznej.

Typografia

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

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

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

small {
  line-height: 1.5;
}

Style h1, h2 i h3 są niewielkie i stylistyczne. Element small wymaga jednak dodatkowego elementu line-height, gdy tekst jest zawijany. W przeciwnym razie będzie zbyt ściśnięty.

Właściwości logiczne

Zwróć uwagę, że padding w body używa właściwości logicznych (block-start, block-end) do określenia strony. Właściwości logiczne będą często używane w dalszej części tego ćwiczenia. Podobnie jak jednostka rem, dostosowują się do użytkownika. Układ ten można przetłumaczyć na inny język i ustawić w nim naturalny kierunek pisania i czytania dokumentu, do którego użytkownik jest przyzwyczajony w swoim języku ojczystym. Właściwości logiczne umożliwiają obsługę tego rozwiązania za pomocą tylko jednej definicji odstępu, kierunku lub wyrównania.

Siatka i flexbox są już zależne od przepływu, co oznacza, że style napisane dla jednego języka będą kontekstowe i odpowiednio stosowane w przypadku innych języków. Kierunek adaptacyjny; treść jest wyświetlana zgodnie z kierunkiem dokumentu.

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

Układy siatki CSS

Właściwość CSS grid to zaawansowane narzędzie do tworzenia układów, które ma wiele funkcji do wykonywania złożonych zadań. Utworzysz kilka prostych układów siatki i 1 złożony układ. Będziesz też pracować od zewnątrz do wewnątrz, od układów makro do układów mikro. Właściwości niestandardowe 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 nakładające się na każdy układ siatki CSS:

1. Postępuj zgodnie z instrukcjami, dodając każdy z tych stylów do pliku style.css:

<main>

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

Siatka domyślnie umieszcza każdy element podrzędny we własnym wierszu, co ułatwia układanie elementów. Dodatkową zaletą jest korzystanie z gap. Wcześniej ustawiono margin: 0 we wszystkich elementach z selektorem *, co jest teraz ważne, ponieważ do odstępów używasz gap. Odstęp to nie tylko jedno miejsce do zarządzania przestrzenią w kontenerze, ale też jego przepływ.

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

Jest to najbardziej skomplikowany układ siatki w projekcie, ale odpowiada za najbardziej ekscytujący aspekt responsywności:

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

2. Przetestuj zmianę rozmiaru przeglądarki. Zwróć uwagę, że formularz zwija się do wierszy w małym widoku, ale w razie potrzeby przechodzi do nowych kolumn, 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 skoncentrowanych 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łym odstępem 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 tworzenie wyglądu karty i grupowanie danych wejściowych. overflow: hidden i gap: 1px staną się widoczne, gdy dodasz kolor w następnej sekcji.

.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 wraz 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 może być wyśrodkowany.

Ten układ pokazuje, ile decyzji projektowych zostało już podjętych we właściwościach niestandardowych. Dopeł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środkowanie w nim obrazu.

<picture> & [checkbox] alignment

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

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

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 oddzielić tekst pomocniczy 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.

Do wypróbowania

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

Zapytania o multimedia

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

Uwaga: kod CSS każdej sekcji należy dodać po selektorze, który modyfikuje w pliku 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 dają elementowi main więcej dopełnienia, gdy dostępna jest większa przestrzeń widocznego obszaru. Oznacza to, że początkowo jest on kompaktowy i ma niewielkie dopełnienie, ale staje się coraz bardziej przestronny, gdy pojawia się więcej miejsca.

<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 2 grup formularzy obok siebie. Dostosuj się do tego kontekstu poziomego za pomocą zapytania o media orientation 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 media 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 też zwiększane w przypadku większych właściwości niestandardowych.

Do wypróbowania

1. Rozszerzaj i zwężaj okno przeglądarki, aby zobaczyć, jak dostosowuje się przestrzeń.
2. Wyświetlanie podglądu na urządzeniu mobilnym
3. Podgląd na urządzeniu mobilnym w orientacji poziomej

5. Kolor adaptacyjny

Gałąź Git: colors

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

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

HSL

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

HSL to skrót od odcienia, nasycenia i jasności. Odcień to kąt, jak punkt na zegarze, a nasycenie i jasność to wartości procentowe. calc() może wykonywać obliczenia na wartościach procentowych i kątach. W CSS możesz wykonywać obliczenia jasności i nasycenia na tych wartościach procentowych. Połącz obliczenia kanałów kolorów z właściwościami niestandardowymi, a uzyskasz nowoczesny, dynamiczny schemat kolorów, w którym warianty są obliczane na podstawie koloru podstawowego, co pomoże Ci uniknąć zarządzania wieloma kolorami w kodzie.

Właściwości niestandardowe

W tej sekcji utworzysz zestaw właściwości niestandardowych, których będziesz używać w pozostałych stylach. Podobnie jak w przypadku zestawu odstępów utworzonego wcześniej w tagu :root, dodasz kolory.

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

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

Każdy z poniższych bloków kodu w tej sekcji należy dodać do tego samego selektora :root.

Kanały firmowe

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

Trzy 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ż schemat kolorów jest domyślnie ciemny, dobrą praktyką jest zmniejszenie nasycenia kolorów, aby można było ich używać na ciemnych powierzchniach (w przeciwnym razie mogą być zbyt jaskrawe lub niedostępne). Aby zmniejszyć nasycenie koloru marki, użyj odcienia i jasności bez zmian, ale zmniejsz nasycenie o połowę, dzieląc je przez 2: calc(var(--saturation) / 2). Teraz kolor Twojej marki jest odpowiednio dopasowany do motywu, ale ma mniejsze nasycenie.

Tekst

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

W przypadku tekstu do czytania w ciemnym motywie jako podstawy używasz odcienia marki, ale tworzysz z niego kolory zbliżone do bieli. Wielu użytkowników będzie myśleć, że tekst jest biały, podczas gdy w rzeczywistości jest on bardzo jasnoniebieski. Używanie kolorów o podobnym odcieniu to skuteczny sposób na stworzenie harmonijnego projektu. --text1 to 85% bieli, a --text2 to 65% bieli. Oba kolory mają bardzo niskie nasycenie.

2. Po dodaniu kodu do projektu otwórz Narzędzia deweloperskie w Chrome i spróbuj zmienić wartości kanałów. Zobacz, jak HSL i jego kanały współdziałają ze sobą. Może wolisz większe lub mniejsze nasycenie.

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 będą ciemne. Jeśli kolory tekstu miały wysokie wartości jasności (85% i więcej), powierzchnie będą miały niższe wartości (30% i mniej). Odpowiedni zakres jasności między powierzchnią a tekstem ułatwi użytkownikom czytanie.

3. Zwróć uwagę, że kolory zaczynają się od najciemniejszej szarości o jasności 10% i nasyceniu 10%, a następnie tracą nasycenie, gdy stają się jaśniejsze. Każda nowa powierzchnia jest o 5% jaśniejsza od poprzedniej. Nasycenie jest też nieco mniejsze na jaśniejszych powierzchniach. Spróbuj ustawić nasycenie wszystkich powierzchni na 10%. Czy podoba Ci się bardziej czy mniej?

Jasny motyw

Gdy masz już odpowiedni zestaw kolorów tekstu i powierzchni określających ciemny motyw, możesz dostosować go do preferencji jasnego motywu, aktualizując właściwości niestandardowe kolorów w zapytaniu multimedialnym prefers-color-scheme.

Aby zachować dobry kontrast kolorów, użyjesz tej samej techniki, czyli utrzymania dużej różnicy w wartościach jasności między powierzchniami a kolorami tekstu.

Marka

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

Pierwszy to kolor marki. Trzeba przywrócić pełne nasycenie.

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 którym kolory tekstu były bardzo jasnoniebieskie, w jasnym motywie kolory tekstu są bardzo ciemnoniebieskie. Wartości jasności 10% i 30% w kolorze HSL powinny wskazywać, że te kolory są ciemne.

Surface

@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 przełamują wzorce. To, co do tej pory wydawało się całkiem rozsądne i linearne, teraz jest nieaktualne. Możesz eksperymentować z kombinacjami kolorów HSL w jasnym motywie bezpośrednio w kodzie oraz dostosowywać jasność i nasycenie, aby stworzyć ładny schemat kolorów, który nie będzie zbyt chłodny ani niebieski.

Korzystanie z systemu kolorów

Teraz, gdy kolory są już zdefiniowane, czas ich użyć. Masz ładny, wyróżniający się kolor uzupełniający marki, 2 kolory tekstu i 4 kolory powierzchni.

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

<body>

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

Kolory podstawowe strony to pierwsze utworzone przez Ciebie kolory powierzchni i tekstu, które również ustawiają domyślny kontrast na maksymalny poziom. Możesz zacząć testować przełączanie między trybem jasnym i ciemnym.

<fieldset>

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

To jest 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 ładną 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ę. Powód stanie się jasny, gdy w następnej sekcji dodasz interakcje.

.fieldset-item svg

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

Ikony w formularzu są skonfigurowane tak, aby używały 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 zachodzi interakcja z jednym z wejść wewnątrz, i kieruje na SVG, aby wyróżnić go akcentem marki. Dzięki temu użytkownik otrzymuje informacje zwrotne dotyczące formularza, a interakcja z danymi wejściowymi powoduje wyróżnienie odpowiednich ikon.

<small>

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

To mały tekst. Powinien być nieco bardziej stonowany niż nagłówki i akapity (treść główna).

Ciemne elementy sterujące formularza

:root {
  color-scheme: dark light;
}

Ten ostatni akcent informuje przeglądarkę, że ta strona obsługuje zarówno ciemny, jak i jasny motyw. 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 się do preferencji użytkownika dotyczących ruchu
• odpowiadanie na interakcje użytkownika,

Mniej animacji a brak animacji

Ustawienia użytkownika dotyczące ruchu w systemie operacyjnym nie zawierają wartości „brak animacji”. Opcja ta służy do ograniczania ruchu. Animacje przenikania, przejścia kolorów i inne efekty są nadal pożądane przez użytkowników, którzy wolą ograniczyć ruch.

Na tej stronie ustawień nie ma zbyt wielu elementów, które poruszają się po ekranie. Ruch jest bardziej efektem skali, jakby element przemieszczał się w kierunku użytkownika. Dostosowanie kodu CSS do ograniczonego ruchu jest tak proste, że wystarczy 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 elementów <fieldset>, które wyglądają jak karty, dodaje to efekt podniesienia. Interfejs przesuwa element do przodu, pomagając użytkownikowi skupić się na grupie formularzy kontekstowych, która jest przybliżana do użytkownika.

.fieldset-item

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

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

Gdy użytkownik wchodzi w interakcję z polem, 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 ograniczać 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 animacja clip-path, której używasz tylko wtedy, gdy użytkownik nie ma preferencji dotyczących ograniczenia ruchu. Pierwszy selektor i style zmniejszają ścieżkę przycinania koła o 10% i ustawiają 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 wszystko jest w porządku.

7. Gratulacje

Gałąź Git: complete

Gratulacje, udało Ci się utworzyć interfejs dostosowujący się do użytkownika.

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