Sztuka Projektowania Aplikacji Mobilnych
700 000 Aktywacji telefonów z Androidem dziennie
2 Miesiące
250 mln Aktywacji Androida do Stycznia 2012
250 mln 250 mln 1 mln 2008 2012
Ogromny rynek dla twórców aplikacji
Ogromny rynek dla twórców aplikacji ale...
Ponad 400 tys. Aplikacji w Android Market Źródło grafiki: http://android-developers.blogspot.com
Ponad 400 tys. Aplikacji w Android Market (olbrzymia konkurencja) Źródło grafiki: http://android-developers.blogspot.com
Jak zostać zauważonym przez Użytkowników?
Źródło grafiki: http://android-developers.blogspot.com
Ikona jest opakowaniem, pierwszym wrażeniem przy zetknięciu z aplikacją szata graficzna ogólny wygląd, zachęca do dłuższego zwrócenia uwagi i pobrania aplikacji wrażenia z użytkowania smak aplikacji pozwala zatrzymać użytkownika na stałe i przywiązać go do aplikacji Źródło grafiki: http://developer.android.com
Ikona jest opakowaniem, pierwszym wrażeniem przy zetknięciu z aplikacją szata graficzna ogólny wygląd, zachęca do dłuższego zwrócenia uwagi i pobrania aplikacji wrażenia z użytkowania smak aplikacji pozwala zatrzymać użytkownika na stałe i przywiązać go do aplikacji Źródło grafiki: http://developer.android.com
Design Istota doskonałej aplikacji
Niestety...
Niestety... Większość aplikacji w Android Market jest fatalnie zaprojektowana
Rozwiązanie problemu: Design UI patterns
3 wzorce
1
Action Bar
Przycisk Home
Przycisk Home Tytuł aktualnego okna
Przycisk Home Przyciski akcji Tytuł aktualnego okna
2
Dashboard
Action Bar
Action Bar Menu w postaci siatki
Ludzkość od najdawniejszych czasów używała symboliki obrazów. Źródło grafik: flickr.com autorzy: JackVersloot, espinr
Ludzkość od najdawniejszych czasów używała symboliki obrazów. Człowiek dużo szybciej rozpozna symbol, niż słowo pisane Źródło grafik: flickr.com autorzy: JackVersloot, espinr
Action Bar Menu w postaci siatki Dodatkowa funkcjonalność
Co jednak kiedy potrzebujemy zaprezentować dużą liczbę danych na małym ekranie?
3
Workspaces
Action Bar
Action Bar Zakładki z tytułami
Action Bar Zakładki z tytułami Treść aktualnej zakładki
Przykłady
Android Market
Gigbeat
doubletwist Player
Podsumowując 3 ogólne wzorce projektowania UI
Action Bar pomaga w nawigacji. Mówi w jakiej aplikacji jesteśmy, w którym z jej okien się znajdujemy, oraz co w tym miejscu możemy zrobić 3 ogólne wzorce projektowania UI
Dashboard okno główne aplikacji. Pozwala w mgnienu oka zorientować się jakie możliwości daje nam aplikacja 3 ogólne wzorce projektowania UI
Workspaces daje możliwość prezentacji dużej ilości powiązanych ze sobą danych w intuicyjny sposób 3 ogólne wzorce projektowania UI
Porozmawiajmy o szczegółach
Demo
Aplikacja Demo Android 2.1 lub nowszy http://tinyurl.com/mtcdemo
Studium przypadku: TimePicker
? Jak łatwiej i efektywniej ustawiać czas bądź wybierać godzinę?
Zmienić sposób myślenia
Źródło grafiki: flickr.com autor: Dave Dugdale
Źródło grafiki: flickr.com autor: A6U571N
kliknięcie
kliknięcie
przewijanie
Spinner hasło: spinner
Spinner TimePicker + ekspresowa implementacja - nieatrakcyjny wygląd - nie działa w 100% jak powinien
Jak udoskonalić koncepcję? Wymagania kontrolki: - prostota użycia - efektywność - mechanizm przewijania - atrakcyjność wizualna?
Wykorzystać doświadczenia projektantów innych platform
Jak udoskonalić koncepcję? Wymagania kontrolki: - prostota użycia - efektywność - mechanizm przewijania - atrakcyjność wizualna
Jak udoskonalić koncepcję? Wymagania kontrolki: - prostota użycia - efektywność - mechanizm przewijania - atrakcyjność wizualna a
Jak udoskonalić koncepcję? Wymagania kontrolki: - prostota użycia - efektywność - mechanizm przewijania - atrakcyjność wizualna a a
Jak udoskonalić koncepcję? Wymagania kontrolki: - prostota użycia - efektywność - mechanizm przewijania - atrakcyjność wizualna a a a
Jak udoskonalić koncepcję? Wymagania kontrolki: - prostota użycia - efektywność - mechanizm przewijania - atrakcyjność wizualna a a a a
Jak zaimplementować TimePicker wzorowany z ios na platformie Android?
ListView hasło: list
ListView TimePicker + dość szybka implementacja + niemal w pełni spełnia oczekiwania wobec kontrolki - stwarza pewne ograniczenia
Własne View hasło: view
http://code.google.com/p/android-wheel/
CustomView TimePicker + działa zgodnie z wymaganiami + atrakcyjny wygląd + w pełni konfigurowalna + brak ograniczeń - dłuższa implementacja
Studium przypadku: TimePicker TimePicker - zły design, prosty, lecz nieefektywny Spinner TimePicker lepszy, ale ma nieatrakcyjny wygląd ListView TimePicker posiada wszystko czego trzeba, lecz ma również ograniczenia CustomView TimePicker idealne rozwiązanie. Wymaga dłuższej implementacji
Przesada?
Najważniejszy jest użytkownik
Be a yardstick of quality. Some people aren't used to an environment where excellence is expected. Steve Jobs Bądźcie miarą jakości. Ludzie nie przywykli do środowiska gdzie oczekiwana jest doskonałość
Jeszcze jedna rzecz...
http://developer.android.com/design
Dziękuję Plik pdf prezentacji, aplikacja demo, oraz jej kod, będą dostępne pod adresem: www.thalion.com.pl