Axure RP - Guida rapida

La parola prototypingè molto comune e rilevante per le persone nello sviluppo di software e nello sviluppo architettonico. Quando si parla di sviluppo architettonico, in Egitto, ci sono prototipi delle Grandi Piramidi di Giza. Questi sono stati costruiti con (ovviamente) una versione più piccola per prendere l'accordo o l'approvazione dal sovrano.

Questo piccolo ma significativo esempio illustra precisamente lo scopo di un prototipo. Secondo Wikipedia, un prototipo è: "Una prima versione o una versione preliminare di un dispositivo o veicolo da cui vengono sviluppate altre forme".

Per il mondo dello sviluppo software, la definizione può essere adattata come una versione preliminare di una pagina, schermo o funzionalità, che supporta l'altro sviluppo visualizzando gli elementi dello schermo in modo efficace e mostrando le interazioni. Questa definizione include la parte più critica, l'interazione.

Nello sviluppo del software, per sviluppare una parte della funzionalità o la funzionalità completa stessa, è richiesto un notevole investimento in termini di tempo e impegno. È un processo senza fine di sviluppo, convalida e correzione dei problemi secondo il feedback dei clienti.

La maggior parte delle società di sviluppo software desidera che questo processo sia il più rapido possibile. Quindi, non vanno avanti con impegno e investimento di tempo da parte di tutti i membri del team. Invece, fanno una mossa intelligente di assumere un ingegnere dell'esperienza utente (UX), che ha le competenze per visualizzare una particolare funzionalità. Questo li porta al posto di guida durante lo sviluppo del prodotto.

In sostanza, la prototipazione è necessaria per simulare e visualizzare i requisiti software nelle prime fasi dello sviluppo. Il processo alla fine diventa vantaggioso sia per le società di sviluppo software che per i clienti poiché riduce l'ignoto nella funzionalità, fornendo così una giusta direzione allo sviluppo.

Fase giusta per lo sviluppo del prototipo

Nell'attuale era di sviluppo software di alto profilo, ci sono stati molti progressi nella tabella del ciclo di vita dello sviluppo software complessivo. Questi progressi derivano dall'aspetto delle tecnologie e dal ruolo / posizione di un particolare membro del team nel ciclo di vita. Una di queste posizioni ha iniziato a ottenere trazione, chiamata ingegnere UX.

Un ingegnere UX è dotato di un set di abilità, che è vantaggioso per i clienti. Utilizzando diverse tecniche o passaggi per conoscere meglio il cliente, l'ingegnere UX può ottenere una buona conoscenza di ciò che l'utente si aspetta da un determinato prodotto software.

Di solito, quando ha luogo il processo di raccolta dei requisiti, le aziende tecnologiche stanno ora coinvolgendo gli ingegneri UX per uscire sul mercato per capire di cosa ha bisogno l'utente. Con l'ultima tendenza del Responsive Web XDesign e dell'approccio Mobile-First allo sviluppo del software, possono esserci una serie di aree su cui si desidera focalizzare la propria attenzione. Un ingegnere UX utilizza processi come interviste agli utenti, sondaggi di mercato per conoscere il polso del pubblico a cui è destinato.

Questo processo richiede tempo oltre che importante, poiché consente al prodotto software di vedere la sua idoneità sul mercato. Questi passaggi vengono utilizzati per raccogliere i requisiti software e richiederli. È una fase ideale, poiché riduce i costi complessivi di sviluppo. Tuttavia, quando il prodotto software è maturo, è possibile introdurre la fase di ricerca UX per valutare la fattibilità del miglioramento in corso.

Per gli ingegneri UX, il processo di comprensione della loro base di utenti non si limita solo a ottenere gli input dal cliente o le relative conversazioni. Ci sono alcuni passaggi interessanti che devono compiere per capire cosa vuole un utente. Il vero lavoro inizia quando sono abbastanza chiari su ciò che l'utente potrebbe aspettarsi dal prodotto software.

