Creare interfacce adattive all'utente con query supporti preferenze

1. Prima di iniziare

Oggi gli utenti indicano molte preferenze sui loro dispositivi. Vogliono che il sistema operativo e le app abbiano un aspetto familiare. Le interfacce adattive per gli utenti sono quelle pronte a utilizzare queste preferenze per migliorare l'esperienza utente, per farla sentire più familiare, per farla sentire propria. Se l'operazione viene eseguita correttamente, l'utente potrebbe non accorgersi 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 un buon motivo.

Ecco alcuni esempi di preferenze degli utenti che possono essere utilizzate dai CSS:

• Dimensioni dell'area visibile del dispositivo
• Orientamento del dispositivo (verticale | orizzontale)
• Dimensione carattere
• Online / offline
• Qualità della rete
• Combinazione di colori (chiaro | scuro)
• Animazioni dell'interfaccia (on | 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 (fullscreen | standalone | minimal UI | browser)

Ecco alcuni esempi di preferenze degli utenti che saranno disponibili a breve in CSS:

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

Query supporti

CSS e il web consentono l'adattamento e la reattività tramite le query supporti, una condizione dichiarativa che contiene un insieme di stili se la condizione è vera. La più comune è una condizione sulla dimensione dell'area visibile del dispositivo: se la dimensione è inferiore a 800 pixel, ecco alcuni stili migliori per quel caso.

Adattamento all'utente

Un'interfaccia non adattiva non cambia quando un utente la visita, offrendo essenzialmente un'esperienza unica a tutti senza possibilità di adattamento. Un'interfaccia adattabile 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 degli strumenti per sviluppatori, come gli Strumenti per sviluppatori di Google Chrome

Cosa creerai

In questo codelab, creerai un modulo adattabile all'utente che si adatta a quanto segue:

• La preferenza della combinazione di colori del sistema offrendo una combinazione di colori chiari e scuri per i controlli del modulo e gli elementi UI circostanti
• Le preferenze di movimento del sistema offrendo più tipi di animazioni
• Finestre di visualizzazione per dispositivi di piccole e grandi dimensioni per offrire esperienze su dispositivi mobili e computer
• 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 imparerai a conoscere le funzionalità web moderne che ti aiuteranno a creare un modulo adattabile all'utente. Imparerai a:

• Crea temi chiari e scuri
• Crea moduli animati e accessibili
• Layout: moduli adattabili
• Utilizza 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ò di cui hai bisogno 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 localmente, devi avere Node.js versione 12 o successive e un editor di codice configurato e pronto per l'uso.

Utilizza 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.

Utilizza 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, quindi:

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 all'indirizzo http://localhost:3000.

Informazioni sull'HTML

Questa lezione illustrerà gli aspetti dell'HTML utilizzati per supportare l'interattività adattiva per l'utente. 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. Le scelte degli elementi HTML possono essere fondamentali per l'accessibilità e il layout.

Quando è tutto 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 tecnologie per la disabilità simili

Attributi per l'HTML

Il codice HTML fornito nel codice sorgente è un ottimo punto di partenza perché sono già stati scelti 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, è probabile che sia importante avere un modulo utilizzabile su dispositivi mobili con il tocco. In questa sezione, prima di layout e stile, garantisci l'usabilità dell'input adattivo.

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

Gli elementi sono forniti in un ordine logico. Questo è importante per l'esperienza utente, in modo che l'ordine dell'esperienza visiva sia lo stesso o simile per le tecnologie di gamepad, tastiera o screen reader.

Interazione con la tastiera

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

Il video qui sopra mostra come utilizzare il tasto Tab e le frecce per spostarsi nell'interfaccia e apportare modifiche. Il contorno blu è molto stretto intorno agli elementi di input, quindi aggiungi i seguenti stili per dare un po' di respiro a questa interazione.

style.css

input {
  outline-offset: 5px;
}

Da provare

1. Esamina gli elementi HTML utilizzati in index.html.
2. Fai clic sulla pagina demo nel browser.
3. Premi il tasto tab e i tasti shift+tab per spostare lo stato attivo dell'elemento 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 utilizzando il mouse. Prova a utilizzare il mouse sul modulo. I cursori e le caselle di controllo funzionano, ma puoi fare di meglio. Le caselle di controllo sono piuttosto piccole per essere selezionate con un mouse.

Come vedi, ottieni due funzionalità per l'esperienza utente per collegare le etichette e i relativi input.

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

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

Questo collegamento esplicito migliora anche l'esperienza per gli screen reader, che vengono trattati nella sezione successiva.

Non associati: nessun attributo che collega gli elementi

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

Associato: attributi che collegano gli elementi

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

Il codice HTML fornito ha già attribuito tutti gli input e le etichette. Se non hai mai sentito parlare di questo concetto, vale la pena approfondirlo.

Da provare

