Creare interfacce adattive all'utente con query supporti preferenze

1. Prima di iniziare

Al giorno d'oggi, gli utenti hanno indicato molte preferenze sui propri dispositivi. Vogliono che il sistema operativo e le app abbiano il loro aspetto e la loro esperienza utente. Le interfacce adattive sono quelle pronte a utilizzare queste preferenze per migliorare l'esperienza utente, per renderla più familiare, per farla sentire propria. Se eseguita correttamente, un utente potrebbe non sapere mai che l'esperienza utente si sta adattando o si è adattata.

Preferenze utente

La scelta dell'hardware del dispositivo è una preferenza, il sistema operativo è una scelta, i colori delle app e dei sistemi operativi sono preferenze e le lingue dei documenti delle app e dei sistemi operativi sono preferenze. Il numero di preferenze di un utente sembra solo aumentare. Una pagina web non è in grado di accedere a tutto e per una buona ragione.

Ecco alcuni esempi di preferenze utente che possono essere utilizzate dal CSS:

• Dimensioni dell'area visibile del dispositivo
• Orientamento del dispositivo (verticale | orizzontale)
• Dimensione carattere
• Online / offline
• Qualità della rete
• Combinazione di colori (chiara | scura)
• Animazioni dell'interfaccia (attive | ridotte)
• Qualità dell'input (mouse | tocco | stilo)
• Direzione del documento e modalità di scrittura (da sinistra a destra, dall'alto verso il basso e altro ancora)
• Modalità di visualizzazione (schermo intero | autonoma | UI minima | browser)

Ecco alcuni esempi di preferenze utente in arrivo a breve in CSS:

• Dati ridotti / modalità Lite
• Gamma di colori
• Contrasto (meno | più | riduci)
• Colori (forza i colori dell'utente nella pagina)
• Trasparenza (on | reduced)

Media query

CSS e web consentono l'adattamento e la reattività tramite le media query, una condizione dichiarativa che contiene un insieme di stili se la condizione è vera. La più comune è una condizione relativa alle dimensioni dell'area visibile del dispositivo: se le dimensioni sono inferiori a 800 pixel, ecco alcuni stili migliori per questo caso.

Adattivo all'utente

Un'interfaccia non adattiva è un'interfaccia che non cambia nulla quando un utente la visita, offrendo essenzialmente un'esperienza a tutti senza possibilità di regolazione. Un'interfaccia adattiva all'utente potrebbe avere cinque aspetti e stili diversi per cinque utenti diversi. La funzionalità è la stessa, ma l'estetica è percepita meglio e l'usabilità dell'interfaccia è più semplice per gli utenti che possono regolare l'interfaccia utente.

Prerequisiti

• Conoscenza di HTML e CSS
• Conoscenza di strumenti per sviluppatori, come gli Strumenti per sviluppatori di Chrome

Cosa creerai

In questo codelab, creerai un modulo adattivo che si adatta a quanto segue:

• La preferenza per la combinazione di colori del sistema, offrendo una combinazione di colori chiari e scuri per i controlli del modulo e gli elementi dell'interfaccia utente circostanti
• Le preferenze di movimento del sistema offrendo più tipi di animazioni
• Viewport di dispositivi piccoli e grandi per offrire esperienze mobile e desktop
• Vari tipi di input come tastiera, screen reader, tocco e mouse
• Qualsiasi lingua e modalità di lettura/scrittura

Cosa imparerai a fare

In questo codelab, scoprirai le funzionalità web moderne che ti aiutano a creare un modulo adattivo per gli utenti. Imparerai a:

• Crea temi chiari e scuri
• Crea moduli animati e accessibili
• Moduli layout adattabile
• Utilizzare unità relative e proprietà logiche

Questo codelab è incentrato sulle interfacce adattive per gli utenti. Concetti e blocchi di codice non pertinenti sono trattati solo superficialmente e sono forniti solo per operazioni di copia e incolla.

Che cosa ti serve

• Google Chrome 89 e versioni successive o il tuo browser preferito

2. Configurazione

Ottieni il codice

Tutto ciò che ti serve per questo progetto si trova in un repository GitHub. Per iniziare, devi recuperare il codice e aprirlo nel tuo ambiente di sviluppo preferito. In alternativa, puoi creare un fork di questo Codepen e lavorare da lì.

Consigliato: utilizza Codepen

1. Apri una nuova scheda del browser.
2. Vai alla pagina https://codepen.io/argyleink/pen/abBMeeq.
3. Se non hai un account, creane uno per salvare il lavoro.
4. Fai clic su Fork.

Alternativa: lavora localmente

Se vuoi scaricare il codice e lavorare in locale, devi avere Node.js versione 12 o successive e un editor di codice configurato e pronto all'uso.

Utilizzare Git

1. Visita la pagina https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces
2. Clona il repository in una cartella.
3. Nota che il branch predefinito è beginning.

Utilizzare i file

Scarica il codice sorgente

1. Decomprimi il file ZIP scaricato in una cartella.

Esegui il progetto

Utilizza la directory del progetto stabilita in uno dei passaggi precedenti, poi:

1. Esegui npm install per installare le dipendenze necessarie per eseguire il server.
2. Esegui npm start per avviare il server sulla porta 3000.
3. Apri una nuova scheda del browser.
4. Vai alla pagina http://localhost:3000.

Informazioni sull'HTML

Questa lezione tratterà gli aspetti dell'HTML utilizzato per supportare l'interattività adattiva per gli utenti. Questo workshop è incentrato in modo specifico sui CSS. Se non hai mai creato moduli o siti web, ti consigliamo di esaminare il codice HTML fornito. La scelta degli elementi HTML può essere fondamentale per l'accessibilità e il layout.

Quando sei pronto per iniziare, questo è lo scheletro di ciò che trasformerai in un'esperienza utente dinamica e adattiva.

3. Interazioni adattive

Branch Git: beginning

Al termine di questa sezione, il modulo delle impostazioni si adatterà a:

• Gamepad + tastiera
• Mouse + tocco
• Screen reader o tecnologia per la disabilità simile

Attributi per l'HTML

L'HTML fornito nel codice sorgente è un ottimo punto di partenza perché sono già stati scelti gli elementi semantici per raggruppare, ordinare ed etichettare gli input del modulo.

I moduli sono spesso un punto di interazione chiave per un'attività, quindi è importante che possano adattarsi ai molti tipi di input che il web può facilitare. Ad esempio, è probabilmente importante avere un modulo utilizzabile su dispositivi mobili con il tocco. In questa sezione, prima del layout e dello stile, devi assicurarti che l'input adattivo sia utilizzabile.

Input di raggruppamento

L'elemento <fieldset> nel codice HTML serve a raggruppare input e controlli simili. Nel modulo sono presenti due gruppi, uno per il volume e uno per le notifiche. Questo è importante per l'esperienza utente, in modo che sia possibile saltare intere sezioni.

Ordinare gli elementi

L'ordine degli elementi è fornito in un ordine logico. Ciò è importante per l'esperienza utente, in modo che l'ordine dell'esperienza visiva sia uguale o simile per le tecnologie di gamepad, tastiera o screen reader.

Interazione con la tastiera

Gli utenti del web si sono abituati a spostarsi nei moduli con il tasto Tab, cosa che fortunatamente il browser fa se fornisci gli elementi HTML previsti. L'utilizzo di elementi come <button>, <input>, <h2> e <label> diventa automaticamente destinazioni per la tastiera o lo screen reader.

Il video riportato sopra mostra come i tasti Tab e le frecce possono spostarsi nell'interfaccia e apportare modifiche. Il contorno blu, tuttavia, è molto stretto intorno agli elementi di input. Aggiungi gli stili seguenti per dare un po' di spazio a questa interazione.

style.css

input {
  outline-offset: 5px;
}

Cose da provare

1. Esamina gli elementi HTML utilizzati in index.html.
2. Fai clic sulla pagina demo nel browser.
3. Premi i tasti tab e shift+tab per spostare lo stato attivo degli elementi nel modulo.
4. Utilizza la tastiera per modificare i valori dei cursori e delle caselle di controllo.
5. Collega un controller gamepad Bluetooth e sposta lo stato attivo dell'elemento nel modulo.

Interazione con il mouse

Gli utenti del web si sono abituati a interagire con i moduli con il mouse. Prova a usare il mouse sul modulo. I cursori e le caselle di controllo funzionano, ma puoi fare di meglio. Queste caselle di controllo sono piuttosto piccole per essere selezionate con il mouse.

Scopri come ottenere due funzionalità di esperienza utente per collegare le etichette e i relativi input.

La prima funzionalità è la possibilità di interagire con le opzioni e l'etichetta è molto più facile da selezionare con il mouse rispetto a un piccolo quadrato.

La seconda funzionalità è sapere esattamente a quale input si riferisce un'etichetta. Senza CSS, al momento è piuttosto difficile determinare a quale casella di controllo si riferisce un'etichetta, a meno che non fornisci alcuni attributi.

Questa connessione esplicita migliora anche l'esperienza per gli screen reader, che vengono trattati nella sezione successiva.

Non associato:nessun attributo che colleghi gli elementi

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

Associati:attributi che collegano gli elementi

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

L'HTML fornito ha già attribuito tutti gli input e le etichette. Se non hai mai sentito parlare di questo concetto, ti consigliamo di approfondire l'argomento.

Cose da provare

1. Passa il mouse sopra un'etichetta e nota le caselle di controllo evidenziate.
2. Esamina un elemento etichetta con gli Strumenti per sviluppatori di Chrome per visualizzare l'area della superficie selezionabile che può selezionare la casella di controllo.

Interazione con lo screen reader

Le tecnologie per la disabilità possono interagire con questo modulo e, con alcuni attributi HTML, possono rendere l'esperienza utente più fluida.

Per gli utenti che navigano nel modulo corrente con uno screen reader in Chrome, è presente un arresto non necessario all'elemento <picture> (non specifico di Chrome). Un utente con uno screen reader probabilmente lo utilizza a causa di una disabilità visiva, quindi fermarsi su un'immagine non è utile. Puoi nascondere gli elementi dagli screen reader con un attributo.

index.html

<picture aria-hidden="true">

Ora gli screen reader ignorano l'elemento puramente visivo.

L'elemento cursore input[type="range"] ha un attributo ARIA speciale: aria-labelledby="media-volume". In questo modo, lo screen reader riceve istruzioni speciali per migliorare l'esperienza utente.

Cose da provare

1. Utilizza la tecnologia di screen reader del sistema operativo per spostare lo stato attivo nel modulo.
2. Scarica e prova alcuni software di screen reader sul modulo.

4. Layout adattivi

Branch Git: layouts

Al termine di questa sezione, la pagina delle impostazioni:

• Crea un sistema di spaziatura con proprietà personalizzate e unità relative dell'utente
• Scrivere CSS Grid per allineamento e spaziatura flessibili e reattivi
• Utilizza le proprietà logiche per layout adattabili a livello internazionale
• Scrivi query sui media per adattarti ai layout compatti e spaziosi

Spaziatura

Una chiave per un bel layout è una tavolozza limitata di opzioni di spaziatura. In questo modo, i contenuti trovano allineamenti e armonie naturali.

Proprietà personalizzate

Questo workshop si basa su un insieme di sette dimensioni delle proprietà personalizzate.

• Inserisci questi elementi nella parte superiore di 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;
}

La denominazione è vicina al linguaggio che le persone userebbero tra loro per descrivere lo spazio. Utilizzi anche le unità rem esclusivamente per il dimensionamento di unità intere leggibili che si adattano e tengono conto delle preferenze dell'utente.

Stili di pagina

Poi devi impostare alcuni stili del documento, rimuovere i margini dagli elementi e impostare il carattere su un bel sans-serif.

• Aggiungi il seguente codice a 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);
}

