interfejs użytkownika w aplikacjach mobilnych a różnorodność platform
TRANSCRIPT
![Page 1: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/1.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform
![Page 2: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/2.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
"Projektowanie to śmieszne słowo. Niektórzy uważają, że projektowanie określa jak coś wygląda. Ale oczywiście, jeśli pokopiesz głębiej, tak naprawdę określa jak to działa.” Steve Jobs
Źródło: http://www.changemakrs.com/vnthota/design-is-a-funny-word-some-people-think
![Page 3: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/3.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
§ Od czego zacząć projektowanie? § Jak wykonać aplikację na przykładzie platformy
Windows Phone? § Czego należy unikać przy projektowaniu aplikacji
mobilnych? § Jakie są różnice pomiędzy platformami (iOS,
Android, Windows Phone)? § Portowanie aplikacji
AGENDA
![Page 4: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/4.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
…ale od czego zacząć?
Mam pomysł na aplikację!
![Page 5: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/5.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
MAM POMYSŁ NA APLIKACJĘ
Znam Photoshopa i nie zawaham się go użyć.
![Page 6: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/6.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
MAM POMYSŁ NA APLIKACJĘ
Zaczynamy bez komputera.
![Page 7: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/7.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
§ Kiedy przymierzasz się do rozpoczęcia procesu projektowania, już na starcie myśl o efekcie końcowym.
§ Aby zapewnić powodzenie projektu ważne jest, aby angażować użytkowników w proces projektowania. Nie ma nic gorszego niż praca w próżni.
OD CZEGO ZACZĄĆ?
![Page 8: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/8.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
§ Najbardziej dochodowy: iOS
§ Najpopularniejszy: Android
§ Najłatwiejszy w programowaniu: Windows Phone
OD CZEGO ZACZĄĆ?
Określ platformę
![Page 9: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/9.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
§ Działa szybko § Dostarcza pozytywne wrażenia § Zaskakuje użytkownika § Jest spersonalizowana § Posiada rewolucyjny interfejs (UI)
ZAŁOŻENIA
Dobrze przygotowana aplikacja:
![Page 10: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/10.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
![Page 11: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/11.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Zrozum szczegóły
Najważniejsze jest, aby zrozumieć, dlaczego pracujemy nad tą aplikacją i jakie korzyści biznesowe ma ona spełnić.
1
![Page 12: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/12.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Wykonaj analizę swoich użytkowników
Przeanalizuj grupę odbiorców produktu, a zaoszczędzisz czas i unikniesz błędów. Pomyśl o ich potrzebach. Szanse na pozytywny odbiór aplikacji automatycznie wzrosną.
2
![Page 13: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/13.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Przewiduj sytuacje użycia aplikacji
Pomyśl o najbardziej popularnych sposobach używania aplikacji. Określ w jakich sytuacjach użytkownik skorzysta z programu.
3
![Page 14: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/14.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
![Page 15: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/15.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
![Page 16: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/16.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
![Page 17: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/17.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
![Page 18: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/18.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
![Page 19: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/19.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
![Page 20: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/20.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
4 Analizuj
działania konkurencji
![Page 21: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/21.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Analizuj działania konkurencji
![Page 22: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/22.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Analizuj działania konkurencji
![Page 23: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/23.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Analizuj działania konkurencji
![Page 24: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/24.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Analizuj działania konkurencji
![Page 25: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/25.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Poznaj najlepsze aplikacje
5
![Page 26: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/26.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Poznaj najlepsze aplikacje
EVERNOTE
![Page 27: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/27.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Poznaj najlepsze aplikacje
SHAZAM
![Page 28: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/28.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Poznaj najlepsze aplikacje
FOURSQUARE
![Page 29: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/29.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Poznaj najlepsze aplikacje
![Page 30: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/30.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
6 Nieustannie
poszukuj inspiracji
![Page 31: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/31.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Nieustannie szukaj inspiracji
§ Przeglądaj takie serwisy jak Dribble, Behance
§ Bądź na bieżąco z artykułami i konceptami aplikacji
§ Eksperymentuj z innymi urządzeniami i platformami (Windows Phone, Android, iOS, Blackberry)
§ Podsumuj swoje wnioski, wybierz najlepsze rozwiązania i zaimplementuj je do projektu
![Page 32: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/32.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Samsung Flexible Display
Nieustannie szukaj inspiracji
![Page 33: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/33.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Samsung Galaxy S IV sterowany wzrokiem i gestami, bez konieczności dotykania
Nieustannie szukaj inspiracji
![Page 34: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/34.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Wodoodporny
Sony XPERIA Z1
Określaj nowe mechanizmy interfejsu
![Page 35: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/35.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
1. Kodowania bez planu 2. Nieuwzględniania wielkości ekranu 3. Niekorzystania z szablonów 4. Nieinformowania użytkownika o ładowaniu danych 5. Niezwracania uwagi na różne systemy operacyjne 6. Nietestowania interfejsu przed wdrożeniem
Czego należy unikać przy projektowaniu aplikacji mobilnych?
![Page 36: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/36.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
ROZDZIELCZOŚĆ
640px
960px 1136px
640px
(480px)
(320px)
![Page 37: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/37.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
ROZDZIELCZOŚĆ
Trzy iPhony = 3 rozdzielczości (3GS,4,5)
![Page 38: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/38.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
ROZDZIELCZOŚĆ
![Page 39: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/39.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
ROZDZIELCZOŚĆ
35 rozdzielczości smartphonów - http://screensiz.es/phone
Liczba unikalnych
rozdzielczości na świecie
97 w 2010
232 w 2013
![Page 40: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/40.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Różne platformy, różne layouty
SPANISH PRO dla Windows Phone
Android, iOS ???
![Page 41: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/41.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
SPANISH PRO
![Page 42: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/42.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Widok Panoramy
SPANISH PRO
![Page 43: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/43.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Ekran główny Test – Ekran Wyboru Test - Rozpoczęcia
SPANISH PRO
![Page 44: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/44.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Test - Ekran testu Test - bład, poprawna Test - Podsumowanie
SPANISH PRO
![Page 45: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/45.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Baza słów Widok z klawiatura Wyniki wyszukiwania
SPANISH PRO
![Page 46: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/46.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Test wiedzy widok Dodawania fiszki Widok managera fiszek
SPANISH PRO
![Page 47: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/47.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Test wyboru Dodawanie Fiszek Market z dodatkową bazą słów
SPANISH PRO
![Page 48: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/48.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Dodawanie nowego słowa Widok testów Widok fiszek
SPANISH PRO
![Page 49: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/49.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
![Page 50: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/50.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Android
§ duże możliwości personalizacji
§ przyciski: home, menu, back
§ Java § funkcje wywołujące w
aplikacji ustawienia i krok wstecz przypisywane są zwykle do przycisków poza ekranem
§ dobra integracja z Google
iOS
§ największy dostęp do aplikacji
§ ,,home button’’ § Objective C § w iPhonie przyciski
muszą być każdorazowo zaszyte w interfejsie aplikacji
§ świetna obsługa gestów i multitouch
§ rozbudowane funkcje multimedialne
RÓŻNICE MIĘDZY PLATFORMAMI
Windows Phone
§ łatwy w obsłudze, bardzo intuicyjny
§ prosty interface § łatwa integracja
z Windows 8 § przyjazny dla
użytkowników § najszybciej rozwijająca
się platforma § ekran startowy:
przesuwane kafelki (live titles) w czasie rzeczywistym
![Page 51: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/51.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
PORTOWANIE APLIKACJI
![Page 52: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/52.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
PORTOWANIE APLIKACJI
![Page 53: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/53.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
PORTOWANIE APLIKACJI
![Page 54: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/54.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
§ Dobrze zaplanowany projekt podstawą sukcesu § Nieustanne poszukiwanie inspiracji § Wybór odpowiedniej platformy § Określenie urządzeń
Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform
![Page 55: Interfejs użytkownika w aplikacjach mobilnych a różnorodność platform](https://reader033.vdocuments.mx/reader033/viewer/2022060111/556380dcd8b42a20358b4ebf/html5/thumbnails/55.jpg)
PAGEINTERACTIVE.PL MOBILE MOTION DESIGN
Łukasz Grondecki
E-mail: [email protected]
tel: + 48 604 207 118 www.pageinteractive.pl