Raggruppa e Organizza Stencil

Raggruppando singoli stencil insieme, puoi velocizzare e semplificare il tuo flusso di lavoro. Gli elementi raggruppati – o Stencil Composti – possono essere spostati, regolati, stilizzati e duplicati come un'unità singola.

Man mano che aggiungi e raggruppi nuovi stencil, la tua pagina diventerà un intricato mosaico di oggetti: stencil, stencil composti, immagini e icone. Per perfezionare e modificare il tuo design in modo efficace, dovrai identificare e localizzare sia i singoli oggetti sia gli oggetti annidati in profondità all'interno di gruppi più grandi.

Puoi farlo rapidamente e facilmente. Tutti gli oggetti vengono evidenziati quando ci passi sopra con il mouse sulla pagina; vengono evidenziati anche quando ci passi sopra con il mouse sul loro nome nel Pannello Struttura. Questo rende facile la selezione di oggetti sottili o piccoli e riduce i clic mancati.

Il Pannello Struttura ti aiuta a gestire la tua pagina – e ottimizzare il tuo flusso di lavoro – mantenendo tutti i tuoi oggetti organizzati in un unico elenco ricercabile.

In questo articolo, imparerai come raggruppare, bloccare, disporre e allineare oggetti sulla pagina. Ti mostreremo anche come navigare e usare il Pannello Struttura per rinominare, cercare, riorganizzare, attivare/disattivare la visibilità ed eliminare oggetti.

Raggruppa e separa stencil

Quando gli oggetti sono raggruppati, possono essere spostati, formattati, stilizzati e duplicati come un'unità singola. Il raggruppamento funziona per tutti gli oggetti: stencil, template, immagini e icone.

Per raggruppare o separare oggetti, usa il pulsante Raggruppa situato nella Barra degli Strumenti Contestuale.

Per raggruppare gli stencil:

  1. Seleziona gli stencil:

    • Trascina il mouse su più stencil

      oppure

    • Usa Ctrl/Cmd + Clic per selezionare gli stencil uno alla volta

  2. Raggruppa gli stencil:

    • Vai alla Barra degli Strumenti Contestuale e clicca sul pulsante Raggruppa

      oppure

    • Fai clic destro su uno degli oggetti e scegli Raggruppa Selezione

Per separare gli stencil:

  • Seleziona il gruppo di oggetti che vuoi separare

  • Vai alla Barra degli Strumenti Contestuale e clicca sul pulsante Separa

    oppure

  • Fai clic destro su uno degli oggetti e scegli Separa Selezione

Puoi anche creare e annidare gruppi all'interno di gruppi.

Per annullare l'annidamento dei gruppi, la scorciatoia Ctrl/Cmd + Shift + Alt/Option + G spacchetta e appiattisce un gruppo per creare un gruppo a singolo livello.

Modifica gruppi di stencil

Una volta raggruppati gli oggetti, puoi spostarli, formattarli e stilizzarli come un singolo elemento. Ma potresti comunque voler modificare un singolo elemento separatamente dal suo gruppo.

Per accedere a un singolo oggetto all'interno di un gruppo, fai doppio clic su quell'oggetto. Ora puoi formattare, stilizzare o eliminare quell'elemento individuale.

Vincoli di ridimensionamento

I vincoli ancorano gli elementi all'interno di un design per rendere la regolazione e il ridimensionamento dei layout sia rapidi che facili. I vincoli si applicano solo ai gruppi e non a una selezione di oggetti.

Per applicare i vincoli, devi prima abilitare la funzione. Quindi puoi scegliere vincoli automatici o impostare manualmente le ancore per ogni oggetto all'interno del gruppo.

Ecco come funziona:

I vincoli impostano regole di ridimensionamento agli oggetti all'interno di un gruppo. Queste regole determinano come gli oggetti risponderanno mentre adatti il gruppo a nuovi contesti o dimensioni dello schermo.

Senza vincoli abilitati, il comportamento predefinito è semplicemente quello di 'allungare' gli oggetti mentre il gruppo viene ridimensionato.

Con i vincoli applicati, puoi ridimensionare il gruppo con la certezza che gli elementi si adatteranno in modo logico e prevedibile – e non 'romperanno' il layout che hai già stabilito.

Ridimensionamento con allungamento predefinito

In Moqups, i Vincoli sono disattivati per impostazione predefinita. Ciò significa che mentre ridimensioni un gruppo, gli oggetti all'interno di quel gruppo si allungheranno:

  • Gli oggetti con un rapporto proporzioni non bloccato (come forme e segnaposto) si allungheranno nella direzione in cui ridimensioni il gruppo.
  • Gli oggetti con un rapporto proporzioni bloccato (come icone e avatar) manterranno le loro proporzioni, ma diventeranno più grandi o più piccoli mentre ridimensioni il gruppo.

