Hotspot

Un Hotspot è un oggetto interattivo dedicato a cui puoi aggiungere un'Interazione di Pagina o di Oggetto.

Sebbene gli Hotspot si comportino come altri oggetti ai fini dello spostamento, ridimensionamento, raggruppamento e blocco, sono progettati per essere invisibili in un Prototipo interattivo. Di conseguenza, funzionano diversamente dagli altri oggetti sia in modalità Modifica che in modalità Anteprima:

• In Modalità Modifica, appaiono come una sovrapposizione verde traslucida in modo che tu possa lavorarci e vedere dove sono stati applicati. Puoi anche scegliere di nasconderli in modo che non ostacolino il lavoro in corso.
• In Modalità Anteprima, gli Hotspot sono attivi e risponderanno alle azioni dell'utente (chiamate 'trigger'). In modalità Anteprima, gli Hotspot sono invisibili per impostazione predefinita – anche se puoi renderli temporaneamente visibili tenendo premuto il tasto Shift.

Il vantaggio di usare un Hotspot – invece di applicare un'Interazione di Pagina o di Oggetto a un oggetto esistente – è che puoi regolarne le dimensioni e la forma, indipendentemente dagli oggetti nella pagina. Ciò significa che puoi aggiungere interattività su un'area specifica di una pagina o di un gruppo di oggetti.

Ecco alcuni casi d'uso per gli Hotspot:

• Applicare più aree di interattività a un'immagine più grande caricata come singola unità, come un design finito
• Definire aree specifiche di interattività per stencil composti da più elementi, come i menu

Aggiungere hotspot

Puoi aggiungere un hotspot nella posizione del cursore o sopra un oggetto specifico. Oppure puoi disegnare l'hotspot tu stesso usando il toolkit Quick Draw.

Proprio come tutti gli altri oggetti – stencil, immagini, icone e template – gli Hotspot sono elencati nel Pannello Schema. Quando gli Hotspot vengono aggiunti alla pagina, appaiono in cima all'Albero Schema. Per impostazione predefinita, vengono nominati per numero, in base all'ordine in cui sono stati aggiunti alla pagina. Per cambiare il nome di un Hotspot, fai doppio clic sul suo titolo corrente nell'Albero Schema.

Aggiungere un Hotspot alla pagina

Per aggiungere un Hotspot nella posizione del cursore:

1. Senza alcun oggetto selezionato, fai clic destro sulla pagina e fai clic su Aggiungi hotspot

   oppure

   Fai clic sul pulsante Aggiungi hotspot nel Pannello Interazioni

Per creare un Hotspot sopra un oggetto specifico:

1. Fai clic destro sulla pagina e fai clic su Aggiungi hotspot

   oppure

   Fai clic sul pulsante Aggiungi hotspot nel Pannello Interazioni

2. Un hotspot apparirà sopra il frame dell'oggetto e ne corrisponderà le dimensioni

Disegnare un Hotspot sulla pagina

Per disegnare un Hotspot dal toolkit Quick Draw o con una scorciatoia da tastiera:

1. Fai clic sul pulsante Hotspot nel menu a tendina, o premi il tasto H.
2. Fai clic e trascina il cursore a mirino per creare uno o più hotspot.
3. Aggiungi interazioni usando il pannello Interazioni

Comportamento appiccicoso per gli hotspot

Gli hotspot appiccicosi sono molto utili se stai aggiungendo un hotspot a un elemento all'interno di un gruppo di oggetti, o a un'area specifica all'interno di un singolo oggetto. Ad esempio, potresti farlo per creare un punto o pulsante cliccabile all'interno di quell'area più grande. Poi, mentre riorganizzi il design, l'hotspot si sposterà insieme ad esso.

Tuttavia, se l'hotspot ha esattamente le stesse dimensioni di un oggetto o gruppo, devi spostare l'hotspot da parte per poter afferrare l'oggetto e spostarlo. In queste circostanze, è meglio applicare un'interazione di oggetto piuttosto che un hotspot.

Per impostazione predefinita, il comportamento appiccicoso è attivo per tutti gli Hotspot, ma puoi disattivarlo nel Pannello Formato.

Per attivare o disattivare il comportamento appiccicoso di un hotspot:

1. Seleziona un Hotspot
2. Vai alla Barra Laterale Destra e fai clic sulla Scheda Formato per aprire il Pannello Formato
3. Naviga alla sezione Comportamento appiccicoso.
4. Fai clic sul pulsante Appiccicoso o Normale per applicare quel comportamento
5. Trascina l'hotspot sull'oggetto o gruppo a cui vuoi che si attacchi

Formattare gli hotspot

Dopo aver creato un Hotspot, puoi regolarne le dimensioni, la posizione o arrotondarne gli angoli. Puoi anche scegliere di nascondere gli Hotspot rendendoli invisibili.

Dimensioni

Nella pagina, usa le maniglie di ridimensionamento per modificare le dimensioni dell'Hotspot.

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

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

Posizione

Nella pagina, seleziona un Hotspot e trascinalo nella posizione desiderata.

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

Angoli arrotondati

Puoi arrotondare gli angoli di un hotspot per farlo corrispondere alla tua grafica o ai tuoi pulsanti:

Per arrotondare gli angoli di un Hotspot:

1. Seleziona un Hotspot
2. Vai alla Barra Laterale Destra e fai clic sulla Scheda Formato per aprire il Pannello Formato
3. Naviga alla sezione Angoli arrotondati.
4. Per impostazione predefinita, l'arrotondamento in pixel si applica a tutti gli angoli, ma puoi fare clic sul pulsante Annulla la sincronizzazione angoli per regolarne ognuno separatamente.
5. L'opzione Scala Raggio regola la dimensione in pixel per mantenere le proporzioni dell'arrotondamento mentre ingrandisci o riduci un oggetto.

Visibilità

In Modalità Modifica, tutti gli Hotspot su una pagina sono visibili con una sovrapposizione verde traslucida.

Se vuoi rendere tutti gli Hotspot invisibili mentre lavori al progetto:

1. Fai clic sulla Scheda Interazioni per aprire il Pannello Interazioni
2. Vai alla sezione Opzioni e deseleziona Mostra hotspot

Aggiungere interazioni agli hotspot

Ogni interazione è composta da tre parti: un Trigger, un'Azione e un Obiettivo.

• Un Trigger è l'evento che mette in moto un'interazione.
• Un'Azione è un'istruzione che viene eseguita dopo che un trigger è stato attivato.
• Un Obiettivo è il risultato finale visibile al termine di un'interazione.

Il processo di aggiunta di un'interazione a un Hotspot è esattamente lo stesso dell'aggiunta a qualsiasi altro oggetto. Tuttavia, in questo caso, l''oggetto' è un Hotspot invisibile che rappresenta un'area interattiva nella pagina.

Puoi aggiungere Interazioni di Pagina o Interazioni di Oggetto a un Hotspot.

Consulta il nostro articolo sulle Interazioni di Pagina e l'articolo sulle Interazioni di Oggetto per ulteriori informazioni su queste interazioni, nonché istruzioni dettagliate su come applicarle a tutti gli oggetti, inclusi gli Hotspot.

Ma se vuoi iniziare subito, ecco alcune istruzioni brevi:

Per aggiungere un'Interazione a un Hotspot:

1. Seleziona l'Hotspot a cui vuoi aggiungere l'interazione
2. Fai clic sulla Scheda Interazioni per aprire il pannello
3. Scegli un Trigger dal menu a tendina superiore
4. Nel secondo menu a tendina, seleziona un'Azione dall'elenco Interazioni di Pagina o Interazioni di Oggetto
5. Imposta un Obiettivo, usando il menu a tendina o il pulsante con mirino, per selezionare un oggetto o una pagina come destinazione finale dell'interazione.
6. Fai clic su Fatto per applicare l'interazione

Modificare, duplicare o eliminare interazioni

Quando applichi un'interazione a un oggetto, questa appare immediatamente nell'Elenco Interazioni in cima al Pannello Interazioni. Man mano che aggiungi altre interazioni allo stesso oggetto, le vedrai apparire lì. Puoi facilmente modificare o eliminare qualsiasi interazione dall'elenco – o duplicare un'interazione per un rapido riutilizzo.

Modificare un'Interazione

Modificare un'interazione è utile quando vuoi cambiare parti di un'interazione già esistente. Utilizzando la funzione di modifica, puoi aggiornare il Trigger, l'Azione o l'Obiettivo individualmente – senza influire sulle altre parti dell'interazione.

Per modificare un'interazione:

1. Seleziona l'oggetto o il gruppo di oggetti la cui interazione desideri modificare
2. Fai clic sulla Scheda Interazioni per aprire il Pannello Interazioni
3. In cima al pannello, individua l'interazione che vuoi modificare
4. Fai clic sul pulsante Modifica per attivare la modalità di modifica
5. Modifica l'interazione e fai clic su Fatto per salvare le modifiche
6. L'interazione aggiornata lampeggerà in verde nell'elenco per qualche secondo

Duplicare un'Interazione

Spesso potresti voler applicare diverse varianti di un'interazione allo stesso oggetto. La funzione Duplica ti consente di duplicare un'interazione esistente e quindi modificarne il Trigger, l'Azione e l'Obiettivo secondo le tue esigenze.

Per duplicare un'interazione:

1. Seleziona l'oggetto o il gruppo di oggetti da cui vuoi duplicare un'interazione
2. Fai clic sulla Scheda Interazioni per aprire il pannello Interazioni
3. In cima al pannello, individua l'interazione che vuoi duplicare
4. Fai clic sull'icona Duplica e un'interazione identica apparirà nell'Elenco Interazioni in cima al pannello
5. Per modificare la nuova interazione, fai clic sul pulsante Modifica e segui i passaggi dalla sezione Modificare le Interazioni di questo articolo

Eliminare un'Interazione

Per eliminare un'interazione:

1. Seleziona l'oggetto o il gruppo di oggetti da cui vuoi eliminare un'interazione
2. Fai clic sulla Scheda Interazioni per aprire il pannello Interazioni
3. In cima al pannello, individua l'interazione che vuoi eliminare
4. Fai clic sul pulsante Elimina