Exportieren

Eine der Stärken von Moqups ist, dass alle Beteiligten online in Echtzeit zusammenarbeiten können – von überall und von jedem Gerät aus. Dennoch gibt es viele Szenarien, in denen es sinnvoll ist, einen Teil oder sogar das gesamte Moqups-Projekt zu exportieren.

Der Export ermöglicht es Ihnen, Ihre Arbeit mit Personen zu teilen, die in einer Offline-Umgebung arbeiten, keinen vollständigen Zugang zu einem bestimmten Projekt haben oder kein Moqups-Konto besitzen.

Und bei komplexen Projekten kann der Export eines Teils des Projekts manchmal helfen, die Diskussion zu fokussieren oder die Navigation zu vereinfachen.

Wer kann diese Funktion nutzen?

Sie können Moqups-Projekte exportieren als…

Eine Reihe von Einzelbildern im PNG- oder PDF-Format

oder

Eine Offline-HTML-Version des Viewers selbst

Moqups ermöglicht es Ihnen außerdem, einzelne Objekte oder Gruppen von Objekten zu exportieren.

Der folgende Artikel zeigt Ihnen, wie Sie auf die Exportfunktion zugreifen. Er erklärt auch die einzelnen Exportformate sowie die für jeden Typ verfügbaren Exportoptionen.

Auf den Export zugreifen

Sie können auf die Exportfunktion zugreifen über…

• die obere Symbolleiste
• das Moqups-Hauptmenü
• das Seitenpanel (über das Rechtsklick-Kontextmenü)

Jede dieser Zugriffsmethoden öffnet den Exportprojekt-Dialog, zeigt die von Ihnen ausgewählten Seiten/Ordner an, ermöglicht die Wahl Ihres Export-Formats und der Optionen und fordert Sie auf, ein Ziel für Ihre exportierten Dateien auszuwählen.

Als PNG, PDF und HTML-Viewer exportieren

Oben im Exportprojekt-Dialog können Sie wählen, ob Sie im PNG- oder PDF-Format oder als HTML-Viewer exportieren möchten. Jeder dieser Exporttypen bietet spezifische Vorteile und Exportoptionen.

Als PNG exportieren

• Exportiert eine Reihe von einzelnen PNG-Bilddateien.
• Ist eine gute Lösung, wenn Sie diese Bilder in Webseiten einbetten oder in anderer Grafiksoftware weiter bearbeiten möchten.
• Exportiert als mein_projektname.zip.

Als PNG exportieren bietet fünf Export-Optionen im Exportprojekt-Dialog:

• Alle Seiten oder Ausgewählte Seiten:

  Wenn Sie ausgewählte Seiten und/oder Ordner exportieren möchten, müssen Sie diese auswählen, bevor Sie auf die Exportfunktion zugreifen.

• Versteckte Seiten einschließen:

  Wenn Sie diese Option aktivieren, werden Seiten einbezogen, die im Seitenbaum des Seitenpanels als unsichtbar markiert sind.

• Auf Inhaltsgrenzen zuschneiden:

  Wenn diese Option aktiviert ist, werden Ihre exportierten Bilder automatisch so skaliert und neu positioniert, dass sie genau dem sichtbaren Inhalt Ihrer Seiten entsprechen. Diese Zeitersparnis ermöglicht es, exportierte Bilder in Webseiten oder Wikis einzubetten – oder in anderen Apps zu öffnen – ohne jedes Bild manuell zuschneiden zu müssen.

• Transparenter Hintergrund:

  Wenn Sie diese Option aktivieren, werden Exportseiten mit transparentem Hintergrund erstellt, sodass die resultierenden Bilder nahtlos in andere Designs und Grafiken eingefügt werden können.

• Skalierung:

  Wählen Sie 1x für Bilder mit Standardauflösung und kleinerer Dateigröße; 2x für hochauflösende Bilder, die druckfertig sind und auf den meisten Displays scharf aussehen; 3x für Kompatibilität mit den neuesten Gerätedisplays.

Als PDF exportieren

• Ist ideal zum Teilen oder Drucken von Projekten mit mehreren Seiten.
• Bewahrt Links und Hotspots im PDF selbst und macht die PDF-Datei zu einem interaktiven Prototyp, der per E-Mail gesendet werden kann.
• Enthält ein hierarchisches Inhaltsverzeichnis, das einen klaren Überblick über Ihre Seitenstruktur bietet und die Navigation erleichtert.
• Ermöglicht den Passwortschutz Ihrer Datei.
• Exportiert als 'mein_projektname.pdf'.

Als PDF exportieren bietet drei Export-Optionen im Exportprojekt-Dialog:

• Alle Seiten oder Ausgewählte Seiten:

  Wenn Sie ausgewählte Seiten und/oder Ordner exportieren möchten, müssen Sie diese auswählen, bevor Sie auf die Exportfunktion zugreifen.

• Versteckte Seiten einschließen:

  Wenn Sie diese Option aktivieren, werden Seiten einbezogen, die im Seitenbaum des Seitenpanels als unsichtbar markiert sind.

• Passwortgeschützt:

  Wenn Sie diese Option aktivieren, können Sie Ihrem exportierten PDF eine zusätzliche Sicherheitsebene hinzufügen, indem Sie ein Passwort festlegen. Moqups speichert oder protokolliert das von Ihnen gewählte Passwort nicht.

Als HTML-Viewer exportieren

• Lädt einen vollständig interaktiven Prototyp herunter, der offline angezeigt werden kann.
• Enthält alle Interaktionen und Kommentare Ihres Projekts und zeigt die obere Symbolleiste sowie die Seiten- und Kommentarpanels des Projekts an.
• Die exportierten HTML-Viewer-Dateien können in eingeschränkten Umgebungen gehostet werden, wie z. B. auf Intranet-Servern hinter Firewalls – oder über unternehmenseigene Dokumentenverwaltungslösungen wie Microsoft SharePoint verteilt werden.
• Exportiert als mein_projektname.zip.
• Das ZIP-Archiv enthält alle abhängigen Dateien. Zum Anzeigen entpacken Sie das Archiv und klicken Sie auf die HTML-Viewer-Datei, um sie in Ihrem Browser zu öffnen.

Seiten für den Export auswählen

Beim Export als PNG und PDF können Sie entweder Ihr gesamtes Projekt exportieren oder bestimmte Seiten auswählen. Wenn Sie ausgewählte Seiten und/oder Ordner exportieren möchten, müssen Sie diese auswählen, bevor Sie auf die Exportfunktion zugreifen:

• Um eine einzelne Seite oder einen Ordner auszuwählen, klicken Sie auf dieses Element im Seitenbaum.

oder

• Um eine aufeinanderfolgende Reihe von Seiten oder Ordnern für den Export auszuwählen, klicken Sie auf das erste Element in der Liste. Halten Sie dann die Umschalt-Taste gedrückt und klicken Sie gleichzeitig auf das letzte Element dieser aufeinanderfolgenden Reihe.

oder

• Um mehrere, nicht aufeinanderfolgende Seiten oder Ordner auszuwählen, halten Sie die Strg/Cmd-Taste gedrückt und wählen Sie die Elemente einzeln aus.

Exportziel auswählen

Wählen Sie im Exportdialog ein Ziel für Ihr exportiertes Projekt:

• Herunterladen:

  Exportiert in den Downloads-Ordner auf Ihrem Computer.

• Google Drive:

  Exportiert direkt in den Ordner Mein Laufwerk auf Ihrem Google Drive. (Beim ersten Mal werden Sie von Moqups aufgefordert, Google Drive zu autorisieren und eine Verbindung herzustellen.) Erfahren Sie mehr über unsere Google Drive-Integration.

• Dropbox:

  Exportiert Ihr Projekt direkt in den Ordner Apps → Moqups Ihres Dropbox-Kontos. (Beim ersten Mal werden Sie von Moqups aufgefordert, Dropbox zu autorisieren und eine Verbindung herzustellen.) Erfahren Sie mehr über unsere Dropbox-Integration.

• Box:

  Exportiert Ihr Projekt direkt in den Ordner Alle Dateien Ihres Box-Kontos. (Beim ersten Mal werden Sie von Moqups aufgefordert, den Zugang zu Box zu genehmigen und eine Verbindung herzustellen.) Erfahren Sie mehr über unsere Box-Integration.

Export-Link

Wenn Sie einen direkten Link zur exportierten Seite oder zum exportierten Projekt teilen möchten – anstatt die exportierte Datei als Anhang zu senden – klicken Sie einfach mit der rechten Maustaste auf den Download-Link und kopieren Sie die URL. Der sichere S3-Link läuft nach 4 Stunden ab.

Ein Objekt oder eine Auswahl von Objekten exportieren

Sie können einzelne oder mehrere Objekte im PNG-Format exportieren. Diese Funktion ist äußerst nützlich, wenn Sie nur einen Teil Ihrer Seite exportieren möchten – zum Beispiel das Herunterladen der verschiedenen Zustände einer Schaltfläche auf einmal.

