Strona główna » Wzorce projektowe

Niezbędnik początkującego projektanta aplikacji mobilnych

29 marca 2011 napisała Iga [ 3 odpowiedzi ] Drukuj wpis

Przy okazji realizacji kilku projektów mobilnych (głównie na iPhona) gromadziłam sobie różne materiały edukacyjne i inspiracyjne. Poniższe zestawienie pokazuje, w jaki sposób warto rozpocząć przygodę z projektowaniem interfejsów na nowoczesne urządzenia mobilne.

Wytyczne producentów, czyli poznaj możliwości i ograniczenia

Zanim rozpoczniemy jakiekolwiek projekty, trzeba zapoznać się z wytycznymi producentów.
iOS Human Interface Guidelines – dokument pokazuje standardowe elementy interfejsu iPhona i iPada, tłumacząc sytuacje i sposoby ich użycia. Można się np. dowiedzieć ile zakładek pokazywanych jest na iPhonie czy jakie jest znaczenie ikon stosowanych na tabelach. Jeśli Ci się śpieszy, przejrzyj skróconą wersję w postaci prezentacji Martina Ebnera:

Android User Interface Guidelines – w tym dokumencie dużo uwagi poświęcono samej grafice, ale dla projektanta interfejsu przydatne będą też informacje o wielkościach widgetów, ikon czy marginesów. Warto też zapoznać się z tekstem tłumaczącym różnice między aktywnościami (activities) a zadaniami (tasks) oraz z regułami projektowania nawigacji.

Blackberry Smartphones UI Guidelines – dokument Blackberry jest bardzo rozbudowany, niestety miesza trochę wytyczne do interfejsów z wytycznymi dla grafików i programistów, co znacznie utrudnia przyswojenie materiału.

Więcej linków do dokumentacji związanej z interfejsami mobilnymi można znaleźć w zestawieniu Maximiliano Firtman (2010) UI Guidelines for mobile and tablet web app design.

Galerie inspiracji, czyli zobacz jak robią to najlepsi

Im więcej aplikacji poznamy, tym większe będziemy mieli pojęcie o możliwościach i trendach. Nie zawsze możemy sobie pozwolić na kupowanie aplikacji (te najlepsze zwykle są też drogie), ale z pomocą przychodzą galerie.

MOObileFrames – prezentuje makiety różnych aplikacji mobilnych.

Pttrns – to zestawienie wzorców projektowych na iOS, pogrupowanych tematycznie.

Android Patterns

Android Interaction Design Patterns – opisuje wzorce projektowe w formie procesów, nie tylko poszczególnych ekranów, omawia plusy i minusy i pokazuje przykłady. Dużo świetnej pracy stoi za tym projektem!

iOSpirations – galeria projektów na iPhone i iPad, podzielona na projekty aplikacji, gier i stron. Poza tym podstawowym podziałem trudno jest jednak znaleźć interfejs o konkretnej tematyce.

Mobile Awsomeness – prezentuje projekty mobilnych stron internetowych, nie aplikacji. Warto porównać, jak różnią się od siebie projekty webowe i mobilne.

Well Placed Pixels – to galeria pięknych interfejsów aplikacji mobilnych. Wiele z nich to także niezwykle kreatywne rozwiązania dla, wydawałoby się, zwyczajnych funkcjonalności.

TapFancy – podobnie jak Well Placed Pixels, jest to blog prezentujący atrakcyjne interfejsy.

Dobre praktyki, czyli nauka na czyichś błędach

Designing iPhone User Experience
W zdobywaniu wiedzy pomocne będą artykuły opisujące dobre praktyki. Przed rozpoczęciem projektowania, warto też poczytać trochę recenzji i ocen użyteczności innych aplikacji. Zanim zaczniemy się uczyć na swoich błędach, można się pouczyć na czyichś ;)

Mobile Web Design: Tips and Best Practices – Cameron Chapman opisuje kilka podstawowych zasad projektowania stron w wersji mobile (takich jak możliwość przejścia z trybu mobile do tradycyjnego), ilustrując je licznymi przykładami.

iPhone & iPad UX reviews – Suzanne Ginsburg jest autorką książki o projektowaniu na iPhona i prowadzi także bloga, w którym pojawiają się prezentacje lub artykuły omawiające interfejsy różnych aplikacji, np. porównanie Foursquare z Gowalla.

Critboard – Alex Komarov analizuje użyteczność aplikacji na iPhone – nie przebiera w słowach, ale jego uwagi są często celne.

Proces projektowy, czyli ile w tym nowego, a ile starego

Wytyczne producentów i dobre praktyki to jednak tylko ogólne wskazówki. Sam proces projektowy, podobnie jak w przypadku projektowania serwisów internetowych czy aplikacji, wymaga złożonej pracy koncepcyjnej i wiele skorzysta na badaniach z użytkownikami.

Rachel Hinman z Adaptive Path pokazuje w swojej prezentacji, jak web designerzy mogą zastosować  swoją wiedzę i doświadczenie w nowym, mobilnym kontekście.

Także Nick Fink pokazuje, że proces projektowy dla mobile bazuje na tych samych ideach i zasadach, jak przy projektowaniu dla internetu. Sama prezentacja uzupełniona jest o audio, więc warto posłuchać.

Szkicowanie i makietowanie, czyli zabieramy się do pracy

Podobnie jak przy projektach webowych (o czym pisała już Basia), projektowanie interfejsu warto zacząć od szkicowania. Pomocne będą w tym narzędzia:

UI Stencils – oferuje zarówno szkicowniki jak i szablony, które ułatwiają narysowanie typowych kształtów (nawet jeśli nie masz zdolności rysunkowych). Dla mnie osobiście najlepszym pomysłem jest iPhone Sticky Pad, który pozwala naklejać kartki na różnych powierzchniach i tym samym łączyć zalety szkiców papierowych ze szkicami na tablicy.

UI Stencils

UI Stencils

iPhone Sticky Pad

iPhone Sticky Pad

UXpin – jeśli zależy Ci na elastyczności szkicowania, to może Cię zainteresować UXpin w wersji mobile, czyli paper prototyping po redesignie.

UXPin mobile

UXPin mobile

Formatki stron można też wydrukować sobie samemu, korzystając z dostępnych wzorców, np. tego opracowanego przez Full of Design.

formatka do szkiców - Full of sketch

formatka do szkiców - Full of sketch

Więcej tego typu narzędzi można znaleźć np. w zestawieniu:
Jones, H. (2010) 11 UI kits for iPhone and iPad development WebDesignerLedger

Do projektowania makiet i prototypów przydadzą się biblioteki, choćby te do Axure’a, o których kiedyś pisałam. W sieci znajdziemy też liczne zestawienia takich pomocy dla Omnigraffle, Fireworks i Photoshop, np. iPhone and iPad Development GUI Kits, Stencils and Icons.

Zaopatrzeni w takie narzędzia i wiedzę możemy już przystąpić do pracy, czyli projektować :)

Autorka

Iga Mościchowska

www: http://witflow.com
Managing Partner i UX Director w firmie WitFlow. Z zamiłowania projektant interakcji i badacz użyteczności, z wykształcenia socjolog. Szkoli, wykłada na AGH, występuje na konferencjach branżowych. Pracowała m.in. dla marek: Amica, Agora, eBay Classifieds, Egmont, Maspex Wadowice, MSZ, Polskapresse, PWN.pl, Vattenfall, a także dla licznych startupów. Czytaj więcej
Tagi: , , , , , , ,