Una volta che sono disponibili alcuni dati su come l'utente percepisce il software in arrivo o un miglioramento nel software esistente, l'ingegnere UX torna nella sua tana per progettare l'interfaccia utente per loro. Tradizionalmente o come approccio comune, quando qualcuno dice design, significa software come Adobe Photoshop, CorelDraw o anche Microsoft Paint. A volte, per tornare rapidamente agli utenti, i progettisti di UX utilizzano la buona vecchia carta e penna per progettare le interfacce.

Tuttavia, per il designer UX, fornire la qualità nella progettazione dell'interfaccia utente significa molto di più che mostrare un design fantastico. L'esperienza utente consiste non solo nel modo in cui l'utente vede l'interfaccia, ma anche nel modo in cui l'utente interagisce con essa. Gli strumenti software sopra menzionati e quelli simili sul mercato sono dotati di propri set di funzionalità. È davvero un compito noioso per l'ingegnere UX scegliere il software appropriato che consentirà: brainstorming, progettazione e feedback.

Entra in Axure, il software attualmente di tendenza per progettare bellissime interfacce utente e interazioni. Axure è in circolazione da quasi un decennio per consentire agli ingegneri UX di arrivare ai dettagli della creazione di un prototipo software con facilità. Axure, oltre ad essere lo strumento di prototipazione, ha una potente comunità che contribuisce al mondo UX con molti esempi e interazioni abili.

Ad un livello superiore, di seguito sono riportate le funzionalità offerte da Axure:

  • Diagrammi e documentazione
  • Prototipazione efficace con Dynamic Content
  • Flussi condizionali
  • Belle animazioni per migliorare le interazioni
  • Viste adattive
  • Supporto su Windows e Mac

Per esplorare l'elenco dettagliato delle funzionalità fornito da Axure, visitare https://www.axure.com. Per le istruzioni di installazione, segui il linkhttps://www.axure.com/download.

Per la prototipazione rapida, Axure RP fornisce una vasta gamma di strumenti e tecniche, che aiutano sempre gli ingegneri di Analysts / User Experience a visualizzare l'obiettivo finale.

Con una forte comunità sempre disponibile ad aiutare, Axure RP sta diventando lo strumento preferito per gli appassionati e gli esperti di UX.

Una volta installato Axure, ti verrà presentata un'interfaccia come mostrato nello screenshot seguente.

Questa schermata verrà sempre mostrata all'avvio fino a quando non deciderai di non mostrarla.

In questa schermata sono disponibili le seguenti opzioni:

  • Avvia un nuovo file in Axure
  • Apri un progetto Axure esistente

Creiamo ora un nuovo file con Axure.

Quando fai clic sul pulsante "NUOVO FILE", ti verrà presentata la seguente schermata per creare un nuovo prototipo.

Come mostrato nella figura sopra, l'area di lavoro è divisa in 6 parti.

  • Pages
  • Libraries
  • Inspector
  • Outline
  • Masters
  • Area di progettazione

Esaminiamo queste parti una per una.

Pages

Questa sezione mostra le pagine su cui stai lavorando. Queste pagine sono mostrate in una struttura ad albero predefinita come segue. La home page ha le seguenti pagine figlie.

Casa

Page 1

Page 2

Page 3

Puoi continuare con la struttura data o puoi cambiarla secondo le tue esigenze. Per fare ciò, fai clic con il pulsante destro del mouse su qualsiasi pagina, quindi ti verranno presentate le opzioni come - Aggiungi, Sposta, Elimina, Rinomina, Duplica, ecc.

Come la maggior parte dei diversi strumenti disponibili, questa sezione ti consente di interagire con le pagine del tuo prototipo. Puoi usarlo per pianificare gli schermi nel prototipo previsto.

Riquadro Biblioteche

Nel riquadro delle librerie sono disponibili la maggior parte dei controlli necessari per il prototipo. I controlli tipici disponibili in questa sezione sono: Riquadro, Immagine, Segnaposto, Pulsanti, ecc. Axure RP fornisce un ricco set di controlli dell'interfaccia utente classificati in base alla loro area di applicazione.