Abilita vincoli di ridimensionamento

Nota che devi aver già creato un gruppo di oggetti per poter applicare i vincoli di ridimensionamento.

Per abilitare i vincoli:

  1. Clicca sul gruppo per rivelare la sezione Opzioni Gruppo del Pannello Formato.

  2. Seleziona la casella di controllo Abilita vincoli di ridimensionamento.

    oppure

    • Nella barra degli strumenti contestuale, clicca sul pulsante Abilita vincoli di ridimensionamento
  3. Questo abiliterà la nostra funzione di vincoli Automatici. Puoi leggere i vincoli Auto vs Manuale di seguito.

  4. Poi, clicca su qualsiasi oggetto all'interno del gruppo per aprire la sezione Vincoli del Pannello Formato.

Vincoli automatici

Quando abiliti i Vincoli, le ancore vengono applicate automaticamente a ogni oggetto all'interno del gruppo. Queste ancore automatiche riflettono sia il layout degli oggetti che i loro comportamenti più attesi e intuitivi al ridimensionamento.

Per vedere le ancore automatiche:

  1. Clicca su qualsiasi oggetto all'interno del gruppo per aprire i controlli Vincoli.
  2. I pulsanti ancora mostrano i vincoli orizzontali e verticali che possono essere applicati all'oggetto selezionato.
  3. Le ancore che sono già state applicate automaticamente sono evidenziate in blu.
  4. Sulla pagina, le linee blu tratteggiate indicano dove è ancorato l'oggetto selezionato.

Quando ridimensioni il gruppo, i vincoli automatici dovrebbero essere sufficienti per mantenere un layout logico per la maggior parte dei casi d'uso.

Vincoli manuali

Puoi sovrascrivere i vincoli automatici e selezionare manualmente le ancore per ogni oggetto all'interno del gruppo. Le ancore possono essere applicate sia orizzontalmente che verticalmente.

Se clicchi su qualsiasi oggetto all'interno del gruppo e passi il mouse sui pulsanti ancora, un tooltip spiegherà dove viene ancorato quell'oggetto quando selezionato. Vedrai anche i pulsanti ancora Proporzionale di cui parliamo nella sezione successiva.

Se ancori un oggetto sia a Sinistra che a Destra (o in Alto e in Basso) l'oggetto potrebbe allungarsi di conseguenza mentre ridimensioni.

Per applicare vincoli manuali a un oggetto:

  1. Clicca su qualsiasi oggetto all'interno del gruppo per aprire i controlli Vincoli.
  2. I pulsanti ancora mostrano i vincoli orizzontali e verticali che possono essere applicati all'oggetto selezionato.
  3. Clicca su qualsiasi pulsante ancora per applicarlo all'oggetto.
  4. Le ancore che selezioni saranno visibili sulla pagina come linee blu tratteggiate.
  5. Se vuoi tornare alle ancore automatiche per quell'oggetto, seleziona nuovamente la casella di controllo Regola automaticamente.

Ancore proporzionali

Senza vincoli proporzionali, gli oggetti rimangono nella loro posizione fissa dalle loro ancore (in alto, in basso, ai lati o al centro) mentre ridimensioni il gruppo.

Selezionare vincoli proporzionali mantiene le ancore di un oggetto – sia impostate automaticamente che manualmente – ma regola la distanza dell'oggetto da ogni punto di ancoraggio in proporzione al ridimensionamento.

Per impostare vincoli proporzionali per un oggetto, clicca sul simbolo percentuale alla fine dei pulsanti ancora.

Pannello formato Moqups che mostra i pulsanti ancore proporzionali

Il seguente video dimostra il comportamento di allungamento predefinito, rispetto ai vincoli automatici e ai vincoli proporzionali:

Vincoli per gruppi annidati

Se abiliti i vincoli di ridimensionamento per un gruppo padre, i gruppi annidati vengono trattati come singoli oggetti e possono avere ancore automatiche o manuali applicate ad essi.

Se vuoi impostare ancore per gli oggetti all'interno di quei gruppi 'figlio', dovrai abilitare i vincoli per loro separatamente. Dopodiché, puoi impostare le ancore per gli oggetti all'interno del gruppo annidato, esattamente come faresti per il gruppo padre più grande.

Per abilitare i vincoli per un gruppo annidato:

  1. Seleziona il gruppo annidato.
  2. Nella sezione Opzioni Gruppo, scegli Abilita vincoli di ridimensionamento.
  3. Clicca su qualsiasi oggetto all'interno del gruppo annidato per aprire i controlli Vincoli.
Funzione vincoli di ridimensionamento per gruppi annidati

Disabilita vincoli di ridimensionamento

