Bilder, Symbole und Schaltflächen in mobilen Anwendungen

Wir haben bereits zuvor über die Integration von APIs und mobilen Anwendungen geschrieben, um eine ansprechende und unterhaltsame Benutzererfahrung zu schaffen. Seit der Veröffentlichung unseres vorherigen Artikels haben wir die GPS-Demo-App weiterentwickelt und um zusätzliche API-Funktionen erweitert, um aktuelle Wetterinformationen und Informationen zu geplanten Veranstaltungen in der Umgebung abzurufen.

Eine Herausforderung bei der Bereitstellung all dieser Funktionen auf einem kleinen mobilen Bildschirm besteht darin, den Nutzern ein klares, einheitliches und benutzerfreundliches Navigationssystem für alle Bereiche der App zu bieten.

Die Verwendung von Symbolbildern als Schaltflächen in mobilen Anwendungen kann ein stilvolles und ansprechendes Navigationsmenü erzeugen, insbesondere wenn die Symbole auf der Grundlage leicht erkennbarer und allgemein akzeptierter Konventionen ausgewählt werden. Beispielsweise deutet ein nach links zeigender Pfeil oft auf die Rückwärtsfunktion hin, und ein Floppy-Disk-Symbol steht häufig für die Funktion "Daten speichern", selbst wenn das eigentliche Ziel möglicherweise keine neue Datei oder ein Datenträger ist.

In diesem Beitrag beschreiben wir, wie man mit Hilfe von Bildsymbolen plattformübergreifende Navigationsmenüs mit Symbolleisten in mobilen Anwendungen mit MobileTogether erstellen kann.

Die folgenden Screenshots zeigen die Anwendung "Where Am I" auf iPhones (Apple iOS) und Android-Smartphones.

In jeder Ansicht hat der Benutzer gerade die aktuellen GPS-Koordinaten erhalten und wird mit derselben Reihe von Optionen angezeigt, die durch Symbolleistenbuttons dargestellt werden:

• Sehen Sie ein Satellitenbild des Standorts, basierend auf dem ausgewählten Zoomlevel
• Senden Sie eine SMS-Nachricht, die den aktuellen Standort enthält
• Öffnen Sie die standardmäßige Karten-App an Ihrem aktuellen Standort
• Führen Sie eine allgemeine Websuche basierend auf dem aktuellen Standort durch
• Erhalten Sie die aktuellen Wetterbedingungen für diesen Ort
• Hier finden Sie eine Liste mit bevorstehenden Veranstaltungen in Ihrer Nähe
• Durchsuchen Sie die Umgebung mithilfe der MapQuest-Such-API

Die Funktionen der Werkzeugleiste werden mithilfe von MobileTogether Designer, dem visuellen Entwicklungswerkzeug für Apps, in der App definiert und konfiguriert. Dieses Tool ermöglicht es Entwicklern, das Layout der App jederzeit während der Entwicklung zu überprüfen und komplexe Abläufe zu testen.

Unser Navigationsmenü ist als eine Reihe von Tabellen aufgebaut, wie hier im Fenster "Designseite" des Programms MobileTogether dargestellt

Bei der Gestaltung eines Menüs mit Symbolen sind verschiedene Aspekte zu berücksichtigen, insbesondere um eine vorhersehbare und einheitliche Benutzererfahrung auf einer Vielzahl von mobilen Geräten mit unterschiedlichen Bildschirmgrößen und Pixelmaßen zu gewährleisten.

Zunächst ist es wichtig, dass jedes Bild klar und deutlich die Funktion andeutet, die ausgeführt wird, wenn es angeklickt wird.

Zweitens müssen die Bilder groß genug sein, um auch für Nutzer mit unterschiedlich großen Fingern bedienbar zu sein. Wir hören oft von mobilen Nutzern, dass versehentliche Klicks auf "meine ungeschickten Finger" zurückzuführen seien. Aber war der Nutzer wirklich ungeschickt, oder ist das Layout der App zu klein und verwirrend, um es einfach zu bedienen?

Schließlich gilt: Bei Apps, die mehrere Bildschirme mit verschiedenen Werkzeugschaltflächen anzeigen, sorgt ein einheitliches Layout und eine konsistente Funktionalität über alle Seiten hinweg dafür, dass die App deutlich intuitiver zu bedienen ist.

