Obrazy, ikony i przyciski narzędzi w aplikacjach mobilnych

Wcześniej pisaliśmy o Integracji API i aplikacji mobilnych, aby stworzyć bogate i angażujące doświadczenie użytkownika. Od czasu opublikowania naszego poprzedniego artykułu, kontynuowaliśmy udoskonalanie aplikacji demonstracyjnej wykorzystującej GPS, dodając wsparcie dla dodatkowych API, które pozwalają na uzyskiwanie aktualnych warunków pogodowych oraz informacji o planowanych wydarzeniach w pobliżu.

Jednym z wyzwań związanych z oferowaniem tak wielu funkcji na małym ekranie urządzenia mobilnego jest zapewnienie użytkownikom przejrzystego, spójnego i łatwego w obsłudze systemu nawigacji we wszystkich sekcjach aplikacji.

Wykorzystanie ikon jako przycisków narzędzi w aplikacjach mobilnych może stworzyć eleganckie i przejrzyste menu nawigacyjne, szczególnie jeśli ikony są wybierane zgodnie z powszechnie rozpoznawalnymi i akceptowanymi konwencjami. Na przykład, strzałka skierowana w lewo często oznacza powrót, a ikona dyskietki często reprezentuje zapisywanie danych, nawet jeśli ostatecznym miejscem zapisu nie jest nowy plik ani dysk.

W tym artykule opisujemy, jak wykorzystać ikony obrazów do tworzenia menu nawigacyjnych działających na różnych platformach, zawierających przyciski narzędzi, w aplikacjach mobilnych, korzystając z narzędzia MobileTogether.

Poniższe zrzuty ekranu przedstawiają działanie aplikacji "Where Am I" na urządzeniach Apple iOS oraz telefonach z systemem Android.

W każdym widoku użytkownik otrzymuje aktualne współrzędne GPS i wyświetlana jest mu ta sama sekwencja opcji, reprezentowana przez przyciski narzędzi:

Wyświetl zdjęcie satelitarne tego miejsca, oparte na wybranym poziomie powiększenia
Wyślij wiadomość tekstową zawierającą aktualną lokalizację
Otwórz domyślną aplikację mapową, aby wyświetlić aktualną lokalizację
Wykonaj ogólne wyszukiwanie w sieci, uwzględniając aktualną lokalizację
Sprawdź aktualne warunki pogodowe w danym miejscu
Zobacz listę nadchodzących wydarzeń w Twojej okolicy
Wyszukaj informacje o okolicach, korzystając z API MapQuest

Przyciski narzędzi są definiowane i konfigurowane w aplikacji za pomocą narzędzia MobileTogether Designer, czyli środowiska do wizualnego tworzenia aplikacji, które umożliwia programistom podgląd układu aplikacji oraz testowanie złożonych algorytmów w dowolnym momencie procesu tworzenia.

Nasze menu nawigacyjne jest zbudowane jako seria tabel, którą można zobaczyć na przykładzie okna "Projektowanie strony" w programie MobileTogether Designer:

Przy tworzeniu menu z ikonami narzędzi należy wziąć pod uwagę kilka kwestii, zwłaszcza aby zapewnić przewidywalne i spójne doświadczenie użytkownika na różnych urządzeniach mobilnych, charakteryzujących się różnymi rozmiarami ekranu i rozdzielczością.

Po pierwsze, ważne jest, aby każdy obraz w sposób czytelny sugerował funkcję, która zostanie uruchomiona po jego kliknięciu.

Po drugie, obrazy muszą być wystarczająco duże, aby użytkownicy o różnych rozmiarach palców mogli z nimi łatwo operować. Często słyszymy od użytkowników urządzeń mobilnych, że przypadkowe kliknięcia wynikają z "moich niezgrabnych palców". Ale czy użytkownik był niezgrabny, czy też układ aplikacji jest zbyt mały i skomplikowany, co utrudnia nawigację?

Na koniec, w przypadku aplikacji wyświetlających wiele ekranów z różnymi przyciskami narzędzi, spójny układ i funkcjonalność na wszystkich stronach sprawiają, że korzystanie z aplikacji jest znacznie bardziej intuicyjne.

Nasza demonstracyjna aplikacja "Where Am I" w sposób przemyślany łączy funkcjonalność dwóch właściwości kontrolnych, aby zarządzać rozmiarem i układem ikon narzędzi.