Per disabilitare i vincoli:

  1. Clicca sul gruppo per rivelare la sezione Opzioni Gruppo del Pannello Formato.

  2. Deseleziona la casella di controllo Abilita vincoli di ridimensionamento

    oppure

    • Nella barra degli strumenti contestuale, clicca sul pulsante Disabilita vincoli di ridimensionamento
Disabilita vincoli di ridimensionamento

Blocca e sblocca stencil

Una volta bloccato un oggetto, è fisso nella sua posizione – e non può più essere spostato o stilizzato. Questo ti consente di continuare a modificare il resto degli oggetti sulla pagina senza disturbare le parti completate del tuo design.

Per lavorare con un oggetto bloccato, devi prima cliccarci sopra intenzionalmente. Per prevenire la selezione accidentale di oggetti bloccati, non rispondono alla selezione tramite trascinamento del mouse.

Per bloccare uno stencil:

  • Seleziona lo stencil e poi usa il Menu Contestuale del clic destro per scegliere l'opzione Blocca Selezione, o usa la Scorciatoia da Tastiera: Ctrl/Cmd + L (questa scorciatoia funziona sia per Bloccare che per Sbloccare).

    oppure

  • In cima al Pannello Formato, clicca sul pulsante Blocca a destra del Nome Oggetto; una volta bloccato un oggetto, tutte le opzioni di formattazione per quell'oggetto non saranno disponibili fino a quando non viene sbloccato.

    oppure

  • Nel Pannello Struttura, clicca sul pulsante Blocca a destra del nome dello stencil; il pulsante si scurirà quando bloccato.

Quando bloccato, lo stencil mostrerà un bordo rosso al passaggio del mouse e, una volta selezionato, apparirà un pulsante di blocco nell'angolo in alto a sinistra del bordo rosso. Quel pulsante può essere usato per sbloccare lo stencil.

Per sbloccare uno stencil:

  • Seleziona lo stencil e clicca sul pulsante Blocca rosso nell'angolo in alto a sinistra del bordo rosso.

    oppure

  • Seleziona lo stencil e poi usa il Menu Contestuale del clic destro per scegliere l'opzione Sblocca Selezione, o usa la Scorciatoia da Tastiera: Ctrl/Cmd + L (questa scorciatoia funziona sia per Bloccare che per Sbloccare).

    oppure

  • Nel Pannello Struttura, clicca sul pulsante Blocca a destra del nome dello stencil; il pulsante sarà grigio quando sbloccato.

Per bloccare o sbloccare una selezione di stencil:

  • Seleziona gli stencil e poi usa il Menu Contestuale del clic destro per scegliere l'opzione Sblocca Selezione, o usa la Scorciatoia da Tastiera: Ctrl/Cmd + L (questa scorciatoia funziona sia per Bloccare che per Sbloccare)

Per sbloccare tutti gli oggetti quando c'è un mix di oggetti bloccati e sbloccati sulla pagina:

  1. Usa Ctrl/Cmd + A per selezionare tutti gli oggetti sbloccati sulla pagina
  2. Usa Ctrl/Cmd + L per bloccare tutti gli oggetti
  3. Usa Ctrl/Cmd + L ancora una volta per sbloccare tutti gli oggetti

Disponi e allinea stencil

Il Menu a Tendina Disponi nella Barra degli Strumenti Superiore consente di sovrapporre, allineare e distribuire oggetti per creare un design pulito ed equilibrato.

Disposizione degli Oggetti

La funzione Disponi ti consente di impilare oggetti e poi spostarli avanti e indietro attraverso i livelli.

Per disporre un oggetto:

  1. Seleziona l'oggetto che vuoi disporre
  2. Accedi alla funzione Disponi:
  • Vai alla Barra degli Strumenti Superiore e clicca sul pulsante Disponi per aprire il menu a tendina

    oppure

  • Fai clic destro sull'oggetto per aprire il menu Contestuale e passa sopra l'opzione Disponi per aprire il menu a tendina

  • Scegli un'azione di livello: Porta in Primo Piano, Porta Avanti, Manda Indietro, Manda in Fondo

Allineamento degli Oggetti

La funzione Allineamento dispone gli oggetti lungo un asse verticale o orizzontale comune e li distribuisce uniformemente all'interno del loro spazio condiviso.

La Barra degli Strumenti Contestuale è il modo più rapido per allineare più oggetti. Quando selezioni più di un oggetto, la barra degli strumenti appare automaticamente appena sopra quella selezione. Insieme all'allineamento, la barra degli strumenti consente anche di raggruppare e separare rapidamente gli oggetti selezionati.

Puoi anche impostare un oggetto di riferimento – ovvero qualsiasi gruppo selezionato di oggetti si allineerà rispetto a quell'oggetto.