Unsere Demo-App "Where Am I" kombiniert strategisch die Funktionalität von zwei Steuerelement-Eigenschaften, um die Größe und das Layout von Symbolen zu verwalten.

Durch die Einstellung der Breite jedes Symbols auf "fill_parent" können wir eine einzige Bilddatei für alle Bildschirmgrößen verwenden. In unserer App ist jedes Symbol eine .png-Bilddatei mit einer Größe von 192x192 Pixeln, und "fill_parent" skaliert das Bild automatisch so, dass es die gesamte Breite der Spalte auf jedem mobilen Endgerät ausfüllt.

Die Spaltenbreiten für jedes Werkzeugsymbol werden in XPath-Ausdrücken definiert. Wir haben ein Element im persistenten Datenspeicher verwendet, um die Spaltenbreiten für die Werkzeugsymbole festzulegen. Dadurch konnten wir mit verschiedenen Größen auf verschiedenen Geräten experimentieren, indem wir den Wert im Datenspeicher neu definierten, anstatt jede Spaltenbreite für jeden Test einzeln zu ändern. Insgesamt haben wir in der App drei verschiedene Symbolgrößen verwendet. Hier ist der Abschnitt des Datenspeichers, in dem die Spaltenbreiten gespeichert sind:

Die Tabelle enthält auch leere Spalten, um Ränder um jedes Symbol zu erstellen. Die Spaltenbreiten für die Ränder sind leer gelassen, was bedeutet, dass der gesamte verbleibende, nicht zugewiesene Platz gleichmäßig zwischen ihnen aufgeteilt wird. Wir haben eine Abstandseinstellung zwischen den Zeilen von Symbolen eingefügt, um den vertikalen Abstand zwischen den Zeilen zu erzeugen.

Sie können das Symbolbild des Tools auch direkt in die App-Datei einbetten oder die Bilder separat auf den MobileTogether-Server hochladen.

Definition von Aktionen für Werkzeugschaltflächen in mobilen Anwendungen

Das Definieren der Aktionen, die ausgeführt werden sollen, wenn auf das Symbol eines Steuerelements geklickt wird, ist einfach. MobileTogether ermöglicht es, jedes Steuerelement anklickbar zu machen, ähnlich wie bei einem Button-Steuerelement. Die Aktionen für Steuerelemente werden über das Kontextmenü, das beim Rechtsklick erscheint, definiert:

Der oben ausgewählte Button soll die standardmäßige Kartenanwendung auf dem mobilen Gerät öffnen, wobei die Karte auf den GPS-Koordinaten zentriert wird. Das zugehörige Skript wurde jedoch erweitert, um separate Definitionen für einen einfachen Tipp, einen normalen Klick und einen langen Klick zu ermöglichen.

Abhängig von den Benutzereinstellungen kann ein Klick entweder ein Tonsignal aus der integrierten MobileTogether-Soundbibliothek abspielen. Ein normaler Klick öffnet dann die Karte, während ein langer Klick einfach ein Nachrichtenfenster öffnet, das die Funktion des Buttons erklärt.

Verschiedene Größen für Symbolleisten in mobilen Anwendungen

Wir benötigten kleinere Werkzeugschaltflächen für Situationen, in denen die Schaltfläche Platz mit Text oder anderen Bedienelementen auf der Seite teilt, beispielsweise auf den Suchseiten und den Suchergebnisseiten, die hier gezeigt werden:

Die Symbole für die Werkzeuge auf diesen Seiten wurden in Spalten definiert, wobei das kleinere Element für die Symbolbreite im Bereich "Persistente Daten" verwendet wurde.

Erfahren Sie mehr und probieren Sie es selbst aus

Wenn Sie unseren vorherigen Beitrag zur Integration von APIs in mobile Anwendungen verpasst haben, können Sie ihn hier lesen. Oder, wenn Sie neu bei MobileTogether sind, besuchen Sie die Seite MobileTogether-Demonstrationen mit Links zu Videos, Tutorials und weiteren Demo-Anwendungen.

Sie können unsere Demo-App genauer untersuchen, um zu sehen, wie wir Werkzeugschaltflächen in mobilen Apps implementiert haben, oder die APIs für Karten, Suche, Wetter und Veranstaltungen einsehen. Laden Sie einfach den kostenlosen MobileTogether Designer herunter und erhalten Sie eine Kopie unserer App auf GitHub in diesem Repository: https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I