Formato, Stile e Colore Generali

Una volta che gli elementi di design – stencil, template, immagini e icone – vengono aggiunti alla pagina, vengono chiamati Oggetti.

Tutti gli oggetti – Stencil, Icone e Immagini – possono essere stilizzati e personalizzati nel Pannello Formato – e condividono molti degli stessi controlli di formattazione.

Le immagini hanno anche strumenti di modifica aggiuntivi come il ritaglio, la rimozione dello sfondo e il patching che puoi leggere in Formatta, Modifica e Sostituisci Immagini.

In questo articolo, ti presenteremo il Pannello Formato e ti mostreremo come personalizzare gli stencil usando i controlli di formattazione generale che si applicano a tutti gli oggetti. Ti mostreremo anche come salvare uno stile personalizzato per uno stencil particolare.

Alcuni stencil hanno i propri controlli di formattazione aggiuntivi specifici per il loro utilizzo: Note & Annotazioni, Forme Smart, Grafici, Tabelle e tutti gli stencil Diagrammi e Testo. Tratteremo ciascuno di questi casi specifici negli articoli successivi di questa sezione.

Pannello Formato

Vai alla Barra Laterale Destra e clicca sulla Scheda Formato. La scheda diventerà blu e aprirà il Pannello Formato. Il Pannello Formato si apre anche automaticamente quando fai doppio clic su qualsiasi stencil non testuale (mentre il doppio clic su uno stencil testuale aprirà la Finestra Quick-Format Testo).

Il Pannello Formato è diviso in Sezioni con controlli di formattazione specifici. Le sezioni sono comprimibili, quindi cliccando sul nome di una sezione la si nasconde o rivela.

Il pannello mostrerà sempre le sezioni predefinite comuni a tutti gli stencil: Dimensione & Posizione, Riempimenti & Tratti, Opacità, Ombra Esterna e Sfocatura.

Se uno stencil viene fornito con capacità di stilizzazione aggiuntive specifiche per il suo utilizzo, il pannello mostrerà una sezione dedicata con quelle opzioni. Tratteremo ciascuno di questi casi negli articoli seguenti.

Seleziona, ridimensiona, posiziona, ruota e ribalta

Quando selezioni un singolo oggetto, il nome dell'oggetto viene visualizzato in cima al pannello, appena sopra le sue coordinate. Questo rende facile localizzare e identificare quell'oggetto nel Pannello Struttura.

Quando selezioni più oggetti, il pannello visualizza il numero di oggetti in quel gruppo, per aiutarti a confermare la tua selezione prima di applicare modifiche di stile o trasformazioni.

I controlli di Dimensione, Posizione, Rotazione e Ribaltamento sono raggruppati insieme sotto le coordinate, e ciascuna di queste azioni può essere eseguita sia nel pannello che sulla pagina.

Dimensione

Sulla pagina, usa le maniglie di ridimensionamento per modificare le dimensioni dell'oggetto.

Nel Pannello Formato, usa gli input Larghezza & Altezza per valori precisi e regolazioni fini, e usa i tasti freccia sulla tastiera per modificare questi valori in modo incrementale.

Blocca le proporzioni di un oggetto con il pulsante Blocca Proporzioni. Dopo che un oggetto è bloccato, dovrai sbloccare le proporzioni se vuoi ridimensionarlo sull'asse orizzontale o verticale.

Posizione

Sulla pagina, seleziona un oggetto e trascinalo nella posizione desiderata.

Nel Pannello Formato, imposta la posizione dell'oggetto inserendo le coordinate esatte nei campi di input. La posizione dell'oggetto viene misurata in pixel di distanza sia dal margine sinistro che da quello superiore. Puoi usare i tasti freccia della tastiera per modificare questi valori in modo incrementale.

Ruota

Sulla pagina, clicca sulla maniglia di rotazione in cima all'oggetto e trascina per ruotare.

Nel Pannello Formato, inserisci il valore in gradi nel Campo Input Rotazione. Puoi modificare il valore usando i tasti freccia della tastiera.

Fare doppio clic sulla maniglia di Rotazione reimposta rapidamente l'Angolo di Rotazione a '0'.

