> ## Documentation Index > Fetch the complete documentation index at: https://docs.base44.com/llms.txt > Use this file to discover all available pages before exploring further. # Fondamenta di design e layout > Mantieni la tua app Base44 coerente e ben strutturata: sistemi di design, immagini e risorse visive, layout responsive, tipi di pagina, personalizzazione avanzata e accessibilità. Una volta che sai come [personalizzare il design della tua app](/Building-your-app/Design), queste fondamenta ti aiutano a mantenerla coerente, ben strutturata e accessibile mentre cresce. Questa pagina copre la costruzione di un design coerente, il lavoro con immagini e risorse visive, il layout responsive e i tipi di pagina, la personalizzazione avanzata e l'accessibilità. *** ## Mantenere il design coerente Queste sezioni spiegano come definire pattern di design coerenti per tutta l'app usando la chat AI, così colori, tipografia, spaziatura e componenti risultano armoniosi in tutta l'app. ### Sistema di colori Il colore è uno degli strumenti più potenti per creare atmosfera e guidare l'attenzione. Inizia definendo ruoli invece di codici esadecimali casuali. Punta a: * 1 colore primario del brand * 1 colore secondario * 1 colore accento per le evidenziazioni * Da 3 a 5 grigi neutri per sfondi, superfici e bordi * Colori chiari per gli stati di successo, avviso ed errore Puoi chiedere all'AI di proporre e applicare un sistema completo da zero: ```text theme={null} Crea un sistema di colori per questa app: - 1 colore primario del brand - 1 colore secondario - 1 colore accento per le evidenziazioni - 4 grigi neutri per sfondi, superfici e bordi Assegna i colori a ruoli come primario, superficie, bordo, successo, avviso, errore. Assicurati che il testo sugli sfondi rispetti i livelli di contrasto per l'accessibilità. Applica questo sistema a tutta l'app e sostituisci i colori fuori standard. ``` Mantieni coerente il significato dei colori. Per esempio, usa il colore di successo solo per gli stati positivi e il colore di errore solo per i problemi, non per decorazione. Se hai già codici esadecimali da una guida del brand o da uno strumento esterno, incollali e lascia che l'AI li assegni ai ruoli: ```text theme={null} Usa questa palette e assegna ogni codice esadecimale a un ruolo: - #1D4ED8 - #6366F1 - #10B981 - #F3F4F6 - #111827 Definisci quali sono i ruoli primario, secondario, accento e neutri. Sostituisci i colori scritti a mano con token o classi Tailwind che seguono questi ruoli. ``` Puoi caricare uno screenshot o un'immagine della tua palette direttamente nella chat AI e chiederle di applicare i colori alla tua app: ```text theme={null} Applica i colori di questa immagine alla mia app. Assegna ogni colore a un ruolo come primario, sfondo, primo piano e accento. Sostituisci i colori esistenti in tutta l'app perché corrispondano. ``` Cambiare la palette di colori di un'app Base44 *** ### Sistema tipografico La tipografia determina quanto la tua app risulta leggibile e scorrevole. È meglio avere pochi stili di testo chiari che molti stili simili. Definisci ruoli come: * Titolo di pagina * Intestazione di sezione * Testo del corpo * Piccoli metadati come etichette e timestamp Puoi chiedere all'AI di impostare tutto e applicarlo ovunque: ```text theme={null} Imposta un sistema tipografico: - Titoli di pagina: dimensione più grande, grassetto, sans serif moderno - Intestazioni di sezione: dimensione media, semigrassetto - Testo del corpo: dimensione standard, peso regolare - Metadati: piccoli, maiuscoli, con spaziatura extra tra le lettere Applica questi ruoli in modo coerente su tutte le pagine e rimuovi le dimensioni di font improvvisate. ``` Puoi anche intervenire più direttamente sulle dimensioni: ```text theme={null} Rendi la tipografia più leggibile: - Aumenta leggermente la dimensione base del testo del corpo - Aumenta l'interlinea dei paragrafi - Assicurati che le intestazioni siano almeno 1.4 volte la dimensione del testo del corpo Mantieni le stesse famiglie di font. ``` Puoi usare font personalizzati e applicarli attraverso il layout. 1. Ottieni lo snippet di embed (per esempio da Google Fonts su [https://fonts.google.com](https://fonts.google.com)). 2. Chiedi all'AI di aggiungerlo a `Layout.js` e collegarlo al tuo sistema tipografico. Prompt di esempio: ```text theme={null} Importa il font "Raleway" da Google Fonts. Usalo per i titoli di pagina e le intestazioni di sezione. Mantieni il font attuale del corpo per i paragrafi. Aggiorna gli stili in tutta l'app per seguire questa regola. ``` Usare un font personalizzato nel file di layout di Base44 Cerca di limitarti a una o due famiglie di font. Troppi font rendono l'interfaccia disordinata e più difficile da mantenere. *** ### Spaziatura e densità Spaziatura e densità determinano quanto la tua app è comoda da usare. Una semplice scala di spaziatura evita spazi casuali e sezioni troppo compresse. Puoi definire una scala come 4, 8, 12, 16, 24 e chiedere all'AI di applicarla: ```text theme={null} Normalizza la spaziatura usando questa scala: 4, 8, 12, 16, 24. - Usa valori più grandi tra le sezioni principali - Usa valori medi dentro card e pannelli - Usa valori piccoli tra etichette e campi di input Riduci le aree che sembrano compresse ed evita valori di spaziatura casuali. ``` Se una pagina sembra affollata o troppo vuota, puoi lasciare che la chat AI diagnostichi e corregga: ```text theme={null} Osserva questa pagina e regola la spaziatura: - Aggiungi più padding sopra e sotto ogni sezione - Aumenta lo spazio tra le righe di card - Assicurati che i paragrafi lunghi abbiano una lunghezza di riga comoda Mantieni i colori e i contenuti esistenti. ``` *** ### Elementi base e stati Una volta definiti colore, tipografia e spaziatura, standardizza i blocchi che usi ovunque. Concentrati su: * Pulsanti (primario, secondario e solo testo) * Card e pannelli * Barre di navigazione e sidebar * Campi dei form (default, focus, errore, disabilitato) * Chip, tag e badge se li usi Puoi chiedere all'AI di individuare e unificare i pattern: ```text theme={null} Standardizza gli elementi base: - Pulsanti: definisci gli stili primario, secondario e solo testo - Card: definisci raggio degli angoli, padding, ombra e layout di intestazione e corpo - Navigazione: definisci gli stati attivo, hover e disabilitato - Campi dei form: definisci gli stati default, focus, errore e disabilitato Applica questi pattern a tutta l'app e sostituisci gli stili non coerenti. ``` Ottieni così un linguaggio riutilizzabile e le nuove pagine sembrano appartenere allo stesso prodotto. *** ## Immagini e risorse visive Le risorse visive come immagini, icone e video definiscono l'atmosfera della tua app. L'AI può aiutarti a crearle, posizionarle, stilizzarle e collegarle ai tuoi dati e al codice. Carica immagini o video nella chat AI per darle un contesto visivo su stile, layout o contenuti della tua app. Puoi chiedere alla chat AI di aggiungere immagini hero direttamente alle pagine: ```text theme={null} Aggiungi un'immagine hero a tutta larghezza alla homepage che corrisponda alla palette di colori attuale. Usa un'immagine segnaposto che suggerisca una dashboard di analisi moderna. ``` Esempio di immagine hero in un'app Base44 Per sostituire un'immagine segnaposto: 1. Apri il file della pagina, per esempio `Store.js`, nella vista codice. 2. Trova il tag ``. 3. Aggiorna l'attributo `src` con l'URL della tua immagine. Puoi anche caricare immagini per le entità nella sezione **Data** e collegarle ai componenti, così card ed elenchi mostrano automaticamente le immagini giuste. Gestire le immagini delle entità nella sezione Data di Base44 Chiedi alla chat AI di generare brevi video per sezioni visive come hero, anteprime di prodotto, tutorial o schermate di onboarding. Prompt di esempio: ```text theme={null} Crea un breve video di onboarding per la mia app di fitness che mostri una semplice routine di allenamento mattutino. Aggiungilo alla schermata di benvenuto sopra il pulsante Get Started. ``` La generazione di video dalla chat AI richiede un [piano Starter](/Account-and-billing/Billing-and-plans) o superiore. Ogni video generato usa i crediti messaggio del prompt più 1 credito messaggio aggiuntivo. Puoi anche permettere alle persone di generare video nella tua app pubblicata. Scopri di più sulla [generazione di video](/Integrations/built-in-integrations#generating-videos). Le immagini di riferimento ti aiutano a guidare il design in modo visivo, mostrando alla chat AI uno stile, un layout, una palette di colori o una direzione visiva che vuoi usare. Caricare un'immagine di riferimento come ispirazione per il design dell'app 1. Clicca l'icona **Upload (+)** nella chat AI. 2. Carica un'immagine di ispirazione o uno screenshot. 3. Di' all'AI esattamente cosa vuoi riprendere e cosa ignorare. Idee di prompt: ```text theme={null} Usa questo riferimento come ispirazione. Mantieni il mio layout e i miei contenuti, ma: - Riprendi le forme e le ombre dei pulsanti - Riprendi il raggio degli angoli e lo stile dei bordi delle card - Applica un gradiente morbido simile solo all'header in alto Non copiare i colori esatti, solo la struttura e l'atmosfera. ``` ```text theme={null} Da questo screenshot, estrai regole di design per: - Ruoli dei colori - Dimensioni e pesi dei font - Raggio degli angoli e ombre - Spaziatura tra sezioni e card Spiega le regole, poi applica uno stile simile usando i colori attuali del mio brand. ``` Puoi copiare stili visivi direttamente da uno strumento di design come Figma e chiedere a Base44 di applicarli, invece di provare a descrivere ogni dettaglio a parole. **Per copiare da Figma:** 1. In Figma, seleziona l'elemento di cui vuoi copiare lo stile. 2. Passa alla **Dev mode** e apri il pannello **Code**. 3. Copia la riga CSS rilevante, per esempio uno sfondo a gradiente: `background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);` 4. In Base44, clicca l'elemento corrispondente nell'anteprima per aprire la modalità **Edit**. 5. Incolla lo stile in un prompt e di' a Base44 esattamente cosa cambiare, per esempio: ```text theme={null} Cambia lo stile di sfondo di questo elemento in: background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%); Mantieni invariati tutti gli altri stili. ``` Questo ti permette di riprodurre con grande precisione gradienti, ombre, bordi e altri stili dal tuo file di design. Le icone devono supportare il significato, non essere solo decorazione. La coerenza è fondamentale. Attività comuni: * Sostituire icone generiche con altre più significative. * Allineare dimensioni e spessore del tratto delle icone. * Abbinare le icone a etichette di testo dove serve chiarezza. Puoi usare librerie di icone come Lucide e chiedere alla chat AI di integrarle: ```text theme={null} Sostituisci le icone generiche con altre più significative: - Usa icone che corrispondano chiaramente a ogni voce di navigazione e azione principale - Mantieni coerenti la dimensione e lo spessore del tratto delle icone - Allinea con cura le icone alle etichette nella navigazione, negli elenchi e nei pulsanti ``` ```text theme={null} Aggiorna tutti i pulsanti di call to action primari: - Usa l'icona "sparkles" a sinistra dell'etichetta - Mantieni l'icona piccola e il padding uniforme - Non aggiungere icone ai pulsanti secondari o distruttivi ``` *** ## Layout e responsività Il layout determina come le informazioni sono raggruppate e lette. La responsività garantisce che il layout funzioni su ogni dispositivo. Ragiona in tipi di pagina invece che in schermate isolate: * Pagine landing e di marketing * Dashboard * Elenchi e tabelle * Pagine di dettaglio * Form e wizard * Pagine di impostazioni e profilo Puoi chiedere alla chat AI di individuare e standardizzare i pattern: ```text theme={null} Identifica i principali tipi di pagina in questa app (landing, dashboard, elenco, dettaglio, form, impostazioni). Per ogni tipo: - Proponi una struttura di layout coerente - Suggerisci quali componenti esistenti riutilizzare Applica questi layout a tutte le pagine dello stesso tipo, senza cambiare i contenuti. ``` Gerarchia e spazio bianco aiutano le persone a vedere a colpo d'occhio cosa conta. Idee che puoi chiedere all'AI di applicare: ```text theme={null} Migliora la gerarchia visiva e lo spazio bianco in questa pagina: - Fai risaltare chiaramente il titolo della pagina rispetto al resto del testo - Usa intestazioni di sezione coerenti per raggruppare i contenuti - Aggiungi più padding sopra e sotto ogni sezione - Aumenta lo spazio tra le righe di card Evita di aggiungere nuovi colori o font. ``` Lo spazio bianco è particolarmente importante per i contenuti densi come dashboard e tabelle, quindi dai respiro agli elementi chiave. La tua app deve risultare naturale su telefoni, tablet e desktop. Puoi definire le regole responsive in un unico prompt: ```text theme={null} Rendi questo layout responsive: - Sui telefoni, usa una singola colonna verticale e impila le sezioni - Sui tablet, usa due colonne per le card dove lo spazio lo consente - Sui desktop, usa tre o quattro colonne per le card Mantieni le immagini in proporzione 4:3. Comprimi la sidebar in un menu in alto sugli schermi più piccoli. Evita lo scorrimento orizzontale a tutti i breakpoint. ``` Usa l'anteprima dei dispositivi nell'editor di Base44 per verificare come queste regole si comportano sulle diverse dimensioni di schermo, poi affinale con prompt successivi. ### Personalizzare l'app per il mobile La tua app Base44 adatta automaticamente il layout a ogni dispositivo, ma puoi usare l'anteprima mobile e gli strumenti di personalizzazione dell'editor per perfezionare l'aspetto e il funzionamento dell'app sui telefoni. Così crei un'esperienza comoda e fluida per gli utenti mobile. Visualizzare la versione mobile della tua app nell'editor di Base44 **Per personalizzare la tua app per il mobile:** 1. Vai all'editor della tua app. 2. Clicca l'icona **Screen** in alto e seleziona **Mobile**. 3. Rivedi layout, navigazione e contenuti. 4. Apporta le modifiche necessarie in uno di questi modi: * Chiedi alla chat AI di fare modifiche per il mobile. * Usa la modalità **Edit** nella chat AI per cambiare il design o il layout di elementi specifici. **Consigli per far rendere bene la tua app su mobile:** * Assicurati che il testo sia leggibile * Ridimensiona gli elementi per adattarli allo schermo mobile * Nascondi o mostra gli elementi secondo necessità * Verifica che pulsanti e pulsanti icona siano facili da toccare * Controlla che le immagini rendano bene *** ## Tipi di pagina Tipi di pagina diversi richiedono scelte di design diverse. Puoi usare questi pattern come punto di partenza e adattarli con l'AI. Punta su una promessa chiara, una sola call to action principale e una forte gerarchia visiva. Consigli di design: * Usa un header semplice con navigazione minima. * Rendi la sezione hero chiara e focalizzata, con un titolo breve e un solo pulsante primario. * Usa sezioni di supporto per benefici, funzionalità e social proof. * Mantieni i form brevi e, quando possibile, visibili senza scorrere. Prompt di esempio: ```text theme={null} Progetta la homepage come una landing page focalizzata: - Sezione hero pulita con un titolo breve, una frase di supporto e una call to action primaria - A seguire tre benefici chiave in card - Aggiungi una semplice sezione di social proof con loghi - Mantieni la navigazione minima Usa il mio sistema esistente di colori e tipografia. ``` Le dashboard devono rispondere a colpo d'occhio alla domanda "come sto andando?". Consigli di design: * Metti la metrica o lo stato più importante in alto a sinistra. * Raggruppa le metriche correlate in card con titoli chiari e descrizioni brevi. * Evita troppi tipi di grafico in una schermata, riutilizza pochi grafici standard. * Mantieni filtri e intervalli temporali sempre visibili e coerenti. Prompt di esempio: ```text theme={null} Ristruttura questa dashboard: - Metti il KPI principale in alto a sinistra in una card ben visibile - Raggruppa le metriche correlate in una griglia 2x2 di card - Sposta filtri e controlli dell'intervallo di date in una barra superiore pulita - Riduci il rumore visivo nei grafici usando colori e stili coerenti ``` Elenchi e tabelle permettono di scorrere molti elementi e agire su di essi. Consigli di design: * Usa intestazioni di colonna chiare con spaziatura sufficiente. * Mantieni l'altezza delle righe comoda, non troppo compressa. * Usa righe alternate o separatori discreti per le tabelle grandi. * Tieni le azioni a fine riga o in un menu coerente. * Aggiungi stati vuoto, di caricamento e di errore. Prompt di esempio: ```text theme={null} Ripulisci questa vista tabella: - Aumenta leggermente l'altezza delle righe - Usa separatori di riga discreti o righe alternate - Allinea le azioni in una colonna coerente alla fine - Aggiungi uno stato vuoto chiaro con un messaggio breve e un'azione primaria ``` Le pagine di dettaglio devono rendere evidenti l'oggetto principale e le sue azioni chiave. Consigli di design: * Metti il titolo dell'oggetto e le azioni primarie in alto. * Usa un layout chiaro con una colonna principale e un pannello laterale opzionale. * Raggruppa le informazioni correlate con intestazioni o schede. * Mantieni le azioni distruttive visivamente distinte e posizionate con cura. Prompt di esempio: ```text theme={null} Migliora questa pagina di dettaglio: - Sposta il titolo principale e le azioni primarie in cima alla pagina - Usa un layout a due colonne con il contenuto principale a sinistra e le informazioni secondarie a destra - Raggruppa i campi correlati sotto piccole intestazioni - Rendi le azioni distruttive etichettate chiaramente e visivamente distinte ``` Nei form avvengono molti flussi chiave. Devono risultare semplici e tolleranti agli errori. Consigli di design: * Raggruppa i campi correlati sotto intestazioni. * Usa un layout a colonna singola per la maggior parte dei form. * Mostra i progressi nei flussi lunghi a più passaggi. * Metti i messaggi di errore vicino ai campi e rendili chiari. * Usa etichette chiare e testo di aiuto. Prompt di esempio: ```text theme={null} Riprogetta questo form per renderlo più chiaro: - Usa un layout a colonna singola - Raggruppa i campi correlati sotto intestazioni brevi - Aggiungi etichette chiare e testo di aiuto dove serve - Mostra messaggi di errore inline sotto ogni campo quando la validazione fallisce Usa il mio sistema esistente di tipografia e spaziatura. ``` *** ## Personalizzazione avanzata Quando vuoi andare oltre ciò che l'AI e la modalità **Edit** offrono di base, puoi portare il tuo codice e pacchetti npm. L'AI può comunque aiutarti a collegare e allineare tutto. Puoi usare i [pacchetti npm](/Building-your-app/NPM-packages) per portare nella tua app Base44 animazioni più ricche, effetti visivi e componenti interattivi senza costruire tutto da zero. I pacchetti provengono dal registro pubblico npm e si installano tramite la chat AI nell'editor della tua app, quindi resti nello stesso flusso di lavoro. **Esempi orientati al design:** * Librerie di animazione (per esempio anime.js) per aggiungere transizioni, effetti hover e micro interazioni. * Librerie di componenti UI o di motion per gestire modali, tooltip, caroselli o flussi a passaggi con pattern di interazione già pronti. * Utility per grafici per visualizzare i dati con colori, tipografia e spaziatura personalizzati in linea con la tua app. * Librerie di drag and drop o gesture per rendere i layout più tattili e interattivi. * Helper per date e orari per formattare timestamp e programmi in modo adatto alla tua UI. **Dopo l'installazione di un pacchetto, puoi usare la chat AI per:** * Importare le funzioni o i componenti giusti dal pacchetto. * Collegarli al layout e ai token di design esistenti (colori, tipografia, spaziatura, raggio). * Regolare props, varianti e motion perché risultino coerenti con il resto dell'app. * Verificare i dettagli di accessibilità come stati di focus, navigazione da tastiera e preferenze di riduzione del movimento. **Prompt di esempio** ```text theme={null} Ho aggiunto il pacchetto npm framer-motion. Rifattorizza la griglia di card esistente in modo che ogni card si animi al passaggio del mouse usando framer-motion: - Mantieni il layout e i testi attuali - Usa i token di colore, il raggio dei bordi e la tipografia esistenti - Rispetta prefers-reduced-motion e mantieni chiari i contorni di focus da tastiera ``` Tutti i pacchetti npm sono codice di terze parti. Base44 non può garantirne la qualità o la sicurezza, quindi assicurati di leggere il README del pacchetto, testarlo nella tua app e verificare che soddisfi i requisiti di design e prestazioni del tuo progetto. Le app Base44 usano spesso le utility di Tailwind CSS. L'AI può aiutarti a rifattorizzare stili disordinati in qualcosa di più sistematico. Attività che puoi chiedere all'AI: * Sostituire gli stili inline con utility Tailwind. * Estrarre i pattern ripetuti in componenti riutilizzabili. * Mappare i valori di colore su token di design e configurazione Tailwind. Esempio: ```text theme={null} Rifattorizza questi componenti per usare classi Tailwind coerenti: - Sostituisci gli attributi di stile inline con utility Tailwind - Usa i token di design per colori, spaziatura e tipografia - Documenta le principali combinazioni di classi per navigazione, card e pulsanti ``` A volte vuoi un controllo preciso su layout, animazioni o struttura dei componenti. Puoi [aprire i file di codice](/documentation/building-your-app/editing-code) direttamente e modificarli tu stesso o chiedere all'AI di farlo. Modifiche comuni legate al design: * Aggiornare `Layout.js` per cambiare wrapper globali, header o footer. * Regolare i theme provider o il context. * Cambiare come i componenti sono composti e quali props accettano. Per modificare il codice: 1. Apri il file rilevante. 2. Incolla uno snippet di codice nella chat AI. 3. Chiedi una modifica, poi rivedi il diff o l'anteprima. Esempio: ```text theme={null} Ecco il mio componente Layout.js. Modificalo in modo che: - L'header resti fisso durante lo scorrimento - Il contenuto principale abbia una larghezza massima e sia centrato sugli schermi grandi - Il colore di sfondo usi il token surface del mio sistema di design Spiega cosa hai cambiato nei commenti. ``` Le scelte di design influenzano le [prestazioni](/Performance-and-SEO/App-performance), soprattutto quando introduci pacchetti ed elementi visivi pesanti. Tieni presente: * Usa immagini di dimensioni ottimizzate invece di enormi risorse di sfondo. * Evita di caricare molte animazioni pesanti o librerie grandi al caricamento iniziale. * Carica in lazy loading le sezioni usate di rado, come report approfonditi o filtri avanzati. * Riutilizza componenti condivisi invece di molte copie quasi uguali. Puoi chiedere all'AI una revisione orientata alle prestazioni: ```text theme={null} Rivedi il design di questa app dal punto di vista delle prestazioni: - Identifica gli elementi visivi o di codice pesanti che potrebbero rallentare il caricamento - Suggerisci alternative più leggere che mantengano lo stesso aspetto generale - Proponi punti specifici dove lazy loading o code splitting sarebbero utili ``` *** ## Accessibilità L'accessibilità fa parte del buon design. Aiuta più persone a usare la tua app comodamente e può migliorare la chiarezza per tutti. Le scelte di colore hanno un impatto diretto sulla leggibilità. Buone pratiche: * Usa un contrasto forte tra testo e sfondo. * Evita di usare solo il colore per trasmettere un significato. * Mantieni gli elementi interattivi come pulsanti e link chiaramente visibili in tutti gli stati. * Controlla sia la modalità chiara sia quella scura se supporti i temi. Prompt di esempio: ```text theme={null} Verifica il contrasto dei colori di questa app: - Identifica testo o icone con basso contrasto rispetto allo sfondo - Rafforza il contrasto mantenendo la stessa palette generale - Assicurati che pulsanti primari e link siano chiaramente distinguibili Descrivi le principali correzioni applicate. ``` Un testo leggibile non dipende solo dalla scelta del font. Buone pratiche: * Usa dimensioni di font comode su tutti i dispositivi. * Usa un'interlinea sufficiente per i paragrafi. * Evita font molto sottili su sfondi chiari. * Mantieni una lunghezza di riga ragionevole, soprattutto sugli schermi larghi. Prompt di esempio: ```text theme={null} Migliora la leggibilità del testo: - Aumenta leggermente la dimensione base del font del corpo - Aumenta l'interlinea dei paragrafi - Assicurati che le intestazioni siano chiaramente più grandi del testo del corpo - Riduci le righe molto lunghe sugli schermi larghi ``` Le persone devono poter usare la tua app con la tastiera e capire dove si trovano. Buone pratiche: * Assicurati che Tab attraversi gli elementi interattivi in un ordine logico. * Verifica che gli stili di focus siano visibili e distinti. * Evita trappole di tastiera in cui il focus non può spostarsi. Prompt di esempio: ```text theme={null} Migliora l'accessibilità di tastiera e focus: - Assicurati che tutti gli elementi interattivi siano raggiungibili con Tab - Aggiungi stili di focus visibili a pulsanti, link e campi dei form - Correggi eventuali problemi di ordine del focus in questa pagina Descrivi le modifiche principali che hai fatto. ``` Il movimento può aiutare o disturbare. Alcune persone ne preferiscono meno. Buone pratiche: * Rispetta le preferenze di riduzione del movimento. * Evita lampeggi rapidi o sfarfallii forti. * Usa animazioni discrete e mirate invece di movimento continuo. Prompt di esempio: ```text theme={null} Regola le animazioni per l'accessibilità: - Rispetta la preferenza di riduzione del movimento dell'utente - Rimuovi o semplifica le grandi animazioni continue - Mantieni solo movimenti brevi e discreti che aiutano la comprensione ``` Un linguaggio chiaro e buone descrizioni aiutano tutti, incluse le persone che usano tecnologie assistive. Buone pratiche: * Usa etichette chiare e descrittive per pulsanti e link. * Fornisci testo alternativo significativo per le immagini importanti. * Usa le intestazioni per strutturare i contenuti. * Evita testi di link vaghi come "clicca qui". Prompt di esempio: ```text theme={null} Migliora l'accessibilità di etichette e testo alternativo: - Rendi più descrittive le etichette di pulsanti e link dove serve - Aggiungi o migliora il testo alternativo delle immagini importanti - Assicurati che le intestazioni seguano una struttura chiara Mantieni lo stesso tono e la stessa voce del brand. ``` *** ## Domande frequenti Clicca una domanda qui sotto per saperne di più su fondamenta di design e layout. Progetta separatamente per mobile, tablet e desktop, poi verifica come i layout si adattano. Usa queste linee guida quando progetti in Base44: * Mobile: usa una singola colonna verticale, mantieni una sola azione primaria chiara per schermata e rendi i punti di tocco grandi e ben distanziati. Tieni i testi brevi così le persone non devono zoomare. * Tablet: tratta il tablet come un ibrido. Puoi usare menu laterali o layout divisi, ma mantieni i pulsanti adatti al tocco ed evita tabelle molto piccole o controlli densi. * Desktop: sfrutta la larghezza extra per layout multi colonna e sidebar. Puoi aggiungere effetti hover, ma ogni azione importante deve funzionare anche con clic o tocco. * Tutti i dispositivi: usa dimensioni di font leggibili, evita lo scorrimento orizzontale e lascia che gli elementi si impilino invece di sovrapporsi quando lo spazio è poco. Evita altezze fisse che tagliano i contenuti. Puoi anche chiedere all'AI di applicare regole responsive, per esempio: ```text theme={null} Rendi questo layout responsive per mobile, tablet e desktop. Evita lo scorrimento orizzontale e mantieni le azioni primarie visibili senza scorrimenti eccessivi. ``` Le scelte di design hanno un impatto diretto sulla velocità di caricamento e sulla reattività dell'app. Quando progetti in Base44, tieni presenti queste linee guida: * Usa immagini di dimensioni ottimizzate così le risorse pesanti non rallentano il caricamento iniziale. Preferisci formati compressi ed evita di caricare immagini molto più grandi di come appaiono sullo schermo. * Limita le animazioni pesanti e gli effetti complessi, soprattutto nelle app usate molto da mobile. Le transizioni brevi e semplici vanno bene, ma evita il movimento continuo o grandi sfondi animati. * Mantieni i layout puliti e focalizzati. Meno livelli, overlay e componenti annidati significano in genere un rendering più veloce, soprattutto sui dispositivi meno potenti. * Riutilizza i componenti invece di crearne molte versioni leggermente diverse. I componenti condivisi sono più facili da mettere in cache e mantenere. * Evita di caricare tutto in una volta. Dove possibile, carica più tardi i contenuti non critici, per esempio sezioni secondarie, elenchi lunghi o pannelli usati di rado. * Fai attenzione agli embed di terze parti come mappe, player video e widget. Includili solo dove aggiungono valore reale ed evita di accumulare molti embed in una sola schermata. Questa pagina è stata tradotta con l'AI. Per le informazioni più accurate e aggiornate, consulta la [versione inglese](/).