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

1. Zanim zaczniesz

Obecnie użytkownik wskazał wiele ustawień na swoich urządzeniach. Chce, aby system operacyjny i aplikacje wyglądały i działały jak ich własne. Interfejsy adaptacyjne to takie, które są gotowe do wykorzystywania tych preferencji, aby zwiększać wygodę użytkowników i sprawiać, że czują się w domu tak, aby czuli się tak, jak są u nas. Jeśli zostanie wprowadzona prawidłowo, użytkownik może nigdy nie dowiedzieć się, że interfejs się zmienia lub dostosowywał.

Preferencje użytkownika

Wybór sprzętu to preferencja, system operacyjny to wybór, kolory aplikacji i systemów operacyjnych to preferencje, a języki dokumentów aplikacji i systemów operacyjnych to preferencje. Liczba preferencji użytkownika zdaje się zwiększać. Strona internetowa nie ma dostępu do wszystkich treści i ma dobry powód.

Oto kilka przykładów preferencji użytkownika, których może użyć CSS:

• 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 | zmniejszone)
• Jakość wprowadzania (mysz | dotyk | rysik)
• Tryb pisania i wyznaczania kierunku dokumentu (od lewej do prawej, od góry do dołu i inne)
• Tryb wyświetlania (pełnoekranowy | samodzielny | minimalny interfejs | przeglądarka)

Oto kilka przykładów preferencji użytkownika, które wkrótce pojawią się w CSS:

• Zmniejszona ilość danych / tryb uproszczony
• Zakres kolorów
• Kontrast (mniej | więcej | zmniejsz)
• Kolory (wymusza kolory na stronie przez użytkownika)
• Przejrzystość (włączona | ograniczona)

Zapytania o multimedia

CSS i internet umożliwiają adaptację i reagowanie za pomocą zapytań o multimedia, czyli warunku deklaratywnego, który zawiera zbiór stylów, jeśli jest on spełniony. Najczęstszą przyczyną jest rozmiar widocznego obszaru urządzenia: jeśli rozmiar jest mniejszy niż 800 pikseli, poniżej znajdziesz kilka przydatnych wskazówek.

O zależności od użytkownika

Interfejs nieadaptacyjny to taki, który nie zmienia nic, gdy użytkownik korzysta z przeglądarki, i zapewnia wszystkim użytkownikom jednolite wrażenia, bez możliwości dostosowania się do zmian. Interfejs adaptacyjny może mieć 5 wyglądów i stylów dla 5 różnych użytkowników. Działanie jest takie samo, ale jego estetyka jest lepiej widoczna, a łatwość obsługi interfejsu jest prostsza w obsłudze dla osób, które mogą go dostosowywać.

Wymagania wstępne

• znajomości języka HTML i CSS;
• znajomości narzędzi dla programistów, takich jak Narzędzia dla programistów Google Chrome;

Co utworzysz

W ramach tego ćwiczenia w Codelabs utworzysz formularz adaptacyjny, który dostosowuje się do tych elementów:

• preferowany schemat kolorów systemu, oferujący jasny i ciemny schemat kolorów dla elementów sterujących formularza i otaczających go elementów interfejsu.
• preferencje systemu dotyczące ruchu, oferując różne typy animacji;
• Małe i duże widoczne obszary urządzeń umożliwiające obsługę komputerów i urządzeń mobilnych
• różne typy danych wejściowych, np. klawiatura, czytnik ekranu, dotyk i mysz.
• Dowolny język i tryb czytania/zapisu.

Czego się nauczysz

Dzięki tym ćwiczeniom w Codelabs poznasz nowoczesne funkcje internetowe, które pomogą Ci stworzyć formularz adaptacyjny. Dowiesz się, jak:

• Używaj jasnych i ciemnych motywów
• Twórz animowane i łatwo dostępne formularze.
• Formularze elastyczne Układ
• Używaj jednostek względnych i właściwości logicznych