Come mostrato nella figura sopra (a), le librerie hanno le categorie: Comune, Moduli, Menu e tabella e Markup. Tutte queste categorie vengono espanse quando apri l'applicazione. Per comodità, è compresso in questo screenshot.

Le librerie comuni includono forme di base, pulsanti, testo dell'intestazione, Hot Spot, pannello dinamico, ecc.

Con Axure RP, per tutte le vostre esigenze di prototipazione, arriva un controllo molto efficace chiamato Hot Spot. Utilizzando questo controllo, puoi fornire l'interazione con i clic a quasi tutti i controlli nell'interfaccia utente. Un esempio verrà fornito nelle pagine successive.

Nella libreria dei moduli, come suggerisce il nome, sono inclusi Casella di riepilogo, Casella di controllo, pulsante di opzione, area di testo e controlli del campo di testo. Per progettare un modulo di input utente, è possibile utilizzare i controlli di questa sezione nella libreria.

Menu e tavoli hanno una struttura tradizionale. Tale struttura, forse in una forma orizzontale o verticale, è disponibile in questa libreria chiamata Menu e tabelle.

Ultimo, ma non meno importante, arriva la libreria Markup, che include sticky, marker e frecce. Principalmente, verrà utilizzato per le annotazioni nel tuo prototipo.

Area di progettazione

Questo è il vero terreno di gioco per gli ingegneri UX. Questo spazio verrà utilizzato per la creazione dei prototipi secondo le vostre esigenze. Per iniziare, fare riferimento all'area evidenziata con il numero 6 nella schermata seguente.

In quest'area, puoi trascinare e rilasciare i controlli desiderati dalla libreria. Creiamo una barra dei menu rapidi utilizzando la libreria.

Esempio: barra dei menu

Dalle librerie, in Menu e tabella, trascina Menu classico - Controllo orizzontale nell'area di progettazione.

Dopo aver trascinato il controllo nell'area di progettazione, vedrai la seguente schermata.

Come mostrato nella schermata sopra, Axure RP è abbastanza intelligente da mostrare il testo desiderato in un menu. Considerando che si tratta di una barra dei menu, Axure RP ha creato automaticamente i menu File, Modifica e Visualizza come nel controllo.

Come indicato dalla freccia, la sezione inspector mostra le proprietà del controllo. Utilizzare questa sezione per creare un nome per il controllo per l'identificazione univoca, durante la creazione di prototipi complessi.

Diamo un nome a questo controllo come TestMenu. Useremo questo nome negli esempi precedenti.

Proprietà della pagina

Quando si pianifica un prototipo, ha senso avere un'idea chiara dell'utente e quindi del dispositivo su cui verrà mostrato / visualizzato il prototipo. Per la migliore esperienza di interazione con il prototipo, Axure ha fornito una funzionalità per impostare le proprietà della pagina.

Come mostrato nella figura sopra, l'area indicata dal numero 3 è la sezione delle proprietà della pagina. In questa sezione, potrai vedere il menu a discesa delle interazioni e la sottosezione Adattivo.

Cerchiamo di discutere queste sezioni in dettaglio.

Interactions sectionsi occupa delle possibili interazioni (casi) con la pagina. Come puoi vedere, il caso di interazione OnPageLoad gestisce gli eventi quando la pagina viene caricata. Nella maggior parte dei prototipi, gli ingegneri UX preferiscono inserire un'animazione per fare la prima impressione. Questo particolare evento per la visualizzazione dell'animazione viene solitamente attivato sul caso OnPageLoad.

Allo stesso modo, altri casi includono: OnWindowResize, OnWindowScroll. Nel menu a discesa, Altri eventi, puoi vedere altri casi supportati per configurare le interazioni relative alla pagina.

