Projektowanie aplikacji mobilnych – Co musisz wiedzieć?

Już w najbliższy poniedziałek na eduweb.pl premiera Kompendium iOS! Z tej okazji przygotowałem również poradniki, które będziemy publikować w formie artykułów na blogu. Pierwszy z nich przeznaczony jest dla osób początkujących, które chcą rozpocząć swoją przygodę z platformami mobilnymi i zebrałem w nim garść przydatnych porad, które pozwolą Wam zorientować się w tym niezwykle ciekawym i aktualnym temacie. Miłej lektury!

Projektowanie aplikacji mobilnych na różne platformy trudno już nazwać trendem – jest to w pełni obowiązkowy element pracy każdego szanującego się designera. Statystyki mówią same za siebie – obecnie na świecie jest już ponad 5x tyle urządzeń mobilnych, co desktopów a niemal 25% użytkowników korzysta wyłącznie z urządzeń mobilnych do przeglądania sieci. Największe polskie serwisy odnotowują już nawet około 50% ruchu z urządzeń mobilnych. Kierunek jest jasny a sposoby dotarcia z mobilną treścią do użytkowników to dziś jedno z większych wyzwań współczesnych projektantów.

Co do zasady dotarcie z treścią na urządzenia mobilne może być zrealizowane na dwa sposoby – z pomocą responsywnej strony WWW lub aplikacji natywnej. Oba sposoby są i będą wykorzystywane równolegle, jednak jak dowodzą badania, wygodniejszą i bardziej przyjazną formą dla użytkowników jest coraz częściej korzystanie z dobrze zaprojektowanej aplikacji natywnej, z czym wiąże się szereg zalet:

Szybsze działanie aplikacji (natywny kod, brak ograniczeń płynących z konieczności obsługi przeglądarki)

Możliwość korzystania z aplikacji offline (a przynajmniej części jej funkcjonalności)

Look & Feel – czyli dopasowanie interfejsu pod konkretną platformę, do czego użytkownicy są przyzwyczajeni

Wykorzystanie natywnych możliwości urządzenia jak akcelerometr, żyroskop, GPS etc. w większym stopniu niż pozwalają na to specyfikacje HMTL5 w przeglądarce

Skupmy się tutaj zatem wyłącznie na zagadnieniach związanych z projektowaniem aplikacji natywnych, choć zapewne wiele omawianych kwestii przekłada się także na responsywne strony WWW. Jak się okazuje, projektowanie aplikacji natywnych nie jest to zadanie tak proste, jak mogłoby się wydawać. W przeciwieństwie do interfejsów webowych gdzie po pierwsze panuje zupełna dowolność stylistyczna (choć obowiązują pewne trendy, jak ewoluujący flat, czy coraz bardziej popularny i ciekawy Material), projektując aplikacje natywne musimy trzymać się pewnych ogólnych zasad i koncepcji projektowych, a nasza wyobraźnia nie tylko jest ograniczona mniejszą powierzchnią ekranu, ale także pewnymi zasadami, które brane są pod uwagę w procesie certyfikacji, czyli weryfikacji naszej aplikacji zanim znajdzie się w sklepach jak AppStore czy Google Play.

Ogólnie, można wyróżnić trzy najważniejsze platformy projektowe, które powinniśmy wziąć pod uwagę tworząc aplikacje mobilne:

Google Material Desing –

– iOS Human Interface Guidelines –

– Windows Design (kiedyś Metro, potem Modern, teraz już nie wiadomo do końca jak to nazwać) –

Win as one…

Przywołane linki to jedne z podstawowych źródeł do przejrzenia dla początkujących w zakresie projektowania i tworzenia mobilnych interfejsów. Ponadto, wymagana jest pewna świadomość dotycząca samych platform, na które tworzymy aplikacje. Dobrze jest mieć doświadczenia związane z korzystaniem z iOS czy Androida, ponieważ pozwoli to łatwo zorientować się, które komponenty są popularne dla danej platformy i jak realizowane są najważniejsze schematy takie jak przepływ informacji i nawigacja. Jedną z nadrzędnych zasad podczas projektowania na urządzenia mobilne jest „Win as one”, nazwana tak przez Microsoft, która co do zasady mówi że warto projektować aplikacje tak, aby ich najważniejsze, powtarzalne elementy jak nawigacja, były podobne w różnych aplikacjach, dzięki czemu użytkownicy intuicyjnie będą mogli z nich korzystać – jeśli nauczą się obsługi jednej aplikacji, będą potrafili obsłużyć też inne. To wszystko nakłada na nas, projektantów, pewne ograniczenia i zamyka nas w schematach, ale nie dajcie się zwieść – nie chodzi tutaj o korzystanie z dokładnie takich samych komponentów, identycznych ikonek etc., wystarczy na przykład, że zachowamy jakiś charakterystyczny układ, czy umieścimy np. przycisk „Wstecz” we właściwym miejscu, natomiast stylistyka tych elementów w zasadzie nie jest nam narzucona i możemy pozwolić sobie na kreatywność.