To ćwiczenia w programie koncentrują się na adaptacyjnych interfejsach użytkownika. Nieistotne koncepcje i bloki kodu zostały zamaskowane. Można je po prostu skopiować i wkleić.

Czego potrzebujesz

• Google Chrome 89 lub nowsza lub preferowana przeglądarka.

2. Konfiguracja

Pobierz kod

Wszystko, czego potrzebujesz na potrzeby tego projektu, znajduje się w repozytorium GitHub. Aby rozpocząć, pobierz kod i otwórz go w swoim ulubionym środowisku programistycznym. Możesz też utworzyć rozwidlenie tego Codepena i z niego pracować.

Zalecane: użyj Codepena

1. Otwórz nową kartę przeglądarki.
2. Wejdź na https://codepen.io/argyleink/pen/abBMeeq.
3. Jeśli nie masz konta, utwórz je, aby zapisać swoją pracę.
4. Kliknij Widelec.

Metoda alternatywna: praca lokalnie

Jeśli chcesz pobrać kod i działać lokalnie, musisz mieć Node.js w wersji 12 lub nowszej oraz edytor kodu skonfigurowany do działania.

Użyj Gita

1. Wejdź na stronę https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces.
2. Skopiuj repozytorium do folderu.
3. Zwróć uwagę, że gałąź domyślna to beginning.

Korzystanie z plików

Pobieranie kodu źródłowego

1. Rozpakuj pobrany plik ZIP do folderu.

Uruchamianie projektu

Użyj katalogu projektu utworzonego w jednym z tych kroków, a potem:

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. Wejdź na http://localhost:3000.

Informacje o kodzie HTML

Podczas tej lekcji zostaną omówione aspekty języka HTML służące do wspomagania interaktywności adaptacyjnej użytkownika. Te warsztaty dotyczą głównie usług porównywania cen. Jeśli dopiero zaczynasz tworzyć formularze i witryny, zapoznaj się z podanym kodem HTML. Dobór elementów HTML ma kluczowe znaczenie przy dostępności i układzie.

Jest to szkielet tego, co zostanie przekształcone w dynamiczne i adaptacyjne środowisko dla użytkowników.

3. Interakcje adaptacyjne

Gałąź Git: beginning

Na końcu tej sekcji Twój formularz ustawień będzie dostosowywać się do:

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

Atrybuty kodu HTML

Dobrym punktem wyjścia jest kod HTML podany w kodzie źródłowym, ponieważ elementy semantyczne ułatwiające grupowanie, porządkowanie i oznaczanie danych wejściowych formularza zostały już wybrane.

Formularze są często kluczowym punktem interakcji w firmie, dlatego powinny być w stanie dostosować się do licznych rodzajów danych, które można umieścić w internecie. Na przykład często potrzebny jest formularz, który można obsługiwać dotykowo na urządzeniach mobilnych. W tej sekcji, przed układem i stylem, zadbasz o łatwość obsługi danych wejściowych na podstawie adaptacji.

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ą dla woluminów, a drugą dla powiadomień. Ma to duże znaczenie dla wygody użytkowników, ponieważ pozwala pominąć całe sekcje.

Kolejność elementów

Kolejność elementów jest podana w logicznej kolejności. Jest to ważne z punktu widzenia wygody użytkowników, dlatego kolejność elementów wizualnych jest taka sama lub podobna w przypadku technologii padów do gier, klawiatury i czytników ekranu.

Interakcja z klawiaturą

Użytkownicy internetu przyzwyczaili się do przechodzenia między formularzami za pomocą klawisza Tab, za pomocą którego przeglądarka na szczęście dba o dostarczenie oczekiwanych elementów HTML. Elementy takie jak <button>, <input>, <h2> i <label> automatycznie stają się miejscami docelowymi klawiatury lub czytnika ekranu.

