Axure RP - Interazioni di base

Questo capitolo ti guiderà attraverso l'insieme di interazioni di base fornito da Axure durante la progettazione di uno schermo.

Lo scopo di Axure RP è quello di consentire prototipi interattivi. Ora, quando si tratta di realizzare prototipi interattivi, c'è sempre un avvertimento di creare un prototipo eccessivamente interattivo. Questo è il motivo per cui ha senso iniziare con singole interazioni importanti alla volta, in modo da scorrere il resto delle pagine disponibili.

Interazioni Axure

Interazioni è il termine coniato per gli elementi funzionali che trasformano un wireframe statico in un prototipo interattivo cliccabile. Per renderlo un approccio semplice alle interazioni, Axure elimina la necessità di codificare il prototipo fornendo un'interfaccia per la definizione di strutture e logiche.

Durante la generazione del prototipo HTML, Axure RP converte le interazioni nel codice reale (HTML, CSS e JavaScript). Questo funge da catalizzatore per mostrare il design e le interazioni previsti sulla pagina.

In genere, le interazioni inizieranno con Whenl'interazione sta avvenendo. Ad esempio, quando la pagina viene caricata nel browser, quando l'utente fa clic su uno degli elementi, ecc.

Poi arriva la domanda, Wheresullo schermo avviene l'interazione. Può essere un semplice elemento dello schermo come un rettangolo, che vogliamo trasformare in un pulsante cliccabile ai fini di un menu (esempio mostrato più avanti).

Infine, c'è la descrizione di Whatsta accadendo nell'interazione. Consideriamo il caricamento della pagina quando il browser carica la pagina; puoi semplicemente selezionare una particolare presentazione per iniziare o fare in modo che un'immagine diventi più grande quando viene inserita sullo schermo.

Eventi Axure

Gli eventi in Axure possono essere di due tipi, innescati da due tipi di eventi.

Pagina e eventi di livello master

Quando una pagina viene caricata, si verifica una pletora di eventi per recuperare le informazioni di progettazione, il contenuto e, quindi, l'allineamento di ogni singolo elemento sullo schermo. Poiché questi eventi si verificano durante il caricamento iniziale della pagina, puoi considerare che questi eventi saranno ripetitivi a ogni caricamento della pagina. Di seguito sono riportati alcuni esempi di eventi di livello pagina e master.

  • OnPageLoad
  • OnWindowResize
  • OnMouseMove
  • OnAdaptiveViewChange

Eventi a livello di oggetto o widget

Consideriamo, abbiamo creato una pagina e un particolare widget di pulsanti sulla pagina. Ora, per interagire con questo widget pulsante, magari tramite tocco (su prototipo mobile) o un clic del mouse. Di seguito sono riportati alcuni esempi di eventi a livello di oggetto o widget.

  • OnClick
  • OnMouseEnter
  • OnDrag
  • OnDrop
  • OnMouseHover

Casi

Come discusso nel capitolo precedente, nella sezione delle proprietà della pagina, è possibile progettare una particolare interazione con i widget. Questi sono chiamaticases. Una particolare interazione può essere una costituzione di più casi.

Facciamo un esempio, per capirlo meglio.

Esempio: Prototipo Axure - Mostra menu al passaggio del mouse

Per iniziare con questo esempio, creare un nuovo file facendo clic su New sotto File Menu o utilizzando il tasto di scelta rapida Ctrl + N.

In questo esempio, progetteremo il semplice Menu Barcome si vede nella maggior parte dei prodotti software. La struttura del menu avrà i seguenti elementi di menu e il sottomenu sotto ciascuno di essi.

File

  • New
  • Open
  • Save
  • Close

Edit

  • Cut
  • Copy
  • Paste
  • Find
  • Replace

View

  • Mostra barra di stato
  • Barre degli strumenti
    • Barra degli strumenti principale
    • Barra degli strumenti per lo stile

Help

  • Iniziare
  • Utilizzo della Guida
  • Che cos'è questo

Per iniziare, trascina e rilascia Classic Menu – Horizontalnell'area design. Lo troverai in Librerie → Menu e tabelle. Assegnare al controllo il nome MenuBarExample. Facciamo questo elemento di larghezza 300 px e altezza 30 px. Posizionalo a 100 sull'asse X ea 30 sull'asse Y. Puoi regolare questi valori nella scheda Stile nella sezione Impostazioni a destra.