Uproszczony proces tworzenia aplikacji mobilnych

Sam proces od czystej kartki w aplikacji graficznej, do gotowej aplikacji jest dość złożony i należy zdawać sobie sprawę z tego, że typowe aplikacje mobilne są tworzone osobno dla każdej platformy a także z użyciem różnych języków programowania. Jeśli chodzi o narzędzia, proces przedstawia się w ten sposób:

Programowanie aplikacji

Projektowanie – Photoshop, Sketch, Illustrator

Praca koncepcyjna (mockupy, moodboardy, wireframe’y etc.)

Programowanie: Android – Java (Android Studio)

Programowanie: iOS – Swift, Objective-C (Xcode)

Programowanie: Windows Phone – C#, HTML, VB, C++ (Visual Studio)

Proces Certyfikacji (w sklepach AppStore, Windows Store, Google Play)

Aplikacje Hybrydowe

Istnieje pewien sposób na stworzenie jednej aplikacji, która będzie na przykład zakodowana z pomocą języka C# a następnie skompilowana na wiele platform jednocześnie. Takie możliwości dają nam zewnętrzne narzędzia jak Xamarin czy PhoneGap. Wówczas cały proces jest usprawniony i łatwiejszy w utrzymaniu, ponieważ mamy tylko jeden kod źródłowy dla wszystkich aplikacji. Jednak tak czy inaczej, musimy dla poszczególnych platform tworzyć różne widoki, czyli osobno zaprojektować aplikacje iOS i Android a jedynie logika aplikacji będzie wspólna, co pozwoli już zaoszczędzić mnóstwo czasu i kosztów. Jednak z drugiej strony, rozwiązania te mają swoje wady – są utrzymywane i rozwijane przez osobne firmy i nie możemy być pewni ich wsparcia w przyszłości, dodatkowo często są płatne a na dodatek dość drogie.

Dowiedz się więcej:

Xamarin:

Phone Gap:

Poznaj swoją platformę

Trzeba zdawać sobie sprawę z tego, że wdrażanie aplikacji wymaga także posiadania różnych środowisk – Mac OS oraz Windows, w przypadku różnych platform. W praktyce wygląda to w ten sposób, że na ogół różni programiści będą wdrażali aplikacje na różne platformy. Natomiast z punktu widzenia projektowania, musimy oczywiście zaprojektować ekrany dla każdej platformy osobno, ponieważ każda z nich ma swoją specyfikę.

Na koniec musimy jeszcze przejść proces Certyfikacji, który związany jest ze zgłaszaniem naszej aplikacji do sklepów. Co do zasady nie ma innej możliwości jak pobieranie naszej aplikacji przez użytkowników, jak ze sklepów. Aplikacje muszą w związku z tym przejść specjalny proces który wiąże się ze sprawdzeniem tego, czy działają poprawnie a także pewnych podstawowych wymogów. Przykładowo, jeśli aplikacja korzysta z GPS i nie prosi użytkownika o zgodę, może zostać odrzucona w procesie Certyfikacji. Jednak na odrzucenie nie powinny mieć wpływu zabiegi graficzne czy na przykład nie zastosowanie się do niektórych elementów guideline’ów. Możliwość zgłoszenia aplikacji mają zarejestrowani deweloperzy, co oznacza że należy zwykle liczyć się z roczną opłatą developerską około $99 dla każdej z platform.

Programy developerskie:

Apple:

Android:

Windows:

Projektowanie – najważniejsze elementy

Istnieje wiele zależności, które należy wziąć pod uwagę w procesie projektowania, poniżej przedstawiam hasłowo kilka tematów, które odgrywają największą rolę w użyteczności aplikacji mobilnych:

Rozdzielczości projektowanych aplikacji