Con il Adaptive section, Axure RP entra in un responsive web design. Al giorno d'oggi, progettare un'esperienza per i siti Web non è sufficiente, insieme a questo, le aziende preferiscono che i siti mobili coesistano con i siti Web.

La stessa pagina, vista da diverse dimensioni dello schermo e layout, costituisce viste adattive diverse. Di solito, le visualizzazioni adattive sono progettate per cellulari e tablet. Axure fornisce questa funzionalità di viste adattive, in modo che gli ingegneri UX abbiano una presa sull'aspetto reattivo dei prototipi fin da zero.

Il riquadro Impostazioni per il widget

Il riquadro Widget Interactions è la sezione più critica di Axure. È possibile visualizzare questo riquadro facendo clic su qualsiasi widget nell'area di progettazione.

Considera un esempio della voce di menu che abbiamo utilizzato nella sezione precedente. Seleziona la voce di menu denominata TestMenu e osserva la sezione evidenziata nello screenshot seguente.

Come puoi vedere nella scheda Proprietà, ci sono diverse interazioni come OnMove, OnShow, OnHide e OnLoad. Questi sono specifici per il controllo Menu nel suo complesso.

Ora, fai clic su File dal controllo del menu.

Noterai un cambiamento nel tipo di interazioni nel riquadro Proprietà widget. Inoltre, fornisce flessibilità per fornire un nome per questa voce di menu. Prendiamo come esempio il caso OnClick.

OnClick- Il case OnClick definisce il comportamento del controllo, quando si fa clic sul controllo durante l'esecuzione del prototipo. Ciò consente varie interazioni come la navigazione della pagina, il popup del menu, ecc.

Notes Pane- Nel pannello di ispezione stesso, c'è una sottosezione chiamata Note. Nel riquadro delle note, potrai aggiungere alcuni punti da ricordare, per il controllo della tua scelta.

Questi punti saranno chiari una volta che ci immergeremo in un esempio nel prossimo capitolo.

Griglie e guide

Per un prototipo con il massimo livello di qualità e precisione, gli ingegneri UX richiedono la capacità di allineare / posizionare un controllo con l'altro controllo.

Ad esempio, considera di voler mostrare un popup di accesso. Se questo popup deve essere visualizzato proprio al centro dello schermo, sono necessarie le dimensioni complessive dello schermo. Inoltre, per allinearlo esattamente al centro dello schermo, dovresti avere le griglie per allinearlo in modo appropriato.

Axure fornisce la funzionalità di Griglie e Guide, in modo da poter utilizzare efficacemente l'area di progettazione.

Per vedere griglie e guide disponibili, fare clic con il pulsante destro del mouse sull'area di progettazione e verrà visualizzato il menu di scelta rapida mostrato nella seguente schermata.

Ora, cerchiamo di capire le opzioni disponibili.

Grid- Le prime tre opzioni mostrate nel menu contestuale sono associate alle griglie. Sono Mostra griglia, Blocca su griglia e Impostazioni griglia.

  • Show Grid- Quando Mostra griglia è abilitato, sarai in grado di vedere la griglia nell'area di progettazione come mostrato nello screenshot seguente. Ciò è molto utile per allineare i controlli con gli altri controlli sullo schermo.

  • Snap to Grid- Quando Snap to Grid è abilitato, i controlli verranno automaticamente collegati in base alle griglie presenti intorno. Sarai in grado di vedere questo comportamento quando trascinerai un controllo e si attaccherà alla griglia vicina.

  • Grid Settings- Altre impostazioni relative alle Griglie sono presenti in questa finestra di dialogo. Come mostrato nello screenshot seguente, la spaziatura tra la griglia, il tipo di griglia, ecc. Saranno disponibili in questa finestra di dialogo. Puoi selezionare le griglie di tipo intersezione, secondo la tua convenienza.

Guides - Nel menu contestuale come mostrato nella seguente schermata, le opzioni dopo il primo separatore sono relative alle guide.

