Esporta

Uno dei punti di forza di Moqups è che tutti gli stakeholder possono collaborare online, in tempo reale, ovunque si trovino e da qualsiasi dispositivo. Ma ci sono ancora molti scenari in cui ha senso tornare al tradizionale e esportare una parte, o anche l'intera totalità, dei tuoi progetti Moqups.

L'esportazione ti consente di condividere il tuo lavoro con persone che potrebbero lavorare in un ambiente offline, che non hanno accesso completo a un particolare progetto o che non hanno un account Moqups.

E su progetti complessi, esportare solo una parte di quel progetto può talvolta aiutare a focalizzare la discussione o semplificare la navigazione.

Chi può utilizzare questa funzionalità?

Puoi esportare i progetti Moqups come…

Una serie di immagini in formato PNG o PDF

oppure

Una versione offline HTML del Viewer stesso

Moqups ti consente anche di esportare singoli oggetti o gruppi di oggetti.

Il seguente articolo ti mostra come accedere alla funzione Esporta. Spiega inoltre ogni formato di esportazione, nonché le opzioni di esportazione disponibili per ciascun tipo.

Accedere all'esportazione

Puoi accedere alla funzione Esporta da…

• Barra degli Strumenti Superiore
• Menù Principale di Moqups
• Pannello Pagine (utilizzando il menu contestuale con clic destro)

Ognuno di questi metodi di accesso apre la Finestra di Dialogo Esporta Progetto, mostra le pagine/cartelle selezionate, ti consente di scegliere il Formato e le Opzioni di esportazione e ti chiede di scegliere una Destinazione per i file esportati.

Esportare in PNG, PDF e HTML Viewer

Nella parte superiore della Finestra di Dialogo Esporta Progetto, puoi scegliere di esportare in formato PNG, PDF o come HTML Viewer. Ognuno di questi tipi di esportazione presenta vantaggi specifici e opzioni di esportazione.

Esportare come PNG

• Esporta una serie di file immagine PNG individuali.
• È una buona soluzione se vuoi incorporare quelle immagini in pagine web o modificarle ulteriormente in altri software grafici.
• Esporta come mio_nome_progetto.zip.

Esporta come PNG offre cinque Opzioni di esportazione nella Finestra di Dialogo Esporta Progetto:

• Tutte le pagine o Pagine selezionate:

  Se vuoi esportare pagine e/o cartelle selezionate, devi selezionarle prima di accedere alla funzione Esporta.

• Includi pagine nascoste:

  Selezionando questa opzione vengono incluse le pagine impostate come invisibili nell'Albero delle Pagine del Pannello Pagine.

• Taglia ai limiti del contenuto:

  Abilitando questa opzione, le immagini esportate vengono automaticamente ridimensionate e riposizionate in modo da adattarsi al contenuto visibile esatto delle tue pagine. Questo risparmio di tempo rende possibile incorporare le immagini esportate in pagine web o wiki, o aprirle in altre app, senza dover ritagliare manualmente ognuna.

• Sfondo trasparente:

  Selezionando questa opzione si creano pagine di esportazione con sfondi trasparenti, consentendo alle immagini risultanti di essere inserite senza interruzioni in altri design e artwork.

• Scala:

  Scegli 1x per immagini a risoluzione standard con una dimensione di file più piccola; 2x per immagini ad alta risoluzione abbastanza nitide da stampare e avere un aspetto nitido sulla maggior parte dei display; 3x per la compatibilità con gli schermi dei dispositivi più recenti.

Esportare come PDF

• È ideale per condividere o stampare progetti con più pagine.
• Preserva link e hotspot nel PDF stesso, rendendo il file PDF un prototipo interattivo che può essere inviato via email.
• Include un Sommario gerarchico che fornisce una chiara panoramica della struttura delle pagine e facilita la navigazione.
• Ti consente di proteggere il file con una password.
• Esporta come 'mio_nome_progetto.pdf'.

Esporta come PDF offre tre Opzioni di esportazione nella Finestra di Dialogo Esporta Progetto:

• Tutte le pagine o Pagine selezionate:

  Se vuoi esportare pagine e/o cartelle selezionate, devi selezionarle prima di accedere alla funzione Esporta.

• Includi pagine nascoste:

  Selezionando questa opzione vengono incluse le pagine impostate come invisibili nell'Albero delle Pagine del Pannello Pagine.

• Protetto da password:

  Selezionando questa opzione puoi aggiungere un livello ulteriore di sicurezza impostando una password per il tuo PDF esportato. Moqups non registra né memorizza la password scelta.

Esportare come HTML Viewer

• Scarica un prototipo completamente interattivo che può essere visualizzato offline.
• Include tutte le Interazioni e i Commenti del tuo progetto, e mostra la Barra degli Strumenti Superiore del progetto, nonché i Pannelli Pagine e Commenti.
• I file HTML Viewer esportati possono essere ospitati in ambienti restrittivi come server intranet protetti da firewall, o distribuiti tramite soluzioni aziendali di gestione documentale come Microsoft SharePoint.
• Esporta come mio_nome_progetto.zip.
• L'archivio zip contiene tutti i file dipendenti. Per visualizzarlo, estrai l'archivio e clicca sul file HTML Viewer per aprirlo nel browser.

Selezionare le pagine per l'esportazione

L'esportazione in PNG e PDF consente entrambe di esportare l'intero progetto o di selezionare pagine specifiche. Se vuoi esportare pagine e/o cartelle selezionate, devi selezionarle prima di accedere alla funzione Esporta:

• Per selezionare una singola pagina o cartella, clicca su quell'elemento nell'Albero delle Pagine.

oppure

