Akár egy ügynökségnek dolgozol, akár szerződéses a megbízás, akár otthonról végzed a munkát, a cégeknek különféle okok miatt szükségük van alkalmazásokra. A létrehozott cégeknek különösen nagy gondot és figyelmet kell fordítania a meglévő ügyfeleikre és az eszközökre, amiket használnak. Az eszköz pedig akár egy új alkalmazást is jelenthet Androidra vagy iPhone-ra.

Egy ideális világban hónapokat töltünk az alkalmazások megtervezésével és elkészítésével. A valóságban azonban sok projektnél nagyon kevés az idő. Azok az alkalmazások, amelyeken az elmúlt időszakban dolgoztam, egytől egyig sokkal több időt igényeltek volna, mint amit a határidő megszabott – nemhogy akkor, ha mindezt kétfelé osztjuk...

Lehetséges, hogy készítesz egy alkalmazást, és inkább két fejlesztő csapatnak adod át a biztonság kedvéért, hogy mindkét platformon kiválóan működjön, de ebben az esetben érdemes megértened, hogy hogyan is működik a két platform, hogy megtudd mi a gyors és hatékony módja annak, hogy a két platform alkalmazkodjon egymáshoz. 

Mielőtt elkezded: válassz szemléletet

1. Tartsd közel az „ellenséged”

Természetes dolog, hogy az egyik platformot – amelyiket általában használsz – előnyben részesíted, hiszen jobban szereted és jobban is ismered. Én például mindig is iPhone párti voltam, természetesebben értem meg a hozzá kapcsolódó UI rendszert. Ha tehát mindkét platformra tervezünk alkalmazást, akkor az első dolog, hogy megismerkedünk a másik platformmal is, aminek a legjobb módja, ha beszerzünk egyet a másik termékből. Az én esetemnél maradva ez azt jelenti, hogy be kell szereznem egy Android készüléket. Érdemes ilyenkor inkább a másik eszközt használni elsődlegesnek, hogy minél hamarabb és mélyebben megismerkedjünk vele.

Kérd meg, hogy vegyenek neked egy tesztpéldányt. Ha ezen problémáznak, akkor a menedzsmenttel kell megértetni, hogy az alternatív platform használata segíteni fogja a tervezési munkádat, és jobb eredményt tudtok elérni a végső alkalmazással. A két eszköz költsége természetesen egy privát ember zsebéhez mérten drága lenne, de egy cégnek ez nem számottevő költség ahhoz képest, amit az alkalmazás hoz majd nekik. Érdemes tehát inkább befektetni a másik eszközbe is, hogy a legtökéletesebb alkalmazást tudd létrehozni.

2. Válassz „vezetőt”

Amikor egy időben tervezünk mindkét platformnak, akkor fontos elfogadnunk azt a tényt, hogy az egyik platformot előrébb kell helyeznünk a másikkal szemben, hiszen az idő limitáltsága miatt nem fektethetünk ugyanakkora hangsúlyt egyikre, mint a másikra. A döntést az alkalmazás piaca alapján kell meghoznunk, nem a saját prioritásainkat figyelembe véve. Ha a következő kérdéseket megválaszolod, akkor már egyértelmű is lesz, hogy melyiket helyezd előre: Az Androidot vagy az iOS-t használják többen a piacon? Fizetett alkalmazásról van-e szó? Ki a célközönség?

3. Tudva a szabályokat...

Olvasd el az UI irányelveket az Androidhoz és az iOS-hoz is. A múltban az Apple arról is ismert volt, hogy sokkal pontosabbak és szigorúbbak voltak az irányelvei. Ahhoz, hogy letöltsünk egy alkalmazást 2 hetet kellett várni az engedélyre (AppStore). A Play áruházban nincs ilyen jóváhagyási folyamat, ugyanakkor a gyorsabb és egyszerűbb elérési folyamat azt hozta az Androidnál, hogy a dizájn kevésbé jó minőségű. A Google keresi a megoldást, hogy változtasson a Material Design szabályozása terén.

material.png

Elég sok jó és ingyenes UI készlet van, amelyeket használhatunk egyes projekteknél – a cikk végén listázva találsz egy párat. Ezek azért fontosak, mert ha ezeket használod, akkor azt az érzést kelted a felhasználóban, hogy az alkalmazás eredeti. Az UI készletek alkalmazása pedig abban is segít, hogy könnyedén megtaláld a különbségeket a két platform között – és ebben segítek most én is. 

Tervezd meg az alkalmazásod!