Tratteremo le opzioni comunemente utilizzate per le guide.

  • Show Global Guides- Queste guide saranno visibili quando trascini dai righelli orizzontale e verticale nell'area di disegno. Provalo tu stesso!

  • Show Page Guides- Le guide sono disponibili anche a livello di pagina. Queste guide vengono create trascinandole dai righelli verticale e orizzontale. Sono più comuni delle guide globali. Avere una guida alla pagina aumenta la flessibilità del design a livello di pagina.

  • Show Adaptive Guides- Quando si tratta di progettare le pagine per diverse visualizzazioni adattive, vale la pena avere le guide adattive in atto. Questa opzione consente la visibilità delle guide adattive, che verranno utilizzate per allineare gli oggetti su diverse viste adattive.

  • Snap to Guides- Quando si dispongono i diversi elementi dello schermo nell'area di progettazione, questa funzionalità consente di agganciare gli oggetti alle guide. Ciò è utile quando si posiziona un particolare oggetto sullo schermo e lo si dispone rispetto all'altro oggetto.

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.

Molti degli approcci allo sviluppo del software, quando si tratta di sviluppo delle interfacce utente, utilizzano una tecnica comune: la creazione di master.

Un master è un wireframe riutilizzabile, che verrà creato una volta e utilizzato ampiamente in seguito nelle pagine successive. Con Axure RP, quando creiamo una pagina master, le modifiche apportate a questa pagina verranno applicate alle pagine in cui viene utilizzata. Quindi, riduce notevolmente il tempo per i componenti comuni a tutte le pagine.

Per iniziare con i Master, puoi concentrarti sulla sezione Master (contrassegnata come 5) come evidenziato nello screenshot seguente.

Usa questa sezione master per:

  • Organizza i master del prototipo aggiungendo, eliminando o modificando la pagina / cartella master.

  • Seleziona un particolare master per la modifica.

Pannelli dinamici

In Axure RP, come abbiamo visto nel capitolo precedente, ci sono diversi stati associati a un dato widget. Per consolidare / organizzare gli stati di un particolare widget o set di widget, abbiamo bisogno di un contenitore / segnaposto. I pannelli dinamici fungono da contenitore / segnaposto per gli stati di un widget.

Cerchiamo di capire meglio il pannello dinamico utilizzando un esempio. Continueremo dal nostro esempio della barra dei menu.

L'aggiunta in questo esempio sarà un'area dell'immagine e un pulsante sotto la barra dei menu. Utilizzare il segnaposto del widget per l'area dell'immagine e il pulsante sotto i widget comuni. Assegna al segnaposto il nome ImageAreaPlaceholder, pulsante come showImageButton.

Inoltre, aggiungiamo la barra dei menu ai master. Fare clic con il pulsante destro del mouse sulla barra dei menu e fare clic su Converti in master. Apparirà una finestra di dialogo che richiede il nome del master. Aggiungi il nome come menuBarMaster.

Come mostrato nella schermata sopra, la barra dei menu diventa rosa e la voce per i master è stata aggiunta.

Ora creiamo un pannello dinamico. Il contesto per il pannello dinamico è che si desidera controllare la visibilità dell'area dell'immagine in base al clic sul pulsante Mostra immagine. Avere un pannello dinamico consentirà la flessibilità dell'area dell'immagine.

Vediamo come creare il pannello dinamico. Fare clic con il tasto destro sull'area dell'immagine, verrà visualizzato il menu di scelta rapida, selezionare Converti in pannello dinamico.

Il pannello dinamico si troverà sotto Struttura: Pagina. Sempre sotto Inspector, mostra il pannello dinamico. Assegna al pannello dinamico il nome showImageDynamicPanel. Il nome di questo pannello dinamico verrà aggiornato nella sezione Struttura: pagina.

Nell'area di progettazione, fare clic con il pulsante destro del mouse sul pannello dinamico Mostra immagine per visualizzare il menu contestuale. Seleziona Imposta nascosto, il pannello dinamico scomparirà dallo schermo.

