Riuscito
Impostazioni colore
Imposti la palette colori globale del tema per sfondi, testo, pulsanti, banner, schede e campioni.
Color settings controllano la palette condivisa usata in tutto il tema. Poiché queste scelte possono influire su più modelli, aree di contenuto, schede, moduli e stati interattivi contemporaneamente, è utile impostarle come un sistema coordinato invece di regolare i colori un’area alla volta. Per un contesto di configurazione più ampio, veda documentazione Shopify sulla personalizzazione dei temi
Inizi scegliendo le superfici principali e i colori del testo, quindi costruisca attorno ad essi gli stili di pulsanti, banner e schede. Per indicazioni sull’accessibilità, veda documentazione Company XYZ sulla guida all’accessibilità delle impostazioni colore.
I colori di sfondo stabiliscono le superfici di base del tema. Lo sfondo del body definisce il tono generale della pagina, mentre lo sfondo alternativo aiuta a separare le aree di contenuto senza bisogno di bordi più marcati o effetti visivi più forti.
I gradienti possono aggiungere profondità, ma non devono rendere il testo più difficile da leggere. Controlli titoli, testo dei paragrafi e schede ovunque il gradiente possa apparire, così l’intero intervallo di colori rimane utilizzabile.
Le modifiche allo sfondo sono globali. Un colore che appare raffinato in un’area può ridurre il contrasto del testo in altri modelli o sezioni di contenuto.
Le impostazioni del testo modellano l’esperienza di lettura principale in tutto il tema. Usi colori per il testo dei titoli e del corpo che siano correlati ma chiaramente distinti, quindi scelga colori per i link facili da identificare come elementi interattivi.
I colori al passaggio del mouse devono creare una risposta chiara senza far scomparire i link nel testo circostante. Se gli stati predefinito e al passaggio del mouse sono troppo simili, i clienti potrebbero non accorgersi che un link può essere cliccato.
Pulsanti principali
Sezione intitolata “Pulsanti principali”I colori dei pulsanti principali dovrebbero evidenziare l’azione principale nell’interfaccia. In genere sono gli stili di azione più forti del tema, quindi sfondo, bordo e testo devono lavorare insieme per rimanere visibili su ogni superficie in cui compaiono.
Gli stili al passaggio del mouse dovrebbero sembrare uno stato interattivo chiaro, non uno stile di pulsante completamente diverso. Piccoli cambiamenti intenzionali di solito appaiono più rifiniti di modifiche drastiche.
Pulsanti secondari
Sezione intitolata “Pulsanti secondari”I pulsanti secondari supportano azioni a priorità più bassa e dovrebbero sembrare chiaramente meno evidenti dei pulsanti principali. Dovrebbero comunque apparire intenzionali e utilizzabili, soprattutto quando vengono mostrati accanto ad appelli all’azione più forti.
Un buon stile secondario aggiunge gerarchia senza sembrare disabilitato. Esamini i punti in cui compaiono insieme entrambi i tipi di pulsante per assicurarsi che l’azione principale rimanga evidente.
Le impostazioni dei banner controllano grandi aree di contenuto promozionale e con immagine di sfondo, inclusi sfondo, bordo, titolo, icona, testo e trattamento overlay. Queste scelte hanno un forte impatto visivo perché i banner spesso combinano testo con media e appaiono in posizioni di rilievo.
Il testo del banner può ricadere nel colore del testo del banner quando non sono impostati colori del testo più specifici, quindi vale la pena controllare i banner con diverse combinazioni di contenuto. Il colore dell’overlay, il gradiente e l’opacità aiutano a mantenere la leggibilità sulle immagini pur lasciando intravedere il contenuto multimediale.
Imposti gli overlay dei banner in base alle immagini effettive che usa. Un overlay che funziona bene su un’immagine scura può essere troppo debole su una chiara o molto ricca di elementi.
Le impostazioni delle schede definiscono superfici di contenuto più piccole usate nelle griglie e nelle aree di contenuto di supporto. Le usi per separare i contenuti raggruppati dallo sfondo della pagina circostante, mantenendo al tempo stesso coerenza nella palette complessiva.
Se le schede compaiono su sfondi alternativi, verifichi che lo sfondo e il bordo della scheda creino ancora una separazione visiva sufficiente. I colori del titolo e del testo della scheda dovrebbero restare facili da scansionare nei layout densi.
I colori delle icone influenzano piccoli segnali dell’interfaccia in tutta la navigazione, le azioni e le UI di supporto. Gli stati al passaggio del mouse e inattivi aiutano a comunicare interazione e gerarchia senza fare affidamento solo sulle etichette testuali.
Mantenga le icone inattive attenuate ma comunque individuabili. Se sono troppo deboli, i controlli utili possono sembrare non disponibili o essere completamente trascurati.
Campi di input
Sezione intitolata “Campi di input”I colori degli input modellano l’aspetto dei moduli nelle aree di ricerca e nei moduli rivolti ai clienti. Il testo segnaposto dovrebbe essere più tenue del testo inserito, ma comunque abbastanza leggibile da guidare le persone prima che inizino a digitare.
Gli sfondi e i bordi dei campi dovrebbero rendere gli input facili da individuare rispetto alla pagina. Se si confondono con il layout circostante, i moduli possono risultare più difficili da usare.
Questi controlli coprono dettagli dell’interfaccia condivisi che compaiono in molti punti. Il colore del bordo aiuta a definire la struttura, il colore dell’overlay della pagina influisce sugli stati di overlay a pagina intera come le viste del menu attivo, della ricerca o del mini-carrello, e il colore del prezzo in saldo enfatizza il prezzo scontato.
Usi moderazione qui. I bordi dovrebbero organizzare i contenuti senza aggiungere rumore visivo, gli overlay dovrebbero attenuare la pagina senza compromettere la leggibilità in primo piano, e i prezzi in saldo dovrebbero risaltare senza entrare in conflitto con i colori delle azioni.
Campioni
Sezione intitolata “Campioni”I campioni personalizzati le consentono di associare i nomi delle opzioni a valori di colore specifici, così i campioni delle varianti appaiono in modo più accurato e coerente. Questo è particolarmente utile quando i nomi delle opzioni standard non producono il colore del campione desiderato.
Inserisca le definizioni dei campioni nel formato previsto separato da virgole, così i valori delle opzioni possono essere riconosciuti correttamente. Per indicazioni sulla formattazione e dettagli relativi alle varianti, veda documentazione Company XYZ sulle varianti di prodotto.
Note sull’uso
Sezione intitolata “Note sull’uso”- Imposti prima le superfici. Scelga sfondi del body e alternativi prima di regolare testo, pulsanti e schede, così le decisioni sul contrasto restano coerenti.
- Controlli il contrasto ovunque. Esamini testo, link, pulsanti e campi del modulo su ogni sfondo principale per individuare presto eventuali problemi di leggibilità.
- Mantenga chiara la gerarchia dei pulsanti. Renda i pulsanti principali sensibilmente più forti di quelli secondari, così l’azione principale è sempre facile da identificare.
- Testi i banner con media reali. Ricontrolli il testo del banner e l’opacità dell’overlay sulle immagini effettive che intende usare, non su elementi grafici segnaposto.
- Riveda gli effetti globali collaterali. Dopo aver modificato colori condivisi come bordi, overlay o icone, esamini i modelli chiave per assicurarsi che l’aggiornamento continui a funzionare in tutto il tema.
- Verifichi entrambe le viewport. I controlli colore su desktop e mobile possono influire in modo diverso su layout, allineamento, visibilità e trattamento dei media, quindi controlli entrambe le dimensioni dopo aver apportato modifiche.
- Usi le sovrascritture con criterio. Valori vuoti o con stile predefinito di solito mantengono intatto lo stile di fallback, mentre colori espliciti, gradienti o scelte di media rendono la sezione più autonoma.
- Ricontrolli le aree ricche di media. Quando i media su desktop e mobile sono configurati separatamente, confermi ritaglio, caricamento, aspetto di fallback e leggibilità del testo su ogni versione.