W skrócie, istnieje ogromna fragmentacja rozdzielczości, na których działają najbardziej popularne platformy mobilne – iOS, Android oraz Windows Phone / Windows. Nie sposób jest zaadresować osobno każdego z ekranów i przygotowywać odrębnego projektu aplikacji dla każdej z rozdzielczości. Co więcej, nie jesteśmy też w stanie fizycznie testować każdej z dostępnych rozdzielczości na różnych urządzeniach. Musimy więc przyjąć pewne założenia, które pozwolą projektować w oderwaniu od konkretnych wartości w pikselach czy przekątnej urządzenia. Technicznie, każda z platform stosuje inne ułatwienia pod kątem projektowania na wiele ekranów, ale najważniejsze koncepcje są wspólne:

Co do zasady powinniśmy projektować w oderwaniu od pikseli i przekątnych, rozpoczynając od wartości wyjściowej we właściwych proporcjach Powyższe możemy skutecznie zrealizować tylko wtedy, jeśli pracujemy z grafiką, która dobrze się skaluje, czyli tworzymy w wektorach lub pracujemy na obiektach inteligentnych iOS posługuje się jednostką pt, niezależną od rozdzielczości – gdzie na każdy punkt może przypadać np. 1 lub więcej pikseli, jeśli mamy do czynienia z wyświetlaczem Retina (wysokiej rozdzielczości). Android również posiada swoje niezależne wartości takie jak mdpi, hdpi xhdpi i inne. Powinniśmy projektować osobno nie tyle typ urządzeń, co rodzaj „doświadczenia” – telefon, tablet, telewizor (system samochodowy itd.) Od strony kodowania – zwykle wygląda to tak, że możemy stworzyć tzw. uniwersalną aplikację (Windows – Universal App), która będzie działała zarówno na telefonach i tabletach, a jedynie ustalić pewne zależności dotyczące rozmieszczenia elementów w ramach widoku i jeśli jest to konieczne, stworzyć wyświetlanie elementów warunkowo np. jeśli użytkownik będzie pracował na telefonie czy tablecie.

Zestawienia rozdzielczości:

Android:

iOS:

Skalowanie

Kolejnym problemem związanym z projektowaniem aplikacji jest sprzętowe skalowanie. Obecnie ekrany dysponują bardzo dużymi rozdzielczościami, np. full hd na ekranie telefonu, co sprawia, że wyświetlane 1/1 elemeny byłyby bardzo małe i nieczytelne dla odbiorcy. Stąd w wielu przypadkach jest stosowane skalowanie na poziomie systemu i np. wszystkie elementy na ekranie są powiększane 2x dla lepszej czytelności (ekrany Retina w iOS).

Podstawowe skale:

Rezultat skalowania i dostarczanie grafik

Skutki takiego zabiegu z punktu widzenia projektowania sprowadzają się do tego, że powinniśmy dostarczyć różne zestawy grafik – przykładowo ikonę w rozdzielczośći 100x100px dla zwykłego ekranu oraz 200x200px dla ekranu Retina. Aczkolwiek na tym nasza praca się nie kończy, w przypadku Androida trzeba dostarczyć odpowiednio po kilka takich samych grafik, w Windows podobnie jak w iOS trzy rozmiary. Wszystko to wydaje się być dość mocno skomplikowane, choć po zastosowaniu pewnych sztuczek projektowych jest możliwa automatyzacja takiego procesu. Zaraz, zaraz – przecież wspominałem, że najlepiej jest projektować od razu w wektorach? Jako że skalują się bez utraty jakości, czy nie byłoby to odpowiednie rozwiązanie na potrzeby różnych wariantów skalowania? Byłoby! Ale niestety, obecnie urządzenia mobilne, są, można powiedzieć tam gdzie przeglądarki były parę lat temu i nie wspierają zbyt dobrze grafiki w formacie wektorowym. Możemy co prawda skorzystać z bibliotek jak SVG Android, czy spróbować wypuścić pliki wektorowe .pdf dla iOS i wówczas możemy pracować tylko na jednym rozmiarze, ale w praktyce niestety nie zawsze zdaje to egzamin.

Projektowanie pod dotyk