Követve ezeket az egyszerű tanácsokat az alkalmazás, amit elkészítesz, teljesen idomulni fog az Androidhoz és az iOS eszközökhöz is.

1. Általános stílus

Az iOS7 megjelenése óta az Apple váltott a megjelenésben és egy hízelgőbb stílusban jelentkezett,  elhagyta a szkeumorfikus áthallásokat, textúrákat és effektusokat, amelyek az iPhone-t az elmúlt években jellemezték. Az Android, aki a kezdeti stílusban is szisztematikusabb volt, viszont teljesen a másik irányba fordult. A Google új irányelvei több finom vonatkozással jelentkeznek a való világ felé, a rétegzett „papír” megközelítéssel pedig jobban érzéklehetővé válik majd a hierarchia.

2. Valódi gombok

Az Android telefonoknak van egy „vissza” gombja, amelyet a visszalépésekhez tudunk használni.

back.png

Az iPhone-nak nincs ez, tehát szükséges volt egy módot kitalálni arra, hogy hogyan lehessen visszalépni az előző képernyőre. Ezt általában a kis „vissza” jelzéssel lehet, ami a felső bal sarokban található, de végig kell gondolni az egész „utazást” az alkalmazáson belül.

3. Globális elemek

Vannak olyan globális elemek (mint például az állapotsor és a fejléc), amelyek minden oldalon megjelennek, amelyet tervezel. Ha azt szeretnéd, hogy az alkalmazás az eredetihez kötődjön, akkor a magasságon és a stíluson nem kell ezeknél a sávoknál változtatni. A javaslat tehát, hogy definiáld egyszer minden platformon az első oldalt. A későbbiekben aztán már mindegyik helyen használhatsz helykitöltőt a mintadarabodhoz, de jelöld a fejlesztésnek, hogy ezek illeszkedjenek a felülethez.

Egy-egy platformon belül enyhe különbségek vannak a navigációs sávok között. Androidon a szöveg balra tördelt, az iOS-on középre. Az iOS-on a legtöbb cég kicserélteti a főoldal címét a cég logójára, de ez nem egy elterjedt példa az Androidnál. Az állapotsáv (amin jelzi az internetelérhetőséget, az akkumulátor töltöttséget és az időt) egy olyan eredeti összetevő, amit nem szükséges figyelembe venni a tervezésnél – vagyis nem kell változtatni rajta. Csak legyél biztos benne, hogy amikor prezentálod a mintapéldányt, akkor a megfelelően használd, hogy elkerüld a zavart és a felháborodást.

global-elements.png

4. Navigáció

Talán a legnagyobb különbség az iOS és az Android készülékeknél a navigációban található. Az Android elsődleges navigációs eszköze a fiókos menü. Az Android használó a részletekért mindig ide navigál, és ennek egy mindenütt jelenlévő dolognak is kell lennie. Az Apple irányító inkább a füles sávot támogatja, amely a képernyő alján van elhelyezve és mindig könnyedén elérhető. Az alkalmazás létrehozásánál kétfelé szeparálódott menüt kell tervezned.

Az alkalmazás architektúráján gondolkodni sokkal lényegesebb, mint a menük pontjainak elhelyezkedésén. Ha a szerkezet rendben van, akkor a kezelési is egyszerű lesz.

navigation.png

5. Kártya vagy sem?

A kártya használata elsődlegessé kezd válni az UI rendszer digitális tervezésében. Vannak elfogadott és a felhasználó által gyorsan lehasznált bájtok, amelyek meghatározzák a készülék viselkedését. Vizuálisan, a kártya nagyon jól illeszkedik az Android anyagi dizájnjához – a papír inspirálta felülethez. Felhasználva az árnyékolást és a szükséges csatornákat a kártya között egy teljesen hétköznapi, természetes érzetet és kinézetet kelt.

iOS-on használva a kártyának sokkal nagyobb figyelemre van szüksége. Még a nagy alkalmazások, mint a Facebook és a Pinterest is használ kártyákat oly módon, ami kissé eltávolodik az iOS irányelveitől. Az iOS irányelve a mély fóliákat és rátéteket ajánlja, de az alap kinézet mindig laposabb. Az Instagram például egy teljesen lapos kivitelű stílust használ, habár minden bejegyzést figyelembe lehetne venni egy építészeti látószögből is. Rosszabb, hogy az Instagram mennyire siet ugyanazzal a komponenssel az iOS stíluson belül. Ha kártyával használod, legyél nagyon óvatos az árnyékok használatával és próbáld olyan finoman használni, amennyire csak lehetséges.

