Impostazioni icona

Selezione dell'icona

Punto chiave: Seleziona l'icona da visualizzare. Aiuta a trasmettere significati difficili da comunicare solo con il testo.

Cosa cambia con questa impostazione: L'aumento dei punti di attenzione visiva accelera il riconoscimento delle informazioni.

Suggerimento per la regolazione: Scegliete un'icona che non sia troppo ridondante rispetto al testo e che non lo contraddica, per ridurre il carico cognitivo.

Voci di impostazione

• Selezione icona: Seleziona l'icona da visualizzare, fornendo supporto semantico.
• Coloree dell'icona (nell'interfaccia di selezione): Seleziona il colore dell'icona, mantenendo l'uniformità con il testo e lo sfondo.
• Spessore del tratto (icone lineari): Regola lo spessore delle icone lineari, ottimizzando la visibilità. Il valore predefinito è 1.75. Impostando il valore a 0, l'icona viene visualizzata con lo spessore di tratto originale.
• Responsivo: Consente di selezionare icone diverse per ciascun dispositivo. È possibile passare a un'icona semplificata su mobile.

È anche possibile passare a un'icona diversa nello stato hover. Le icone hover possono essere impostate individualmente per ciascun dispositivo.

Condizioni di non visualizzazione dell'icona: Se non è selezionata alcuna icona e la dimensione del frame dell'icona è 0, l'intera area dell'icona non viene generata nell'HTML (non esiste nel DOM). Se il frame dell'icona ha una dimensione o un colore di sfondo impostato, viene visualizzato solo il frame anche senza icona selezionata.

Ottimizzazione delle icone responsive: Per impostazione predefinita, viene generata solo l'icona per PC, mentre quelle per MD/TB/SP vengono omesse. Per utilizzare icone diverse per ciascun dispositivo, è necessario attivare la "Responsivo". Il passaggio tra icone responsive avviene tramite display: none/flex, quindi le transizioni (dissolvenza) non vengono applicate.

Coloree dell'icona

Punto chiave: Imposta il colore dell'icona. Garantisce la visibilità mantenendo l'armonia con il testo e lo sfondo.

Cosa cambia con questa impostazione: Se l'icona spicca troppo diventa rumore visivo; se è troppo debole, perde presenza.

Suggerimento per la regolazione: Iniziate allineandovi al colore del testo e passate a un colore di accento solo dove necessario, per mantenere l'uniformità.

Voci di impostazione

• Colore: Imposta il colore, regolando la visibilità dell'elemento e la coerenza del design.
• Alpha: Imposta la trasparenza, regolando l'intensità della sovrapposizione.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

Dimensione dell'icona

Punto chiave: Imposta la dimensione dell'icona. Regola l'impatto visivo appropriato come supporto informativo.

Cosa cambia con questa impostazione: Una differenza di dimensione eccessiva sbilancia il baricentro del pulsante.

Suggerimento per la regolazione: Partite da 0.9-1.2 volte la dimensione del testo principale e regolate finemente verificando l'allineamento verticale.

Voci di impostazione

• Valore dimensione: Imposta il valore numerico della dimensione dell'icona, regolando il bilanciamento con il testo principale.
• Unità (px / em / rem): Specifica l'unità della dimensione dell'icona, scegliendo tra comportamento relativo/fisso.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

È possibile impostare individualmente anche la dimensione dell'icona per lo stato hover. Variare la dimensione all'hover produce un effetto di animazione. Utilizzando l'unità em, la dimensione si adatta al font, mantenendo automaticamente il bilanciamento con il testo.

Posizione dell'icona

Punto chiave: Imposta la posizione e l'offset dell'icona. Consente di regolare la distanza e l'allineamento rispetto al testo.

Cosa cambia con questa impostazione: La disposizione influisce sulla leggibilità e sulla comunicazione dell'intento di clic.

Suggerimento per la regolazione: Partite dall'allineamento centrato come riferimento e spostate X/Y di piccole quantità solo se necessario, per evitare problemi di layout.

Voci di impostazione

• X Posizione (left / center / right + valore): Imposta la posizione orizzontale, regolando la distanza dal testo.
• Y Posizione (top / center / bottom + valore): Imposta la posizione verticale, regolando il bilanciamento sopra/sotto.
• Unità (px / % / vw): Seleziona l'unità per la regolazione della posizione, determinando l'adattamento alla larghezza dello schermo.
• Responsivo: Attiva le impostazioni individuali per dispositivo, prevenendo problemi di visualizzazione.

