Temi, Righelli, Guide e Griglie

Nell'Introduzione allo Spazio di Lavoro, abbiamo fornito una panoramica del pulsante Impostazioni e delle opzioni disponibili.

Questo articolo spiega come cambiare il tema visivo dell'editor. Ti mostreremo anche come utilizzare i nostri righelli, guide, griglie, aggancio e funzioni di misurazione per velocizzare il tuo flusso di lavoro mentre posizioni gli oggetti sulla pagina.

Spiegheremo come mostrare o nascondere tutte queste opzioni – e i nostri Hotspot, i controlli Zoom e gli strumenti di Collaborazione in Tempo Reale.

Il prossimo articolo, Impostazioni Avanzate, tratta controlli più dettagliati che influenzano ciò che l'Editor visualizza e come il cursore interagisce con gli oggetti sulla pagina.

Temi

Puoi cambiare l'aspetto dell'editor modificandone il tema. L'impostazione predefinita è la modalità Chiaro, ma puoi facilmente passare alle modalità Scuro, Classico, Neutro o Mezzanotte. Puoi anche scegliere l'opzione Abbina sistema se vuoi che Moqups rispecchi le impostazioni del tuo browser.

Per cambiare il tema dell'editor:

1. Fai clic sul pulsante Impostazioni verso il basso della Barra Laterale Sinistra.
2. Passa il mouse sull'opzione Tema e seleziona tra le opzioni Chiaro, Scuro, Classico, Neutro, Mezzanotte o Abbina sistema.

Righelli della pagina

I Righelli della pagina appaiono lungo i margini sinistro e superiore del canvas, e sono calibrati in pixel.

I righelli sono abilitati per impostazione predefinita e devono essere visualizzati se vuoi aggiungere Guide personalizzate alla tua pagina.

Per mostrare o nascondere i righelli:

1. Fai clic sul pulsante Impostazioni verso il basso della Barra Laterale Sinistra.
2. Seleziona o deseleziona l'opzione Mostra il righello dal menu a discesa.

Guide personalizzate

L'aggiunta di Guide personalizzate alla pagina può aiutare il tuo team con il posizionamento relativo di oggetti o gruppi di oggetti.

Le guide sono visibili, come sottili linee blu, solo nella modalità Modifica, dove fungono da strumenti temporanei di layout e allineamento. Non saranno visibili quando esegui l'Anteprima o l'Esportazione della tua pagina.

Quando scegli di mostrare, nascondere o cancellare le guide, lo fai per tutti i collaboratori con diritti di modifica.

Prima di aggiungere guide personalizzate, devi assicurarti che l'opzione Mostra il righello dal menu Impostazioni sia selezionata e che i righelli siano visibili lungo i margini del canvas.

Aggiungi guide

Per aggiungere una guida orizzontale o verticale:

Fai clic su qualsiasi punto lungo il righello

oppure

Fai clic e trascina dal righello verso la pagina

Mostra o nascondi le guide

Nel menu a discesa Impostazioni, l'opzione Mostra le guide personalizzate è selezionata per impostazione predefinita. Quando deselezionata, verrà automaticamente riabilitata se fai clic su qualsiasi punto lungo i righelli.

Per mostrare o nascondere le guide:

1. Fai clic sul pulsante Impostazioni verso il basso della Barra Laterale Sinistra.
2. Seleziona o deseleziona l'opzione Mostra le guide personalizzate dal menu a discesa.
3. La tua scelta si applicherà al progetto nel suo insieme.

Regola o rimuovi le guide singole

Per regolare le guide singole, passa il mouse sopra la linea blu finché non vedi lo strumento di regolazione, quindi fai clic e trascina la guida per spostarla.

Per rimuovere le guide singole da una pagina, passa il mouse sopra la linea blu finché non vedi lo strumento di regolazione, quindi fai clic e trascina la guida fuori dal canvas e oltre il righello.

Cancella tutte le guide

Per rimuovere definitivamente tutte le guide da una pagina selezionata:

1. Fai clic sul pulsante Impostazioni verso il basso della Barra Laterale Sinistra.
2. Seleziona l'opzione Rimuovi guide… dal menu a discesa.
3. Fai clic su OK per confermare.

Griglie della pagina