Na filmie powyżej pokazano, jak klawisz Tab i strzałki mogą poruszać się po interfejsie i wprowadzać zmiany. Niebieski kontur jest jednak bardzo wąski wokół elementów wejściowych. Dodaj następujące style, aby zostawić trochę przestrzeni na interakcję.

style.css

input {
  outline-offset: 5px;
}

Do wypróbowania

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

Interakcja myszą

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

Zobacz, jak zyskujesz 2 funkcje zwiększające wygodę użytkowników, które umożliwiają łączenie etykiet z danymi wejściowymi.

Pierwsza z nich zawiera opcje umożliwiające interakcję, a na etykiecie jest znacznie łatwiej docelowo w przypadku myszy niż małego kwadratu.

Druga funkcja to wiedza na temat dokładnych danych wejściowych, do których służy etykieta. Bez CSS-u trudno jest określić, która etykieta jest przypisana do którego pola wyboru, chyba że podasz jakieś atrybuty.

Takie bezpośrednie połączenie zwiększa wygodę korzystania z czytników ekranu, co zostało omówione 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 nie jest to dla Ciebie nowa koncepcja, warto dokładniej zbadać tę sprawę.

Do wypróbowania

1. Najedź kursorem myszy na etykietę i sprawdź, czy pole wyboru jest wyróżnione.
2. Prześledź element etykiety za pomocą Narzędzi deweloperskich w Chrome, aby zwizualizować klikalny obszar, w którym można zaznaczyć pole wyboru.

Interakcja z czytnikiem ekranu

Z tym formularzem mogą wchodzić w interakcje technologie wspomagające osoby z niepełnosprawnością, a za pomocą kilku atrybutów HTML mogą one poprawić wrażenia użytkownika.

Użytkownicy poruszający się po bieżącym formularzu za pomocą czytnika ekranu w Chrome zobaczą niepotrzebny znacznik w elemencie <picture> (nie dotyczy to Chrome). Użytkownik z czytnikiem ekranu prawdopodobnie korzysta z niego z powodu niepełnosprawności wzroku, więc zatrzymanie 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 miał charakter czysto wizualny.

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

Do wypróbowania

1. Użyj technologii czytnika ekranu używanej w systemie operacyjnym, aby zaznaczyć obszar podczas wypełniania formularza.
2. Pobierz i wypróbuj jakieś czytniki ekranu w formularzu.

4. Adaptacyjne układy

Gałąź Git: layouts

Na końcu tej sekcji strona ustawień:

• Utwórz system odstępów z właściwościami niestandardowymi i jednostkami względnymi użytkownika.
• Dodaj siatkę CSS, by uzyskać elastyczne wyrównanie i odstępy.
• Używaj właściwości logicznych na potrzeby adaptacyjnych układów międzynarodowych
• Pisz zapytania o media, aby dostosowywać układy kompaktowe i przestronne.

Odstępy

Kluczem do stworzenia ładnego układu jest ograniczona paleta opcji odstępów. Pomaga to w znajdowaniu naturalnej harmonii w treściach.

Właściwości niestandardowe

Warsztaty bazują na 7 rozmiarach właściwości niestandardowych.

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

Nazewnictwo znajduje się w pobliżu czasownika, którego ludzie używają nawzajem do opisywania przestrzeni. Jednostki typu rem używasz też wyłącznie do wyświetlania czytelnych rozmiarów jednostek, które dopasowują się i uwzględniają preferencje użytkownika.

Style strony

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

• Dodaj do 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);
}

Możesz już po raz pierwszy skorzystać z niestandardowych właściwości odstępów. To początek Twojej podróży kosmicznej.

Typografia

Czcionka tego układu jest adaptacyjna. Słowo kluczowe system-ui będzie korzystać z optymalnej czcionki interfejsu niezależnie od tego, co wybrał system operacyjny użytkownika.

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

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

small {
  line-height: 1.5;
}

Style h1, h2 i h3 są mniejsze i mniejsze. Element small wymaga jednak dodatkowego elementu line-height podczas zawijania tekstu. W przeciwnym razie są zbyt rozproszone.

