UI alapok
Ebben a cikkben a Windows Phone 7 dizájn alapelveivel kapcsolatos tudnivalókat próbálom meg összefoglalni, és ha minden jól megy, a végére megértitek, hogy miért vannak ki -és belógó elemek a képernyőn és miért olyan egyszínű a rendszer és azt is, hogy miért nem.
A Windows Phone 7 felülete a Microsoft legújabb dizájnnyelvével, a Metro-val készült. Azért Metro a neve, mert gyors és letisztult és mert a tömegközlekedésben már jól ismert piktogrammokat és egyszerű, lényegretörő, intuitív elemeket és felületeket használ.
Az eddigi felületek szinte egytől egyig az úgynevezett ikonografikus családba sorolhatóak. Ezekre az a jellemző, hogy minél élethűbben próbálják elhitetni magukról, hogy valami olyasmik, amik valójában nem.
Szálcsiszolt alumínium textúra, bőr textúra, tükröződő üveg – mert nem elég, hogy a telefon kijelzője tükröződik – 3D hatású gombok ÉS a valós életből vett tárgyak minél élethűbb leutánozása a jellemző. Ezzel ellentétben a Windows Phone 7-nél azt mondták a designerek, hogy nem a csili-villi körítés a lényeg, hanem a tartalom.
Mi lenne ha szinte csak a tartalom és annak ízléses, informatív elrendezése és megjelenése alkotná a felületet? Mi lenne ha a telefon nem próbálna olyasminek látszódni ami valójában nem?
Szóval az az alapkoncepció hogy a tartalom a felület és hogy ez a tartalom kényelmesen és intuitívan kell hogy elérhető legyen. Ebben egyrészről a Windos Phone 7-ben lévő Hub rendszer siet a segítségünkre, mely a különböző típusú információkat és funkcionalitást gyűjti egy helyre.
Pictures Hub a képek kezelésére és a képszerkesztő / képmegosztó alkalmazások elérhetővé tételére, Music and Video Hub zenék és videók kezelésére és különböző 3rd party videónéző (pl YouTube) vagy zenehallgató/kereső/felismerő programok (pl Shazam) elérésére, Games Hub az Xbox Live -os dolgaink és játékaink elérésére, stb.
A másik segítség a rendszer navigációs hierarchiája. Az alkalmazások oldalakból épülnek fel amiken keresztül a böngészőkhöz hasonló módon tudunk oda-vissza navigálni, így a felhasználónak csak pár Back-et kell nyomnia (vagy a Back-et hosszan alkalmazásváltáshoz), hogy pár oldallal (vagy alkalmazással) visszalépjen. Itt azonban figyelni kell, hogy az appunkban ne törjük meg ezt a navigációt, ne tereljük a felhasználót navigációs csapdába, hurokba vagy fantom oldalakra.
Ugyan csak részben tartozik ide, de lehetőség van a rendszer jópár részét meghívni kódból, mint például a képnézegető, email, névjegykártya, marketplace, és még sokan mások. Ugyan van amit meg tudnánk írni mi is, van amit nem, de amit nem muszáj azt ne akarjuk megírni, használjuk a beépített OS funkciókat bátran.
A következő lépcsőfok adataink minél hatékonyabb prezentálására, az oldalelrendezés. Érdemes priorizálni és csak a fontos, releváns, egybetartozó információkat egy oldalra rakni, egyrészről helyspórolás céljából, másrészről azért, hogy a felhasználó ne egy olyan adathalmazt kapjon a képernyőjén amin egy szuperszámítógép is csak napok alatt tudna kiigazodni. Itt mindenképpen érdemes a telefon orientációjával is számolni.
Mivel az ember balról jobbra olvas, a legfontosabb dimenzió a képernyő szélessége. Nagyobb rendelkezésre álló szélesség esetén több információt helyezhetünk el egy sorban.
Miután megfelelően elrendeztük az adatokat és kialakítottuk alkalmazásunk hierarchiáját, jöhet a dizájnolás.
A Windows Phone-t használhatjuk sötét és világos témával és választhatunk egy jópár színséma közül. Azért, hogy appunknál szinte mindenféle tervezés nélkül is könnyedén alkalmazhassuk a Metro stílust, kapunk egy rakás vezérlőt, melyek egy része a rendszer részét képezi és nem vagy csak kis mértékben módosítható a kinézetük, másik részük viszont az SDK része és használhatjuk őket úgy is ahogy kapjuk, de 100% -ban át is alakíthatjuk. Amennyiben saját vezérlő tervezésére adnánk a fejünket érdemes megfontolni egy pár alapszabályt, és észben tartani, hogy érintőképernyőre tervezünk.
Miután megvannak az alapelvek, emeljük a hangulatot a következő szintre.
Először is ejtsünk pár szót a lapkákról. Az alkalmazásunknak van egy ikonja, melyet a felhasználó kirakhat a telefonjának a kezdőoldalára. Mint mondtam, a telefonon jópárféle színséma érhető el. piros, sárga, zöld, kék, lila, rózsaszín, stb. Akkor most rakjuk össze ezt a kettőt és csináljunk olyan ikont amiben eljátszunk az alfa csatornával, és kápráztassuk el a felhasználót a színek ezen kreatív játékával.
Menjünk egy kicsit még tovább. A lapkák becsületes neve az, hogy Live Tile, azaz élő lapka. Miért élő? Azért mert lehetőségünk van a lapkák tartalmának változtatására, ezáltal lehetőségünk van a felhasználót anélkül értesíteni bizonyos dolgokról, hogy belépne az alkalmazásunkba. Ahelyett, hogy csak egy egyszerű szöveget írnánk ki, vagy egy piros pöttyöt raknánk a lapka sarkába, szintén eljátszhatunk a színekkel, képekkel és csinálhatunk egyszerre informatív, kreatív, ízléses és egyedi értesítéseket.
Ugorjunk vissza egy kicsikét gondolatban az adatok elrendezéséhez. Mi van ha nem akarunk mindent külön oldalra pakolni? Mi van ha az információhalmazunk bár egybefüggő, de túl nagy ahhoz, hogy egyetlen képernyőbe beleférjen?
A különféle infók és funkciók szeparálásánál a Pivot vezérlő siet segítségünkre, mely leginkább az asztali környezetben megszokott tab vezérlőhöz hasonlítható. Csak ez szebb és a telefon méretbeli korlátozásaira tekintettel van. A hatalmas, egy oldalra ki nem férő, ám egybefüggő infó és funkció halmaz elrendezésénél pedig a Panorama áll szolgálatunkra, mellyel lehetőségünk van vízszintesen kiterjeszteni a képernyő szélességét és a dolgokat úgy szétpakolni több képernyőre, hogy a felhasználóval mégis egyértelműen éreztetjük, hogy az ott egybe tartozik.
A cikk még nem ért véget, kérlek, lapozz!
