Axure RP - Interazioni avanzate

Fino ad ora, ci siamo fatti conoscere le funzionalità di base di Axure per le interazioni. Tuttavia, ci saranno molti scenari del mondo reale, in cui il prototipo dovrà essere intelligente. Con la parola intelligente, il prototipo dovrà rilevare lo stato di un determinato widget per eseguire un'azione / attivare un determinato comportamento.

Un tipico esempio di tale interazione è l'impostazione del colore di un pulsante. Ciò richiede che l'ingegnere UX indossi il cappello pensante e porti la progettazione del prototipo al livello successivo.

Utilizzo delle variabili in Axure

Variable, per definizione, sta per un fattore che può variare o cambiare. In Axure, possiamo utilizzare le variabili per rappresentare o identificare lo stato di un widget / interazione.

Un tipico esempio sarà la memorizzazione di un valore di dati durante il trasferimento di dati da una pagina all'altra. Per mantenere l'esempio semplice e chiaro, consideriamo uno scenario in cui dobbiamo mostrare lo stato di un particolare widget.

Continuando con il nostro ultimo esempio, consideriamo che vogliamo mostrare quante volte è stata mostrata l'immagine.

Ecco come lo faremo -

  • Creeremo una variabile per iniziare il conteggio a 0.

  • Al clic del pulsante Mostra immagine, incrementeremo il valore di questa variabile.

  • Visualizza il valore nell'etichetta di testo.

Per questo esempio, creeremo un testo sotto il pannello dinamico. Il testo leggerà - L'immagine viene mostrata 0 volte.

Critical- È importante che le etichette siano suddivise in tre. Si prega di seguire i nomi delle etichette e il testo elencati nella tabella.

Nome etichetta Testo etichetta
imageLabel L'immagine è mostrata
countLabel 0 (zero in cifre)
timesLabel Volte

Ciò è necessario poiché si desidera controllare il valore countLabel per ogni clic sul pulsante Mostra immagine.

Definiamo prima una variabile.

Avremo bisogno di una variabile, che verrà controllata quando si fa clic sul pulsante. Questa variabile nella terminologia di Axure è - Variabile globale. Per definire una variabile globale, fare clic su Progetto nella barra dei menu, quindi su Variabili globali. Si aprirà una finestra di dialogo come mostrato nella seguente schermata.

Fare clic sull'icona verde più (+) per aggiungere una variabile globale. Chiamiamo la nostra variabile globale -varDynamicPanel. Il suo valore predefinito sarà0.

Con le interazioni del pulsante Mostra immagine, fare doppio clic su Caso 1. Aggiungere un'altra azione. Come mostrato nello screenshot seguente, l'azione èSet Text on countLabel to [[varDynamicPanel + 1]].

La selezione di un'etichetta di testo su un valore è piuttosto semplice. Vediamo come ottenere il valore da un pannello dinamico.

Come indicato dal passaggio 4 nello screenshot sopra, fare clic su fx e si aprirà la seguente finestra di dialogo.

Sotto la prima area di testo, inserisci la seguente stringa.

[[varDynamicPanel + 1]]

Fare clic su OK.

Ora, dobbiamo assicurarci che la variabile venga aggiornata dopo ogni clic sul pulsante.

Nella finestra di dialogo dell'editor dei casi, in azioni, selezionare Variabili → Imposta valore variabile.

Seleziona il varDynamicPanel come variabile.

Imposta la variabile per recuperare il valore dal testo sul widget come countLabel dalle opzioni disponibili.

Chiudere l'editor dei casi facendo clic su OK. Quindi fare clic sul pulsante Anteprima.

Dopo aver mostrato / nascosto l'immagine per quattro volte, ecco il risultato nella schermata di anteprima.