Axure RP - Interfaccia utente
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.