Le griglie possono accelerare il tuo flusso di lavoro stabilendo strutture chiare e gerarchie visive per i design del tuo team. Questo elimina le congetture – e mantiene il tuo team coerente – mentre dimensiona, posiziona e distanzia gli elementi su una varietà di pagine, piattaforme e mockup di dispositivi.

Moqups ha due configurazioni di griglia, la Griglia documento e la Griglia a colonne, e possono essere utilizzate separatamente o in combinazione.

Le guide sono visibili solo nella modalità Modifica, dove fungono da strumenti temporanei di layout e allineamento. Non saranno visibili quando esegui l'Anteprima o l'Esportazione della tua pagina.

Mostra e nascondi le griglie

Le Griglie sono disabilitate per impostazione predefinita. Prima di regolare le loro impostazioni, dovrai renderle visibili.

Per mostrare o nascondere le griglie:

1. Fai clic sul pulsante Impostazioni verso il basso della Barra Laterale Sinistra.
2. Seleziona o deseleziona le opzioni Mostra griglia documento e/o Mostra griglia a colonne.
3. La tua scelta si applicherà al progetto nel suo insieme.

Griglia documento

La Griglia documento assomiglia alla carta millimetrata tradizionale ed è composta da quadrati o rettangoli suddivisi e regolabili.

Per regolare le Impostazioni griglia documento:

1. Fai clic sul pulsante Impostazioni verso il basso della Barra Laterale Sinistra.
2. Assicurati di avere già selezionato Mostra griglia documento.
3. Seleziona l'opzione Impostazioni griglia documento.
4. Dalla finestra pop-up Impostazioni griglia documento, regola la larghezza e l'altezza dei blocchi componenti della griglia.
5. Seleziona la casella Disegna la griglia documento sopra gli oggetti se vuoi che la griglia si sovrapponga al tuo design.
6. Fai clic su Applica.

Griglia a colonne

La Griglia a colonne segue i protocolli stabiliti per la prima volta nei media a stampa, che impostano margini, colonne e margini interni per le tue pagine. Insieme, possono fornire l'impalcatura sottostante per la struttura della tua pagina e determinare la quantità di spazio "bianco" o "negativo" tra i tuoi blocchi di contenuto.

Le Impostazioni griglia a colonne ti consentono di inserire valori e regolare questi elementi come segue:

• Predefiniti griglia: Scegli tra valori espressi come dimensioni in pixel Fisse, o come percentuali Responsive della pagina.
• Colonne: Imposta il numero totale di colonne.
• Larghezza colonna: Imposta la larghezza di tutte le colonne.
• Margine interno: Imposta lo spazio tra le colonne.
• Margini Sinistra/Destra: Imposta lo spazio tra le colonne più esterne e il bordo della pagina.

Per regolare le Impostazioni griglia a colonne:

1. Fai clic sul pulsante Impostazioni verso il basso della Barra Laterale Sinistra.
2. Assicurati di avere già selezionato Mostra griglia a colonne.
3. Seleziona l'opzione Impostazioni griglia a colonne per aprire la finestra pop-up Impostazioni griglia a colonne.
4. Imposta i Predefiniti griglia e inserisci i valori per personalizzare la tua griglia.
5. Seleziona la casella Disegna la griglia a colonne sopra gli oggetti se vuoi che la griglia si sovrapponga al tuo design.

Aggancio e misurazione

Lo Spazio di Lavoro offre una serie di strumenti di aggancio e misurazione per rendere il tuo flusso di lavoro più veloce e preciso:

Aggancio

Tutte e tre le opzioni di aggancio (descritte di seguito) sono abilitate per impostazione predefinita, ma puoi disattivarle, individualmente, nel menu a discesa Impostazioni. Gli oggetti si agganceranno al loro obiettivo quando si trovano entro 3 pixel.

Griglie & guide di aggancio:

Gli oggetti si agganceranno automaticamente alle guide personalizzate o alle linee delle griglie come le hai impostate:

Salta a pagina:

Gli oggetti si agganceranno automaticamente ai bordi verticali e orizzontali della pagina. Si agganceranno anche al centro della pagina sia dai bordi che dal centro:

Aggancia agli altri elementi:

Gli oggetti si agganceranno automaticamente per allinearsi sia al centro che ai bordi di altri oggetti sulla pagina:

Aggancio a distanza