Ecco il tuo primo utilizzo delle proprietà personalizzate di spaziatura. Inizia il tuo viaggio nello spazio.

Tipografia

Il carattere di questo layout è adattivo. La parola chiave system-ui utilizzerà il carattere dell'interfaccia che il sistema operativo dell'utente ha deciso essere ottimale.

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

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

small {
  line-height: 1.5;
}

Gli stili per h1, h2 e h3 sono minori e stilistici. L'elemento small, tuttavia, richiede l'attributo line-height aggiuntivo per il ritorno a capo del testo. Altrimenti, si arricceranno troppo.

Proprietà logiche

Nota che padding su body utilizza proprietà logiche (block-start, block-end) per specificare il lato. Le proprietà logiche verranno utilizzate ampiamente nel resto del codelab. Anche loro, come un'unità rem, si adattano a un utente. Questo layout può essere tradotto in un'altra lingua e impostato in modo che rispetti la direzione di scrittura e del documento a cui l'utente è abituato nella sua lingua nativa. Le proprietà logiche consentono di supportare questa funzionalità con una sola definizione di spazio, direzione o allineamento.

Grid e Flexbox sono già relative al flusso, il che significa che gli stili scritti per una lingua saranno contestuali e applicati in modo appropriato per le altre. Direzionalità adattiva: il contenuto scorre in base alla direzionalità del documento.