È possibile accedere al pannello dinamico facendo doppio clic su Struttura: Pagina.

Ora, forniamo un evento clic al pulsante. Fare clic sul pulsante Mostra immagine, in Impostazioni → Proprietà, fare doppio clic sull'interazione al clic.

Come mostrato nello screenshot sopra, fai clic su Mostra / Nascondi in Widget. Mostrerà automaticamente i widget disponibili per configurare le azioni. Controllare selezionare showImageDynamicPanel. Fare clic su OK.

Ora fai clic su Anteprima. Nella schermata di anteprima, fare clic su Mostra immagine. Viene finalmente creata un'altra interazione per un pulsante.

In questo capitolo, discuteremo la logica condizionale utilizzata in Axure RP.

Se - Allora - Altro in Axure

Proprio come qualsiasi altro strumento di programmazione, Axure supporta anche la logica condizionale per creare interazioni avanzate nei prototipi. Una volta acquisita familiarità con il modo in cui è possibile fornire interazioni, fornire una logica condizionale alle interazioni è il livello successivo.

Di seguito è riportato il flusso semplice e conciso per la logica condizionale:

  • Se si fa clic su un particolare widget / schermo
  • Quindi, esegui una particolare azione / interazione
  • Altrimenti, mantieni / modifica lo stato del widget o dello schermo

Per capirlo meglio, riprendiamo il nostro flusso dall'esempio precedente. A tal fine, è necessario che conosciamo il Condition Builder.

Il generatore di condizioni

Fare doppio clic su una qualsiasi delle interazioni, ad esempio OnClick. Sarai in grado di vedere l'Editor dei casi come mostrato nello screenshot seguente.

Fare clic sul pulsante - Aggiungi condizione accanto al nome del caso. Verrà mostrato di seguito nella finestra di dialogo.

Come mostrato nella descrizione, il generatore di condizioni creerà il flusso If-Then-Else secondo le condizioni scelte nella sezione delle condizioni.

Creiamo una condizione su questo pulsante.

Vogliamo mostrare il pulsante Nascondi immagine, una volta che il pannello dinamico è visibile. Abbiamo reso visibile il pannello dinamico facendo clic sul pulsante Mostra immagine nell'esempio precedente. Ora, rendiamo visibile un altro pulsante Nascondi immagine.

Chiudi il generatore di condizioni e torna all'area di progettazione.

Inserisci il pulsante Nascondi immagine dalle Librerie nelle librerie comuni. Per ribadire, è buona norma nominare l'elemento dell'interfaccia utente subito dopo averlo inserito nell'area di progettazione.

Fare clic con il pulsante destro del mouse sul pulsante Nascondi immagine e fare clic su Imposta nascosto. Il pulsante verrà nascosto dall'area di progettazione come mostrato nella seguente schermata.

Ora, torniamo alle interazioni per il pulsante Mostra immagine.

Innanzitutto, sotto le interazioni del pulsante Mostra immagine, fai doppio clic sul caso 1, sarai in grado di vedere l'editor del caso. Utilizzare l'azione Mostra / Nascondi per selezionare hideImageButton e impostarne la visibilità da mostrare.

Allo stesso modo, usando l'azione Mostra / Nascondi, seleziona showImageButton e imposta la sua visibilità per nascondere.

Abbiamo gestito la visibilità del pulsante Nascondi immagine in modo tale che, quando facciamo clic sul pulsante Mostra immagine, verrà visualizzato il pulsante.

Una condizione completa sarà come mostrato nella seguente schermata.

Cerchiamo di costruire la condizione.

Sotto l'area di progettazione, fai clic sul pulsante Nascondi immagine. Dalla sezione Inspector, fai clic su Aggiungi caso.

In Aggiungi caso, fai clic sul pulsante Aggiungi condizione. Come per lo sfondo fornito in precedenza, creare il set di condizioni utilizzando i valori a discesa nel generatore di condizioni.