1. Passa il mouse sopra un'etichetta e osserva la casella di controllo evidenziata.
2. Esamina un elemento etichetta con gli Strumenti per sviluppatori di Chrome per visualizzare l'area della superficie cliccabile 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, c'è un passaggio 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 agli screen reader con un attributo.

index.html

<picture aria-hidden="true">

Ora gli screen reader ignorano l'elemento puramente visivo.

L'elemento slider 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.

Da provare

1. Utilizza la tecnologia dello screen reader del tuo 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
• Scrivi CSS Grid per un allineamento e una spaziatura flessibili e adattabili
• Utilizza le proprietà logiche per layout adattabili a livello internazionale
• Scrivi query supporti per adattare i layout compatti e spaziosi

Spaziatura

La chiave per un buon layout è una gamma 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 di 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 è simile al linguaggio che le persone userebbero tra loro per descrivere lo spazio. Inoltre, utilizzi le unità rem esclusivamente per il dimensionamento di unità intere leggibili che si adattano e tengono conto delle preferenze dell'utente.

Stili di pagina

A questo punto, devi impostare alcuni stili del documento, rimuovere i margini dagli elementi e impostare il carattere su un carattere sans-serif gradevole.

• 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 ottimale deciso dal sistema operativo dell'utente.

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 secondari e stilistici. L'elemento small, invece, richiede l'aggiunta di line-height per il testo a capo. Altrimenti, i dati sono troppo raggruppati.

Proprietà logiche

Tieni presente 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 queste, come un'unità rem, si adattano all'utente. Questo layout può essere tradotto in un'altra lingua e impostato sulle direzioni di scrittura e dei documenti naturali a cui l'utente è abituato nella sua lingua madre. Le proprietà logiche sbloccano il supporto per questa funzionalità con una sola definizione di spazio, direzione o allineamento.

Grid e flexbox sono già relativi al flusso, il che significa che gli stili scritti per una lingua saranno contestuali e applicati in modo appropriato per le altre. Direzionalità adattiva; i contenuti scorrono in base alla direzionalità del documento.

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

Layout di griglia CSS

La proprietà CSS grid è un potente strumento di layout con molte funzionalità per gestire attività complesse. Creerai alcuni layout di griglia semplici e un layout complesso. Inoltre, lavorerai dall'esterno verso l'interno, dai layout macro ai layout micro. 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 di griglia CSS alla volta:

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, Grid inserisce ogni elemento secondario nella propria riga, il che lo rende ideale per impilare gli elementi. Inoltre, offre l'ulteriore vantaggio 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. Gap non è solo un unico punto per gestire lo spazio in un container, ma anche il relativo flusso.

<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ù complicato del design, ma tiene conto dell'aspetto adattabile più interessante:

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

2. Prova a ridimensionare il browser. Osserva come il modulo si comprime in righe in una finestra di visualizzazione piccola, ma si dispone in nuove colonne se c'è spazio, adattandosi senza query supporti. Questa strategia di stili adattabili senza query supporti è 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 ridotto 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 posizionamento al centro dell'icona e della casella di controllo con le etichette e i controlli associati. La prima colonna del modello di griglia, var(--space-lg), crea una colonna più larga dell'icona, in modo che un elemento secondario possa essere centrato al suo interno.

Questo layout mostra quante decisioni di progettazione sono già state prese nelle proprietà personalizzate. La spaziatura interna, gli spazi vuoti e una colonna sono stati dimensionati in armonia con il sistema utilizzando i valori che hai già definito.

.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 posizionamento di un'immagine al centro.

<picture> & [checkbox] alignment

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

Questo layout isola la centratura agli elementi immagine e casella di controllo utilizzando il 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 dimensioni.

.sm-stack

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

Questa classe di utilità è destinata agli elementi delle etichette delle caselle di controllo per distanziare il testo di aiuto 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.

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 un gap nel riquadro Stili.
3. Apri gli Strumenti per sviluppatori di Chrome, vai al riquadro Stili e passa da Stili a Layout. Esplora quest'area attivando/disattivando le impostazioni e i layout.

Query supporti

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

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 query supporti aggiungono spaziatura interna a main man mano che aumenta lo spazio disponibile nell'area visibile. Ciò significa che inizia con un padding compatto e ridotto, ma diventa sempre più spazioso man mano che si rende disponibile più spazio.

<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à adattabile alle dimensioni dell'area visibile con auto-fit, ma durante i test su un dispositivo mobile, la rotazione di un dispositivo in modalità orizzontale non affianca i due gruppi di moduli. Adattati a questo contesto orizzontale con una query supporti orientation e un controllo della larghezza dell'area visibile. Ora, se il dispositivo è in modalità orizzontale e ha una larghezza di 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 di 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.

Da provare

1. Espandi e riduci il browser e osserva come si adatta lo spazio.
2. Visualizza 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:

• Adattamento alle preferenze di colore scuro e chiaro
• Avere una combinazione di colori derivata da un colore esadecimale del brand
• Utilizza 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 di 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 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, evitando di dover gestire una miriade di colori nel codice.

Proprietà personalizzate

In questa sezione, creerai un insieme di proprietà personalizzate da utilizzare nel resto degli stili. Analogamente al set di spaziatura creato in precedenza nel tag :root, aggiungerai i colori.

Supponiamo che il colore del brand della tua app sia #0af. La prima attività consiste nel convertire questo valore di colore esadecimale in un valore di 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 del brand di supporto.

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 creerai sarà un tema scuro.

Ognuno 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 norma desaturare i colori per l'utilizzo su superfici scure (altrimenti possono vibrare alla vista o essere 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 tuo brand è in linea con il 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% ed entrambi hanno 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. Scopri 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. Se i colori del testo utilizzavano valori di luminosità elevati (85% e superiori), le superfici utilizzeranno valori inferiori (30% e inferiori). Un intervallo di luminosità adeguato tra la superficie e il testo contribuirà a garantire colori accessibili per la lettura da parte degli utenti.

3. Nota come i colori iniziano dal 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 viene 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

Dopo aver definito un buon set di colori per il testo e le superfici per il tema scuro, è il momento di adattarsi alla preferenza per un tema chiaro aggiornando le proprietà personalizzate dei colori all'interno di una query supporti prefers-color-scheme.

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

Brand

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

Il primo è il colore del brand. La saturazione deve essere ripristinata alla massima 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 al tema scuro, che aveva colori del testo blu molto chiaro, nel tema chiaro i colori del testo sono blu molto scuro. I valori di luminosità del 10% e del 30% per il colore HSL dovrebbero indicare 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 qui nel codice e regolare la luminosità e la saturazione per creare una bella combinazione di colori chiari che non sia troppo fredda o blu.

Utilizza il sistema di colori

Ora che i colori sono definiti, è il momento di utilizzarli. Hai un bel colore del brand per l'accento, due colori per il testo e quattro colori per la 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 principali della pagina sono i primi colori della superficie e del testo che hai creato, il che porta anche il livello di contrasto predefinito al massimo. Puoi iniziare a testare l'attivazione/disattivazione della modalità Luce e Buio.

<fieldset>

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

Questo è l'elemento simile a una scheda del tuo design. Il bordo di 1 pixel e lo spazio di 1 pixel sono dello stesso colore e rappresentano la superficie dietro ogni .fieldset-item. In questo modo si crea una bella armonia visiva e la manutenzione è semplice.

.fieldset-item

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

Ogni input del modulo si trova su una superficie separata. Spero che tu stia vedendo come questi elementi si uniscono e come le variazioni di luminosità si sovrappongono.

.fieldset-item > picture

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

Si tratta di una scelta stilistica per mostrare 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 l'aspetto risulti troppo pesante.

.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 all'interno e ha come target l'SVG per evidenziarlo con il colore principale del tuo brand. In questo modo, il feedback della UX del modulo è ottimale, in quanto l'interazione con gli input evidenzia l'iconografia pertinente.

<small>

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

È un testo piccolo. Dovrebbe essere leggermente più attenuato rispetto alle intestazioni e ai paragrafi (contenuti principali).

Controlli modulo scuri

:root {
  color-scheme: dark light;
}

Questo tocco finale indica al browser che questa pagina supporta sia il tema scuro sia quello chiaro. Il browser ci premia con controlli dei moduli scuri.

6. Animazione adattiva

Branch Git: animations

Al termine di questa sezione, la pagina delle impostazioni:

• Adattati alle preferenze di movimento dell'utente
• Rispondi all'interazione dell'utente

Movimento ridotto e nessun movimento

La preferenza dell'utente relativa al movimento trovata nel sistema operativo non offre un valore di nessuna animazione. L'opzione è "Riduci movimento". Le animazioni con dissolvenza incrociata, le transizioni di colore e altro ancora sono comunque utili 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 ridimensionamento, come se l'elemento si stesse spostando verso l'utente. È così semplice modificare il codice CSS per adattarlo al movimento ridotto che riduci 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 viene portato verso l'utente.

.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 della superficie evidenziato, un'altra funzionalità dell'interfaccia di supporto per attirare l'attenzione dell'utente e segnalare che l'input è stato ricevuto. 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 restringono il percorso di ritaglio del cerchio del 10% e impostano alcuni parametri di transizione. Il secondo selettore e lo stile attendono che gli utenti interagiscano con un input, quindi aumentano le dimensioni del cerchio dell'icona. Un effetto discreto, ma piacevole quando tutto è ok.

7. Complimenti

Branch Git: complete

Congratulazioni, hai creato un'interfaccia adattabile all'utente.

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