Ribalta

Puoi ribaltare un oggetto sia orizzontalmente che verticalmente.

Sulla pagina, seleziona una Maniglia di Ridimensionamento e trascinala attraverso la linea centrale dell'oggetto per ridimensionare e ribaltare simultaneamente.

Nel Pannello Formato, i Pulsanti di Ribaltamento verticale e orizzontale ribaltano l'oggetto mantenendo le sue dimensioni e proporzioni.

Trasformazione Multipla

Il nostro strumento di Trasformazione Multipla ti consente di formattare più oggetti simultaneamente. Questa funzione è abilitata per impostazione predefinita e basata sull'utente (ovvero, quando la abiliti o disabiliti, quella preferenza viene applicata a tutti i tuoi progetti).

Una volta selezionati gli oggetti che vuoi trasformare, puoi applicare le stesse dimensioni (larghezza e/o altezza) o le stesse coordinate X o Y. Puoi anche ruotarli o ribaltatrli in massa, orizzontalmente o verticalmente.

Questo aiuta a mantenere tutto in ordine, sia che tu stia lavorando su wireframe, diagrammi o lavagne. Dimensioni e posizionamento coerenti rendono qualsiasi layout più facile da leggere a colpo d'occhio.

Per usare lo strumento Trasformazione Multipla:

1. Controlla il Pannello Formato e assicurati che il pulsante Trasformazione Multipla sia abilitato.
2. Seleziona più oggetti trascinando il mouse sugli elementi o usando Shift + Clic per selezionarli individualmente
3. Inserisci le nuove dimensioni negli input Larghezza/Altezza, o le nuove coordinate negli input X/Y.
4. Se vuoi disabilitare la funzione di trasformazione multipla, clicca di nuovo sul pulsante.

Puoi anche applicare la dimensione o le coordinate di un oggetto al resto degli oggetti nella selezione:

1. Clicca su qualsiasi oggetto all'interno di una selezione per designarlo come oggetto di riferimento.
2. L'oggetto di riferimento sarà evidenziato con un bordo blu spesso.
3. Le dimensioni e le coordinate dell'oggetto di riferimento saranno visualizzate in grigio chiaro negli input.
4. Per applicare uno qualsiasi di quei valori a ogni oggetto nella selezione, digita semplicemente quei numeri di input esatti sopra quelli grigi e premi il tasto Invio/Return.

Riempimenti e tratti di colore, e sfumature

Puoi applicare modifiche di colore ai Riempimenti e Tratti degli oggetti usando il Selettore Colore nella sezione Riempimenti & Tratti del Pannello Formato. Man mano che aggiungi colori, l'elenco Colori Progetto in fondo al selettore aggregherà quelle campiture.

Riempimenti

Per riempire un oggetto con un colore, vai alla sezione Riempimenti & Tratti e clicca su Colore Riempimento per aprire il Popover Selettore Colore.

L'Input Colore accetta i seguenti formati di colore: HEX a 8, 6 e 3 cifre, RGB, RGBA, HSL, HSLA, LAB, LCH, oltre ai colori HTML nominati (es. red, green, blue, tomato, ecc.).

• Seleziona la Scheda Campiture per scegliere una combinazione di colori da Moqups Classic, Material Design, Bootstrap, iOS, HTML, TailwindCSS o IBM Carbon Design. Questa scheda mostra anche i colori che hai già usato nel tuo progetto.

  oppure

• Seleziona la Scheda Selettore per creare i tuoi colori personalizzati.

In entrambe le schede, puoi…

1. Inserire un codice in formato colore
2. Regolare l'opacità del colore di riempimento
3. Usare il contagocce per abbinare un colore; per attivare il contagocce, usa la nostra estensione per Chrome o Firefox.

Tratti

Il Tratto si riferisce alla linea dell'oggetto stesso.

Per regolare il colore del tratto, vai al Pannello Formato e nella sezione Riempimenti & Tratti, clicca su Colore Tratto. Qui puoi anche impostare l'opacità del tratto.

Sotto le impostazioni del colore, puoi scegliere la Larghezza Tratto e impostare lo Stile Tratto su Solido, Puntato o Tratteggiato.