Właściwości logiczne

Zauważ, że interfejs padding w systemie body używa właściwości logicznych (block-start, block-end) do określania strony. W dalszej części tego ćwiczenia z programowania będą używane właściwości logiczne. Podobnie jak jednostka rem, dostosowują się do użytkownika. Ten układ można przetłumaczyć na inny język i ustawić zgodnie ze sposobem, w jaki użytkownik jest przyzwyczajony do pisma i dokumentu, w swoim języku. Właściwości logiczne umożliwiają korzystanie z tej funkcji tylko z jedną definicją miejsca, 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 innych. Adaptacyjna kierunkowość, w zależności od kierunku dokumentu.

Właściwości logiczne umożliwiają docieranie do większej liczby użytkowników przy mniejszej liczbie stylów do pisania.

Układy siatki CSS

Właściwość CSS grid to wszechstronne narzędzie do układania układu z wieloma funkcjami do obsługi złożonych zadań. Będziesz tworzyć kilka prostych układów siatki i jeden złożony układ. Będziesz też pracować z zewnątrz – od układów makr po mikroukłady. Niestandardowe właściwości odstępów będą kluczowe – nie tylko wartości dopełnienia czy marginesów, ale też rozmiary kolumn, promienie obramowania i inne elementy.

Oto zrzut ekranu przedstawiający Narzędzia deweloperskie w Chrome nałożone jednocześnie na każdy układ siatki CSS:

1. Dodaj do style.css każdy z tych stylów:

<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, dzięki czemu świetnie nadaje się do układania w stos. Dodatkową zaletą takiego rozwiązania jest możliwość używania atrybutu gap. Wcześniej ustawiłeś margin: 0 dla wszystkich elementów za pomocą selektora *, co jest teraz ważne, ponieważ używasz gap do określania odstępów. Luka to nie tylko pojedyncze miejsce do zarządzania przestrzenią w kontenerze, ale też jego względna 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));
}

To najtrudniejszy układ siatki w projekcie, ale jednocześnie zapewnia najbardziej ekscytujący aspekt układu elastycznego:

• max-width podaje wartość algorytmowi układu do określania jego rozmiaru.
• Komponent gap używa właściwości niestandardowych i przekazuje inny element typu row-gap z tabeli column-gap.
• align-items ma wartość flex-start, by nie rozciągać wysokości elementów.
• Parametr grid-template-columns ma skomplikowaną składnię, ale cel jest zwięzły. utrzymuj kolumny o szerokości 35ch, ale nie mniej niż 10ch. Jeśli jest wystarczająco dużo miejsca, umieść elementy w kolumnach. W przeciwnym razie wiersze powinny być prawidłowe.

2. Przetestuj zmianę rozmiaru przeglądarki. Obserwuj, jak formularz zwija się do wierszy w małym widocznym obszarze i wyświetla nowe kolumny, jeśli jest tam miejsce, i dostosowuje się bez zapytań o multimedia. Ta strategia bezpłatnych stylów elastycznych zapytań o multimedia jest szczególnie przydatna w przypadku komponentów i układów skoncentrowanych na treści.

<section>

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

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

&lt;header&gt;

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.

&lt;fieldset&gt;

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

Ten układ odpowiada za tworzenie wyglądu przypominającego karty i grupowanie danych wejściowych. Gdy dodasz kolor w następnej sekcji, opcje overflow: hidden i gap: 1px staną się jasne.

.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, więc element podrzędny musi być wyśrodkowany.

Ten układ pokazuje, ile decyzji projektowych zostało już wprowadzonych w właściwościach niestandardowych. Dopełnienie, luki i kolumna zostały dopasowane do harmonii systemu z wykorzystaniem wartości, które zostały już zdefiniowane.

.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, utworzenie okręgu i wyśrodkowanie w nim obrazu.