In parole semplici, con la condizione di cui sopra, stiamo controllando se il pannello dinamico showImageDynamicPanel è visibile o meno

Ora, progettiamo l'interazione per il pulsante Nascondi immagine, configuriamola come segue:

  • Seleziona Mostra / Nascondi azione.
  • Seleziona il widget showImageDynamicPanel.
  • Imposta la visibilità su Nascondi.

Allo stesso modo, ripetere il drill per mostrare showImageButton e nascondere il hideImageButton.

Al termine, fare clic su OK per chiudere Case Editor.

Quindi, fai clic su Anteprima per vedere le modifiche apportate.

I risultati positivi saranno quelli mostrati nelle schermate seguenti.

Quando si fa clic sul pulsante Mostra immagine -

Quando si fa clic sul pulsante Nascondi immagine -

Fino ad ora, ci siamo fatti conoscere le caratteristiche 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.

Ora che sei esperto con le diverse interazioni ed eventi possibili in Axure, potresti voler estendere il tuo lavoro per ridurre al minimo gli sforzi in futuro.

Ad esempio, il primissimo esempio con Menu classico - Orizzontale, era già presente nelle versioni Axure come combinazione di diversi widget disponibili. Ciò significa che Axure si è evoluto nel tempo per accogliere i widget utilizzati di frequente sotto forma di singlewidget library.

Il concetto di libreria di widget è applicabile in modo più evidente nei grandi team UX. Alcune organizzazioni mantengono i widget approvati per i successivi ingegneri UX su un repository centrale.

Quindi, in poche parole, Axure Widget Library è una raccolta di widget personalizzati archiviati in un unico file. Il tipo di file per Axure Widget Library èRPLIB.

Tipi di librerie di widget

Librerie integrate Axure

Queste librerie sono accessibili dal riquadro Librerie. Queste librerie non possono essere aggiornate / rimosse. Per la maggior parte delle complesse esigenze di prototipazione, le librerie integrate di Axure vengono in soccorso.

La libreria è composta da 17 widget di flusso unici, che vengono utilizzati principalmente per la creazione di diagrammi. Inoltre, ci sono 25 widget nella libreria wireframe.

Un breve funzionamento delle librerie è presente nel Capitolo 3 - Interfaccia utente.

Librerie personalizzate Axure

La comunità Axure, che cresce di giorno in giorno, ha una vasta collezione di librerie create dagli utenti. Puoi visitarli a -https://www.axure.com/support/download-widget-libraries.

I professionisti UX di tutto il mondo, che si impegnano a far crescere questa community, inviano il loro lavoro al link sopra.

È possibile scaricare le librerie dal sito Web e aggiungerle ad Axure utilizzando l'opzione Carica libreria nelle librerie. Inoltre, puoi scaricare direttamente le librerie dall'interfaccia dell'applicazione stessa.

Come mostrato nella schermata sopra, abbiamo un menu contestuale, dove puoi scaricare diverse librerie come offerte su https://www.axure.com/support/download-widget-libraries. Puoi anche creare la tua libreria, che sarà utile durante la creazione di controlli ripetitivi per un dato prototipo.

Le istruzioni complete per scaricare / caricare le librerie sono disponibili su: https://www.axure.com/support/reference/widget-libraries.

Quando si tratta di utilizzare un widget personalizzato da una delle librerie caricate, trascinalo nell'area di progettazione in modo simile ai widget incorporati. Se il widget include variabili o uno stile personalizzato, il fileImport Wizard la finestra di dialogo contrassegnerebbe tali dipendenze.

Tra queste dipendenze, potresti notare che ci sono alcuni stili incompatibili forniti con la libreria dei widget importata. Puoi scegliere di farloCancel e importa solo i widget o fai clic su Finish pulsante per importare l'intero pacchetto.

