Nozioni di base sul disegno

Ora che hai avuto la possibilità di esaminare l'interfaccia di OmniGraffle e il gestore documenti, è il momento di mettere in pratica queste conoscenze, creando un nuovo documento e applicando alcune delle nozioni che hai appreso.

Per creare un nuovo documento:

  1. Vai alla schermata Posizioni.
  2. Seleziona la cartella in cui desideri memorizzare il file.
  3. Tocca Il pulsante Aggiungi sulla barra degli strumenti nella parte superiore dello schermo.
  4. Scegli un modello: uno degli otto preinstallati oppure uno creato da te o aggiunto a OmniGraffle. Per eseguire l'esercizio, scegli il terzo modello nella prima fila, Dimensionamento automatico - Pixel.
Scelta di un modello

Dopo la scelta del modello, OmniGraffle apre un nuovo documento (si chiama Diagramma personale, ma puoi sempre rinominarlo in un secondo momento).

Un nuovo documento con un'area di disegno vuota

Gli altri pulsanti sulla barra degli strumenti includono:

  • Tocca Il pulsante Aree di disegno per visualizzare e nascondere la barra laterale Aree di disegno a sinistra. Qui è dove puoi gestire, creare ed eliminare Aree di disegno e Livelli nel documento.

    OmniGraffle con la barra laterale Contenuti aperta

    Puoi anche possibile passare dalla visualizzazione Elenco alla visualizzazione Stili, e viceversa, davvero comodo quando devi apportare modifiche a un gruppo di oggetti con lo stesso stile. Hai presente quando il tuo responsabile vuole modificare il colore dei riempimenti da melanzana (#3d0734) a certosa (#c1f80a)?

  • Tocca Il pulsante Info per maggiori dettagli sulle aree di disegno che stai utilizzando. Con un oggetto selezionato nell'area di disegno, da qui puoi anche accedere alle finestre Impostazioni.

    La finestra Info
  • Tocca Il pulsante Stencil per aprire la libreria Stencil. Utilizza la libreria Stencil per individuare e trascinare gli oggetti nell'area di disegno, o per cercare nuovi stencil online all'interno di Stenciltown.

    La finestra Stencil

Ora che hai avuto la possibilità di esaminare i pulsanti nella barra degli strumenti, è il momento di provare a utilizzare gli strumenti di disegno.

Aggiunta di forme

Una forma è un oggetto bidimensionale che aggiungi all'area di disegno. Alle forme è possibile applicare uno stile, come un bel colore o un gradiente. Puoi anche aggiungere un'etichetta. Il modo più veloce per aggiungere forme consiste nel trascinarle dalla tavolozza degli stencil:

  1. Tocca Lo strumento Forme per selezionare lo strumento Forme.

  2. Con un dito tocca nell'area di disegno e trascina per disegnare una forma.

    Disegno di una forma nell'area di disegno

    Mentre disegni nell'area di disegno, OmniGraffle visualizza le dimensioni della forma che stai disegnando, così come la sua posizione sugli assi x/y nell'area di disegno.

Se preferisci utilizzare uno degli stencil preinstallati, tocca L'icona Stencil sulla barra in alto. Viene visualizzato un menu dal quale puoi selezionare qualsiasi stencil. Puoi toccare due volte uno stencil per aggiungerlo all'area di disegno:

Tocca due volte per aggiungere uno stencil all'area di disegno

Oppure puoi toccare e tenere premuto su uno stencil e quindi trascinarlo nell'area di disegno:

Toccare e trascinare uno stencil nell'area di disegno

Quando trascini uno stencil nell'area di disegno, il menu Stencil scompare, sostituito dalle barre di allineamento blu che consentono di posizionare l'oggetto nell'area di disegno. Le barre di allineamento di colore rosa consentono di posizionare l'oggetto in corrispondenza del centro, in orizzontale e in verticale.

Puoi anche creare forme personalizzate:

  1. Tocca Il pulsante Mano libera per attivare lo strumento di disegno Mano libera. Non dimenticare che puoi anche toccare due volte uno strumento per ancorarlo; ad esempio Il pulsante Mano libera in modalità persistente.

  2. Utilizza il dito (o il tuo stilo preferito) per disegnare nell'area di disegno.

    Una piccola creazione per tutti i miei amici

Puoi selezionare e personalizzare le forme con le finestre Impostazioni toccando il pulsante Il pulsante Info sulla barra in alto. Qui abbiamo selezionato la "testa" per lo smiley e aggiunto un riempimento radiale di colore giallo.

Aggiunta di uno stile di riempimento a un oggetto con la finestra Impostazioni Riempimento

Puoi anche aggiungere un'immagine all'area di disegno dal menu Stencil:

  1. Tocca Il pulsante Stencil per aprire il menu Stencil.

  2. Tocca L'icona della fotocamera nella parte superiore del menu Stencil.

    Apertura del menu Stencil

    Se non hai già autorizzato l'accesso di OmniGraffle alla tua app Foto, vedrai l'avviso seguente:

    OmniGraffle ti avvisa nel caso non abbia accesso alle tue fotografie

    Per consentire l'accesso a OmniGraffle, tocca due volte il tasto Home sul tuo iPad, individua e aprire l'applicazione Impostazioni, quindi tocca Privacy a sinistra, e abilita l'accesso per OmniGraffle.

    La scheda Privacy nell'app Impostazioni

    Ora tocca due volte Home di nuovo e torna a OmniGraffle.

  3. Dopo aver toccato Il pulsante Fotocamera, alcune opzioni scorrono verso l'alto dal fondo del menu Stencil:

    • Tocca Scatta foto per utilizzare la fotocamera dell'iPad.
    • Tocca Scegli esistente per selezionare un'immagine dalla libreria Foto.
    • Tocca Usa la più recente per inserire l'ultima immagine aggiunta alla libreria Foto.
    Scelta di un'opzione per l'inserimento di un'immagine
  4. Se tocchi Scegli esistente, un riquadro Foto viene visualizzato sopra il menu. Da qui puoi scegliere tra Tutte le foto sul tuo iPad, oppure tra le foto Aggiunte di recente.

    Scelta della posizione di origine di un'immagine
  5. Infine, scorri le immagini e tocca quella che desideri aggiungere all'area di disegno.

    Toccare per aggiungere un'immagine all'area di disegno

    Il menu Stencil scompare e l'immagine viene posizionata nell'area di disegno.

    Un'immagine di Encelado, una delle lune di Saturno

Puoi modificare ulteriormente l'immagine con le finestre Impostazioni. Prima seleziona l'immagine, quindi tocca Il pulsante Info sulla barra di navigazione. Viene visualizzato il menu Finestre Impostazioni, da cui è possibile applicare qualsiasi numero di stili ed effetti all'immagine.

Connessione di oggetti tramite linee

Le connessioni sono linee tra gli oggetti che spesso aiutano a chiarire la relazione tra di essi. Per creare connessioni tra gli oggetti:

  1. Tocca due volte Il pulsante Forme per disegnare alcuni oggetti nell'area di disegno; un paio di forme rettangolari dovrebbero andare bene.

    Disegno di forme nell'area di disegno

    Nota le guide di dimensionamento blu lungo gli oggetti. Vengono visualizzate quando disegni forme simili nell'area di disegno, per consentirti di impostarne le dimensioni correttamente. Naturalmente, puoi anche limitarti a disegnare una forma e quindi a copiare e incollare l'oggetto toccando e tenendo premuto.

  2. Tocca Il pulsante Linea per attivare lo strumento Linea.

  3. Per disegnare una linea tra forme: Trascina una forma sulla successiva.

    Disegno di una linea tra due forme
  4. Per disegnare una linea non collegata: Trascina all'interno dell'area di disegno.

    Disegno di una linea con lo strumento Linea

Per regolare le estremità della linea:

  1. Tocca e tieni premuto su una estremità della linea...

    Trascinamento di uno dei punti finali della linea in un'altra posizione

    ... e quindi trascinala in una nuova posizione:

    Il punto finale della linea dopo lo spostamento

    Nota come il punto finale viene ancorato al punto principale dell'altra linea quando li avvicini.

Aggiunta di etichette

Le etichette sono oggetti di testo collegati a forme e linee, solitamente utilizzati per definire un oggetto o la relazione tra oggetti.

Puoi anche aggiungere blocchi di testo indipendenti nell'area di disegno, utilizzando lo strumento Testo (Lo strumento Testo). Questi blocchi di testo sono indipendenti dagli altri oggetti nell'area di disegno, a meno che non vengano raggruppati.

Per aggiungere un'etichetta a una forma, tocca due volte la forma. Il testo di default, Etichetta, appare già evidenziato: in questo modo puoi semplicemente inserire il testo che desideri per denominare l'oggetto.

Aggiunta di un'etichetta a oggetti nell'area di disegno

Il pulsante Nascondi tastiera Una volta completata la digitazione, tocca il pulsante Nascondi tastiera nell'angolo in basso a destra della tastiera dell'iPad. Se stai utilizzando una tastiera Bluetooth, premi Esc per accettare il testo inserito.

Se devi modificare un'etichetta, toccala due volte per selezionarla e quindi apportare le modifiche necessarie. Se devi inserire o eliminare un certo carattere, puoi toccare e tenere premuto sull'oggetto di testo e quindi utilizzare la punta del dito per spostare il punto di inserimento in un'altra posizione all'interno del testo.

Per aggiungere un'etichetta a una linea:

  1. Tocca due volte su una linea per visualizzare un'etichetta di testo.

    Una linea con una nuova etichetta non modificata
  2. Immetti un testo descrittivo dell'azione relativa alla direzione della linea.

    Una linea con una nuova etichetta
  3. Per adattare la posizione dell'etichetta sulla linea, tocca Il pulsante Info per aprire la finestra Impostazioni.

    Il menu Finestre Impostazioni, aperto toccando il pulsante Info

    È possibile:

    • Utilizzare la finestra Impostazioni Riempimento per aggiungere un colore di sfondo all'etichetta.
    • Utilizzare la finestra Impostazioni Posizione testo per adattare posizione e allineamento del testo dell'etichetta.
    • Utilizzare la finestra Impostazioni Font per modificare dimensione, stile e colore del font.
    • Utilizzare la finestra Impostazioni Geometria per ruotare l'etichetta, se necessario.
    • Utilizzare la finestra Impostazioni Note per aggiungere informazioni ulteriori sull'etichetta o sugli oggetti cui è collegata.

Suggerimento
Ricorda che, per aggiungere testo a un oggetto, una linea o all'area di doppia, puoi toccare due volte sull'elemento, e OmniGraffle farà il resto.

Aggiunta di punti di controllo e curve a una linea

Tutti i disegni cominciano con una linea. E mentre lo strumento Linea consente di tracciare facilmente una linea retta, ci sono momenti in cui è necessario creare angoli o piegare una linea, per ottenere l'effetto che stai cercando. Per questo, sono necessari i punti di controllo. Proprio come dice il nome, un punto di controllo consente un maggiore controllo su aspetto e stile della linea.

Per aggiungere un punto di controllo a una linea:

  1. Tocca Lo strumento Selezione e seleziona la linea.

    Selezione della linea alla quale aggiungere un punto di controllo
  2. Tocca Il pulsante Linea per attivare gli strumenti Modifica punti.

    Una linea con un punto di controllo
  3. Tocca Aggiungi un punto per scegliere lo strumento Aggiungi punto, quindi tocca la linea nel punto in cui desideri posizionare un nuovo punto di controllo. Un piccolo rombo di colore blu viene visualizzato sulla linea in corrispondenza del punto.

    Una linea con un punto di controllo
  4. Per spostare un punto di controllo lungo la linea, tocca utilizzo dello strumento di selezione punto per utilizzare lo strumento Selezione punto, quindi tocca e trascina il punto di controllo nell'area di disegno.

    Tocca e tieni premuto per far scorrere un punto di controllo lungo una linea

Puoi aggiungerne quanti punti di controllo desideri a una linea (finché c'è spazio, naturalmente). Dopo aver aggiunto i punti di controllo, puoi modificare ulteriormente l'aspetto della linea utilizzando la finestra Impostazioni Linea.

La finestra Impostazioni Linea

Ad esempio, puoi modificare la linea da Retta a Curva per ottenere una linea ondulata, o modificarla da Retta a Bézier per creare facilmente curve favolose.

Una linea con una curva di Bézier complessa

Per ulteriori dettagli sulle curve di Bézier, vedere Uso delle curve di Bézier più avanti in questo capitolo.

Selezione, ridimensionamento e spostamento di oggetti

Dopo aver aggiunto alcuni oggetti all'area di disegno, potrebbe essere necessario eseguire alcuni spostamenti per ottenere la configurazione giusta. A questo scopo è necessario in primo luogo lo strumento Selezione.

Inizia toccando Lo strumento Selezione sulla barra degli strumenti Disegno per renderlo attivo.

  • Per selezionare un oggetto, toccalo.

  • Per selezionare tutti gli elementi nell'area di disegno, tocca e tieni premuto sull'area di disegno per un secondo o due, e quindi rilascia. Viene visualizzato un menu contestuale appena sopra il punto in cui hai premuto; tocca Seleziona tutto nel menu.

    Selezione di tutti gli oggetti sull'area di disegno
  • Per selezionare più oggetti nell'area di disegno, tocca e tieni premuto nell'area di disegno (non rilasciare); non appena viene visualizzato il selettore, trascinalo sugli oggetti che desideri selezionare.

    Selezione di oggetti tramite trascinamento nell'area di disegno

    In alternativa, puoi toccare e tenere premuto su un oggetto, mentre con un altro dito ne tocchi altri, per aggiungere alla selezione un oggetto per volta.

    Oggetti selezionati singolarmente nell'area di disegno
  • Per ridimensionare un oggetto (o un gruppo di oggetti):

    • Seleziona gli oggetti che desideri ridimensionare.
    • Tocca e tieni premuto su una delle maniglie, quindi trascina per ridimensionare (nei due sensi). Se l'oggetto è una forma o un'etichetta, nell'area di disegno viene visualizzata una casella che mostra le dimensioni della selezione.
  • Per specificare una dimensione senza trascinare, tocca l'oggetto e utilizza la finestra Impostazioni Geometria per specificare altezza e larghezza. Puoi anche attivare le opzioni Mantieni proporzioni e Scala contenuti in fondo alla finestra Impostazioni Geometria per essere certo che gli oggetti continuino ad avere l'aspetto ottimale.

    La finestra Impostazioni Geometria
  • Per spostare un oggetto: tocca e tieni premuto sull'oggetto, e quindi trascinalo nell'area di disegno fino alla posizione adatta. Se l'oggetto include connessioni, le relative linee di connessione verranno trascinate insieme all'oggetto.

Uso ottimale del menu contestuale

Quando tocchi e tieni premuto su un oggetto o nell'area di disegno, viene visualizzato un menu contestuale in bianco e nero, sopra l'elemento toccato. Questo menu, proprio come i menu contestuali del tuo Mac, include collegamenti rapidi per le operazioni più comuni.

Menu contestuale di un oggetto selezionato

Sei tocchi e tieni premuto nell'area di disegno, il menu contestuale visualizzato include le opzioni seguenti:

  • Seleziona tutto: consente di selezionare tutto il contenuto dell'area di disegno.
  • Schermo intero: nasconde tutto eccetto l'area di disegno. Scegli questa opzione quando hai bisogno di visualizzare il tuo lavoro senza ostacoli, o quando vuoi mostrare al meglio le tue creazioni in OmniGraffle. Per visualizzare di nuovo gli strumenti di navigazione e di disegno, tocca e tieni premuto nell'area di disegno, e quindi scegli Esci da schermo intero dal menu.
  • Una terza opzione, Incolla, viene visualizzata nel menu contestuale dell'area di disegno se un elemento è stato copiato o tagliato negli appunti.

Le opzioni incluse nel menu contestuale quando selezioni un solo oggetto:

  • Taglia
  • Copia
  • Seleziona tutto
  • Incolla (se gli Appunti non sono vuoti)
  • Elimina
  • Blocca/sblocca
  • Porta in fondo
  • Crea tabella (Pro)
  • Copia stile
  • Schermo intero/Esci da schermo intero

Infine se, con più oggetti selezionati, tocchi e tieni premuto per aprire il menu contestuale, visualizzerai tutte le opzioni precedenti, oltre a Raggruppa e Separa.

Tramite il menu contestuale puoi risparmiare molte tempo nell'esecuzione di attività che altrimenti richiederebbero un'abbreviazione da tastiera quando utilizzi OmniGraffle sul Mac.

Uso delle curve di Bézier

OmniGraffle non serve solo per creare diagrammi e diagrammi di flusso: si tratta di una vera e propria app per la creazione di illustrazioni. Con un po' di esercizio, riuscirai a padroneggiare rapidamente il disegno di forme complesse in OmniGraffle. E una volta disegnate queste magnifiche creazioni nell'area di disegno, potrai utilizzare le finestre Impostazioni per modificarle a tuo piacimento.

Questo rapido tutorial ti mostrerà come partire da una forma di base (triangolo) e trasformarla in una foglia. Seguici...

  1. Dalla tua cartella preferita, tocca Il pulsante Aggiungi per creare un nuovo documento.

  2. Scegli il modello Dimensionamento automatico - Pixel.

  3. Sulla barra di navigazione, tocca Il pulsante Stencil per aprire il menu Stencil.

  4. Seleziona Forme.

  5. Nell'elenco delle forme normali, tocca due volte il triangolo raffigurato qui per aggiungerlo all'area di disegno:

    Il menu Stencil
  6. Tocca un punto qualsiasi nell'area di disegno per nascondere il menu Stencil.

Ora nell'area di disegno è presente solo un triangolo singolo che punta verso destra. Siamo sicuri che stai pensando: "Come diamine faccio a trasformarlo in una foglia?!". Un po' di pazienza, ci arriviamo.

Il triangolo solitario che presto diventerà una foglia

Il passo successivo consiste nel ruotare il triangolo in modo che sia rivolto verso l'alto.

  1. Pizzica per applicare lo zoom al triangolo. Lo zoom applicato può variare; il punto è ingrandire abbastanza da poter utilizzare un gesto a due dita per ruotare l'oggetto.

    Applicazione dello zoom all'area di disegno
  2. Utilizzando due dita contemporaneamente, tocca e tieni premuto sul triangolo. Ruota leggermente le dita. Quando vedi una freccia blu rivolta verso l'alto, togli un dito dal display, e utilizza l'altro dito per ruotare e far girare il triangolo verso sinistra. Puoi vedere l'angolo di rotazione nella barra della finestra Impostazioni; qui abbiamo impostato l'angolo a 285 gradi.

    Rotazione del triangolo utilizzando un gesto a due dita

    Ora possiamo passare a esaminare le curve di Bézier. Vive les Bézier!

  3. Con il triangolo selezionato, tocca Lo strumento Mano libera per attivare lo strumento Modifica punti. Selezionando lo strumento Modifica punti, i tre punti del triangolo diventano ora punti di controllo modificabili. Andremo a convertirli tutti e tre in curve di Bézier.

  4. Tocca e tieni premuto sul punto di controllo superiore del triangolo. A questo punto succedono alcune cose e tutte piuttosto rapidamente, quindi cerchiamo di vederle una per una:

    • Quando tocchi e tieni premuto sul punto di controllo superiore, un rombo blu si anima intorno al punto per isolarlo; questo per indicarti che puoi trascinare il punto per modificare la forma del triangolo; per ora, però, non farlo.

      Un rombo blu circonda il punto di controllo superiore
    • Mentre continui a tenere premuto il punto di controllo superiore, il quadrato azzurro si trasforma in un rombo rosso; questo per indicarti che puoi trascinare per convertire il punto in un punto di Bézier:

      Un rombo rosso circonda il punto di controllo superiore
    • Se continui a tenere premuto il punto di controllo superiore, il rombo rosso si trasforma in una serie di mirini blu; questo per indicarti che il punto di controllo è temporaneamente bloccato in posizione, e che puoi visualizzare la barra di controllo Bézier.

      Mirini visualizzati sopra il punto di controllo selezionato
    • Trascina con il dito verso destra per convertire il punto di controllo in una curva di Bézier. Una barra di controllo Bézier rossa segue il dito mentre trascini dal punto di controllo.

      La barra di controllo Bézier trascinata dal punto di controllo

    Come detto in precedenza, tutto questo avviene molto rapidamente, ma è importante che tu capisca cosa sta succedendo. Ad esempio, se vuoi limitarti a trascinare un punto di controllo per modificare la forma del triangolo, basta aspettare che il triangolo blu venga visualizzato sul punto.

  5. Conversione dei due punti di controllo rimasti in curve di Bézier. Dovresti aver ottenuto qualcosa di simile alla figura seguente:

    L'ex triangolo con i punti convertiti in curve

Dopo la conversione di tutti i punti di controllo in Bézier, il triangolo assomiglia a un uovo, ma con un po' di impegno la tua creazione prenderà forma. Fai qualche prova con i diversi punti di Bézier sul cerchio:

  • Trascina le maniglie di Bézier verso l'interno o verso l'esterno per ottenere la curvatura perfetta per la foglia.

  • Tocca due volte tra i punti di controllo esistenti per aggiungerne altri, se necessario.

  • Se devi adattare solo un lato della Bézier, prima tocca e tieni premuto su una delle maniglie di Bézier, quindi con un altro dito tocca e tieni premuto* in un altro punto dell'area di disegno. In questo modo hai aggiunto blocchi al punto di controllo della curva di Bézier, in modo da poter ruotare l'altro dito per creare curve più angolate o più oblique.

    Una curva angolare
  • Per creare un punto acuto con una curva sull'altro lato, tocca e tieni premuto su una delle maniglie di Bézier, quindi tocca e tieni premuto con un altro dito in un altro punto dell'area di disegno, per bloccare il punto di controllo. Ora, con il dito che controlla la maniglia di Bézier, trascina verso l'interno in direzione del punto di controllo. A questo punto hai una curva di Bézier con un solo lato.

    Una curva di Bézier con un solo lato

Alla fine, con un po' di lavoro e l'aggiunta di qualche linea, la foglia avrà un aspetto simile a questo:

La foglia finita

Alcuni degli strumenti e delle finestre Impostazioni che ti serviranno:

  • Utilizza la finestra Impostazioni Connessioni sul bordo della foglia per disattivare tutte le connessioni possibili. In questo modo potrai posizionare le linee per la costa e le venature ovunque necessario.
  • Utilizza lo strumento Linea per creare la costa e le venature.
  • Utilizza la finestra Impostazioni Linea per rimuovere i punti finali dalle linee.
  • Utilizza la finestra Impostazioni Tratto per variare la dimensione dei punti delle linee.
  • Utilizza la finestra Impostazioni Tratto per modificare lo stile del bordo della foglia in Mano libera.
  • Utilizza la finestra Impostazioni Riempimento per applicare un gradiente lineare doppio alla foglia.
  • Utilizza gesti pizzica per applicare lo zoom avanti e indietro all'area di disegno mentre inserisci costa e venature della foglia.

E, se crei qualcosa di veramente bello e pensi che gli altri utenti OmniGraffle potrebbero apprezzarlo, non dimenticare che è possibile caricarlo come stencil su Stenciltown.

Interazione con gli oggetti mediante lo strumento Azione (Pro)

Le azioni consentono di assegnare interazioni tra gli oggetti nei documenti OmniGraffle. Le azioni eseguono operazioni, ad esempio aprire un URL o nascondere un livello o un'area di disegno quando fai clic su un oggetto. Questo rende OmniGraffle uno strumento davvero potente per la creazione di prototipi di progettazioni di siti Web e di app, quando desideri mostrare le interazioni tra i diversi elementi.

Questa sezione si limita a illustrare le basi del funzionamento delle azioni in OmniGraffle. Un'esercitazione più dettagliata sull'utilizzo delle azioni di OmniGraffle sarà disponibile entro la fine dell'anno.

Iniziamo!

Tipi di azioni

Le azioni che puoi impostare su un oggetto sono quattro:

  • Un cerchio con una barra che lo attraversa Non fa nulla: Come dice il nome, quando questa azione viene assegnata, il tocco o il clic su questo oggetto non producono alcun risultato. Questo equivale a non impostare un'azione su un oggetto (stato di default), salvo per il fatto che potresti avere la necessità di assegnare una non-azione, ad esempio, lo sfondo per un sito Web per il quale stai creando un prototipo.
  • Il simbolo at Apre un URL: Consente di impostare un URL da aprire al tocco o clic sull'oggetto.
  • Una freccia a forma di uncino verso sinistra Passa altrove: Consente di stabilire se un oggetto determinerà il passaggio su un'altra area di disegno al tocco o clic.
  • Un'icona a forma di occhio Mostra o nasconde i livelli: Consente di impostare la visibilità di un livello al tocco o clic sull'oggetto.

E quando si assegna un'azione a un oggetto, all'oggetto viene associato un badge che consente agli altri utenti di OmniGraffle di sapere che possono toccare l'oggetto e fargli svolgere un'azione:

  • Il badge dell'azione Apre un URL: tocca un oggetto con questo badge per aprire l'URL assegnato in Safari su iOS, o nel browser predefinito su Mac.
  • Il badge dell'azione Passa altrove: tocca un oggetto con questo badge per passare all'area di disegno designata all'interno dello stesso documento.
  • Il badge dell'azione Mostra o nasconde i livelli: tocca un oggetto con questo badge per mostrare o nascondere il livello designato all'interno della stessa area di disegno.

Dopo l'assegnazione di un'azione, in realtà l'aspetto di un oggetto non cambia, il che potrebbe rendere difficile capire a quali oggetti è associata un'azione e a quali no. Fortunatamente per te, abbiamo aggiunto un modo per visualizzare questi badge:

  • : toccando questo pulsante i badge azione assegnati agli oggetti nell'area di disegno diventano visibili.
  • Il pulsante Nascondi badge azione: toccando questo pulsante i badge azione assegnati agli oggetti nell'area di disegno vengono nascosti.

Iniziare a utilizzare le azioni

Per provare a utilizzare le azioni, inizia disegnando un quadrato e quindi inserisci tre copie sfalsate del quadrato nell'area di disegno. Quindi, aggiungi etichette a ogni quadrato, numerandolo da 1 a 4, in questo modo:

Sei quadrati sfalsati nell'area di disegno

Per aiutare a illustrare il funzionamento delle azioni, è necessario configurare alcune opzioni aggiuntive; segui questi passaggi:

  1. Se la barra laterale Aree di disegno non è aperta, tocca il pulsante barra laterale Aree di disegno
  2. Tocca e tieni premuto sull'Area di disegno 1 per aprire il menu contestuale; quindi tocca Duplica.
    Duplicazione dell'area di disegno

    Questo inserisce una copia esatta dei quattro quadrati in un'altra area di disegno (denominata Area di disegno 2).

    L'area di disegno duplicata, ora denominata Area di disegno 2
  3. Utilizza la finestra di Impostazioni Riempimento per assegnare colori a ciascuno dei quattro quadrati nell'Area di disegno 2:
    I quattro quadrati colorati nell'Area di disegno 2
  4. Tocca l'Area di disegno 1 e quindi tocca e tieni premuto nel Livello 1 per aprire il menu contestuale:
    Il menu contestuale

    Duplica il Livello 1 due volte, e quindi riordina i livelli in modo che appaiano in ordine numerico:

    I tre livelli di Area di disegno 1 sono visibili elencati in ordine numerico
  5. Nascondi i livelli 1 e 3 toccando l'icona a forma di occhio a sinistra del nome del livello.
  6. Tocca per selezionare il Livello 2
    Il Livello 2 selezionato
  7. Tocca per selezionare il terzo quadrato e assegnagli un colore di riempimento utilizzando la finestra di Impostazioni Riempimento:
    Il terzo quadrato nel Livello 2 dispone ora di un riempimento di colore verde chiaro
  8. Nascondi il Livello 2 e rendi visibile il Livello 3 toccando i rispettivi pulsanti di visibilità il pulsante a forma di occhio. Come con il passaggio precedente, assegna un colore di riempimento a tua scelta al terzo quadrato.
    Il terzo quadrato nel Livello 3 dispone ora di un riempimento di colore azzurro
  9. Infine, tocca per selezionare il Livello 1 e quindi rendi i Livelli 1 e 2 nuovamente visibili toccando i rispettivi icone a forma di occhio pulsanti.
    Il documento OmniGraffle, con due aree di disegno e tre livelli nell'Area di disegno 1

Con il diagramma impostato, è il momento di assegnare alcune azioni a questi quadrati.

  1. Casella 1: Tocca per selezionare la casella 1, e quindi tocca Il pulsante Info per aprire le finestre Impostazioni:
    1. Nell'elenco delle finestre Impostazioni, tocca Azioni, e quindi tocca Apre un URL.
    2. Inserisci l'URL del tuo sito Web preferito nel campo visualizzato, ad esempio:
      Impostazione di un'azione URL su un oggetto

      Dopo aver completato l'inserimento dell'URL tocca Fine. Questo salva l'azione sul quadrato.

  2. Casella 2: Tocca per selezionare la casella 2, e quindi tocca Il pulsante Info per aprire le finestre Impostazioni:
    1. Nell'elenco delle finestre Impostazioni, tocca Azioni, e quindi tocca Passa altrove.
    2. Ora hai tre scelte possibili per la destinazione del tocco sul quadrato:
      • Passare all'area di disegno precedente
      • Passare all'area di disegno successiva
      • Passare a un'area di disegno specifica

      Dal momento che stai lavorando sui quadrati nell'Area di disegno 1, tocca Area di disegno successiva e quindi tocca Fine.

      Impostazione dell'azione Passa altrove per il secondo quadrato
  3. Casella 3: Assicurati di trovarti nell'Area di disegno 1, Livello 1. Tocca per selezionare la Casella 3, e quindi tocca Il pulsante Info per aprire le finestre Impostazioni:
    1. Nell'elenco delle finestre Impostazioni, tocca Azioni, e quindi tocca Mostra o nasconde i livelli; vedrai elencati i tre livelli per la cui visibilità puoi impostare un'azione. Inizialmente, per ogni livello è impostata l'azione Nessuna (ovvero, toccando il livello non succederà nulla).
    2. Imposta le azioni del Livello 1 come segue:
      • Livello 1: Nascondi.
      • Livello 2: Mostra.
      • Livello 3: Nascondi.
      Le azioni per il Livello 1
    3. Apri la barra laterale Aree di disegno (tocca il pulsante barra laterale Aree di disegno) e quindi tocca per selezionare Area di disegno 1, Livello 2. Tocca il pulsante a forma di occhio per nascondere la visibilità per i livelli 1 e 3.
      La configurazione per lavorare sulle azioni per il Livello 2
    4. Se necessario chiudi la barra laterale Aree di disegno, e imposta le azioni per il Livello 2 come segue:
      • Livello 1: Nascondi.
      • Livello 2: Nascondi.
      • Livello 3: Mostra.
      Le azioni per il Livello 2
    5. Apri la barra laterale Aree di disegno (tocca il pulsante barra laterale Aree di disegno) e quindi tocca per selezionare l'Area di disegno 1, Livello 3. Tocca il pulsante a forma di occhio per nascondere la visibilità per i livelli 1 e 2.
      La configurazione per lavorare sulle azioni per il Livello 3
    6. Chiudi la barra laterale Aree di disegno se necessario, e imposta le azioni per il Livello 3 come segue:
      • Livello 1: Mostra.
      • Livello 2: Nascondi.
      • Livello 3: Nascondi.
      Le azioni per il Livello 3
  4. Infine, torna all'Area di disegno 1, Livello 1.

Ci rendiamo conto che si tratta di un sacco di lavoro per una demo veloce. Se ti sei preso il tempo necessario per eseguire tutta la procedura, è il momento di una breve pausa; te la sei guadagnata!

Per eseguire le azioni che hai appena assegnato, tocca due volte lo strumento Azione per ancorarlo (Quando è ancorato, il pulsante dello strumento Azione ha uno sfondo verde scuro). Quando esegui questa operazione, noterai un badge azione vuoto (un badge azione vuoto) sotto le aree di disegno:

Un badge azione vuoto viene visualizzato al centro della barra degli strumenti, sotto l'area di disegno

Quando tocchi il badge azione vuoto, il pulsante si trasforma in il pulsante Nascondi badge azione, ma le azioni assegnate a ogni quadrato diventano visibili.

I badge azione sono ora visualizzati nell'angolo in basso a destra dei primi tre quadrati

Se hai eseguito la procedura correttamente, ecco cosa succede quando tocchi ogni quadrato:

  • Casella 1: il tuo dispositivo iOS passa a Safari e tenta di aprire l'URL assegnato con l'azione Apre un URL. Per tornare a OmniGraffle, fai doppio clic sul tasto Home sul dispositivo iOS, quindi tocca l'icona di OmniGraffle.
  • Casella 2: il documento passa all'Area di disegno 2. Per tornare all'Area di disegno 1, tocca la Casella 2 nell'Area di disegno 2.
  • Casella 3: toccando ripetutamente la casella 3 passerai in sequenza tra i diversi livelli dell'area di disegno 1, e il colore della casella 3 si modificherà a ogni passaggio.
  • Casella 4: assolutamente nulla! Non abbiamo mai impostato un'azione per la casella 4, quindi quando la tocchi non accade nulla.

Come hai visto, le azioni possono essere davvero utili per mostrare le interazioni all'interno dei tuoi diagrammi. Possono operare su più aree di disegno e livelli all'interno dello stesso documento, il che è particolarmente comodo quando devi creare prototipi dell'UI/UX di un'app mobile; e nel caso del prototipo del nuovo design di un sito Web, puoi impostare l'azione Apre un URL per aprire siti Web in tempo reale e illustrare il tuo modello di interazione.