<obraz> i wyrównanie [pole wyboru]

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

Ten układ rozdziela wyśrodkowanie na elementy 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);
}

Powoduje to ustawienie rozmiaru ikony SVG na wartość z tabeli rozmiarów.

.sm-stack

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

Ta klasa narzędziowa służy do umieszczania elementów etykiet pól wyboru w celu odstępu między tekstem pomocniczym pola wyboru.

input[type=&quot;checkbox&quot;]

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

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

Do wypróbowania

1. Otwórz Narzędzia Chrome dla programistów i znajdź plakietki siatki w kodzie HTML w panelu Elements. Kliknij je, aby włączyć narzędzia debugowania.
2. Otwórz Narzędzia deweloperskie w Chrome i najedź kursorem na lukę w panelu Style.
3. Otwórz Narzędzia deweloperskie w Chrome, przejdź do panelu Style i przełącz się z Style na Układy. Możesz poznać 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, by dostosować odstępy i ich układ, aby optymalnie wykorzystać kontekst widocznego obszaru.

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

&lt;main&gt;

@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ększe dopełnienie wraz ze wzrostem dostępnego miejsca. Oznacza to, że na początku jest zwarty, z niewielką ilością wypełnienia, ale w miarę zwiększania dostępnego miejsca staje się coraz większy.

&lt;form&gt;

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 dostosowywał się do rozmiaru widocznego obszaru już w przypadku formatu auto-fit, ale podczas testowania na urządzeniu mobilnym, ustawienie urządzenia w orientacji poziomej nie powoduje wyświetlania 2 grup formularzy obok siebie. Dostosuj się do tego poziomego kontekstu za pomocą zapytania o multimedia orientation i sprawdzenia szerokości widocznego obszaru. Jeśli urządzenie ma orientację poziomą i ma co najmniej 640 pikseli szerokości, wymuś 2 kolumny, przełączają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 rozwinięcie odstępów, gdy dostępny jest więcej miejsca. Szablon siatki rozwija pierwszą kolumnę, korzystając z większej właściwości niestandardowej (var(--space-xxl)) w szablonie. Dopełnienie jest też stosowane w większych właściwościach niestandardowych.

Do wypróbowania

1. Powiększ, zwiń okno przeglądarki i patrz, jak zmienia się przestrzeń.
2. Wyświetlanie podglądu na urządzeniu mobilnym
3. Wyświetl podgląd na urządzeniu mobilnym w orientacji poziomej

5. Dostosowanie kolorów

Gałąź Git: colors

Na końcu tej sekcji Twój formularz ustawień:

• Dostosuj się do preferencji ciemnych i jasnych kolorów
• mają schemat kolorów pobrany na podstawie wartości szesnastkowej marki.
• Zadbaj o łatwo dostępne kolory

HSL

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

HSL oznacza barwę, nasycenie i jasność. Odcień to kąt taki jak punkt na zegarze, a nasycenie i jasność to wartości procentowe. calc() potrafi obliczać wartości procentowe i kąty. Te wartości procentowe możesz obliczyć w CSS. Dzięki połączeniu obliczeń kanałów kolorów z właściwościami niestandardowymi otrzymasz nowoczesny, dynamiczny schemat kolorów, w którym warianty są obliczane na podstawie koloru podstawowego, co pozwoli Ci uniknąć konieczności zarządzania kilkoma 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 odstępów ustawionych wcześniej w tagu :root, będziesz dodawać kolory.

Załóżmy, że kolor marki Twojej aplikacji to #0af. Twoje pierwsze zadanie polega na przekonwertowaniu tej szesnastkowej wartości koloru na wartość koloru HSL: hsl(200 100% 50%). Ta konwersja ujawnia kanały kolorów Twojej marki w HSL, których możesz użyć do obliczenia różnych kolorów marki za pomocą atrybutu calc().