Le proprietà logiche ti consentono di raggiungere più utenti con meno stili da scrivere.

Layout a griglia CSS

La proprietà CSS grid è un potente strumento di layout con molte funzionalità per affrontare attività complesse. Creerai alcuni layout a griglia semplici e uno complesso. Inoltre, lavorerai dall'esterno verso l'interno, dai layout macro ai micro layout. Le proprietà personalizzate di spaziatura diventeranno fondamentali non solo come valori di spaziatura interna o margine, ma anche come dimensioni delle colonne, raggi dei bordi e altro ancora.

Ecco uno screenshot di Chrome DevTools che sovrappone ogni layout della griglia CSS contemporaneamente:

1. Segui i passaggi aggiungendo ciascuno dei seguenti stili a style.css:

<main>

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

Per impostazione predefinita, la griglia inserisce ogni elemento secondario in una riga separata, il che la rende ideale per impilare gli elementi. Inoltre, offre il vantaggio aggiuntivo di utilizzare gap. In precedenza, hai impostato margin: 0 su tutti gli elementi con il selettore *, che ora è importante perché utilizzi gap per la spaziatura. Il gap non è solo un unico posto per gestire lo spazio in un container, ma anche il suo flusso relativo.

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

Questo è il layout a griglia più complesso del design, ma tiene conto dell'aspetto responsive più entusiasmante:

• max-width fornisce un valore che l'algoritmo di layout deve utilizzare per decidere le dimensioni.
• gap utilizza proprietà personalizzate e trasmette un row-gap diverso da column-gap.
• align-items è impostato su flex-start per non allungare l'altezza degli elementi.
• grid-template-columns ha una sintassi complessa, ma l'obiettivo è conciso: mantieni le colonne larghe 35ch e mai meno di 10ch e inserisci gli elementi nelle colonne se c'è spazio, altrimenti le righe vanno bene.

2. Prova a ridimensionare il browser. Guarda come il modulo si comprime in righe in una piccola finestra di visualizzazione, ma scorre in nuove colonne se c'è spazio, adattandosi senza query dei media. Questa strategia di stili adattabili senza media query è particolarmente utile per i componenti o i layout incentrati sui contenuti.

<section>

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

Ogni sezione deve essere una griglia di righe con uno spazio medio tra gli elementi secondari.

<header>

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

Ogni intestazione deve essere una griglia di righe con uno spazio molto piccolo tra gli elementi secondari.

<fieldset>

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

Questo layout è responsabile della creazione di un aspetto simile a una scheda e del raggruppamento degli input. overflow: hidden e gap: 1px diventano chiari quando aggiungi il colore nella sezione successiva.

.fieldset-item

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

Questo layout è responsabile del centraggio dell'icona e della casella di controllo con le etichette e i controlli associati. La prima colonna del modello a griglia, var(--space-lg), crea una colonna più larga dell'icona, in modo che un elemento secondario abbia uno spazio in cui essere centrato.

Questo layout mostra quante decisioni di progettazione sono già state prese nelle proprietà personalizzate. Il riempimento, gli spazi e una colonna sono stati dimensionati in armonia con il sistema utilizzando valori già definiti.

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