• Per selezionare una serie consecutiva di pagine o cartelle per l'esportazione, clicca sul primo elemento dell'elenco. Poi, tieni premuto il tasto Shift mentre clicchi contemporaneamente sull'ultimo elemento che vuoi includere in quella serie sequenziale.

oppure

• Per selezionare più pagine o cartelle non consecutive, tieni premuto il tasto Ctrl/Cmd e fai la tua selezione un elemento alla volta.

Selezionare la destinazione dell'esportazione

Nella Finestra di Dialogo Esporta, scegli una destinazione per il tuo progetto esportato:

• Download:

  Esporta nella cartella Download del tuo computer.

• Google Drive:

  Esporta direttamente nella cartella Il mio Drive del tuo Google Drive. (La prima volta che utilizzi questa funzione, Moqups ti chiederà di autorizzare e connettersi a Google Drive). Scopri di più sulla nostra integrazione con Google Drive.

• Dropbox:

  Esporta il tuo progetto direttamente nella cartella App → Moqups del tuo account Dropbox. (La prima volta che utilizzi questa funzione, Moqups ti chiederà di autorizzare e connettersi a Dropbox.) Scopri di più sulla nostra integrazione con Dropbox.

• Box:

  Esporta il tuo progetto direttamente nella cartella Tutti i file del tuo account Box. (La prima volta che utilizzi questa funzione, Moqups ti chiederà di concedere l'accesso e connettersi a Box.) Scopri di più sulla nostra integrazione con Box.

Link di esportazione

Se vuoi condividere un link diretto alla pagina o al progetto esportato, anziché inviare il file esportato come allegato, fai clic con il tasto destro sul link di download e copia l'URL. Il link sicuro S3 scadrà dopo 4 ore.

Esportare un Oggetto o una Selezione di Oggetti

Puoi esportare singoli o più oggetti in formato PNG. Questa funzionalità è estremamente utile se vuoi esportare solo una parte della tua pagina, ad esempio, scaricando tutti gli stati diversi di un pulsante in una volta sola.

E, se stai costruendo un sito web o un'app, questo significa che le risorse che crei in Moqups possono essere incluse nel tuo prodotto finale, estendendo la loro utilità molto dopo aver terminato i prototipi temporanei.

Per esportare un oggetto o un gruppo di oggetti:

1. Seleziona gli oggetti che vuoi esportare.

2. Fai clic con il tasto destro sulla selezione e scegli Esporta selezione dal Menu Contestuale.

3. Seleziona la scala della tua esportazione:

• PNG@1x (immagini a risoluzione standard con una dimensione di file più piccola)
• PNG@2x (immagini ad alta risoluzione pronte per la stampa)
• PNG@3x (compatibile con gli schermi dei dispositivi più recenti)

4. Nota che Esporta Selezione unisce i layer di un gruppo di oggetti ed esporta il gruppo come un singolo file, anziché come più file.

Handoff delle proprietà degli oggetti e del codice CSS/JSX

Il Pannello Handoff ti consente di ottenere le Proprietà e il codice CSS o JSX per uno o più oggetti sulla pagina.

Questo è utile quando stai lavorando a una bozza con designer grafici e sviluppatori. Queste specifiche possono aiutare ad avviare lo sviluppo e dare un'idea di come gli elementi della pagina appariranno una volta implementati.

La sezione Proprietà mostra le specifiche (coordinate, dimensioni, altezza della riga, font e colori) per un singolo oggetto quando lo selezioni, o per l'intero gruppo quando selezioni più oggetti.

La sezione Codice mostra il CSS o JSX per uno o più oggetti quando li selezioni, e include una classe di gruppo se gli oggetti sono stati formalmente raggruppati.

Usa il pulsante Impostazioni in alto a destra del pannello per scegliere:

• Formato colore (RGB o Hex)
• Unità di lunghezza (pixel o rem)
• Formato codice (CSS o JSX)

Per copiare il codice CSS o JSX:

1. Seleziona uno o più oggetti sulla pagina
2. Clicca sul pulsante Handoff nel Menu Superiore per aprire/chiudere il pannello
3. Usa il menu Impostazioni per scegliere tra il codice CSS e JSX
4. Clicca sul pulsante Copia negli appunti per ottenere il codice

Puoi anche copiare il CSS per uno o più oggetti selezionandoli e usando l'opzione Copia CSS del Menu Contestuale con clic destro, poi incollare dove hai bisogno del codice.

Domande e risposte

L'esportazione include oggetti al di fuori della pagina, sul canvas?

Per i formati PNG e PDF, l'esportazione ritaglia qualsiasi contenuto al di fuori del margine della pagina. D'altra parte, l'esportazione come HTML Viewer funziona proprio come il Viewer dell'app; mostrerà oggetti al di fuori dei margini della pagina a meno che non sia stata selezionata l'opzione Nascondi contenuto al di fuori delle pagine nelle opzioni Workspace → Impostazioni della pagina.

Quali interazioni funzionano in un PDF esportato?

Tutte le Interazioni di Pagina funzionano normalmente, ad eccezione di Torna Indietro, che si basa sulla cronologia del browser per la direzione. Le Interazioni di Oggetto non funzionano nei PDF.

Se vuoi fornire agli stakeholder un prototipo completamente funzionale, invitali come ospiti del progetto o condividi un link al progetto. Scopri come fare entrambe le cose in Condivisione. Per esportare tutte le interazioni, usa Esporta come HTML Viewer.

C'è un modo per includere i commenti della pagina durante l'esportazione?

L'esportazione come HTML Viewer include i Commenti e il Pannello Commenti. Non c'è modo di esportare i commenti in formato PDF o PNG, ma se vuoi includere un commento essenziale in questi formati, puoi sempre aggiungere un elemento Note o Callout alla pagina prima di esportare.