Sfumature

Le Sfumature creano transizioni di colore graduali tra due o più colori. Possono essere applicate sia ai Riempimenti che ai Tratti.

Per applicare una sfumatura…

1. Clicca su Colore Riempimento o Colore Tratto
2. In cima al Popover Selettore Colore, puoi scegliere tra tre Tipi di Riempimento: Solido, Sfumatura lineare e Sfumatura radiale.
3. Per le sfumature, seleziona la sfumatura Lineare o Radiale.
4. Il Cursore Sfumatura ha due Fermate predefinite che possono essere spostate avanti e indietro per regolare il punto di inizio e fine della sfumatura.
5. Clicca su una Fermata per applicare un colore dal Campo Colore. La Fermata rimarrà blu mentre è attiva. Puoi apportare ulteriori regolazioni del colore di seguito usando i cursori Tonalità o Opacità, o selezionando da una gamma di campiture derivate dal colore attualmente attivo.
6. Per aggiungere altre fermate, passa il mouse in qualsiasi punto del Cursore Sfumatura fino a vedere l'icona '+'; clicca sul cursore per aggiungere una nuova fermata.
7. Per rimuovere una fermata, trascinala verso il basso fino a quando non scompare.
8. Usa l'icona Ribalta a destra del Cursore Sfumatura per invertire l'ordine dei colori.

I controlli nell'angolo in alto a sinistra ti consentono di regolare l'Angolo della sfumatura (per Lineare) o il Centro (per Radiale). Per una maggiore precisione, puoi impostare l'Angolo Lineare in gradi, o il Centro Radiale tramite coordinate X/Y nei campi di input corrispondenti.

La sfumatura Radiale ha anche un'opzione Stretching che espande la sfumatura Radiale ai margini dell'oggetto.

Sostituisci colori

Questa funzione rende possibile aggiornare rapidamente la combinazione di colori mentre si passa da wireframe lo-fi a mockup hi-fi – e infine a design e prototipi rifiniti.

Puoi scegliere di sostituire un colore in un Intero Progetto, sulla Pagina Corrente o all'interno di una Selezione specifica di oggetti.

Per sostituire un colore nell'Intero Progetto o sulla tua Pagina Corrente:

1. Deseleziona tutti gli oggetti sulla pagina

2. Espandi la sezione Sostituisci Colori nel Pannello Formato

3. Seleziona Pagina Corrente o Intero Progetto

4. Spunta le caselle per scegliere Riempimenti, Tratti o Colore Testo

5. Clicca sul colore del progetto che vuoi sostituire

6. Seleziona il colore sostitutivo da

   • Colori progetto
   • Campiture
   • Selettore
   • Inserendo un codice hex

Per sostituire un colore all'interno di una Selezione di oggetti:

1. Seleziona uno o più oggetti

2. Espandi la sezione Sostituisci Colori nel Pannello Formato

3. Seleziona Pagina Corrente o Intero Progetto

4. Spunta le caselle per scegliere Riempimenti, Tratti o Colore Testo

5. Clicca sul colore del progetto che vuoi sostituire

6. Seleziona il colore sostitutivo da

   • Colori progetto
   • Campiture
   • Selettore
   • Inserendo un codice hex

Opacità, ombra e sfocatura

Opacità

Il cursore Opacità regola l'Opacità globale di un intero oggetto o gruppo di oggetti. Se vuoi personalizzare l'opacità in modo più preciso, puoi anche regolare l'opacità del Tratto (vedi sopra), insieme all'Opacità globale, per un risultato visivo combinato.

Ombra

Per aggiungere un'Ombra a un oggetto, vai al Pannello Formato e apri la sezione Ombra Esterna.

Abilita l'ombra per impostare il colore, l'opacità, l'angolo, la distanza e la dimensione dell'ombra.

Sfocatura

Per aggiungere una Sfocatura a un oggetto, vai al Pannello Formato, apri la sezione Sfocatura e abilita il cursore Sfocatura. La funzione Sfocatura è particolarmente utile quando si realizza il mockup di una finestra popover o modale.

Angoli arrotondati