Questo layout è responsabile delle impostazioni, delle dimensioni del cerchio dell'icona, della creazione di una forma circolare e del centraggio di un'immagine al suo interno.

Allineamento di <picture> e [casella di controllo]

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

Questo layout isola il centramento degli elementi immagine e casella di controllo utilizzando lo pseudo selettore :is.

3. Sostituisci il selettore picture > svg con .fieldset-item svg in questo modo:

.fieldset-item <svg>

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

Imposta la dimensione dell'icona SVG su un valore del sistema di taglie.

.sm-stack

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

Questa classe di utilità serve per gli elementi dell'etichetta della casella di controllo per spaziare il testo helper della casella di controllo.

input[type="checkbox"]

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

Questi stili aumentano le dimensioni di una casella di controllo utilizzando i valori del nostro set di spaziatura.

Cose da provare

1. Apri gli Strumenti per sviluppatori di Chrome e trova i badge della griglia nell'HTML nel riquadro Elementi. Fai clic per attivare gli strumenti di debug.
2. Apri gli Strumenti per sviluppatori di Chrome e passa il mouse sopra uno spazio nel riquadro Stili.
3. Apri gli Strumenti per sviluppatori di Chrome, vai al riquadro Stili e passa da Stili a Layout. Esplora questa area attivando le impostazioni e i layout.

Media query

Il seguente CSS adatta gli stili in base alle dimensioni e all'orientamento dell'area visibile con l'intento di regolare la spaziatura o la disposizione in modo che siano ottimali in base al contesto dell'area visibile.

Nota:il CSS di ogni sezione deve essere aggiunto dopo il selettore che sta modificando in style.css.

<main>

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

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

Queste due media query forniscono main più spazio interno man mano che è disponibile più spazio nella finestra. Ciò significa che inizia con un piccolo spazio interno compatto, ma diventa sempre più spazioso man mano che lo spazio disponibile aumenta.

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

Il modulo era già reattivo alle dimensioni dell'area visibile con auto-fit, ma durante i test su un dispositivo mobile, la rotazione del dispositivo in orizzontale non affianca i due gruppi di moduli. Adattati a questo contesto del paesaggio con una query supporti orientation e un controllo della larghezza dell'area visibile. Ora, se il dispositivo è orizzontale e largo almeno 640 pixel, forza due colonne impostando la proprietà personalizzata --repeat su un numero anziché sulla parola chiave 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;
  }
}

Questa query supporti è un'altra espansione della spaziatura quando è disponibile più spazio nell'area visibile. Il modello a griglia espande la prima colonna utilizzando una proprietà personalizzata più grande (var(--space-xxl)) nel modello. Il padding viene aumentato anche per le proprietà personalizzate più grandi.

Cose da provare

1. Espandi e contrai il browser e osserva come si adatta lo spazio.
2. Visualizzare l'anteprima su un dispositivo mobile
3. Visualizzare l'anteprima su un dispositivo mobile in modalità orizzontale

5. Colore adattivo

Branch Git: colors

Al termine di questa sezione, il modulo delle impostazioni:

• Adattarsi alle preferenze di colore scuro e chiaro
• Avere una combinazione di colori derivata da un codice esadecimale del brand
• Avere colori accessibili

HSL

Nella sezione successiva, creerai un sistema di colori con HSL per aiutarti a creare un tema chiaro e uno scuro. Si basa su questo concetto fondamentale del CSS: calc().

HSL sta per tonalità, saturazione e luminosità. La tonalità è un angolo, come un punto su un orologio, mentre la saturazione e la luminosità sono percentuali. calc() è in grado di eseguire calcoli matematici su percentuali e angoli. Puoi eseguire i calcoli di luminosità e saturazione su queste percentuali in CSS. Combina i calcoli dei canali di colore con le proprietà personalizzate e otterrai una combinazione di colori moderna e dinamica in cui le varianti vengono calcolate a partire da un colore di base, il che ti aiuta a evitare di gestire una miriade di colori nel codice.

Proprietà personalizzate

In questa sezione, crei un insieme di proprietà personalizzate da utilizzare nel resto degli stili. Analogamente alla spaziatura impostata in precedenza nel tag :root, aggiungerai i colori.