Alla fine della procedura di cui sopra, sarai in grado di vedere il risultato finale come mostrato nella schermata seguente.

Aggiungiamo i nomi anche ai titoli dei menu nella sezione Inspector. Fai clic su ciascun titolo del menu e osserva la sezione dell'ispettore. Se il nome non viene assegnato alla barra dei menu specifica, il nome diventerà (Nome voce di menu).

Assegna al menu File il nome FileMenu.

Lo stesso vale per Modifica come EditMenu e Visualizza come ViewMenu.

Per confermare se i nomi sono stati forniti, fare clic su ogni singolo menu e confermare in Inspector: Menu Item. Sarai in grado di vedere i nomi e non (Nome voce di menu).

Ora, come da nostro requisito, completiamo la barra dei menu con il menu Aiuto. Fai clic con il pulsante destro del mouse sul titolo della barra dei menu - Visualizza, vedrai un menu contestuale. Fare clic su Aggiungi voce di menu dopo.

Apparirà una voce di menu vuota. Fare doppio clic sulla voce di menu vuota e immettere il titolo del menu come Guida. Ripeti la procedura, assegnandogli un nome in Inspector: Menu Item Name. Una volta completato, vedrai l'area di progettazione come segue.

Successivamente, progettiamo l'interazione per il menu File.

Fare clic sul titolo della barra dei menu File e osservare Inspector: Voce di menu.

Come evidenziato nello screenshot sopra, osserva la scheda Proprietà.

Nella scheda Proprietà, creeremo l'interazione per il menu File.

È molto semplice aggiungere un sottomenu al menu. Fare clic con il pulsante destro del mouse sul menu File, nel menu di scelta rapida visualizzato, fare clic su Aggiungi sottomenu.

Note - Possiamo anche rimuovere il sottomenu ripetendo lo stesso passaggio e facendo clic su Rimuovi sottomenu.

Una volta aggiunto il sottomenu, verrà visualizzato un sottomenu vuoto. Fare doppio clic su ciascuna delle voci di menu e fornire nomi come - Nuovo, Apri, Salva.

Fare clic con il tasto destro sull'ultimo elemento del sottomenu e aggiungere un altro elemento del sottomenu. Denominalo come Close.

È buona norma nominare anche tutti gli elementi del sottomenu nella sezione Inspector. Questo aiuta a fare riferimento a loro nel processo di progettazione generale.

Durante la progettazione di questa parte, notare che ogni volta che si fa clic su qualsiasi altra parte dell'area di progettazione, il sottomenu scomparirà. Dobbiamo fare clic sulla voce di menu File per visualizzare il sottomenu.

Parliamo dell'interazione - Hover. Questa interazione ha un comportamento unico di essere attivata, quando il puntatore del mouse passa sopra un particolare elemento. In Axure, questa interazione viene implementata automaticamente con il menu classico - orizzontale.

Per vedere l'interazione in azione, fai clic sul pulsante Anteprima nella barra degli strumenti. Axure aprirà l'anteprima nel browser predefinito.

Passa il mouse sul menu File. Il sottomenu verrà visualizzato come mostrato nella seguente schermata.

Se lo guardiamo oggettivamente, abbiamo appena utilizzato Axure per creare un'interazione complessa, come il passaggio del mouse sulla voce di menu. Nella normale codifica HTML, ci sarebbero volute da 1 a 1,5 ore di tempo.

Come compito, completa il resto dei menu per i relativi sottomenu.

Ora, creiamo rapidamente un'interazione nel sottomenu Chiudi nel menu File. Lo evidenzieremo in rosso quando ci si sposta. Per fare ciò, fare clic con il pulsante destro del mouse sul sottomenu Chiudi. Fai clic su Stili di interazione ...

Nella scheda MouseOver, seleziona Seleziona colore di riempimento e seleziona il colore rosso. Axure mostrerà immediatamente l'anteprima nell'area di progettazione. Supponendo che la sezione Applica al menu selezionato e tutti i sottomenu siano selezionati, evidenzierà l'intero menu in rosso.

Fare clic su Solo voce di menu selezionata. Ora controlla seleziona Colore carattere e scegli il colore bianco per il carattere. L'anteprima verrà aggiornata immediatamente.

Fare clic su OK per completare questa configurazione.

Fare di nuovo clic su Anteprima per vedere l'interazione in azione.

Questo completa l'esempio.

Puoi provare la seguente interazione come compito rapido.

Proprietà OnClick utilizzando un widget pulsante.