Und wenn Sie eine Website oder App erstellen, können die in Moqups erstellten Assets in Ihr Endprodukt einbezogen werden – was deren Nutzen weit über die Phase temporärer Prototypen hinaus verlängert.

So exportieren Sie ein Objekt oder eine Gruppe von Objekten:

1. Wählen Sie das/die Objekt(e) aus, das/die Sie exportieren möchten.

2. Klicken Sie mit der rechten Maustaste auf Ihre Auswahl und wählen Sie Auswahl exportieren aus dem Kontextmenü.

3. Wählen Sie die Skalierung Ihres Exports:

• PNG@1x (Bilder mit Standardauflösung und kleinerer Dateigröße)
• PNG@2x (druckfertige, hochauflösende Bilder)
• PNG@3x (kompatibel mit den neuesten Gerätedisplays)

4. Hinweis: Beim Exportieren einer Auswahl werden die Ebenen einer Objektgruppe zusammengeführt und die Gruppe als einzelne Datei exportiert, nicht als mehrere Dateien.

Objekteigenschaften und CSS/JSX-Code übergeben

Das Entwickler-Handoff-Panel ermöglicht es Ihnen, die Eigenschaften und den CSS- oder JSX-Code für ein oder mehrere Objekte auf der Seite abzurufen.

Dies ist nützlich, wenn Sie an einem Proof of Concept mit Grafikdesignern und Entwicklern arbeiten. Diese Spezifikationen können die Entwicklung beschleunigen und ein Gefühl dafür geben, wie Seitenelemente nach der Implementierung aussehen werden.

Der Abschnitt Eigenschaften zeigt die Spezifikationen (Koordinaten, Größe, Zeilenhöhe, Schriftarten und Farben) für ein einzelnes Objekt an, wenn Sie es auswählen, oder für die gesamte Gruppe, wenn Sie mehrere Objekte auswählen.

Der Abschnitt Code zeigt den CSS- oder JSX-Code für einzelne oder mehrere Objekte an, wenn Sie diese auswählen – und enthält eine Gruppenklasse, wenn die Objekte formal gruppiert wurden.

Verwenden Sie die Schaltfläche Einstellungen oben rechts im Panel, um Folgendes auszuwählen:

• Farbformat (RGB oder Hex)
• Längeneinheit (Pixel oder rem)
• Codeformat (CSS oder JSX)

So kopieren Sie den CSS- oder JSX-Code:

1. Wählen Sie ein oder mehrere Objekte auf der Seite aus.
2. Klicken Sie auf die Handoff-Schaltfläche im oberen Menü, um das Panel zu öffnen/zu schließen.
3. Verwenden Sie das Einstellungen-Menü, um zwischen CSS- und JSX-Code zu wählen.
4. Klicken Sie auf die Schaltfläche In die Zwischenablage kopieren, um den Code zu übernehmen.

Sie können den CSS-Code auch für ein oder mehrere Objekte kopieren, indem Sie diese auswählen und die Option CSS kopieren im Rechtsklick-Kontextmenü verwenden, und dann den Code dort einfügen, wo Sie ihn benötigen.

Fragen und Antworten

Schließt der Export Objekte außerhalb der Seite auf der Arbeitsfläche ein?

Für PNG- und PDF-Formate schneidet der Export alle Inhalte außerhalb des Seitenrands ab. Der Export als HTML-Viewer hingegen funktioniert wie der Viewer der App; er zeigt Objekte außerhalb der Seitenränder an, es sei denn, Sie haben in Ihren Arbeitsbereich-Seiteneinstellungen Inhalte außerhalb der Seiten ausblenden ausgewählt.

Welche Interaktionen funktionieren in einem exportierten PDF?

Alle Seiteninteraktionen funktionieren normal, mit Ausnahme von Zurückspringen, das auf Ihren Browserverlauf angewiesen ist. Objektinteraktionen funktionieren nicht in PDFs.

Wenn Sie Stakeholdern einen vollständig funktionalen Prototyp bereitstellen möchten, laden Sie diese als Projektgäste ein oder teilen Sie einen Projekt-Link. Erfahren Sie in Teilen, wie beides geht. Um alle Interaktionen zu exportieren, verwenden Sie den Export als HTML-Viewer.

Gibt es eine Möglichkeit, Seitenkommentare beim Export einzuschließen?

Der Export als HTML-Viewer enthält Kommentare und das Kommentar-Panel. Es gibt keine Möglichkeit, Kommentare im PDF- oder PNG-Format zu exportieren, aber wenn Sie in diesen Formaten einen wesentlichen Kommentar einschließen möchten, können Sie vor dem Export jederzeit eine Notiz oder ein Callout-Stencil zur Seite hinzufügen.