Per impostare un oggetto di riferimento, seleziona più oggetti e poi clicca su uno di essi; apparirà immediatamente un bordo blu spesso intorno a quell'oggetto. Tutti gli oggetti si allineeranno ora rispetto a quell'oggetto di riferimento designato. Per deselezionare l'oggetto di riferimento, clicca semplicemente fuori dalla tua selezione.

Ci sono altri tre modi per accedere alle opzioni di Allineamento:

  • Vai alla Barra degli Strumenti Superiore, e clicca sul pulsante Disponi per aprire il menu a tendina

oppure

  • Fai clic destro su un oggetto per aprire il menu Contestuale e passa sopra l'opzione Allinea per aprire il menu a tendina

oppure

  • Vai alla Barra Laterale Destra e apri il Pannello Formato. In cima, troverai i pulsanti Quick Align e Distribute

Quando viene selezionato un singolo oggetto (o oggetti 'Raggruppati'), i controlli di allineamento allineano l'oggetto rispetto ai confini della pagina. Nota che questa funzione non è disponibile quando si usa la Barra degli Strumenti Contestuale.

Utilizzo del Pannello Struttura

Il Pannello Struttura mantiene tutti i tuoi oggetti organizzati in un unico elenco ricercabile.

Sfoglia gli oggetti e le loro gerarchie nell'Albero Struttura, o usa l'input di ricerca per localizzare rapidamente un oggetto specifico. Le icone Struttura davanti ai nomi degli oggetti rendono facile distinguere tra i tipi di stencil.

Usa l'Albero Struttura per rinominare, cercare, riorganizzare, bloccare, attivare/disattivare la visibilità ed eliminare oggetti.

Per aprire il Pannello Struttura:

  1. Vai alla Barra Laterale Sinistra
  2. Clicca sulla Scheda Struttura. La scheda diventerà blu e aprirà il Pannello Struttura

Per selezionare un oggetto nel Pannello Struttura:

  • Clicca sul suo nome. Se selezioni un Gruppo, clicca sull'icona Freccia Sinistra per visualizzare rapidamente il contenuto e la gerarchia del Gruppo.

Puoi bloccare e sbloccare gli oggetti direttamente dal Pannello Struttura cliccando sul pulsante di blocco a destra del nome dell'oggetto. Scopri di più sul blocco degli oggetti qui.

Per rinominare un oggetto o un gruppo di oggetti nel Pannello Struttura:

  1. Il Pannello Struttura elenca tutti gli oggetti sulla pagina: Stencil, Template, Immagini e Icone
  2. Passa il mouse su un elemento nell'Albero Struttura e, sulla pagina, un bordo blu evidenzierà simultaneamente l'oggetto corrispondente
  3. Dopo aver individuato l'oggetto, fai doppio clic sul suo nome per cambiarlo

Puoi anche sfruttare la Sincronizzazione Nomi nel Pannello Struttura quando lavori con stencil diagrammi o testo:

Quando digiti testo in qualsiasi stencil organigramma, o negli stencil Paragrafo, Intestazione e Etichetta, quegli stencil adottano automaticamente quel testo come nome. Questo rende facile identificare oggetti specifici nel Pannello Struttura, specialmente in flussi e diagrammi di processo complessi, o all'interno di design dettagliati.

Se non vuoi che un oggetto sia etichettato con il suo testo, sovrascrivi il nome auto-generato nel Pannello Struttura o nel Pannello Formato e rimarrà così.

Per cercare un oggetto nel Pannello Struttura:

  1. Seleziona l'Input di Ricerca in cima al Pannello Struttura
  2. Digita il nome dell'elemento che vuoi trovare

Per riordinare un oggetto o un gruppo di oggetti nel Pannello Struttura:

  1. Seleziona l'oggetto che vuoi spostare
  2. Trascina e rilascia quell'oggetto verso l'alto o verso il basso nell'Albero Struttura
  3. Nota che spostare un oggetto più in alto o più in basso all'interno di una gerarchia di gruppo, o su e giù nell'Albero Struttura, influenzerà anche la sua disposizione a livelli sulla pagina

Per nascondere un oggetto, basta attivare/disattivare la visibilità dell'oggetto cliccando sull'icona Occhio Visibilità a destra del nome dell'oggetto nell'Albero Struttura.

Modificare la visibilità di un oggetto è essenziale quando si aggiungono Interazioni. Spesso vorrai che l'interazione inizi con l'oggetto in uno stato invisibile. Per saperne di più su Interazioni e prototipazione, vai qui.

Per eliminare un oggetto o un gruppo di oggetti dal Pannello Struttura:

  1. Seleziona l'oggetto che vuoi eliminare
  2. Usa il tasto Canc per rimuovere quell'oggetto