Puoi arrotondare gli angoli di un oggetto sia dal Pannello Formato, nella sezione Angoli Arrotondati, sia direttamente sulla pagina, usando le maniglie personalizzate dell'oggetto.

Per arrotondare gli angoli dal Pannello Formato:

• Usa la sezione Angoli Arrotondati e inserisci i valori negli input. Per impostazione predefinita, i quattro campi di input sono sincronizzati. Inserendo un valore in un input, quel valore verrà propagato agli altri angoli.
• Per inserire valori diversi per ogni angolo, deseleziona l'icona Sincronizza tutti gli angoli situata tra i quattro input.
• Abilita Scala Raggio se vuoi che gli angoli arrotondati scalino proporzionalmente quando ridimensioni un oggetto.

Per arrotondare gli angoli direttamente sulla Pagina:

• Per arrotondare tutti gli angoli simultaneamente, trascina una qualsiasi delle maniglie personalizzate azzurre verso il centro dell'oggetto.
• Per arrotondare un angolo specifico (solo stencil Rettangolo) tieni premuto Option/Alt e trascina la maniglia pertinente verso il centro.

Copia e Incolla Stili

Una volta personalizzato un oggetto, puoi applicare quella personalizzazione a un altro oggetto o gruppo di oggetti.

Per copiare e incollare stili:

1. Seleziona l'oggetto da cui vuoi copiare gli stili
2. Fai clic destro e scegli Copia Stili o premi Alt/Option + C
3. Seleziona l'oggetto dove vuoi applicare quegli stili
4. Fai clic destro e scegli Incolla Stili o premi Alt/Option + V

Copia Proprietà

Se vuoi copiare aspetti specifici della formattazione di un oggetto, puoi usare lo strumento Copia proprietà.

Per ciascuna delle sezioni di stilizzazione all'interno del Pannello Formato, troverai un pulsante nell'angolo in alto a destra che copia le impostazioni per quella particolare opzione di formattazione (es. Testo, Opacità, Padding, Ombra Esterna, ecc.).

Per copiare le proprietà di un oggetto:

1. Seleziona l'oggetto da cui vuoi copiare le sue proprietà
2. Apri il Pannello Formato e trova la sezione di formattazione che vuoi copiare
3. Clicca sul pulsante Copia proprietà
4. Seleziona l'oggetto dove vuoi applicare quegli stili
5. Fai clic destro e scegli Incolla Stili o premi Alt/Option + V

Salva stili personalizzati per gli stencil

Quando salvi uno stile personalizzato per uno stencil, ogni volta che aggiungi un particolare tipo di stencil alla pagina, quell'oggetto adotterà il tuo stile personalizzato.

Per salvare uno stile personalizzato per un tipo di stencil:

1. Stilizza un oggetto stencil sulla pagina usando il Pannello Formato
2. Seleziona quell'oggetto
3. Fai clic destro per aprire il Menu Contestuale
4. Scegli Salva stile personalizzato per quel tipo di stencil
5. Tutti gli oggetti successivi di quel tipo rifletteranno ora quello stile

Per rimuovere uno stile personalizzato da un tipo di stencil:

1. Seleziona l'oggetto stencil sulla pagina
2. Fai clic destro per aprire il Menu Contestuale
3. Scegli Cancella stile personalizzato per quel tipo di stencil

Per rimuovere gli stili personalizzati da tutti i tuoi tipi di stencil:

1. Seleziona l'oggetto stencil sulla pagina
2. Fai clic destro per aprire il Menu Contestuale
3. Scegli Cancella tutti gli stili salvati

Domande e risposte

Come posso vedere esempi di stencil che sono già stati formattati – sia su una pagina che all'interno di un progetto?

Il nostro sito web ha un'intera sezione dedicata ai Template già pronti. Lì troverai esempi e casi d'uso progettati professionalmente in quattro categorie: Wireframe e Mockup, Mapping e Diagrammi, Grafici, Diagrammi e Infografiche e Pianificazione & Ideazione. Cliccando su uno qualsiasi di questi template li aprirà nell'app Moqups e ti permetterà di sperimentare, personalizzare e salvarli.