card.png

6. Tipográfia

Az iOS betűtípus családja a Helvetica Neue, az Android a Roboto betűit használja. Habár a betűtípusok stílusa észrevehetően különbözik, a betűk jellemzői elég hasonlóak. Ha időt szeretnél megspórolni, akkor elég, ha csak az egyiket használod, de tartsd a kapcsolatot a fejlesztőkkel, hogy végül ők a jó betűtípust alkalmazzák a rendszerben. Amikor fontos elrendezéseken dolgozol, vagy szélsőséges méretekben gondolkodsz, akkor azért érdemes legalább mindkét betűtípust egy teszt erejéig kipróbálnod.

Ha egy extra mérföldet szeretnénk lépni, akkor sokkal nagyobb figyelmet kell fordítanunk a tipográfiára és az elrendezések konvencióira mindegyik platformon – utalva ismét a fent említett irányelvekre. Néhány általánosítás:

Az Android Material Design bőséges fehér helyet használ az alapon.

A tárgyi megjelenítésben sokkal nagyobb hangsúlyt fektetnek a betűméretre is. A feltűnő fejlécet a betűk közötti helyköz adja.

Az iOS-nál nincs akkora dramatikusság a betűméreteket illetően, de némileg itt is van lehetőség a variációra a betűk nyomatékosítását illetően, amely még mindig a kreativitásnak ad helyet.

Tipikusan mindkét platform a könnyedebb nyomatékot használja a betűcsaládokat illetően. Habár az Android dizájnja inkább a könnyed és szokásos Roboto erősségét alkalmazza, az iOS dizájn a félkövér és a hagyományos változatát a Helvetica Neue betűtípusnak.

Ez egy nagyon egyszerű példája annak, hogy nyomatékosítsuk, hogy a tipográfia mennyire egyszerű módon tudja elárulni, hogy Android vagy iOS alkalmazásról van szó.

fonts.png

7. Rács és érintőképernyő

Az iOS (44px @1x) és az Android (48dp - 48px at 1:1 ratio) között is vannak finom különbségek, amelyek az érintőképernyőt illetik. A Material Design irányelvek azt ajánlják, hogy egyeztessék ezeket az elemeket a 8dp négyszög alapkonfigurációs rács szerint.

Az utolsó projekteknél, amin dolgoztunk, biztonságosabbnak éreztük az Android irányelveit követni, hiszen (a) a nagyobb 48px érintési lehetőség sokkal biztonságosabbnak bizonyult mindkét platformon és (b) a Material dizájn alaprajza sokkal frissebb – és állandóan frissül. Másrészt, szükségünk van egy rácsozatra, amivel dolgozhatunk és az Androidnál a 8dp is jól működött. Ez azt jelenti, hogy a dokumentumod létrehozásakor a 8dp-s lépésekben a horizontális és a vertikális szinteken is kreálni tudsz egy rácsozatos alaprajzot.

8. Gomb stílusok

A Material Design szerint rengeteg féle gombstílus van:

Lebegő akciógomb: a hagyományos alakú gombok. Az árnyékok meglehetősen mélyek és felemelik őket az oldalról. Ezeket csak a háttérben lehet használni, vagy takarékosan a kártyán. Ezeket nem lehet alkalmazni a riasztásoknál vagy a felugró ablakoknál, mivel ez túl sok rétegmélységet hoz létre. Az elsődleges a kiemelő szín, a másodlagos változat általában kevésbé feltűnő.

Lapos gomb: alapvetően a hangsúlyozott színt írja, mindenféle elhatároló elem nélkül. Helykitöltésre használják, és minden nagybetűnek szerkezetet ad.

Összehasonlítva A Material Dizájnnal, az iOS alkalmazásai a megjelenítésben tipikusan laposak, nem használva mélységet vagy árnyékolást. Az elsődleges gombnak van egy kitöltő színe, míg a másodlagos gombok inkább kifordítottak, egy vágást használva ugyanazzal a színnel. Ez néhol egy kissé korlátozott, különösen ha a fülekkel vagy más elemekkel vetjük össze. A Flat stílusnak van egy kikötése: fontos, hogy világosan és következetesen lássuk azt, hogy mi a jelentése az alkalmazásnak.

Az iOS is hasonlóan egy egyszerű szöveges stílust hordoz, de nem osztja az Android nagybetűs stílusát és a betű kövérségének könnyedségét.

button.png

9. Akciólap

