Ändern Sie Schriftart- und Farbeinstellungen in AEM Mobile-Apps.

Hinweis:

  Typekit wurde in Adobe Fonts umbenannt und ist jetzt in Creative Cloud und anderen Abonnements enthalten. Weitere Informationen

Sie können Apps anpassen, indem Sie Schriftarten für die Verwendung in Karten auf der Durchsuchen-Seite, App-Ansichten und HTML-Artikeln hochladen. Sie können auch die Farben ändern, die in verschiedenen App-Ansichten wie dem App-Menü, den Navigationsleisten und Anmeldeaufforderungen verwendet werden.

 

Benutzerdefinierte Schriftarten verwenden

Im Abschnitt „Schriftarten und App-Anpassung“ des Portals können Sie benutzerdefinierte Schriftarten für die Verwendung in Layoutkarten, HTML-Artikeln und In-App-Ansichten wie dem App-Menü hochladen.

Zum Verweisen auf Schriftarten in HTML-Artikeln: Siehe Erstellen von HTML-Artikeln für AEM Mobile: Verwenden von freigegebenen Schriftarten.

  1. Klicken Sie im Portal auf Inhalt und Layouts und dann auf Schriftarten und App-Anpassung. Wechseln Sie zur Registerkarte Schriftarten.

    customize_fonts_main
  2. Um Schriftarten einzeln hinzuzufügen, klicken Sie auf Hinzufügen > Schriftart hinzufügen.

  3. Ziehen Sie die Schriftartendateien in den Abschnitt „Schriftart hinzufügen“ oder klicken Sie auf die Schaltfläche „Durchsuchen “ und geben Sie die Schriftartdatei an.

    Wenn Sie die Schriftartdatei per Drag & Drop eingefügt haben, wird der Name der Schriftart automatisch hinzugefügt.

    Sie sollten nur die Schriftarten hochladen, die Sie in Ihrer App verwenden werden, um die Leistung zu verbessern und die App-Größe zu reduzieren.

    Hinzufügen von Schriftarten
  4. Sobald Sie eine Schriftart hochgeladen haben, können Sie sie angeben, wenn Sie Karten und Layouts bearbeiten, HTML-Artikel erstellen und App-Ansichten anpassen.

    Wählen Sie die Schriftarten aus einer Dropdownliste aus ...
    Eine hochgeladene Schriftart beim Bearbeiten einer Layoutkarte auswählen

  5. Erstellen Sie die benutzerdefinierte App (erneut), um die Schriftarten in der Vorschau anzuzeigen.

    Benutzerdefinierte Schriftarten werden in der AEM Preflight-App nicht angezeigt. Wenn Sie Schriftarten hinzufügen oder bearbeiten, müssen Sie die App (erneut) erstellen, um die Änderungen zu sehen.

    Siehe Anzeigen von Projektinhalten in der Vorschau für AEM Mobile.

Hinweis:

Stellen Sie sicher, dass Sie über die entsprechenden Lizenzen für die Nutzung der Schrift in Ihrer App verfügen.

Mehrere Schriftarten hinzufügen

Anstatt Schriftarten einzeln hinzuzufügen, können Sie mehrere Schriftarten per Drag & Drop in ein Fenster ziehen und dort ablegen.

  1. Klicken Sie im Bereich „Schriftarten und App-Anpassung“ im Portal auf Hinzufügen > Mehrere Schriftarten hinzufügen.
  2. Wählen Sie die Schriftartdateien, die Sie hochladen möchten, in einem Finder- oder Explorer-Fenster aus, ziehen Sie sie auf das Symbol und legen Sie sie dort ab.
  3. Überprüfen Sie die Liste der hochzuladenden Schriftarten. Wählen Sie die Schriftarten aus, die Sie nicht hochladen möchten, und klicken Sie auf das Minuszeichen (-). Klicken Sie auf Hochladen, um die Schriftarten hochzuladen.

Geräteschriftarten und Web-Schriften