Supponiamo che il colore del brand per la tua app sia #0af. Il tuo primo compito è convertire questo valore colore esadecimale in un valore colore HSL: hsl(200 100% 50%). Questa conversione rivela i canali di colore del tuo brand in HSL, che puoi utilizzare calc() per calcolare vari colori di supporto del brand.

Nota:questa app preferisce una combinazione di colori scuri, poi si adatta a un tema chiaro. Questo è importante perché la prima combinazione di colori che crei sarà un tema scuro.

Ciascuno dei seguenti blocchi di codice in questa sezione deve essere aggiunto allo stesso selettore :root.

Canali del brand

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

I tre canali HSL sono stati estratti e inseriti nelle rispettive proprietà personalizzate.

1. Utilizza tutte e tre le proprietà così come sono e ricrea il colore del brand.

Brand

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

Poiché la combinazione di colori è scura per impostazione predefinita, è buona prassi desaturare i colori da utilizzare su superfici scure (altrimenti possono risultare troppo vivaci o inaccessibili). Per desaturare il colore del brand, utilizza la tonalità e la luminosità così come sono, ma dimezza la saturazione con una divisione: calc(var(--saturation) / 2). Ora il colore del brand è correttamente nel tema, ma desaturato per l'uso.

Testo

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

Per il testo di lettura nel nostro tema scuro, utilizzi la tonalità del brand come base, ma crei colori quasi bianchi. Molti utenti penseranno che il testo sia bianco, mentre in realtà è azzurro molto chiaro. Rimanere all'interno della tonalità è un ottimo modo per creare armonia nel design. --text1 è bianco all'85% e --text2 è bianco al 65%, entrambi con una saturazione molto bassa.

2. Dopo aver aggiunto il codice al progetto, apri gli Strumenti per sviluppatori di Chrome ed esplora la modifica di questi valori dei canali. Senti come HSL e i suoi canali interagiscono tra loro. Forse preferisci una saturazione maggiore o minore.

Piattaforma

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

Il testo è molto chiaro perché le superfici saranno scure in modalità Buio. Dove i colori del testo utilizzavano valori di luminosità elevati (85% e superiori), le superfici utilizzeranno valori più bassi (30% e inferiori). Un intervallo sano tra le gamme di luminosità tra superficie e testo contribuirà a garantire colori accessibili per la lettura degli utenti.

3. Nota come i colori iniziano con il grigio più scuro con il 10% di luminosità e il 10% di saturazione, per poi desaturarsi man mano che diventano più chiari. Ogni nuova superficie è più leggera del 5% rispetto alla precedente. Anche la saturazione è leggermente ridotta nelle superfici più chiare. Prova a impostare la saturazione di tutte le superfici al 10%. Ti piace di più o di meno?

Tema chiaro

Con un insieme di colori di testo e superficie che specificano il tema scuro, è il momento di adattarsi a una preferenza per il tema chiaro aggiornando le proprietà personalizzate dei colori all'interno di una query supporti prefers-color-scheme.

Utilizzerai la stessa tecnica di mantenere una grande differenza nei valori di luminosità tra le superfici e i colori del testo per mantenere un buon contrasto tra i colori.

Brand

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

Il primo è il colore del brand. Ha bisogno che la saturazione venga ripristinata alla sua piena potenza.

Testo

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

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

Analogamente a quanto accade nel tema scuro, in cui i colori del testo sono azzurri molto chiari, nel tema chiaro i colori del testo sono blu molto scuri. Se vedi 10% e 30% come valori di luminosità per il colore HSL, significa che questi colori sono scuri.

Superficie

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

Questi colori di superficie sono i primi a rompere gli schemi. Ciò che finora poteva sembrare abbastanza ragionevole e lineare è ora interrotto. La cosa bella è che puoi giocare con le combinazioni di colori del tema chiaro HSL direttamente nel codice e regolare la luminosità e la saturazione per creare una bella combinazione di colori chiari che non sia troppo fredda o blu.

Utilizzare il sistema di colori

Ora che i colori sono definiti, è il momento di utilizzarli. Hai un bel colore di brand vivace, due colori del testo e quattro colori della superficie.