L'Aggancio a distanza ti permette di distanziare rapidamente più oggetti in modo equidistante. Se hai tre o più oggetti sulla pagina e ne allinei due, l'Aggancio a distanza si attiverà per aiutarti ad allineare gli altri.

Per abilitare o disabilitare l'aggancio a distanza:

1. Fai clic sul pulsante Impostazioni verso il basso della Barra Laterale Sinistra.
2. Seleziona l'opzione Impostazioni avanzate per aprire il pop-up Impostazioni Avanzate.
3. Fai clic sulla casella Permetti l'aggancio a distanza.

Misurazione

Quando sposti gli oggetti sulla pagina, i nostri strumenti di misurazione possono aiutarti a posizionare con precisione quegli elementi. Ecco come trovarli e una breve descrizione di come funzionano:

Per selezionarne uno, fai clic sull'opzione Impostazioni Avanzate nel menu a discesa Impostazioni per aprire il pop-up Impostazioni Avanzate. Una volta cliccate le caselle appropriate, fai clic su Fatto.

Mostra suggerimento coordinate:

Un tooltip discreto visualizza le coordinate di un oggetto selezionato mentre lo sposti sulla pagina e nel canvas.

Mostra le annotazioni sulle guide di aggancio:

Mentre sposti un oggetto sulla pagina, questa opzione mostra la distanza dell'oggetto, in pixel, dagli altri elementi vicini.

Mostra le guide mentre tieni premuto il tasto ALT:

Tieni premuto il tasto Alt/Option per visualizzare linee guida rosa che mostrano la distanza di un oggetto selezionato da tutti e quattro i margini della pagina.

E, se devi misurare la distanza manualmente, non dimenticare il nostro pratico stencil Specifiche Distanza. Prendilo dalla categoria Strumenti Spec del Pannello Stencil quando ne hai bisogno, o lasciamone uno appena fuori dal bordo della pagina, nel canvas, per un accesso rapido e comodo:

Mostra e nascondi gli hotspot

Il menu a discesa dello Spazio di Lavoro ti consente di mostrare o nascondere tutti gli Hotspot che hai aggiunto a un progetto mentre costruisci il tuo prototipo. Puoi farlo anche direttamente dal pannello Interazioni.

Dimensione

Per mostrare o nascondere gli Hotspot:

1. Fai clic sul pulsante Impostazioni verso il basso della Barra Laterale Sinistra.
2. Seleziona o deseleziona l'opzione Mostra hotspot.

Mostra e nascondi gli indicatori di interazione

Mostra indicatori di interazione aggiunge un badge luminoso agli oggetti con interazioni – sulla pagina e nel Pannello Schema – mentre sei in modalità Modifica. Puoi anche selezionare o deselezionare questa opzione direttamente dal pannello Interazioni.

Per mostrare o nascondere gli Indicatori di Interazione:

1. Fai clic sul pulsante Impostazioni verso il basso della Barra Laterale Sinistra.
2. Seleziona o deseleziona l'opzione Mostra indicatori di interazione.

Mostra e nascondi gli strumenti di Collaborazione in Tempo Reale

Moqups ha strumenti di Collaborazione in Tempo Reale per aiutare i tuoi team remoti e distribuiti a lavorare insieme in tempo reale.

• Presenza in Tempo Reale ti consente di vedere chi sta collaborando attivamente su un progetto.
• Chat in Tempo Reale aiuta il tuo team a condividere idee e chiarire questioni.
• Selezione in Tempo Reale ti consente di spostarti direttamente dove stanno lavorando i tuoi colleghi.
• Cursori in Tempo Reale visualizza il cursore di un collega mentre modifica.

Per mostrare o nascondere i cursori, le selezioni o la presenza e la chat dei collaboratori:

1. Fai clic sul pulsante Workspace verso il basso della Barra Laterale Sinistra.
2. Seleziona o deseleziona le opzioni dei collaboratori in tempo reale.

Domande e risposte

Posso bloccare le guide personalizzate come posso bloccare gli oggetti?

No, le guide non possono essere bloccate.

Nascondere le griglie migliorerà le prestazioni?

Gli utenti Chrome con pagine di oltre 10.000 pixel potrebbero riscontrare alcuni rallentamenti se hanno visualizzata la Griglia a colonne. In questo caso, deseleziona semplicemente l'opzione Mostra griglia a colonne.