Uwaga: ta aplikacja preferuje ciemny schemat kolorów, potem dostosowuje się do jasnego motywu. Jest to istotne przy tworzeniu pierwszego schematu kolorów, ponieważ będzie to ciemny motyw.

Każdy z tych bloków kodu z 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 w osobnych właściwościach niestandardowych.

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

Marka

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

Schemat kolorów jest domyślnie ciemny, dlatego warto zmniejszyć nasycenie kolorów i stosować je na ciemnych powierzchniach (mogą one wibrować dla oka lub być niedostępne). Aby zmniejszyć nasycenie koloru marki, użyj barwy i jasności w niezmienionej formie, ale zmniejszysz nasycenie o połowę z pewnym podziałem: calc(var(--saturation) / 2). Teraz kolor marki jest prawidłowo dopasowany do motywu, ale nienasycony.

Tekst

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

W przypadku tekstu wyświetlanego w ciemnym motywie jako podstawy używasz odcienia marki, ale dobierasz z niego niemal białe kolory. Wielu użytkowników uzna, że tekst jest biały, podczas gdy w rzeczywistości jest bardzo jasnoniebieski. Zachowanie w barwie to dobry sposób na zachowanie harmonii w projektowaniu. Światło --text1 to 85% bieli, a --text2 to 65% bieli. Oba te elementy mają bardzo niskie nasycenie.

2. Po dodaniu kodu do projektu otwórz Narzędzia dla programistów w Chrome i sprawdź, jak zmienić te wartości kanałów. Przekonaj się, jak HSL i jego kanały współdziałają ze sobą. Może Twój gust nie chce się nasycić.

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ż powierzchnie będą ciemne w trybie ciemnym. Jeśli kolory tekstu były bardzo jasne (85% i wyższe), używane będą niższe wartości (30% i niższe). Odpowiednia rozpiętość między poziomami jasności między powierzchnią a tekstem zapewni użytkownikom łatwość w odbiorze.

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

Jasny motyw

Mając porządny zestaw kolorów tekstu i powierzchni określających ciemny motyw, czas dostosować się do preferencji jasnego motywu, aktualizując właściwości niestandardowe koloru w zapytaniu o multimedia prefers-color-scheme.

Użyjesz tej samej metody, aby zachować dużą różnicę w wartościach jasności powierzchni i kolorów tekstu, aby kolory były dobrze kontrastujące.

marka;

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

Zacznijmy od koloru marki. Wymaga przywrócenia pełnego nasycenia.

Tekst

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

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

Podobnie jak ciemny motyw miał bardzo jasnoniebieskie kolory tekstu, w jasnym motywie kolory tekstu są bardzo ciemne. Jeśli wartości jasności dla koloru HSL wynoszą 10% i 30%, powinno to oznaczać, że te kolory są ciemne.

Platforma

@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 naruszają wzorce. To, co do tej pory wydawało się całkiem uzasadnione i liniowe, obecnie nie działa. Zaletą jest to, że możesz poeksperymentować z kombinacjami kolorów jasnego motywu HSL bezpośrednio w kodzie i dostosować jasność i nasycenie, aby uzyskać przyjemny schemat kolorów, który nie będzie zbyt chłodny ani niebieski.

Używanie systemu kolorów

Gdy kolory są już określone, można zacząć ich używać. Masz ładny, wystrzałowy kolor marki, dwa kolory tekstu i cztery kolory powierzchni.

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

<body>

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

Główne kolory strony to utworzone przez Ciebie kolory pierwszej powierzchni i tekstu, co powoduje ustawienie maksymalnego kontrastu domyślnego. Można zacząć testować przełączanie się między jasnymi i ciemnymi elementami.

&lt;fieldset&gt;

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

To jest element projektu graficznego, który przypomina karty. Obramowanie o długości 1 piksela i 1 pikselowa przerwa w kolorze mają ten sam kolor i reprezentują powierzchnię za każdym elementem .fieldset-item. Pozwala to uzyskać przyjemną wizualną harmonię i jest łatwe w utrzymaniu.