Ważnym aspektem projektowania dla urządzeń mobilnych jest interfejs dotykowy, który determinuje inne zachowania i sposoby korzystania z urządzeń. Mysz jest bardzo precyzyjnym wskaźnikiem, gdzie w zasadzie możemy prawie co do piksela wskazać element na ekranie – w przeciwieństwie do palca, w którego przypadku zaleca się już projektowanie elementów dotykowych minimalnie na wielkości 5×5 mm fizycznie ekranu (jak to przeliczyć na piksele – to już wiedza wykraczająca poza ten artykuł ;), optymalnie 7×7 mm lub 9×9 mm. Wprowadzanie treści na klawiaturze jest wygodne, w przypadku urządzeń mobilnych musimy zrezygnować z szybkiego pisania a także wziąć pod uwagę inne możliwości, które dają nam takie urządzenia, np. mikrofon, aparat i kamera, a także same właściwości dotykowe urządzenia, dzięki którym użytkownik może wykorzystać gesty do obsługi aplikacji – przykładowo przeciągnięcie, wykorzystanie dwóch palców, przytrzymanie elementu na ekranie itp.

Interakcje i animacje

Poza przemyśleniem interakcji związanych z obsługą dotykową Twojej aplikacji, należy jeszcze zwrócić uwagę na zaplanowanie animacji oraz przejść w ramach aplikacji. Często poza samą funkcją estetyczną animacje pozwalają użytkownikowi zorientować się w kontekście, w którym aktualnie się znajduje oraz płynnie przechodzić pomiędzy funkcjonalnościami aplikacji np. odpisywać na wiadomości, usuwać elementy listy itp.

Elementy UI/UX

Każda z platform rządzi się swoimi specyficznymi zasadami w kontekście kontrolek takich jak slidery, wyszukiwarki, checkboxy, radio, listy i inne. Zdecydowanie warto korzystać z rozwiązań systemowych, ponieważ po pierwsze są one intuicyjne dla użytkowników, a ponadto łatwo będzie je wdrożyć w aplikacji osobie, która będzie ją programować. Należy jednak podkreślić, że trzeba wcześniej mieć świadomość tego, jak wyglądają i działają kontrolki, a więc sprawdzić dokumentację i wytyczne, na przykład Human Interface Guidelines od Apple.

Fonty, ikony, kolory

Podobnie jak elementy interfejsu takie jak kontrolki, zazwyczaj będziesz korzystał ze specyficznych fontów czy wskazówek dotyczących ikonografii i kolorów dla poszczególnych platform. Warto wyszukać tzw. type ramp, czyli zestawienie jakich rozmiarów i typów fotów używać dla nagłówków, treści etc. Dla iOS będziesz korzystał z rodziny San Francisco, Android – Roboto, Windows – Segoe. Nie jest to jednak obowiązkowe – możesz dołączyć do aplikacji dowolny font. Musisz jednak pamiętać o dwóch rzeczach – po pierwsze, aby to zrobić musisz upewnić się, że licencja na font na to zezwala, po drugie, font musi zostać dodatkowo embedowany do aplikacji. Z tych powodów na ogół sugeruje się korzystanie z fontów wymienionych wyżej, ponieważ są one zainstalowane na każdym z urządzeń z danym systemem i nie trzeba się już o nic dodatkowo martwić. No i zapewnia to spójność z zasadą „Win as one”.

Gotowce

Podczas projektowania aplikacji mobilnych często korzystamy z gotowych rozwiązań takich jak tzw. UI Kit czy GUI – są to najczęściej darmowe zestawy kontrolek czy innych elementów gotowych do tego aby złożyć z nich aplikację, dostępne w postaci plików .psd czy .sketch oraz .ai. Dzięki temu nie będziesz musiał sam projektować typowych rozwiązań. Poza tym w sieci znajdziesz mnóstwo bibliotek ikon czy zdjęć, które możesz pobrać za darmo czy zakupić za kilka, kilkanaście dolarów – taka inwestycja zawsze się zwraca, ponieważ samodzielne tworzenie ikon zabiera mnóstwo czasu.

Sprawdź na przykład:

Co jeszcze będzie potrzebne?

Na etapie publikowania aplikacji będziesz musiał zaopatrzyć się w w/w konto deweloperskie, a także przygotować Twoją aplikację do prezentacji w sklepie. Wiąże się to z przygotowaniem dodatkowych zestawów grafik w różnych rozmiarach, jak ikony aplikacji, screeny i tym podobne. Ponadto, będziesz musiał stworzyć opisy reklamujące Twoją aplikację. Należy też załadować do aplikacji ekran, który pojawi się podczas ładowania… i to chyba wszystko

Jarosław Kułak
Jarosław Kułak

Leave a Comment