Un design ordinato sembra più professionale e ispira più fiducia ai clienti. Questa guida ti mostra come allineare gli elementi, distanziarli in modo uniforme, sistemare una riga o una colonna e capovolgere un singolo elemento nel Design Studio. È per chi costruisce o modifica un modello di prodotto e vuole un posizionamento pulito e deliberato invece di andare a occhio.
Allineare gli elementi
L’allineamento mette due o più elementi lungo un bordo o un centro comune. Scegli una di sei opzioni: allinea a sinistra, centra orizzontalmente, allinea a destra, allinea in alto, centra verticalmente o allinea in basso.
I controlli di allineamento si raggiungono in tre punti: il pannello Proprietà nella barra laterale, il menu a tendina Allinea nella barra degli strumenti mobile sopra il canvas e il menu del clic destro sul canvas. Fanno tutti la stessa cosa, quindi usa quello più vicino.
Seleziona due o più elementi
Fai clic sul primo elemento. Poi fai clic con Maiusc premuto su ciascuno degli altri che vuoi includere. Puoi anche trascinare un riquadro di selezione sul canvas per prenderne diversi insieme. L’allineamento richiede almeno due elementi selezionati.
Apri i controlli di allineamento
Quando sono selezionati due o più elementi, i controlli di allineamento compaiono nel pannello Proprietà. Si trovano anche nel menu a tendina Allinea della barra degli strumenti mobile e nel menu del clic destro sul canvas.
Scegli un bordo o un centro
Scegli allinea a sinistra, a destra, in alto o in basso per agganciare gli elementi a quel bordo comune. Scegli centra orizzontalmente o centra verticalmente per allinearli su un centro comune. Gli elementi si spostano subito al loro posto.
Distribuire e riordinare
Distribuire sparge gli elementi in modo che gli spazi tra loro siano uniformi. È utile quando hai collocato diversi elementi più o meno e vuoi una spaziatura pulita e uguale.
Ci sono due modi per distribuire:
- Uniforma gli spazi. Richiede tre o più elementi. Mantiene fermi i due più esterni e distanzia tutto ciò che sta in mezzo in modo che ogni spazio sia identico. Nel menu del clic destro sono Distribuisci orizzontalmente e Distribuisci verticalmente.
- Imposta una spaziatura esatta. Fai clic sulla freccetta accanto a un pulsante di distribuzione per aprire il popover della spaziatura personalizzata. Digita uno spazio in pixel e gli elementi si allineano con esattamente quella distanza tra loro. Funziona con due o più elementi, quindi puoi usarlo anche quando uniformare non è disponibile.
Distribuisci in modo uniforme
Seleziona tre o più elementi, poi scegli distribuisci orizzontalmente o verticalmente. Gli spazi tra loro diventano uguali.
Oppure imposta uno spazio personalizzato
Fai clic sulla freccetta accanto a un pulsante di distribuzione. Inserisci la spaziatura esatta in pixel che vuoi e gli elementi si distanziano di conseguenza.
Riordina una riga o una colonna
Seleziona gli elementi e scegli Riordina. Composerie legge la selezione come una riga o una colonna, uniforma gli spazi lungo quell’asse principale e centra gli elementi sull’altro asse. È un modo con un solo clic per sistemare una fila di elementi.
Per ricentrare l’intera selezione sul canvas, usa Centra nella pagina dal menu del clic destro. Centra la selezione sulla tavola da disegno senza cambiare la spaziatura al suo interno.
Guide di aggancio e capovolgimento
Mentre trascini un elemento sul canvas, Composerie mostra delle guide per aiutarti a posizionarlo. Non devi cliccare niente. Le guide compaiono da sole mentre ti muovi.
Vedrai tre tipi di guida:
- Le guide viola dei bordi compaiono quando un bordo o un centro si allinea con un altro elemento. Rilascia mentre la guida è visibile e l’elemento si aggancia all’allineamento.
- Le guide tratteggiate di spaziatura con un badge in pixel mostrano la distanza tra gli elementi, così puoi far combaciare gli spazi a occhio.
- Le guide della linea di base aiutano ad allineare il testo lungo la sua linea di base tipografica.
Per capovolgere un singolo elemento, fai clic destro su di esso nel canvas e scegli Capovolgi orizzontalmente o Capovolgi verticalmente. Specchia l’elemento sul posto. Il capovolgimento è disponibile per un singolo elemento che non sia testo, come un’immagine o una forma. Non compare per il testo né quando è selezionato più di un elemento.
Domande frequenti
Perché i controlli di allineamento non compaiono?
L'allineamento richiede due o più elementi. Seleziona un secondo elemento con Maiusc premuto e i controlli compaiono.
Perché la distribuzione è disattivata?
La distribuzione che uniforma gli spazi richiede tre o più elementi. Con due selezionati, usa invece la freccetta per impostare una spaziatura esatta.
Dov'è finita l'opzione di capovolgimento?
Il capovolgimento compare solo per un singolo elemento che non sia testo. È nascosto per il testo e per le selezioni di più elementi.
Allineamento e distribuzione cambiano il design di un cliente?
No. Questi strumenti dispongono gli elementi nel tuo modello. Non bloccano nulla per i clienti. Il comportamento modificabile dal cliente si imposta a parte.
Prossimi passi
Quando gli elementi stanno dove vuoi, organizzali e riordinali con il pannello dei livelli.