Ein App-Layout für mobile Geräte optimieren
Die App überprüfen
Zunächst überprüfen Sie die App darauf, welche Elemente für Geräte mit kleinem Bildschirm geändert werden müssen.
- Melden Sie sich bei Ihrem ArcGIS-Organisationskonto an.
Hinweis:
Wenn Sie über kein Organisationskonto verfügen, informieren Sie sich über die Optionen für den Zugriff auf die Software.
- Klicken Sie auf dem Menüband auf die Schaltfläche für Apps, und wählen Sie Experience Builder aus.
Tipp:
Sie können auch direkt zur Experience Builder-Site navigieren.
Experience Builder wird angezeigt. Auf der Startseite werden die zuletzt erstellten Experiences aufgeführt.
- Klicken Sie auf die Schaltfläche Neue erstellen.
Eine Liste mit Vorlagen wird angezeigt. Die Vorlagen umfassen vorkonfigurierte Layouts und Widgets, die Sie ändern können. Sie erstellen eine App mithilfe einer für dieses Lernprogramm erstellten Vorlage für eine App mit Parkinformationen.
- Klicken Sie auf die Registerkarte ArcGIS Online.
- Geben Sie in der Suchleiste die Zeichenfolge Great Smoky Mountains National Park owner:Learn_ArcGIS ein. Klicken Sie in der Liste der Ergebnisse für Great Smoky Mountains National Park (Tutorial) auf Erstellen.
Tipp:
Die richtige Vorlage weist eine Miniaturansicht eines Fotos des Parks auf. Sie können den vollständigen Namen der Vorlage anzeigen, indem Sie auf den Namen zeigen.
Daraufhin wird mithilfe der Vorlage eine App erstellt. Sie gelangen zu einem Editor, in dem Sie nach Bedarf Änderungen vornehmen können.
Die App enthält sieben Seiten, zu denen Sie von der Startseite aus navigieren können. Die App sieht zwar vollständig aus, aber ihr Design ist nur für Desktopbildschirme geeignet. Sie ändern die Anzeige, um zu sehen, wie die App auf Geräten mit kleinem Bildschirm aussieht.
- Klicken Sie auf dem Menüband auf die Schaltfläche Seite für Geräte mit kleinem Bildschirm bearbeiten.
Hinweis:
Über das Dropdown-Menü für die Abmessungen neben der Schaltfläche können Sie eine Vorschau der App in bestimmten Bildschirmgrößen anzeigen. Sie können das Layout jedoch nur für die drei allgemeinen Gerätemodi neu anordnen.
Das App-Layout wird geändert.
Viele der Elemente in der App sind jetzt so klein, dass der Text nicht lesbar ist, und der Titeltext passt nicht mehr in die Kopfzeile.
Die Kopfzeile und der Hauptteil der App wurden mit dem Layout Automatisch angepasst. In diesem Layout werden Änderungen automatisch von Experience Builder vorgenommen. Sie müssen verschiedene benutzerdefinierte Änderungen vornehmen, um die App für mobile Geräte zu optimieren.
Den Hauptteil bearbeiten
Die Startseite der App besteht aus zwei Komponenten: der Kopfzeile und dem Hauptteil. Die Kopfzeile ist der obere Teil der Seite. Sie enthält den Titel, das Logo und Navigationsschaltflächen. Der Hauptteil ist der untere Teil der Seite. Er enthält den primären Inhalt. Zuerst bearbeiten Sie den Hauptteil.
- Klicken Sie für den Hauptteil auf Benutzerdefiniert.
Daraufhin wird eine Meldung angezeigt, aus der hervorgeht, dass Sie durch Aktivieren der Option "Benutzerdefiniert" Widgets unabhängig von anderen Gerätemodi anordnen können.
- Klicken Sie für Möchten Sie es wirklich aktivieren? auf OK.
Nun können Sie Änderungen am Hauptteil vornehmen. Zuerst ändern Sie die Schaltfläche Current Conditions. Auf einem kleinen Bildschirm wird der Text der Schaltfläche abgeschnitten.
- Klicken Sie auf die Schaltfläche des Widgets Current Conditions.
Es wird ein Bereich mit Optionen zum Bearbeiten des Widgets angezeigt.
- Klicken Sie im Bereich Current Conditions auf die Registerkarte Style.
Sie zentrieren die Schaltfläche, passen ihre Breite an und ändern ihre Position relativ zur Mitte des Hauptteils.
- Klicken Sie auf die Schaltfläche Horizontaler Mittelpunkt.
- Geben Sie unter Größe und Position für Breite den Wert 50 ein. Klicken Sie im Diagramm für die relative Position auf die Zahl, und geben Sie 5 ein.
Die Änderungen werden automatisch für die Schaltfläche in der Vorschau übernommen. Jetzt ist die Schaltfläche breit genug, sodass der gesamte Text angezeigt wird. Außerdem wurde sie an den oberen Rand des Hauptteils verschoben, sodass mehr Platz für Anpassungen am restlichen Inhalt bleibt.
- Klicken Sie auf dem Menüband auf die Schaltfläche Speichern.
Hinweis:
Durch Änderungen der Größe und Position eines Widgets für Geräte mit kleinem Bildschirm werden die Einstellungen für andere Bildschirmgrößen nicht geändert. Wenn Sie auf die Schaltfläche Seite für Geräte mit großem Bildschirm bearbeiten klicken, sehen Sie, dass an diesem Layout keine Änderungen vorgenommen wurden. Eine Ausnahme gilt, wenn Sie ein Widget vollständig löschen. Wenn Sie ein Widget in einer Ansicht löschen, wird es in allen Geräteansichten gelöscht. Achten Sie also darauf, nichts zu löschen, was Sie behalten möchten.
Als Nächstes korrigieren Sie die fünf Kacheln, die auf dem kleinen Bildschirm gequetscht dargestellt werden. Sie können zwar versuchen, die Kacheln wie die Schaltfläche Current Conditions zu verschieben und ihre Größe zu ändern, aber sie sind zu groß und passen daher in ihrem aktuellen Zustand nicht alle auf den Bildschirm.
Sie verschieben die Kacheln in die ausstehende Liste. Die ausstehende Liste ist eine Möglichkeit, ein Widget in einer Bildschirmgröße auszublenden, ohne es für andere Bildschirmgrößen zu löschen. Die Verwendung der ausstehenden Liste bietet sich an, wenn Sie verschiedene Widgets in verschiedenen Gerätemodi verwenden möchten oder Widget-Einstellungen außer Größe oder Position ändern möchten.
- Klicken Sie auf die Kachel Visitor Guides (ganz links). Klicken Sie auf der Widget-Werkzeugleiste auf die Schaltfläche In ausstehende Liste verschieben.
Das Widget wird nicht mehr angezeigt, aber es wird nicht aus der App gelöscht und wird in anderen Bildschirmgrößen weiterhin angezeigt. (Wenn Sie das Widget gelöscht hätten, wäre es auch für andere Bildschirmgrößen gelöscht worden.)
Hinweis:
Klicken Sie zum Anzeigen der ausstehenden Liste im Bereich Widget einfügen auf die Registerkarte Ausstehend. Sie können Widgets aus der ausstehenden Liste jederzeit wieder hinzufügen.
- Verschieben Sie die vier anderen Kacheln in die ausstehende Liste.
Nachdem Sie Platz freigegeben haben, fügen Sie Schaltflächen hinzu, um die in die ausstehende Liste verschobenen Kacheln zu ersetzen. Die Schaltfläche Current Conditions belegt nicht viel Platz und ist auf mobilen Geräten lesbar. Daher kopieren Sie ihren Style.
- Klicken Sie auf die Schaltfläche Current Conditions. Klicken Sie auf der Werkzeugleiste auf die Schaltfläche Duplizieren.
Daraufhin wird eine Kopie der Schaltfläche mit dem Namen Current Conditions 2 angezeigt. Sie ändern den Namen der Schaltfläche und ihren Text.
- Klicken Sie im Bereich Current Conditions 2 auf den Bereichtitel, und geben Sie Visitor Guide ein. Ersetzen Sie den Text für Text durch Visitor Guide.
Damit diese Schaltfläche leichter von der Schaltfläche Current Conditions unterschieden werden kann, ändern Sie ihr Aussehen. Das Fenster Schnellformat, das beim Duplizieren der Schaltfläche angezeigt wurde, enthält einige Standard-Style-Optionen. Im Abschnitt Erweitert des Bereichs der Schaltfläche können Sie jedoch spezifischere Änderungen vornehmen.
- Klicken Sie im Bereich Visitor Guide unter Hintergrund auf die Farbpalette für Füllung.
Sie ändern die Farbe in einen Braunton aus dem Style Guide des National Park Service.
- Klicken Sie in der Farbauswahl auf Weitere. Geben Sie unter HEX den Wert #6f4930 ein.
Als Nächstes legen Sie den Link der Schaltfläche so fest, dass er zur entsprechenden Seite der App führt.
- Klicken Sie im Bereich Visitor Guide auf Link festlegen.
- Wählen Sie im Bereich Link festlegen unter Link zu die Option Seite aus. Wählen Sie unter Seite auswählen die Option Visitor Guide aus.
- Klicken Sie auf OK. Schließen Sie in der App-Vorschau das Fenster Schnellformat, und ziehen Sie die Schaltfläche Visitor Guide so, dass sie etwa bei 25 Prozent unter der Schaltfläche Current Conditions zentriert ist.
Tipp:
Die blauen Führungslinien, die beim Verschieben der Schaltfläche auf dem Bildschirm angezeigt werden, zeigen den Abstand der Schaltfläche zu anderen Elementen an. Die roten Führungslinien zeigen die Ausrichtung der Schaltfläche an anderen Elementen an.
- Duplizieren Sie die Schaltfläche Visitor Guide viermal. Bearbeiten Sie den Namen, den Text und den Link der einzelnen duplizierten Schaltflächen wie folgt:
- Ändern Sie den Namen und den Text der ersten Schaltfläche in Park History, und legen Sie den Link auf die Seite Park History fest.
- Ändern Sie den Namen und den Text der zweiten Schaltfläche in Trail Information, und legen Sie den Link auf die Seite Trail Information fest.
- Ändern Sie den Namen und den Text der dritten Schaltfläche in Biodiversity, und legen Sie den Link auf die Seite Hemlock Forests fest.
- Ändern Sie den Namen und den Text der vierten Schaltfläche in Visitor Survey, und legen Sie den Link auf die Seite Visitor Satisfaction Survey fest.
- Ziehen Sie in der App-Vorschau die einzelnen Schaltflächen so, dass sie mit einem Abstand von 5 Prozent unter der vorherigen Schaltfläche zentriert sind.
Diese Schaltflächen sind auch auf kleinen Bildschirmen deutlich zu erkennen und lesbar und bieten die gleichen Navigationsoptionen wie die Kacheln der ursprünglichen Desktop-App.
- Speichern Sie die App.
Die Kopfzeile bearbeiten
Nachdem Sie mit dem Bearbeiten des Hauptteils fertig sind, bearbeiten Sie jetzt die Kopfzeile. Die Kopfzeile enthält drei Widgets: eines für den Titel, eines für das Logo und eines mit den Links zu allen Seiten der App. Zurzeit sind die Widgets abgeschnitten und überlappen einander.
- Klicken Sie für die Kopfzeile auf Benutzerdefiniert. Klicken Sie für Möchten Sie es wirklich aktivieren? auf OK.
- Zeigen Sie in der App-Vorschau auf die Kopfzeile, und klicken Sie auf Kopfzeile bearbeiten. Klicken Sie auf den Titel (Great Smoky Mountains National Park).
Der Bereich Hemlock Title mit Einstellungen für das Titel-Widget wird angezeigt. Sie verringern die Schriftgröße.
Möglicherweise erinnern Sie sich daran, dass Sie nur die Einstellungen für die Größe und Position eines Widgets ändern können, ohne dass sich dies in anderen Gerätemodi auf das Widget auswirkt. Das heißt, wenn Sie die Textgröße ändern, wird diese auch in der Desktop-App geändert, in der diese Änderung nicht notwendig ist.
Um dieses Problem zu vermeiden, duplizieren Sie den Titel und verschieben den ursprünglichen Titel in die ausstehende Liste. Anschließend ändern Sie die Textgröße des duplizierten Titels in eine für mobile Geräte geeignete Größe, ohne diese auf anderen Geräten zu ändern.
- Klicken Sie in der App-Vorschau auf der Widget-Werkzeugleiste des Titels auf die Schaltfläche Duplizieren.
Der duplizierte Titel ist standardmäßig ausgewählt.
- Wählen Sie wieder den ursprünglichen Titel aus. Klicken Sie auf der Widget-Werkzeugleiste auf die Schaltfläche In ausstehende Liste verschieben.
- Wählen Sie den duplizierten Titel aus. Ändern Sie im Bereich Hemlock Title 2 unter Textformat die Textgröße in 16 Pixel.
Der duplizierte Titel ist nicht in der Mitte der Kopfzeile ausgerichtet, daher passen Sie die Style-Einstellungen an.
- Klicken Sie im Bereich Hemlock Title 2 auf die Registerkarte Style. Geben Sie für Breite den Wert 225 Pixel ein.
- Klicken Sie auf die Schaltfläche Horizontaler Mittelpunkt. Klicken Sie auf die Schaltfläche Oben fangen, und wählen Sie Vertikaler Mittelpunkt aus.
Der Titel ist auf der Kopfzeile zentriert, wird aber noch von den anderen Widgets überlappt und ist daher nicht lesbar. Als Nächstes verkleinern Sie das Logo. Da es aufgrund der Überlappung schwierig ist, in der App-Vorschau auf das Logo zu klicken, öffnen Sie eine Liste aller Widgets auf der Seite, um die Einstellungen zu ändern.
- Klicken Sie auf der linken Werkzeugleiste auf die Schaltfläche Seite.
Daraufhin wird eine Liste aller Widgets in der App nach Seiten sortiert angezeigt. Standardmäßig wird die Startseite angezeigt.
- Wählen Sie unter Umrisslinie, unter Kopfzeile die Option Logo aus.
Das Logo ist in der App-Vorschau ausgewählt, und der zugehörige Einstellungsbereich wird angezeigt. Sie möchten nur die Größe und die Position ändern.
- Ziehen Sie in der App-Vorschau die Ecke des Logos, um die Größe in eine Breite von ungefähr 62 Pixel zu ändern. Positionieren Sie das Logo links neben dem Titel.
Tipp:
Sie können die Größe und Position des Logos (oder jedes anderen Widgets) ändern, indem Sie die Werkzeuge für Größe und Position im Bereich des Widgets verwenden oder die Größe und Position des Widgets in der Vorschau ändern. Verwenden Sie die Methode, die Sie bevorzugen.
Als Nächstes ändern Sie das Menü mit den Links zu anderen Seiten. Da Sie im Hauptteil Schaltflächen erstellt haben, ist es nicht notwendig, alle Links auch in der Kopfzeile anzuzeigen. Sie ersetzen das aktuelle Menü durch ein Symbol, das speziell an kleine Bildschirme angepasst ist.
- Klicken Sie im Bereich Seite unter Umrisslinie auf Menü.
- Klicken Sie in der App-Vorschau auf der Widget-Werkzeugleiste auf Duplizieren. Verschieben Sie das ursprüngliche Menü in die ausstehende Liste, und wählen Sie wieder das duplizierte Menü aus.
- Wählen Sie im Bereich Menü 2 auf der Registerkarte Inhalt für Typ, die Option Symbol aus.
- Klicken Sie auf die Registerkarte Style. Ändern Sie Breite in 30 Pixel, und positionieren Sie das Symbol rechts neben dem Titel.
Nach den Änderungen ist die Kopfzeile immer noch etwas zu hoch. Sie verringern die Höhe für Geräte mit kleinem Bildschirm.
- Klicken Sie im Bereich Seite auf Startseite.
Daraufhin wird der Bereich Startseite mit Optionen für die Startseite angezeigt.
- Ändern Sie im Bereich Startseite unter Kopfzeile den Wert für Höhe in 70 Pixel.
Hinweis:
Durch das Ändern der Höhe der Kopfzeile werden möglicherweise einige der Elemente der Kopfzeile neu positioniert. Sie können die Positionen nach Bedarf ändern.
- Speichern Sie die App. Klicken Sie optional auf dem Menüband auf Live-Ansicht, um die Startseite der fertigen App anzuzeigen und zu testen.
Sie haben in diesem Lernprogramm das Layout einer Web-App bearbeitet, um sicherzustellen, dass sie für mobile Geräte optimiert ist. Sie haben Widgets verschoben und ihre Größen geändert und die ausstehende Liste verwendet, um unterschiedliche Einstellungen für verschiedene Bildschirmgrößen festzulegen.
In diesem Lernprogramm wurden nur Änderungen an einer einzelnen Seite behandelt. Wenn Sie das Ändern von App-Seiten für mobile Geräte weiter üben möchten, können Sie mit sechs weiteren Seiten der App "Great Smoky Mountains National Park" experimentieren. Wenn Sie sehen möchten, wie die App-Ersteller die einzelnen Seiten geändert haben, können Sie auf Ihrem eigenen mobilen Gerät die vollständige Vorlage anzeigen.
Weitere Lernprogramme finden Sie auf der ArcGIS Experience Builder.
