Your SlideShare is downloading. ×
0
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Android design guideline - App! 2012 - Kollin Zoltán

752

Published on

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

No Downloads
Views
Total Views
752
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • Nem mindig könnyű Androidra tervezni, ha nem vagy magad is aktív Android felhasználó. \nIdén azonban fontos mérföldkőhöz érkeztünk, a Google végre részletesen ledokumentálta, hogy hogyan képzeli el az Android alkalmazások felületi és működési logikáját.\n\n\n
  • Ez a fordulópont a 4.0-ás OS verzióval esik egybe, ami egyébként több jelentős változást hozott a korábbi koncepcióhoz képest.\nSok mindent újragondoltak. \n
  • Korábban az Apple és a Google is úgy gondolta, hogy a telefont és tabletet külön kell kezelni, külön app kell rá, mivel kontextusban használják őket.\nA gyártók azonban “túl innovatívak” voltak, és hamar elmosódtak a határok a telefonok és a tabletek között. Sok eszközről már nehéz megmondani, hogy mobil vagy tablet. Ezt a Google is felismerte, és úgy döntött, egységes szemléletet és megoldásokat hoz minden androidos eszközre.\n
  • És amellett, hogy megalkották a 4.0-ás Androidot, részletesen ledokumentálták, hogy hogy képzelik az egyes alkotóelemek működését. A design guideline lényegében ez az online elérhető dokumentum, amit folyamatosan bővítenek.\nhttp://developer.android.com/design/index.html\n
  • És ami igazán hasznos a tervezőknek, az nem is az, hogy egy gomb hogy nézzen ki vagy működjön, hanem hogy leírják azt is, hogy miért. \nNem egy öncélú redesignról van szó, a guideline mögött iszonyú sok felhasználói kutatás és tesztelés eredménye van.\n
  • A legfontosabb tudnivalók és változások, ha Android platformra kezdesz tervezni.\nA képernyő alatti hardveres gombokat korábban sok kritika érte: nem működtek egységesen, a gyártóktól függött sok minden.\nEzt egységesítették, szoftveres gombok kerültek fel a felületre: Back / Home / Recent. Ezek működése specifikálva és egységesítve lett.\n
  • Egységesítették a fejlécet is (Action bar), definiálták, hogy minek hol a helye. Ide került a menügomb és a keresés. Felkerült az Up gomb, ez azonban nem keverendő össze az iOS-féle Vissza gombbal, az Up az alkalmazás hierarchiájában megy feljebb egy szinttel.\n
  • A tabok helye továbbra is fent van, a működését és strukturáját kicsit konkretizálták.\nEgy kézzel használva problémás lehet, hogy fent van és nem lehet hüvelykujjal elérni, pedig ez a gyakran használt menüpontok helye.\n\n
  • Erre megoldásként azt találták ki, hogy nem csak rábökve, hanem az egész képernyőt swipe-olva is lehessen váltani a tabok között.\nA guideline egyébként is mindenhol a gesztusokat preferálja, ami mögött az a filozófia van, hogy sokkal élvezetesebb, sokkal intuitívabb a usernek, ha swipe-ol és azonnal látja annak eredményét, mintha rábökne egy elemre, aztán várnia kellene, hogy mi történik.\n
  • Layout kapcsán talán legérdekesebb, hogy ugyanaz a felület hogy jelenjen meg telefonon és tableten, ill. álló és fekvő képernyőn.\nA technológia egyrészt lehetőséget ad arra, hogy a mobilon külön képernyőre kerülő tartalmak tableten ugyanazon a képernyőn látszódjanak (pl. lista és mellette egy elem részletes adatlapja).\nAz elfordításra pedig több javaslatot is tartalmaz a guideline, pl. összenyomhatjuk és nyújthatjuk a tartalmat a rendelkezésre álló hely függvényében, elrejthetünk bizonyos elemeket, ha nincs rá hely, de teljesen át is strukturálhatjuk a tartalmat elforgatáskor.\n\n
  • Van az a szó, ami leggyakrabban felmerül, ha Androidra tervezünk: a fragmentáció.\n
  • Ez az OpenSignalMaps infografikája: ők a saját appjukat használó userek készülékeit vizsgálták meg, és csaknem 4 ezer különböző eszközt azonosítottak.\n(A Samsung Galaxy S II a legnépszerűbb.)\nEz felfoghatatlanul sok, viszont az a szerencse, hogy a képernyőfelbontásokat megnézve már nem volt ekkora szórás, a 10-12 legnépszerűbb felbontással már az eszközök túlnyomó részét le lehet elvileg kezelni.\n
  • A kijelzők kapcsán érdekes, hogy a gyártók itt is belementek egy innovációs háborúba. Nem csak a felbontást kezdték növelni, hanem a pixelsűrűséget is. Így sokszor a felbontás önmagában már nem elég információ a tervezőnek (ugyanaz a felbontás jelölhet egy 4 hüvelykes telefont és egy 7 hüvelykes tabletet is). \n
  • A guideline nem pixelben gondolkodik, hanem DP-ben, ami lényegében egy pixelnek felel meg egy közepes (160dpi) kijelzőn. A DP egy könnyen átváltható mértékegység. Természetesen a grafikai elemeket ugyanúgy el kell készíteni több méretben is, hiszen egy ugyanakkora gomb nagyobb kijelzőn több pixelből áll, viszont ezek kategóriákba vannak rendezve, és az OS automatikusan eldönti, melyiket tegye ki a képernyőre.\n
  • És bár az előbb már pixelpontosságról volt szó, a guideline nem egy arculati kézikönyv, ami megmondja, mi hogy nézzen ki. \n(Bár konkrét PSD-ket is tartalmaz amiket akár egy az egyben fel is használhatunk.)\nA guideline gyakorlatilag azt foglalja össze, hogy az OS megtervezésekor a Google tervezői mit és miért terveztek úgy, ahogy. Ezt nem kötelező alkalmazni, inkább csak segítséget nyújt a designereknek. Végső célja persze az, hogy a platformon egységes logikát és élményt nyújtó appok legyenek.\n
  • És bár tiltások sincsenek benne, azért tesz javaslatot arra is, hogy mit NE tegyünk.\n
  • A legfontosabb tiltás benne az, hogy ne keverjük bele az appunkba más platformok, iOS vagy Windows Phone stílusjegyeit.\n\n
  • A gombok, interaktív elemek és ikonok nézzenek úgy ki, ahogy az Anrdoid platformnál definálva lettek.\nÉs persze ne vegyünk át gondolkodás nélkül iOS megoldásokat: ne legyen back gomb a fejlécben, ne legyen jobbra nyíl a gombok végén, és semmiképp ne alul legyenek a tabok.\n
  • Hiába van minden szépen leírva tervezési szempontból, az a jó, ha mindenre látunk egy csomó jó példát, ha látjuk a javaslatok gyakorlati alkalmazását.\nSajnos egyelőre kevés olyan appot látni, ami maradéktalanul megfelel a guideline-oknak.\n
  • Jó példa az Instagram, ami gyakorlatilag az összes “ne csináld” javaslatot megszegi, lényegében az iPhone app letükrözése Androidra.\n
  • Az Instagramra egyébként több designer is tervezett már ideális layoutot hobbiból, amiből jól látszik, hogy a guideline-ok simán alkalmazhatók lennének erre az appra is. Ehhez persze olyan designer kell, aki amúgy otthonosan mozog a platformban. \n\n
  • A guideline rengeteg segítséget nyújt, de ha valami tényleg kiemelkedőt szeretnénk alkotni, nagyon jól kell ismerni a platformot.\nEzért - ha mi nem vagyunk aktív Android userek - érdemes már tervezés közben megmutatni az irányt androidos felhasználóknak, és konzultálni menet közben a fejlesztővel is. \nÉs semmiképp ne adjunk ki olyan terveket a kezünkből, ami nem lett tesztelve hús-vér felhasználókkal.\n
  • \n
  • Transcript

    • 1. Android design guideline Kollin Zoltán App! 2012
    • 2. Hello!
    • 3. A fordulópont: Android 4.0
    • 4. Elmosódtak a határoksung Motorola Google Nexus HTC Desire Samsung LG Optimus Samsung Samsung LG Optimus Google Y Pro Admiral One HD Galaxy Nexus 5.0” Galaxy Note Galaxy Tab 1 Pad 106” 3.1” 3.7” 4.3” 4.65” 5.3” 7” 8”
    • 5. http://developer.android.com/design
    • 6. Mit? Hogyan? Miért úgy?
    • 7. Navigáció Navigation bar
    • 8. Navigáció Action bar
    • 9. Navigáció Tabok
    • 10. Navigáció Tabok
    • 11. Layout kezelés
    • 12. Az F-betűs szó...
    • 13. Fragmentáció 3997 eszköz, 599 márka Forrás: OpenSignal
    • 14. px vs mm vs dpi
    • 15. A DP az új pixel.
    • 16. A guideline nemarculati kézikönyv.
    • 17. De megmondja, mit nem illik.
    • 18. Összekeverni a platformokat
    • 19. Összekeverni a platformokat
    • 20. Betartják?
    • 21. Nemmindenki.
    • 22. Pedig jó lenne.
    • 23. Mutasd meg.Kérj tanácsot.Teszteld le.
    • 24. Köszönöm a figyelmet! Kollin Zoltán @kollinz

    ×