Dopo aver trascinato e rilasciato un widget nel wireframe, quella particolare istanza non è più associata alla sua libreria di widget originale. Pertanto, le modifiche e le modifiche apportate ai widget nella libreria dei widget importati non vengono applicate a nessuna delle istanze di questi widget nel file di progetto, anche dopo aver aggiornato la libreria. Siate certi, una volta importati, potrete utilizzare i widget nella libreria importata senza preoccuparvi degli aggiornamenti che avvengono nella stessa libreria di widget disponibile online.

Utilizzando RPLIB

L'utilizzo di un file della libreria Axure RP è piuttosto semplice. Quando scarichi una libreria, l'icona del file della libreria (.rplib) si distingue chiaramente dal file prototipo Axure RP (.rp). Ad esempio, come si vede nello screenshot seguente.

Il meccanismo per farlo funzionare: puoi importare il documento Wireframe iOS in iOS Wireframe Demo.

Questa libreria può essere utilizzata per più progetti e gli aggiornamenti nel file della libreria saranno disponibili dopo aver aggiornato la libreria dal menu contestuale. Come evidenziato in precedenza, questo è molto utile quando si lavora a un progetto di gruppo e si distribuiscono le librerie in questo modo.

Axure RP 8 supporta la collaborazione con la funzione - Progetti di squadra. Questa funzione non è solo vantaggiosa per i team distribuiti ma anche per il singolo utente. Il vantaggio per il singolo utente è la possibilità di creare versioning sui lavori in corso.

Lavorare con i progetti del team

Nello scenario Progetti team, ogni membro del team ha una copia del progetto sul proprio computer. Questo progetto verrà sincronizzato con un repository condiviso. Questo repository condiviso è connesso ad altri membri del team.

Dopo il corso di una giornata di lavoro, ogni membro del team creerà nuovi elementi, ritirerà i file e generalmente modificherà il progetto. Check Out è un termine comunemente usato per indicare il lavoro in corso per un particolare file.

Le modifiche non si rifletteranno nel repository condiviso fino a quando il membro del team non avrà archiviato tutti gli elementi estratti. IlManage Team Project console fornisce a tutti i membri del team una visualizzazione in tempo reale dello stato di disponibilità degli elementi gestiti dal sistema.

Questa visualizzazione fornisce i dettagli di un elemento estratto da un altro membro del team.

Avvia un progetto di squadra

Per lavorare o creare un progetto di squadra, vai al menu Team. Fare clic su Team e quindi selezionare Crea progetto team dal file corrente. Viene visualizzata la seguente schermata.

Le opzioni disponibili per ospitare un progetto di squadra sono: utilizzare AxShare e SVN. Discuteremo AxShare nella prossima sezione. SVN è il sistema di controllo della versione comunemente usato, che fornisce un server per ospitare i tuoi documenti.

Segui le linee guida sullo schermo per creare un progetto di squadra e poi sarai in grado di iniziare a collaborare con un singolo file Axure in tutto il team / usarlo per il tuo archivio storico.

Axure Share

Quando si tratta di mostrare il tuo prototipo, ci sono più opzioni disponibili a seconda dell'ambiente in cui ti trovi. Il metodo più comunemente usato per esportare il tuo prototipo è usare Axure Share (aka AxShare).

Con Axure Share sono possibili le seguenti capacità di collaborazione.

  • I prototipi possono essere ospitati su Axure Share e condivisi con i membri del team / clienti coinvolti.

  • Con la funzione discussione / commenti, puoi ottenere gli input in movimento sul prototipo in fase di realizzazione.

Una volta che sei pronto con il prototipo, puoi caricare il prototipo su AxShare utilizzando Pubblica → Pubblica su Axure Share. Verrà visualizzata la seguente finestra di dialogo.

È necessario creare un account su AxShare.com per procedere. Se hai già un account, puoi utilizzare l'opzione "Accedi" per accedere e caricare il tuo lavoro su AxShare .

I dati caricati sono in HTML, CSS e JavaScript. Una volta caricato, ti viene fornito un link, che puoi fornire agli stakeholder / team previsti.