• Per le seguenti sezioni di codice, trova il selettore corrispondente e aggiungi il CSS del colore al blocco di codice esistente.

<body>

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

I colori primari della pagina sono i primi colori di superficie e del testo che hai creato, il che porta anche la quantità predefinita di contrasto al massimo. È possibile iniziare a testare l'attivazione/disattivazione della modalità Chiaro e Scuro.

<fieldset>

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

Questo è l'elemento simile a una carta del tuo design. Il bordo di 1 pixel e lo spazio di 1 pixel hanno lo stesso colore e rappresentano la superficie dietro ogni .fieldset-item. In questo modo si crea una piacevole armonia visiva ed è facile da mantenere.

.fieldset-item

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

Ogni input del modulo si trova sulla propria superficie. Spero che tu stia capendo come si combinano e come si sovrappongono le variazioni di luminosità.

.fieldset-item > picture

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

Si tratta di una scelta stilistica per mettere in evidenza la forma circolare che circonda l'icona. Il motivo diventa evidente quando aggiungi le interazioni nella sezione successiva.

.fieldset-item svg

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

Le icone nel modulo sono impostate per utilizzare il testo alternativo --text2. I design in cui le icone piene sono leggermente più chiare del testo evitano che risultino troppo pesanti.

.fieldset-item:focus-within svg

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

Questo selettore corrisponde all'elemento contenitore di input quando si interagisce con uno degli input al suo interno e ha come target l'SVG per evidenziarlo con l'accento del brand. In questo modo, l'esperienza utente del modulo è migliore, in quanto l'interazione con gli input evidenzia le icone pertinenti.

<small>

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

Si tratta di un testo piccolo. Deve essere leggermente attenuato rispetto a titoli e paragrafi (contenuti principali).

Controlli modulo scuri

:root {
  color-scheme: dark light;
}

Questo tocco finale indica al browser che la pagina supporta sia il tema scuro che quello chiaro. Il browser ci premia con controlli del modulo scuri.

6. Animazione adattiva

Branch Git: animations

Al termine di questa sezione, la pagina delle impostazioni:

• Adattarsi alle preferenze di movimento dell'utente
• Rispondere all'interazione dell'utente

Movimento ridotto rispetto a nessun movimento

La preferenza utente trovata nel sistema operativo per il movimento non offre un valore di nessuna animazione. L'opzione è per ridurre il movimento. Le animazioni di dissolvenza incrociata, le transizioni di colore e altro ancora sono comunque desiderabili per gli utenti che preferiscono un movimento ridotto.

In questa pagina delle impostazioni, non ci sono molti movimenti sullo schermo. Il movimento è più un effetto di scala, come se l'elemento si stesse avvicinando all'utente. È così semplice modificare il codice CSS per adattarlo al movimento ridotto che si riducono le transizioni di ridimensionamento.

Stili di interazione

<fieldset>

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

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

Quando un utente interagisce con gli input di uno degli elementi simili a schede <fieldset>, viene aggiunto un effetto di sollevamento. L'interfaccia spinge un elemento in avanti, aiutando l'utente a concentrarsi mentre il gruppo di moduli contestuali si avvicina.

.fieldset-item

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

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

Quando l'utente interagisce con un input, lo sfondo del livello dell'elemento specifico cambia in un colore di superficie evidenziato, un'altra funzionalità di interfaccia di supporto per attirare l'attenzione dell'utente e segnalare che l'input è in fase di ricezione. Nella maggior parte dei casi, non è necessario ridurre le transizioni di colore.

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

Ecco un'animazione clip-path da utilizzare solo se l'utente non ha preferenze in merito al movimento ridotto. Il primo selettore e gli stili limitano il percorso di ritaglio del cerchio del 10% e impostano alcuni parametri di transizione. Il secondo selettore e stile attende che gli utenti interagiscano con un input, quindi aumenta la scala del cerchio dell'icona. Un effetto sottile, ma pulito, quando va tutto bene.

7. Complimenti

Branch Git: complete

Congratulazioni, hai creato un'interfaccia adattiva per gli utenti.

Ora conosci i passaggi chiave necessari per creare interfacce che si adattano a vari scenari e impostazioni utente.