Axure RP - Utilizzo di master e pannelli dinamici

Molti degli approcci allo sviluppo del software, quando si tratta di sviluppo di 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. Pertanto, 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.