Für das Anzeigen einer Schriftart auf Smartphones und Tablets wird nur die Geräteschriftart benötigt. Sie sollten jedoch für jede Schriftart, die Sie verwenden, sowohl die Geräteschriftart (OpenType oder TrueType) als auch die Webschriftart (.woff) hochladen. Geräteschriftarten werden auf Durchsuchen-Seiten auf Smartphones und Tablets verwendet. Web-Schriften werden im Web Viewer für den Desktop, in Windows-Apps (sofern die OTF- oder TTF-Datei nicht installiert werden kann), und für die Vorschau von Schriftarten in Karten verwendet.

Mit der richtigen Schriftartlizenz sollten Sie Zugriff auf die WOFF-Version der Schriftart haben. Diese ist normalerweise im Paket enthalten, wenn Sie die Schriftart lizenziert haben. Wenden Sie sich für weitere Informationen an den Lizenzgeber der Schriftart.

Schriftarten, auf die Sie über Adobe Typekit zugreifen können, stehen nicht für das Hochladen zur Verfügung.

 

Hinweis:

Zurzeit müssen Sie jedes Mal, wenn Sie eine neue Schriftart hinzufügen, Ihre App neu erstellen, damit die neue Schriftart verfügbar wird.

Verwenden von Schriftarten in Windows-Apps

Unter Windows werden Regeln zur Verwendung von Schriftarten durchgesetzt, die vom Herausgeber in den Schriftarten gespeichert wurden. Ist die Schriftart von Seiten des Herausgebers nicht als „installierbar“ markiert, wird das Windows-Betriebssystem sie nicht laden. Ob die Schriftart als „installierbar“ markiert ist, können Sie herausfinden, indem Sie sie mit der rechten Maustaste anklicken und die Eigenschaften überprüfen. Um optimale Ergebnisse zu erzielen, stellen Sie in Windows-Apps auch eine Webversion der Schriftart (.woff) bereit.

App-Ansichten anpassen

Sie können verschiedene Farben und Schriftarten für verschiedene Ansichten in der App verwenden, einschließlich der App-Navigationsleiste, des App-Menüs und der Anmeldungs- und Paywall-Bildschirme. Außerdem können Sie das App-Menü oder die Option „Konto“ im App-Menü anzeigen oder ausblenden. Die Navigationsleiste können Sie immer ein- oder ausblenden.

Hinweise:

  • Das Vorschaubild „App-Anpassung“ kann von der tatsächlichen Anzeige abweichen. Überprüfen Sie die Farben und Schriftarten bei der App-Anpassung, indem Sie eine benutzerdefinierte App erstellen.
  • Die Einstellungen für das Farbthema (helles Thema, dunkles Thema oder benutzerdefiniertes Thema) gelten global, das heißt für alle Ansichten einer Plattform. Das helle und das dunkle Thema sind vorgegeben und können nicht bearbeitet werden. Wenn Sie eine Änderung an einer Farbe oder Schriftart vornehmen, gilt das Thema als benutzerdefiniert.
  • Klicken Sie unbedingt auf Speichern, um die Änderungen zu sichern, bevor Sie sich anderen Tätigkeiten zuwenden. Speichern können Sie nur Änderungen für die jeweils aktuelle Plattform.

Video zur App-Anpassung