Az akciólap lehetővé teszi a felhasználó számára, hogy a tevékenységek közül válasszanak az egyik UI elem közül. Például, amikor megérintek (vagy hosszan nyomok) egy képre, akkor eldönthetem, hogy meg akarom osztani, feltölteni szeretném, másolom vagy éppen törlöm az adott képet.

Az iOS és az Android is foglalkozik ezekkel, árnyalatnyi különbségek érzékelhetőek azonban. Először is vannak hasonló akciólapok, amelyeket a képernyő alján jelenítenek meg, mint egy sablonját az aktuális nézetnek:

Az akciólapok, a fedések és az értesítések terén is különböznek az iOS és az Android részletei a mélységi rétegeket tekintve. Az Android fedésnek egy szolid színe van egy enyhe árnyékkal, jelezve, hogy ez a felső „papír” réteg. Az iOS fedésnek azonban nincs árnyéka, de van egy kis átláthatóság a háttérben.

action-sheets.png

Legördülő gombok
Csak az Androidon léteznek a legördülő gombok, amelyek a rendkívül gyors választási módot hivatottak létrehozni. Tartsuk szem előtt, hogy nincs ennek megfelelő gomb az iOS rendszernél. A példánál maradva, a felhasználó megnyomja a „módot” az első lépésben, majd a bemutatott egyszerű menüben kiválasztja az elérhető üzemmódok közül a számára alkalmasat. Ezek a menük sokszor a borító gombot használják az akciósávból, a jelzett három vertikális pontból.

simple-menus.png

Speciális adatbevitel
Egyes beviteli információkkal, mint a dátum vagy az idő, az Android most a párbeszédekre épít. Ezek úgy néznek ki, mint az értesítés felugró ablakai, de az UI kifejezetten az ilyen adatok bevitelére szolgál. A legegyszerűbb példa a naptár bevitele. Az Androidnak van egy optimalizált fedése arra, hogy a dátumot bevigyük.

Az iOS ezzel teljesen másképp dolgozik: egy kerék, ami úgy jelenik meg, mint az alsó sáv. Ennek a tervezésénél légy óvatos és már a korai időszakban beszélj erről a fejlesztőkkel.

10. Szegmentált ellenőrzések

A szegmentált ellenőrzés akkor használatos, amikor válthatunk egy nézetben a különféle tartalmak közül. Ezeknek a használata nagyjából ugyanazt jelenti, de nagyon jellegzetes egy-egy platformon a vizuális megjelenés, ezért fontos, hogy a készítésnél a megfelelő stílust alkalmazzuk. Az iOS-on három fül van, amely stílusa hasonló a képernyő alján található sávgombokhoz – amelyet előbb említettünk. Az Androidon egy egyszerű aláhúzással és sokkal több szóközzel jelentkezik, jelezve azok kölcsönhatását.

segmented.png

11. Értesítések

Fontos, hogy ezeknek a stílusa megfelelő legyen, hiszen ezek olyan akciókat kontrollálnak, mint a bejelentkezés, feltételek elfogadása vagy épp a fizetés megerősítése, tehát fontos, hogy megbízható és egyszerűen kezelhető legyen ebből a szempontból a felhasználók számára.

Az Android értesítései a lapos gombok stílusát használják, amelyek jellegzetességeit már fentebb bemutattunk, ezek dimenziója a Material dizájn irányelveit követi. Az értesítés a jobb alsó részen jelenik meg. A „gombok” itt szöveges alapúak. Teljesen nagybetűsek az értesítések, hogy még strukturáltabb legyen, és az alkalmazás elsődleges színét használják.

Az iOS-nál a cselekvések osztókkal szétválasztódnak. Ezek mindig vagy mondatokban, vagy címdobozban vannak, hogy a szerkezet eltávolodjon a szeparált dobozoktól. Középre igazodnak a képernyőn és az aktív színt használják.

alert.png

12. Ikonok

Az ikonok kialakítása egy meglehetősen speciális terület az UI dizájn terén. Akár az ingyenes ikonokat használod, akár más tervezi meg azokat, akár saját magad tervezed, az ikonokat mindegyik platformhoz megvan a megfelelő, megszokott stílus. Az iOS inkább a vékony vonalú ikonokat helyezi előtérbe, az Android rendszer ikonjai vastagabb vonalak, vagy egyszerű, szolid ikonok. A múltban az Android ikonok háromdimenziós csavarral készültek, de mára már a kétdimenziós megjelenítés határozza meg a kinézetüket.

icon.png

13. Snackbar, toast, képek betöltése