Frame dell'icona

Punto chiave: Imposta la cornice di sfondo dell'icona. Consente di evidenziare l'icona come elemento visivo indipendente.

Cosa cambia con questa impostazione: È efficace per le CTA in cui si desidera creare una gerarchia informativa.

Suggerimento per la regolazione: Se il frame è prominente, attenuate di un livello la decorazione del pulsante principale per bilanciare l'insieme.

Voci di impostazione

• Dimensione > Set Larghezza and Altezza Individually: Consente di gestire larghezza e altezza separatamente. Da utilizzare per creare frame verticali/orizzontali.
• Dimensione > Dimensione unificata + unità: Regola un frame quadrato in modo unificato. Partire da qui per definire la dimensione di riferimento è efficiente.
• Dimensione > Larghezza / Altezza individuali + unità: Imposta le dimensioni individuali, regolando finemente il rapporto dell'icona e il bilanciamento degli spazi.
• Dimensione > Responsivo: Regola le dimensioni del frame per ciascun dispositivo, prevenendo la sensazione di costrizione su mobile.
• Coloree > Background Colore: Imposta il colore di sfondo del frame. La regola di base è scegliere un colore che non entri in conflitto con il pulsante principale.
• Coloree > Alpha: Imposta la trasparenza del colore di sfondo. Se è troppo intenso, iniziate riducendo questo valore.
• Coloree > Gradient: Passa a uno sfondo con gradiente, aggiungendo profondità e decorazione.
• Coloree > Responsivo: Regola l'intensità del colore per ciascun dispositivo, mantenendo la leggibilità.
• Bordo > Display Posizione (T/R/B/L): Specifica i lati su cui visualizzare il bordo, creando espressioni di accento parziale.
• Bordo > Style: Seleziona il tipo di linea, regolando il tono del frame (rigido/leggero).
• Bordo > Colore + Alpha: Imposta il colore e la trasparenza del bordo, definendo chiaramente il confine con lo sfondo.
• Bordo > Dimensione: Regola lo spessore della linea. Attenzione: se troppo spessa, il bordo risalta più dell'icona.
• Bordo > Responsivo: Ottimizza lo spessore e l'impatto della linea per ciascun dispositivo.
• Raggio bordo > Raggio: Imposta l'arrotondamento degli angoli del frame. Considerate la coerenza con la forma del pulsante principale.
• Raggio bordo > Unità (px / %): Scegliete tra valore fisso o percentuale, per mantenere la stessa impressione a dimensioni diverse.
• Raggio bordo > Responsivo: Regola il Raggio bordo per ciascun dispositivo, prevenendo un aspetto schiacciato.
• Transizione > Duration / Delay / Andamento / Valore personalizzato / Ripristina: Imposta la velocità di transizione del frame all'hover, controllando l'intensità dell'effetto.

Il frame dell'icona è personalizzabile individualmente anche nello stato hover. Variare il colore del frame o il Raggio bordo all'hover rafforza l'effetto di feedback dell'interazione con il pulsante. La transizione del frame può essere configurata indipendentemente dalla transizione dell'icona stessa.

Transizione

Punto chiave: Imposta la velocità di transizione dallo stato normale allo stato hover. È la voce che determina la "piacevolezza" dell'interazione.

Cosa cambia con questa impostazione: Se troppo veloce, il cambiamento passa inosservato; se troppo lenta, la risposta risulta pigra.

Suggerimento per la regolazione: Partite da una Duration di 200-350ms come riferimento e aggiungete ritardi o easing personalizzati solo dove è necessaria una maggiore enfasi.

Voci di impostazione

• Durata (ms): Imposta il tempo della transizione, regolando la velocità di risposta.
• Ritardo (ms): Imposta il tempo di attesa prima dell'inizio della transizione, regolando il timing dell'effetto.
• Andamento: Imposta la curva di velocità, regolando l'impressione del movimento.
• Valore personalizzato: Specifica un valore di easing personalizzato (formato CSS cubic-bezier), regolando finemente la qualità della transizione dell'icona.
• Ripristina: Ripristina le impostazioni di questa sezione allo stato iniziale.

Questa transizione si applica alle transizioni hover di colore, dimensione e posizione dell'icona. La transizione del frame dell'icona e la transizione dell'animazione dell'icona sono impostazioni indipendenti.