Kudy naskočit do designování pro

Android
Vladislav Skoumal
skoumal@skoumal.net

www.twitter.com/gingo33
www.gplus.to/ging...
Cíle designu …
“Most people make the mistake of thinking design is what it looks
like. That’s not what we think design is....
Agenda
• Základní stavební kameny

• Začínáme kreslit pro Android …
• Jak (si) začít s Holo
• Následováníhodné příklady

•...
Základní stavební kameny
Ikonka aplikace
• Přečti si guideline!

• Udělej ji podle guideline!
• Lépe vypadají otevřené tvary
ActionBar
• Hodí se takřka do každé aplikace

• Up button
• Název obrazovky
• Actions

• Overflow
• Selection
Tabs
• Pokud máte do tří top-level pohledů

• Texty i obrázky
• Pager Sliding TabStrip
• Scrolling tabs
Navigation Drawer
• Aka Sliding menu

• Chytrá náhrada dashboardu
• Pokud máte hodně top-level obrazovek
• Otevření klikem...
Widgets
• Rychlá prezentace důležitých dat

• Možnost změny velikosti uživatelem
• Mezi uživateli velmi oblíbené
• Omezená...
Nine-patch
• „Roztahovací tlačítka s kulatými rohy“

• Roztahující se oblast
• Prostor pro obsah
• Optical bounds 4.3+
Začínáme kreslit pro Android …
Pár rad do života
• Nespoléhej na to, co znáš z webu, iOS, desktopu

• I v mantinelech Android Design guidelines můžeš upl...
Fragmentace
• Displeje
– Velikost
– Orientace
– Density

• Verze systému
Fragmentace - Displeje
• Fyzická velikost

• Density
Fragmentace – Density independent
• Density independent pixel = 1dip = 1dp = 1px při 160 DPI ≅ 0.2 mm
Název

DPI

px/dip

...
Fragmentace – Density independent

mdpi

hdpi

xhdpi

xxhdpi
Fragmentace – Density independent
• Telefon – 320 x 480 DP
• 7“ tablet – kratší strana > 600 DP
• 10“ tablet – kratší stra...
Fragmentace – Density independent
Designovat budeme v xxhdpi:
• Telefon – 960 x 1440 px
• 7“ tablet – 1800 x 2700 px
• 10“...
Fragmentace – Orientace displeje
• Nikdy nezamykejte

orientaci displeje
• HW klávesnice
• Landscape layout
Fragmentace - Verze systému
Prototypujte!
• Papírový prototyp, wireframes, …

• Postavíte si aplikaci nanečisto
• Rychlé vytvoření i zanášení změn
• Z...
Testováno na lidech …
• Připravíme scénáře

• Pozveme testery
• Sledujeme s čím v aplikaci zápasí
• Odstraníme největší pr...
Jak (si) začít s Holo
Oficiální zdroje
• Android Design guidelines
– Styl
– Základní stavební kameny
– Stencils

• Android Design in Action
– Yo...
Android Asset Studio
• http://j.mp/androidassetstudio
• Launcher icons

• Device frame generator

• Action bar and tab ico...
Komunitní zdroje
• Cheet sheet for graphic designers - http://bit.ly/android-cheats

• Android Niceties - http://androidni...
Následováníhodné příklady
Výběr Android Design Teamu
• Do detailu propracované UI

• Pojďme se na jednu podívat …

http://bit.ly/beautiful-design-ap...
Timer
• Fokus na jednu funkci

• Už není co odebrat
• Střídmý a přímý design
• Pouhé dvě barvy

• ActionBar & Tabs
• Podpo...
Pocket
• Články co si chci přečíst později

• Mohl by používat Navigation Drawer 
• Nepoužívá QuickReturn v listu 
• Pou...
Pocket – stačí drobná změna …
• Jediná obrazovka bez Up button

• Místo něj Archive button
• Zmatení nových uživatelů
• Po...
Todoist
• Dodržuje Design guidelines

• Hezké prázdné pohledy
• Skrývá málo používané funkce
• Navigation Drawer
Timely
• Typografie

• Gesta
• Inovativní design při dodržení guidelines
• Stala se hitem letošního léta!
Tasks
• Starší kousek od autorů Timely

• Jedna z prvních úspěšných
implementací Holo designu
• Od začátku telefonní a tab...
Pubtran
• Dnes už designově zastaralá

• Stále ale ukázkové UX
• Geniální našeptávač
• Ověnčena nejedním oceněním
Tudy ne …
Start aplikace
• Vyvarujte se registrace a přihlášení

• Zobrazte hned nejpravděpodobnější akci
• Pamatujte si stav z posl...
Trocha volební agitace :)
• Jediná obrazovka …

• … ale na splashscreen se nezapomnělo!
• Context menu
• Neroztahuje se na...
Koopírujeme iOS
• 1:1 kopie iOS aplikace

• Splash, context menu, ...
• Taby na dně obrazovky
• Šipičky v seznamech

• Zpě...
Děkuji za pozornost!
Vladislav Skoumal

skoumal@skoumal.net
www.twitter.com/gingo33
www.gplus.to/gingo

Mnohé obrázky v té...
Upcoming SlideShare
Loading in …5
×

Kudy naskočit do designování pro Android - GDG Brno

311 views
202 views

Published on

Skoro všechno co by měl začínající Android designer vědět, včetně technologických úskalí se kterými je potřeba se vypořádat a že to není zase taková dřina. Povíme si o fragmentaci, užitečných zdrojích nástrojů a informací. Ukážu vám cesty které nikam nevedou i ty které vedly do Androidí síně slávy.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
311
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Kudy naskočit do designování pro Android - GDG Brno

  1. 1. Kudy naskočit do designování pro Android Vladislav Skoumal skoumal@skoumal.net www.twitter.com/gingo33 www.gplus.to/gingo
  2. 2. Cíle designu … “Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” – Steve Jobs
  3. 3. Agenda • Základní stavební kameny • Začínáme kreslit pro Android … • Jak (si) začít s Holo • Následováníhodné příklady • Tudy ne!
  4. 4. Základní stavební kameny
  5. 5. Ikonka aplikace • Přečti si guideline! • Udělej ji podle guideline! • Lépe vypadají otevřené tvary
  6. 6. ActionBar • Hodí se takřka do každé aplikace • Up button • Název obrazovky • Actions • Overflow • Selection
  7. 7. Tabs • Pokud máte do tří top-level pohledů • Texty i obrázky • Pager Sliding TabStrip • Scrolling tabs
  8. 8. Navigation Drawer • Aka Sliding menu • Chytrá náhrada dashboardu • Pokud máte hodně top-level obrazovek • Otevření klikem na ikonku, nebo edge swipe
  9. 9. Widgets • Rychlá prezentace důležitých dat • Možnost změny velikosti uživatelem • Mezi uživateli velmi oblíbené • Omezená gesta – touch a vertical swipe
  10. 10. Nine-patch • „Roztahovací tlačítka s kulatými rohy“ • Roztahující se oblast • Prostor pro obsah • Optical bounds 4.3+
  11. 11. Začínáme kreslit pro Android …
  12. 12. Pár rad do života • Nespoléhej na to, co znáš z webu, iOS, desktopu • I v mantinelech Android Design guidelines můžeš uplatnit svoji kreativitu • Věř, že fragmentace ti přinese více uživatelů, než starostí • Nekopíruj iOS rozhraní na Android!
  13. 13. Fragmentace • Displeje – Velikost – Orientace – Density • Verze systému
  14. 14. Fragmentace - Displeje • Fyzická velikost • Density
  15. 15. Fragmentace – Density independent • Density independent pixel = 1dip = 1dp = 1px při 160 DPI ≅ 0.2 mm Název DPI px/dip ldpi 120 0.75 Wildfire mdpi 160 1 G1, non-retina iPhone hdpi 240 1.5 Desire xhdpi 320 2 Samsung Galaxy S3, retina iPhone, print quality xxhdpi 480 3 HTC One xxxhdpi 640 4 ---
  16. 16. Fragmentace – Density independent mdpi hdpi xhdpi xxhdpi
  17. 17. Fragmentace – Density independent • Telefon – 320 x 480 DP • 7“ tablet – kratší strana > 600 DP • 10“ tablet – kratší strana > 720 DP
  18. 18. Fragmentace – Density independent Designovat budeme v xxhdpi: • Telefon – 960 x 1440 px • 7“ tablet – 1800 x 2700 px • 10“ tablet – 2160 x 3240 px
  19. 19. Fragmentace – Orientace displeje • Nikdy nezamykejte orientaci displeje • HW klávesnice • Landscape layout
  20. 20. Fragmentace - Verze systému
  21. 21. Prototypujte! • Papírový prototyp, wireframes, … • Postavíte si aplikaci nanečisto • Rychlé vytvoření i zanášení změn • Zákazník a uživatelé hned vidí výsledky • Možno testovat na uživatelích • Balsamiq, Axure, Fluid UI, …
  22. 22. Testováno na lidech … • Připravíme scénáře • Pozveme testery • Sledujeme s čím v aplikaci zápasí • Odstraníme největší problémy • Testovat lze náčrtky, wireframes, grafiku, finální aplikaci
  23. 23. Jak (si) začít s Holo
  24. 24. Oficiální zdroje • Android Design guidelines – Styl – Základní stavební kameny – Stencils • Android Design in Action – Youtube kanál – Různorodá témata
  25. 25. Android Asset Studio • http://j.mp/androidassetstudio • Launcher icons • Device frame generator • Action bar and tab icons • Simple nine-patch generator • Notification icons • Android Action Bar Style Generator • Navigation drawer indicator • Android Holo Colors Generator • Generic icons
  26. 26. Komunitní zdroje • Cheet sheet for graphic designers - http://bit.ly/android-cheats • Android Niceties - http://androidniceties.tumblr.com/ • Holo Everywhere - http://www.holoeverywhere.com/ • Android UI patterns - http://www.androiduipatterns.com/ • Android UI Design Kit 4.3 - http://bit.ly/android-design-kit
  27. 27. Následováníhodné příklady
  28. 28. Výběr Android Design Teamu • Do detailu propracované UI • Pojďme se na jednu podívat … http://bit.ly/beautiful-design-apps
  29. 29. Timer • Fokus na jednu funkci • Už není co odebrat • Střídmý a přímý design • Pouhé dvě barvy • ActionBar & Tabs • Podpora landscape téměř zadarmo
  30. 30. Pocket • Články co si chci přečíst později • Mohl by používat Navigation Drawer  • Nepoužívá QuickReturn v listu  • Používá splash 
  31. 31. Pocket – stačí drobná změna … • Jediná obrazovka bez Up button • Místo něj Archive button • Zmatení nových uživatelů • Po opravě narostla o 23% pravděpodobnost, že si aplikaci v telefonu nechají Původně publikováno zde: http://getpocket.com/blog/2013/10/tiny-impacts-the-case-of-the-accidental-archive/
  32. 32. Todoist • Dodržuje Design guidelines • Hezké prázdné pohledy • Skrývá málo používané funkce • Navigation Drawer
  33. 33. Timely • Typografie • Gesta • Inovativní design při dodržení guidelines • Stala se hitem letošního léta!
  34. 34. Tasks • Starší kousek od autorů Timely • Jedna z prvních úspěšných implementací Holo designu • Od začátku telefonní a tablet verze • Widget • Tmavé a světlé téma
  35. 35. Pubtran • Dnes už designově zastaralá • Stále ale ukázkové UX • Geniální našeptávač • Ověnčena nejedním oceněním
  36. 36. Tudy ne …
  37. 37. Start aplikace • Vyvarujte se registrace a přihlášení • Zobrazte hned nejpravděpodobnější akci • Pamatujte si stav z poslední návštěvy • Vyvarujte se splashscreenů • Dashboardy se už dneska nenosí
  38. 38. Trocha volební agitace :) • Jediná obrazovka … • … ale na splashscreen se nezapomnělo! • Context menu • Neroztahuje se na celou šířku displaye • Nepodporuje landscape mód
  39. 39. Koopírujeme iOS • 1:1 kopie iOS aplikace • Splash, context menu, ... • Taby na dně obrazovky • Šipičky v seznamech • Zpět při navigaci v tabech!!! • Pohyblivá mapa ve scrollovatelné oblasti
  40. 40. Děkuji za pozornost! Vladislav Skoumal skoumal@skoumal.net www.twitter.com/gingo33 www.gplus.to/gingo Mnohé obrázky v této prezentaci byly převzaty z http://developer.android.com/ a jsou licencovány pod Creative Commons Attribution 2.5

×