.fieldset-item

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

Wszystkie dane wejściowe formularza znajdują się na osobnej platformie. Mam nadzieję, że widzisz, jak te ze sobą łączą się ze sobą i jak różne rodzaje światła przenikają ze sobą.

.fieldset-item > zdjęcie

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

Jest to wybór stylistyczny, który pokazuje okrąg wokół ikony. Stanie się jasne, dlaczego dodajesz interakcje w następnej sekcji.

.fieldset-item-svg

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

Ikony w formularzu używają tekstu alternatywnego --text2. Projekty, w których wypełnione ikony są nieco lżejsze od tekstu, sprawiają, że nie są one zbyt ciężkie.

.fieldset-item:fokus-w svg

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

Ten selektor dopasowuje element kontenera danych wejściowych, gdy przeprowadzana jest interakcja z jednym z wpisanych w nim danych wejściowych, i wyceluje w plik SVG, aby wyróżnić go za pomocą akcentu Twojej marki. Dzięki temu formularz jest przyjemny w obsłudze, ponieważ wchodzenie w interakcję z danymi wejściowymi podkreśla odpowiednią ikonę.

&lt;small&gt;

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

To mały tekst. Jego treść powinna być nieco stonowana w porównaniu z nagłówkami i akapitami (treścią podstawową).

Opcje trybu ciemnego

:root {
  color-scheme: dark light;
}

Ten miły końcowy efekt informuje przeglądarkę, że strona obsługuje zarówno ciemne, jak i jasne motywy. Przeglądarka nagradza ustawienia ciemnego formularza.

6. Animacja adaptacyjna

Gałąź Git: animations

Na końcu tej sekcji strona ustawień:

• Dostosuj się do preferencji użytkownika dotyczących ruchu
• Reaguj na interakcję użytkownika

Mniejszy ruch lub brak ruchu

Preferencje użytkownika w systemie operacyjnym dotyczące ruchu nie oferują żadnej wartości animacji. Można to zrobić, aby ograniczyć ruch. Przenikanie animacji, przejścia kolorów i inne elementy nadal będą atrakcyjne dla użytkowników, którzy preferują ograniczenie ruchu.

Na tej stronie ustawień ruch po ekranie jest niewielki. Ruch to efekt skali, tak jakby element poruszał się w stronę użytkownika. Dostosowanie kodu CSS do zmniejszonego ruchu jest tak proste, że zredukuje przejścia przez skalowanie.

Style interakcji

&lt;fieldset&gt;

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 w jednym z elementów wyglądających na kartę <fieldset>, powoduje to efekt zwiększenia skuteczności. Interfejs przesuwa element do przodu, ułatwiając użytkownikowi skupienie się na kontekstowej grupie formularzy kierowanych 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 danymi wejściowymi, tło warstwy konkretnego elementu zmienia się na kolor podświetlonej powierzchni. Jest to kolejna pomocna funkcja interfejsu, która pomaga zwrócić uwagę użytkownika i zasygnalizować, że został on odebrany. W większości przypadków przejścia kolorów nie muszą być redukowane.

.fieldset-item > zdjęcie

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

Tak wygląda animacja clip-path, której możesz użyć tylko wtedy, gdy użytkownik nie ma określonych preferencji dotyczących zmniejszonego ruchu. Pierwszy selektor i style zawężają ścieżkę przycięcia koła o 10% i określają parametry przejścia. Drugi selektor i styl czeka na interakcję użytkowników z danymi wejściowymi, a następnie skaluje kółko ikony w górę. Subtelny, ale stonowany efekt, gdy jest w porządku.

7. Gratulacje

Gałąź Git: complete

Gratulujemy! Udało Ci się utworzyć interfejs adaptacyjny!

Znasz już najważniejsze czynności, jakie należy wykonać, aby tworzyć interfejsy dostosowujące się do różnych scenariuszy i ustawień użytkownika.