Embed Size (px)
Citation preview
P R O C E S P R O J E K T O W A N I A I N T E R F E J S Ó W A P L I K A C J I N A P L AT F O R M I E I O S W P I G UŁC E
O D P O M Y SŁU D O W D R OŻE N I A
Maciej KołekiOS Developer
• Kogo potrzebujemy do stworzenia naszej aplikacji?
• Etapy tworzenia interfejsu
• Na co zwracać uwagę przy tworzeniu interfejsów na platformę iOS?
K R Ó T K A A G E N D A
K O G O P O T R Z E B U J E M Y D O S T W O R Z E N I A A P L I K A C J I ?
K O G O P O T R Z E B U J E M Y D O S T W O R Z E N I A A P L I K A C J I ?
Pomysłodawca
K O G O P O T R Z E B U J E M Y D O S T W O R Z E N I A A P L I K A C J I ?
Pomysłodawca Grafik
K O G O P O T R Z E B U J E M Y D O S T W O R Z E N I A A P L I K A C J I ?
Pomysłodawca Grafik Programista
K O G O P O T R Z E B U J E M Y D O S T W O R Z E N I A A P L I K A C J I ?
Pomysłodawca Grafik Programista
Programista API Tester Konsultant
E TA P P O M Y S ŁO D AW C Y
W PA D L IŚM Y N A P O M Y S Ł S T W O R Z E N I A U N I K AT O W E J A P L I K A C J I M O B I L N E J …
W PA D L IŚM Y N A P O M Y S Ł S T W O R Z E N I A U N I K AT O W E J A P L I K A C J I M O B I L N E J …
S N A P P Y
O D C Z E G O Z A C ZĄĆ ?
O D C Z E G O Z A C ZĄĆ ?
C O D A L E J ?
C O D A L E J ?
Z A P O M O CĄ A P L I K A C J I P O P
S P R AW B Y T W O J E B A Z G R O ŁY OŻY ŁY
Z A P O M O CĄ A P L I K A C J I P O P
S P R AW B Y T W O J E B A Z G R O ŁY OŻY ŁY
Z A P O M O CĄ A P L I K A C J I P O P
S P R AW B Y T W O J E B A Z G R O ŁY OŻY ŁY
N I E U M I E M RY S O WAĆ , C O T E R A Z ?
R A T U N E K D L A O S Ó B U Z D O L N I O N Y C H
S P R AW B Y T W O J E K O M P U T E R O W E B A Z G R O ŁY OŻY ŁY
R A T U N E K D L A O S Ó B U Z D O L N I O N Y C H
S P R AW B Y T W O J E K O M P U T E R O W E B A Z G R O ŁY OŻY ŁY
R A T U N E K D L A O S Ó B U Z D O L N I O N Y C H
S P R AW B Y T W O J E K O M P U T E R O W E B A Z G R O ŁY OŻY ŁY
R A T U N E K D L A O S Ó B U Z D O L N I O N Y C H
S P R AW B Y T W O J E K O M P U T E R O W E B A Z G R O ŁY OŻY ŁY
E TA P G R A F I K A
P H O T O S H O P V S S K E T C H
http://www.webdesignerdepot.com/2015/03/infographic-sketch-vs-photoshop/
P L E A S E , J U S T U S E S K E T C H .
To jedyne narzędzie które coś kosztuje: 99$ po 30 dniach triala
G R A F I K N I E P ŁA K A Ł J A K P R O J E K T O W A Ł
J A K P R A C O W AĆ Z K L I E N T E M N A D P R O J E K TA M I G R A F I C Z N Y M I ?
R O Z W IĄZ A N I E : I N V I S I O N A P P
R O Z W IĄZ A N I E : I N V I S I O N A P P
R O Z W IĄZ A N I E : I N V I S I O N A P P
R O Z W IĄZ A N I E : I N V I S I O N A P P
T E S T O W A N I E M A K I E T Z UŻY C I E M I N V I S I O N A P P
T E S T O W A N I E M A K I E T Z UŻY C I E M I N V I S I O N A P P
P R O J E K T G O T O W Y.
C O D A L E J ?
P R O B L E M ?
1 p x≠1 p t
E k s p o r t b e z p o ś r e d n i o z e S k e t c h a
E TA P P R O G R A M I S T Y
J A K P R O G R A M I S TA P R Z Y G O T O W U J E I N T E R F E J S A P L I K A C J I ?
Tabele i Kolekcje
Nawigacja
C O P R O G R A M I S TA M U S I W I E D Z I EĆ Z A N I M U S IĄD Z I E D O P R A C Y ?
• Na jakie urządzenia piszemy aplikacje?
• Jaki jest główny system operacyjny który będziemy wspierać w aplikacji?
• Jak wygląda podstawowy flow nawigacji w aplikacji?
DLA CAŁEGO PROJEKTU:
C O P R O G R A M I S TA M U S I W I E D Z I EĆ Z A N I M U S IĄD Z I E D O P R A C Y ?
• Która części interfejsu będą dynamiczne, a które statyczne?
• Jak wygląda nawigacja w tym ekranie?
• Skąd użytkownik może wejść do tego ekranu?
• Jak mają zachowywać się wszystkie elementy tego interfejsu? (przyciski, zmiany stanów, alerty)
• Jak aplikacja ma wyświetlać się na mniejszych i większych ekranach?
• Jakie są odległości i wymiary wszystkich elementów ekranu?
• Czy mamy już wszystkie grafiki w odpowiednich rozmiarach (x1,x2,x3)?
PER EKRAN INTERFEJSU:
P O C O T Y L E P Y TAŃ ?
K AŻD Y E L E M E N T I N T E R F E J S U M A S W O J E Z A L EŻN OŚC I :
O D L E G ŁOŚC I R E L AT Y W N E O D I N N Y C H E L E M E N T Ó W I N T E R F E J S U
+ S W O JĄ W I E L K OŚĆ ( S TA ŁĄ L U B D Y N A M I C Z NĄ )
D L AT E G O T E N
P R O J E K T…
W X C O D E W Y G LĄD A
TA K :
Już na podglądzie możemy zobaczyć, że na mniejszym iPhone musimy zmniejszać pierwszy obrazek.
O C Z Y M PA M IĘTAĆ P R Z Y P R O J E K T O W A N I U A P L I K A C J I ?
• Wsparcie dla mniejszych urządzeń - nie każdy ma iPhone 6
• Jak elementy interfejsu reagują na interakcje? (stany przycisków)
• Klawiatura zasłania większą część ekranu
• Design ikony ma znaczenie
• Splash screen jest częścią interfejsu, nie statyczną grafiką
• Wszystkie rozmiary elementów interfejsu powinny być parzyste
P Y TA N I A ?
Maciej KołekiOS Developer @[email protected]
Jeśli tworzysz coś mobilnego i potrzebujesz porady lub szukasz programisty iOS do projektu:
Zapraszam do kontaktu!
A jeśli szukasz fotografa na dowolną okazję:
http://fb.me/maciejkolekcom