Ustawienie szerokości elementu sterującego dla każdego ikony na "fill_parent" pozwala nam używać jednego pliku graficznego dla wszystkich rozmiarów ekranów. W naszej aplikacji każda ikona to plik graficzny w formacie .png o wymiarach 192x192 pikseli, a wartość "fill_parent" automatycznie dopasowuje rozmiar obrazu, aby wypełnić szerokość kolumny na każdym urządzeniu mobilnym używanym przez użytkownika.

Szerokość kolumn w tabeli dla każdego ikony narzędzia jest definiowana za pomocą wyrażeń XPath. Użyliśmy elementu w strukturze danych, aby określić szerokość kolumn dla ikon narzędzi. Dzięki temu mogliśmy eksperymentować z różnymi rozmiarami na różnych urządzeniach, zmieniając wartość w strukturze danych, zamiast edytować właściwości szerokości każdej kolumny dla każdego testu. Ogólnie rzecz biorąc, w aplikacji wykorzystaliśmy trzy różne rozmiary ikon. Poniżej znajduje się fragment struktury danych, w której przechowywane są szerokości kolumn:

Tabela zawiera również puste kolumny, które służą do tworzenia marginesów wokół każdego ikony narzędzia. Szerokość tych kolumn marginesów jest pusta, co oznacza, że cała pozostała, nieprzydzielona przestrzeń jest równomiernie dzielona między nimi. Dodaliśmy również kontrolę odstępu między wierszami ikon, aby utworzyć pionowy margines między wierszami.

Można również zdecydować się na włączenie pliku graficznego ikony narzędzia bezpośrednio do pliku aplikacji, lub przesłać obrazy oddzielnie na serwer MobileTogether.

Definiowanie akcji przypisywanych do przycisków narzędzi w aplikacjach mobilnych

Definiowanie akcji, które mają być wykonane po kliknięciu ikony narzędzia, jest proste. MobileTogether umożliwia uczynienie dowolnego elementu interaktywnego, podobnie jak przycisk. Akcje elementów interaktywnych są definiowane za pomocą menu kontekstowego, które pojawia się po kliknięciu prawym przyciskiem myszy:

Przycisk wybrany powyżej ma na celu otwarcie domyślnej aplikacji mapowej na urządzeniu mobilnym, wycentrowanej na współrzędnych GPS. Jednak skrypt działania został rozbudowany o oddzielne definicje dla pojedynczego dotknięcia (lub zwykłego kliknięcia) oraz dla długiego naciśnięcia.

W zależności od preferencji użytkownika, jedno kliknięcie może odtworzyć dźwięk z wbudowanej biblioteki dźwięków MobileTogether. Zwykłe kliknięcie otwiera mapę, natomiast długie kliknięcie wyświetla okno z komunikatem wyjaśniającym funkcję przycisku.

Różne rozmiary przycisków narzędzi w aplikacjach mobilnych

Potrzebowaliśmy mniejszych przycisków narzędzi, szczególnie w sytuacjach, gdy przycisk narzędzia zajmuje przestrzeń obok tekstu lub innych elementów sterujących na stronie, na przykład na stronach wyszukiwania i stronach wyników wyszukiwania, które są tutaj pokazane

Ikony narzędzi na tych stronach zostały zdefiniowane w kolumnach, korzystając z elementu o mniejszej szerokości ikony w drzewie danych trwałej pamięci.

Dowiedz się więcej i wypróbuj to samodzielnie

Jeśli przegapiliście nasz wcześniejszy artykuł na temat integracji API z aplikacjami mobilnymi, możecie go przeczytać tutaj. A jeśli dopiero zaczynacie przygodę z MobileTogether, zapraszamy do zapoznania się ze stroną Demonstracje MobileTogether, gdzie znajdziecie linki do filmów, samouczków i dodatkowych aplikacji demonstracyjnych.

Można dokładniej zapoznać się z naszą wersją demonstracyjną, aby zobaczyć, w jaki sposób zaimplementowaliśmy przyciski narzędzi w aplikacjach mobilnych, lub zapoznać się z interfejsami API do mapowania, wyszukiwania, prognozy pogody i wydarzeń. Wystarczy pobrać bezpłatny program MobileTogether Designer i pobrać kopię naszej aplikacji z GitHub w tym repozytorium: https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I