Afbeeldingen, pictogrammen en knoppen in mobiele apps

We hebben eerder geschreven over Het integreren van API's en mobiele apps om een rijke en aantrekkelijke gebruikerservaring te creëren. Sinds de publicatie van ons vorige artikel hebben we de GPS-demo-app verder verbeterd met extra API-ondersteuning om actuele weersomstandigheden en geplande evenementen in de buurt te kunnen weergeven.

Een van de uitdagingen bij het aanbieden van al deze functionaliteit op een klein mobiel scherm is om gebruikers een duidelijke, consistente en gebruiksvriendelijke navigatiestructuur te bieden in alle onderdelen van de app.

Het gebruik van iconen als knoppen in mobiele apps kan een stijlvol en elegant navigatiemenu creëren, vooral als de iconen zijn gekozen op basis van herkenbare en algemeen aanvaarde conventies. Zo geeft een pijl die naar links wijst vaak aan dat u terug moet, en een icon van een floppy disk vertegenwoordigt vaak het opslaan van gegevens, zelfs als de uiteindelijke bestemming geen nieuw bestand of een schijf is.

In dit artikel beschrijven we hoe u met behulp van MobileTogether en afbeeldingen navigatiemenu's kunt maken die op verschillende platforms werken en die knoppen bevatten voor verschillende functies in mobiele apps.

De onderstaande screenshots tonen de "Where Am I"-app in gebruik op iPhones (met Apple iOS) en Android-telefoons.

In elke weergave heeft de gebruiker zojuist de huidige GPS-coördinaten ontvangen en wordt hij/zij gepresenteerd met dezelfde reeks opties, weergegeven via knoppen:

• Bekijk een satellietfoto van de locatie, gebaseerd op het gekozen zoomniveau
• Stuur een sms-bericht met de huidige locatie
• Open de standaardkaartapplicatie op uw huidige locatie
• Voer een algemene zoekopdracht op het internet uit, gebaseerd op de huidige locatie
• Bekijk de actuele weersomstandigheden op de betreffende locatie
• Bekijk een lijst met aankomende evenementen in de buurt
• Zoek in de omgeving met behulp van de MapQuest Zoek-API

De knoppen voor de functies worden gedefinieerd en geconfigureerd in de app met behulp van MobileTogether Designer, het visuele ontwikkelhulpmiddel waarmee ontwikkelaars de lay-out van de app kunnen bekijken en complexe functionaliteit kunnen testen tijdens het ontwikkelproces.

Ons navigatiemenu is opgebouwd als een reeks tabellen, zoals hieronder te zien is in het venster "Pagina-ontwerp" van MobileTogether Designer:

Bij het ontwerpen van een menu met pictogrammen zijn er verschillende aspecten waarmee rekening moet worden gehouden, met name om een voorspelbare en consistente gebruikerservaring te creëren op verschillende mobiele apparaten met verschillende schermformaten en pixelafmetingen.

Ten eerste is het belangrijk dat elk beeld duidelijk aangeeft welke functie wordt uitgevoerd wanneer erop wordt geklikt.

Ten tweede moeten de afbeeldingen groot genoeg zijn om gebruikers met verschillende vingergroottes te kunnen bedienen. We horen vaak van mobiele gebruikers dat ze per ongeluk op iets klikken vanwege "mijn onhandige vingers." Maar was de gebruiker echt onhandig, of is de lay-out van de app te klein en verwarrend om gemakkelijk te kunnen navigeren?

Tot slot, voor apps die meerdere schermen weergeven met verschillende knoppen, zorgt een consistente lay-out en functionaliteit tussen de verschillende pagina's ervoor dat de app veel intuïtiever in gebruik is.

Onze demo-app "Waar ben ik?" combineert op strategische wijze de functionaliteit van twee controle-eigenschappen om de grootte en lay-out van pictogrammen te beheren.

Door de breedte van elk pictogram in te stellen op "fill_parent", kunnen we één afbeelding gebruiken voor alle schermformaten. In onze app is elk pictogram een .png-afbeelding van 192x192 pixels, en "fill_parent" zal de afbeelding automatisch zo vergroten dat deze de volledige breedte van de kolom op elk mobiel apparaat van de eindgebruiker vult.

De breedte van de kolommen in de tabel voor elk pictogram van een tool wordt gedefinieerd in XPath-expressies. We hebben een element in de persistente datastructuur gebruikt om de kolombreedte voor de pictogrammen van de tools te specificeren. Dit stelde ons in staat om met verschillende groottes op verschillende apparaten te experimenteren door de waarde in de datastructuur te wijzigen, in plaats van elke kolombreedte-eigenschap voor elke test afzonderlijk te bewerken. In totaal hebben we drie verschillende pictogramgroottes in de app gebruikt. Hier is het deel van de datastructuur waar de kolombreedtes zijn opgeslagen:

De tabel bevat ook lege kolommen om marges rondom elk pictogram te creëren. De breedte van de kolommen voor de marges is leeg gelaten, wat betekent dat de overgebleven, niet-toegewezen ruimte gelijkmatig wordt verdeeld over deze kolommen. We hebben een afstand toegevoegd tussen de rijen van pictogrammen om de verticale marge tussen de rijen te creëren.

U kunt er ook voor kiezen om het afbeeldingbestand van het pictogram van de tool in het app-bestand op te nemen, of de afbeeldingen apart naar de MobileTogether-server te uploaden.

Acties definiëren voor knoppen in mobiele apps

Het definiëren van de acties die moeten worden uitgevoerd wanneer op het pictogram van een tool wordt geklikt, is eenvoudig. MobileTogether maakt het mogelijk om elk element klikbaar te maken, net als een knop. De acties van een element worden gedefinieerd via het contextmenu dat verschijnt wanneer u met de rechtermuisknop erop klikt:

De knop die hierboven is geselecteerd, is bedoeld om de standaard kaartoepassing op het mobiele apparaat te openen, met het scherm gecentreerd op de GPS-coördinaten. De actiescript is echter uitgebreid met aparte definities voor een tik, een normale klik en een lange klik.

Afhankelijk van de gebruikersinstellingen kan een klik een geluid afspelen uit de ingebouwde geluidsbibliotheek van MobileTogether. Een normale klik opent de kaart, maar een lange klik opent een venster waarin wordt uitgelegd wat de functie van de knop is.

Variërende groottes voor knoppen in mobiele apps

We hadden kleinere knoppen voor de tools nodig, vooral in situaties waarin de knop ruimte deelt met tekst of andere elementen op de pagina, zoals op de zoekpagina en de zoekresultaatpagina's die hier worden getoond

De pictogrammen voor de tools op deze pagina's zijn gedefinieerd in kolommen, met behulp van het kleinere pictogrambreedte-element in de boomstructuur voor persistente gegevens.

Lees meer en probeer het zelf

Als u ons eerdere bericht over het integreren van API's in mobiele apps gemist heeft, kunt u het hier lezen. Of, als u nieuw bent bij MobileTogether, bekijk de pagina MobileTogether Demo's met links naar video's, tutorials en meer demo-applicaties.

U kunt onze demo-app nader bekijken om precies te zien hoe we de knoppen in mobiele apps hebben geïmplementeerd, of om de API's voor kaarten, zoeken, het weer en evenementen te bekijken. Download eenvoudig de gratis MobileTogether Designer en verkrijg een kopie van onze app op GitHub in deze repository: https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I.</1>