A szerencsétlen 13-mas... Van néhány olyan UI részlet, amely felett elsiklanak a készítők. Az értesítések például és a betöltési ikonok ilyenek – ezek mindig a fejlesztőkre vannak hagyva. Megeshet, hogy már te is tapasztalták csalódást az értesítések terén, furcsa jelzéseket, amelyekről úgy érezted, hogy nincsenek összhangban a másik alkalmazásokkal. Ez az egyik olyan terület, amelyen együtt kell működnie a tervezőnek és a fejlesztőnek, hogy a legjobbat hozzák ki a munkából.

14. Gyakori UI vezérlők

Rádió gomb, jelölőnégyzet, mezők és választók – azok a funkciógombok, amelyeknek az eredetinek kell lenniük. Úgy, mint a figyelmeztetések és a párbeszédek, ezeknek is megbízhatónak és a megszokottnak kell lenniük. Amennyire lehetséges, használd az eredeti komponenseket, hogy az emberek (a) tudják használni őket és (b) bízzanak az alkalmazásban az érzékeny adatkezelés és a fizetési részletek terén.

A különbségek megint csak aprók, de az eredeti kinézethez és használathoz nagyon fontos, hogy ezeket alkalmazzuk. Ez megint egy olyan terület, ahol szükséges a fejlesztő és a tervező együttműködése.

inputs.png

Összefoglaló

Nem lehetetlen feladat, hogy az alkalmazás, amit készítesz eredetinek hasson az iOS és az Android készülékek megjelenítése terén is. Próbáld szem előtt tartani azokat a csavarokat, amelyekről az elején ejtettünk szót, tartsd rajta a szemed azokon az összetevőkön, amelyeket kívülállónak érzel a platform szinkronizációja terén és mindig dolgozz együtt a fejlesztőkkel.

Források
Reméljük, hogy ez a cikk gyors válaszokat nyújtott arról, hogy miben különbözhet a tervezés szempontjából a két alkalmazás, de természetesen szükséged van még olyan eszközökre és sablonokra, amelyekkel a megfelelően végrehajthatod a tervezést.

Irányelvek
Ha szeretnél többet tudni, akkor az információk részleteit megtalálod a platformok irányelvei alatt. Ezek eléggé átfogóak, én csak kiemeltem a legfontosabbakat az összevetés kedvéért, de ha specifikusabb kérdéseid vannak, akkor itt tudod ezeket megnézni:

UI készlet
Ez az UI készlet segít, hogy a megfelelő alapelveket használd a megfelelő és illő méretben. Kivághatod a darabokat, amikre szükséged van és behelyezheted az Android és az iPhone kimenetbe a tervezéskor.

Ikonok
Még ha a saját, vagy a megbízó által rendelt ikont is készíted, hasznosak ezek a helykitöltők a munka közben. Az ikontervezés egy önálló munka is lehet, és nem kell, hogy az ikonok lassítsák le a munkádat, amikor úgy érzed, hogy megindultál az alkalmazás tervezésének útján. Nem olyan régen találtam rá erre a két linkre alul, az icons8 elég jól kinéző ikonokat készít, a flatiocon.com pedig nagyon jó az általánosabb ikonok tervezéséhez.

Mintadarab
Az mindig hasznos, hogy legyen mintadarabja, próbamodellje az alkalmazásodnak, amit be tudsz mutatni. Ez többféle kategóriában is jöhet. Lehetséges, hogy olyan alap mintát szeretnél, amely az összefüggéseket mutatja, az egyszerű Flat eszközön az alkalmazás csillogását mutatja, vagy egy olyan modellt, ami az alkalmazás hasznosságát hivatott bemutatni. Itt van néhány forrás, amelyeket én hasznosnak találtam, de van még ettől sokkal több. Amikor Androidhoz készítesz, akkor legyél körültekintő, hogy melyiket választod. Én a Nexus felé hajlok, mint a Google saját telefonjainak a mintája.

Hazai oktatás
Ha szeretnél ezen a folyamatosan fejlődő piacon dolgozni, vagy hobbi fejlesztőként tevékenykedni, akár céges munkahelyi környezetben, akár otthonról dolgozás szintjén, nézz körbe az elérhető tananyagok lehetőségei között. Ma már számos ingyenes és fizetős videó sorozat, könyv, online és tantermi képzés szolgálja a fejlődésed a témában. Nem árt megismerkedned a számodra kedvező mobilalkalmazás fejlesztési lépéseivel és a dizájn megtervezési szakaszaival. Erre az alábbi képzéseket merem ajánlani figyelmedbe:

(A képek a Web Design Tutorials oldaláról származnak.)