Video zur App-Anpassung
Dieses Video zeigt die neuen Funktionen zur App-Anpassung, die in Release 2016.14 und in Release 2017.1 veröffentlicht wurden.

  1. Klicken Sie im Portal auf Inhalt und Layouts und dann auf Schriftarten und App-Anpassung. Wechseln Sie zur Registerkarte App-Anpassung.

    customize_allscreens
  2. Legen Sie die Plattform fest (iOS oder Android).

    Wenn Sie Einstellungen vornehmen, betreffen diese ausschließlich die jeweilige Plattform. Derzeit ist das Speichern von Anpassungseinstellungen nicht verfügbar, sodass Sie App-Anpassungseinstellungen für iOS und Android gesondert vornehmen müssen.

  3. Wechseln Sie zur Ansicht Alle Bildschirme. Wenn Sie eine Vorgabe verwenden möchten, wählen Sie Helles Thema oder Dunkles Thema. Wenn Sie eine Farbe oder Schriftart ändern, wird automatisch Benutzerdefiniertes Thema gewählt. Beginnen Sie bei benutzerdefinierten Einstellungen in der Ansicht „Alle Bildschirme“ und wählen Sie die gewünschten Einstellungen für Farben und Schriftarten.

    Wenn die Option „Alle Bildschirme“ aktiviert ist, gelten sämtliche Änderungen für alle Ansichten. Sie können die Einstellungen für eigene Farben und Schriftarten in einzelnen Ansichten überschreiben.

    Hinweis:

    Jedem Thema – helles Thema, dunkles Thema und benutzerdefiniertes Thema – sind Schriftart- und Farbeinstellungen zugeordnet. Wenn Sie ein anderes Design auswählen, werden die Schriftart- und Farbeinstellungen zurückgesetzt.

  4. Geben Sie in der Ansicht Alle Bildschirme Gesteneinstellungen für die App an.

    Zum Zoomen auf-/zuziehen – Geben Sie für jeden Artikeltyp an, ob die Geste „Zum Zoomen auf-/zuziehen“ aktiviert oder deaktiviert werden soll. Wenn Sie diese Option deaktivieren, können die Benutzer in der Artikelansicht nicht durch Auf-/Zuziehen zoomen.

    • Mit der Option Artikel rastern werden InDesign-basierte Artikel und PDF-basierte Artikel eingeschlossen, bei denen die Option „Auf ganze Seite zoomen“ ausgewählt wurde.
    • Die Option PDF-Artikel schließt PDF-basierte Artikel ein, bei denen die Option „Auf ganze Seite zoomen“ nicht ausgewählt wurde.
    • Die Option HTML-Artikel schließt HTML-basierte Artikel ein.

    Zum Schließen zuziehen (nur iOS) – Auf iPads können Sie eine Durchsuchen-Seite durch Zuziehen schließen und so zur vorherigen Ansicht wechseln. Geben Sie an, ob diese Geste aktiviert oder deaktiviert werden soll.

    Vom Rand wischen (nur iOS) – In iOS-Apps können Sie von der linken Seite nach rechts wischen, um zur vorherigen Ansicht zu wechseln oder in der Ansicht der obersten Ebene das App-Menü anzuzeigen. Geben Sie an, ob diese Geste aktiviert oder deaktiviert werden soll.

    customize_gestures
  5. Wählen Sie die einzelnen App-Ansichten, indem Sie im Menü eine Option auswählen oder auf die Navigationspfeile klicken und dann eigene Schriftart- und Farbeinstellungen für die betreffende Ansicht festlegen.

    customize_app_appmenu2
  6. Um das App-Menü oder die Option „Konto“ auszublenden, navigieren Sie zur Ansicht „App-Menü“. Klicken Sie auf das Symbol App-Menu, um es zu aktivieren bzw. zu deaktivieren. Oder klicken Sie auf die Option Anmelden, um die Option „Konto“ ein- bzw. auszublenden.

    Wenn das App-Menü deaktiviert ist, kann es nicht in der App angezeigt werden.

    Wenn „Anmelden“ deaktiviert ist, wird die Option „Konto“ am Ende des App-Menüs nicht angezeigt.

    Wenn die Menüleiste ausgeblendet ist, können Sie die „navto“- und „goto“-Formate verwenden, um Navigationslinks bereitzustellen und Funktionen wie die Suche auszulösen. Siehe Hyperlinks in AEM Mobile.

    Wenn Sie die Option „Anmelden“ ausblenden (Option „Konto“ auf der Benutzeroberfläche), können Sie HTML- und Cordova JavaScript-APIs verwenden, um den Benutzern die Möglichkeit zu geben, sich an- und abzumelden. Beispielcode, der den Benutzern die Anmeldung und Abmeldung mithilfe eines dynamischen Banners ermöglicht, finden Sie unter Erstellen von Bannern und dynamischen Bannern: Dynamische Banner.

  7. Um das Verhalten der Navigationsleiste zu ändern, navigieren Sie zur Ansicht „App-Navigationsleiste“: Die folgenden Optionen stehen sowohl für Tablets als auch für Smartphones zur Auswahl.

    Standard: Die Navigationsleiste wird nur dann angezeigt, wenn der Benutzer auf einen nicht interaktiven Bereich eines Artikels tippt. Die Navigationsleiste verdeckt Artikelinhalte, wenn sie angezeigt wird.

    Immer sichtbar: Wenn Sie diese Option wählen, wird die Navigationsleiste in den Navigationsbildschirmen und Artikeln am oberen Rand angezeigt und kann nicht ausgeblendet werden. Wenn die Navigationsleiste immer sichtbar ist, wird der Inhalt am oberen Rand des Artikels nicht verborgen. HTML-Artikel beginnen am oberen Bildschirmrand unterhalb der Navigationsleiste. Artikel mit festem Layout werden verkleinert und in das Letterbox-Format umgewandelt.

    app_customization_example
    Wenn die Navigationsleiste auf „Immer sichtbar“ festgelegt ist, wird Inhalt mit festem Layout verkleinert und in das Letterbox-Format umgewandelt.

    Immer ausgeblendet: Wenn Sie diese Option auswählen, werden die Navigationsleiste und die Statusleiste deaktiviert und ausgeblendet. Wenn die Navigationsleiste ausgeblendet ist, können Sie in Artikeln die „navto“- und „goto“-Formate verwenden, um Navigationslinks bereitzustellen und Funktionen wie die Schaltfläche „Zurück“ sowie Optionen für das Social Sharing auszulösen. Siehe Hyperlinks in AEM Mobile.

    Statusleiste sichtbar und Navigationsleiste ausgeblendet: Wenn Sie diese Option auswählen, wird die Navigationsleiste deaktiviert und ausgeblendet und die Statusleiste wird immer angezeigt. Artikelinhalte werden unterhalb der Statusleiste angezeigt und bei Bedarf skaliert und in das Letterbox-Format umgewandelt.

    app_customization_navbars
  8. Klicken Sie auf Speichern, um die Einstellungen für die aktuelle Plattform zu speichern.

    Wenn Sie auf Speichern klicken, werden die Einstellungen für die aktuelle Plattform gespeichert. Wenn Sie parallel auf iOS- und Android-Plattformen arbeiten, müssen Sie für jede Plattform auf „Speichern“ klicken.

  9. Erstellen Sie die benutzerdefinierte App (erneut), um die App-Einstellungen anzuzeigen.

    Hochgeladene Schriften und App-Einstellungen werden beim Erstellen in die App integriert. Bei jedem Hochladen neuer Schriftarten oder Ändern der Einstellungen für die App-Anpassung müssen Sie die App neu erstellen, damit die Änderungen angezeigt werden.

    In der AEM Preflight-App werden keine Einstellungen zur App-Anpassung angezeigt.

    Siehe Anzeigen von Projektinhalten in der Vorschau für AEM Mobile.

Weitere Anpassungsmethoden für Apps

Neben dem Abschnitt „Schriftarten und App-Anpassung“ im Portal sind noch andere Änderungen zum Anpassen verfügbar.

  • In den Projekteinstellungen können Sie ein Markenbild angeben, das im App-Menü angezeigt wird.
  • Beim Erstellen der App können Sie festlegen, ob das Smartphone Hoch- und Querformat (iOS), nur Hochformat oder nur Querformat unterstützt. Bei iOS- und Android-Apps können Sie außerdem angeben, ob die App auf Smartphones, Tablets oder beiden Gerätetypen verwendet werden kann.
  • In den Einstellungen für Sammlungen können Sie bestimmen, ob horizontales Wischen zulässig ist, um zu anderen Artikeln zu navigieren. Sie können außerdem festlegen, ob eine Sammlung als Durchsuchen-Seite angezeigt wird oder das erste Element in der Sammlung geöffnet wird. Außerdem können Sie zulassen, dass die Benutzer Sammlungen für die Offline-Ansicht speichern.
  • Mit Layoutvorlagen können Sie die Darstellung der Durchsuchen-Seite von Sammlungen definieren.
  • Sie können Funktionen wie Social Sharing, Berechtigung und Suchen aktivieren.

 

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie