Az interfész tervezés új egyszerűsége
1 Az interfész tervezés új egyszerűsége. Skeuomorphism versus Flat Design Isabella Dimpfl M A S T E R A R B E I T 2013 szeptemberében nyújtotta be Hagenbergben az Alkalmazott Tudományok Egyetem digitális művészeti mesterképzésére
3 Nyilatkozat Esküt ígérem, hogy a jelen munkát önállóan és külső segítség nélkül írtam, hogy a megadottakon kívül más forrásokat nem használtam, és a forrásokból vett szövegrészeket ilyennek jelöltem meg. A szakdolgozatot ugyanabban vagy hasonló formában nem nyújtották be más vizsgáló hatóságnak. Hagenberg, 2013. szeptember 30-án Isabella Dimpfl iii
4 Tartalom-jegyzék Magyarázat Vezetői összefoglaló absztrakt iii vi vii 1 Bevezetés Az interfész Az egyszerűség Skeuomorphism Definíció Skeuomorphism vagy Realism? Realizmus a felhasználói interfészekben A realizmus előnyei a felhasználói felület tervezésében Metafórák Érzelmek Technológiai hardver A realizmus problémái a felhasználói felületen Az interfésztervezés völgye A Skeuomorphic Designs korlátai A retina reális ikonokat jelenít meg a lapos kivitelben A modern felhasználói felület kialakítása 1. alapelv: Alapelv a jó munkára 2. elv: A kevesebb gyakran több 3. elv: Gyors és dinamikus 4. elv: Hitelesen digitális 5. elv: Nyerjünk együtt A modern felhasználói felület kialakítása Navigáció iv
5 Tartalom-jegyzék v ikonok Tipográfia Animáció Élő csempék eredete és befolyása a svájci stílus információtervezése John Maeda: Az egyszerűség törvényei Az ios Re-Design Skeuo-minimalizmus A lapos kialakítás definíciójának kialakítása A Skeuo-minimalizmus a Google-nál Következtetés: A 2D jobban működik az érintőképernyőkön 53 A CD-ROM tartalma/DVD 55 A.1 Fő dokumentum A.2 Ábra A.3 ábra PDF fájlok A.4 Online források Források listája 56 Irodalom Filmek és audiovizuális média Online források
7 Absztrakt Az iphone-val a tervezők új utat nyitottak a mobil interfész tervezés területén. A tervezők metaforák (vagy úgynevezett skeuomorphismusok, olyan tervezési típusok létrehozásával, ahol a valós világból származó anyagokat és dolgokat utánozzák) létrehozásával megpróbálták megkönnyíteni a felhasználók számára az új média-okostelefon első lépéseit. Az ötlet az volt, hogy a felhasználóknak képesnek kell lenniük az új eszköz intuitív kezelésére. Ennek következtében sok tervező ezeket a hatásokat szemcukorként használta alkalmazásaihoz. Sajnos a használhatóság gyakran háttérbe szorult. Úgy tűnik, mintha a korai digitális kor egyszerűsége visszatért volna az interfész tervezéséhez. A Microsoft ebben a radikálisan új irányban tört ki a Windows Phone 7 felületének kialakításával. A Flat Design (a Microsoft Modern UI-nek hívja) nem igényel árnyékokat, színátmeneteket vagy 3D-s grafikákat. Hitelesen digitális a mozgalom új szlogenje, amely a skeuomorphizmus szélső ellentéte. E két stílus között rejlik a skeuominimalizmus, amelyet az Android telefonoknál kiemelten használnak, és mindkét formatervezési szabályt örökli. Ebben a tézisben megvizsgáljuk és összehasonlítjuk a Microsoft mobil interfész-tervezésének új, hitelesen digitális politikáját és összehasonlítjuk a mobil Apple-eszközök még mindig elterjedt tervezési szabványával. vii
13 2. Skeuomorphism 6 (a) (b) 2.1. Ábra: Mindkét számítógép másolja a dolgok elrendezését a való világból, tehát mindkettő skeuomorf. Az (a) számológép a valódi zsebszámológép [13] gombjait és textúráját is gradiensek segítségével utánozza, skeuomorf és reális. A zsebszámológépet (b) optikailag az úgynevezett lapos kivitel stílusában hozták létre [14], de felépítése még mindig szkéuomorf. a skeuomorphism az a viselkedésmód. Ha elfordít valamit a képernyőn, az lendülettel csúszik vagy lassul, vagy nagyon számítógépszerűen, természetellenesen viselkedik? A dolgok viselkedésével úgy gondolom, hogy a skeuomorphism egy megállíthatatlan tendencia, amely úgy tűnik, nagyon szépen működik mindenen. De ami a dolgok kinézetét illeti, azt gondolom, hogy ez inkább egy stílusválasztás, amely valóban az Ön által létrehozott szoftvertől függ. 2.3 Realizmus a felhasználói interfészekben Az iphone előtti időkben a felhasználói felületek realizmusát szinte kizárólag számítógépes játékokban használták, valószínűleg a lejátszó elmélyülésének (a digitális világban történő elmélyülés) elősegítésére. Például az amerikai Blizzard Entertainment által 1996-ban bevezetett Diablo PC-játék felületén két kőfigura volt látható.
25 2. Skeuomorphism 18 2.8. Ábra: Az Apple Mac Soulver alkalmazás [24] használja a számítógép előnyeit. mint Lucida Grande, Verdana stb. Ezek a betűtípusok meglehetősen olcsó megjelenésűek voltak, nagy felbontással nyomtatva. Az új kijelzők kialakítása már nagyon közel áll a nyomtatáshoz. A realisztikus vagy a szképororf speciális effektusoktól való eltérés a rendkívül nagy felbontású kijelzők tervezési korszakának kezdete. Az interfésznek már nem kell alkalmazkodnia a gyenge felbontáshoz. Az eddig uralkodó felhasználói felület-tervezés sarokkövei: fényes, üveggombok, fóliák, tárgyárnyékok, ferde és dombornyomásos effektusok, a textúrák már jó ideje nem láthatók a jó nyomtatási formákban, mert a nagy nyomtatható felbontás miatt feleslegesek. Minél nagyobb a kimenet felbontása, annál esetlenebbek ezek a hatások. A retina alatti kijelzőkön dolgoznak, mivel ők az emberi szem
44 3. Lapos kialakítás 37 (a) (b) 3.10. Ábra: A Windows Phone teljes böngészőmenüje el van rejtve a címsorban (a) [26]. Ha megérinti a három fehér pontot, megnyílik (b) [26]. 3.11. Ábra: A különböző iPod generációk működési elemei balról jobbra: iPod 1G, iPod 3G és iPod 4G [6]. az előrehaladási sáv elviselhetőbbé teheti a várakozást a felhasználó számára. Abban is biztos, hogy várakozás közben történik valami. 4. törvény: A tudás megtanulása mindent megkönnyít. A tervezés dizájnpszichológiai alapelvei az emberi elme azon képességén alapulnak, hogy hihető következtetéseket vonjon le, és ezáltal az interfészt intuitív módon működtesse
46 3. Lapos kialakítás 39 (a) (b) 3.12. Ábra: A WP záróképernyőn sok a szóköz (a) [26], így a figyelem az információkra összpontosul. A Windows Phone 8-tól kezdve a kijelző testreszabható (b) [26]. azonban nem feltétlenül szükséges, hogy a felhasználó sokat tudjon a rendszerről. Bíznia kell a készülékben, és részben fel kell adnia magánéletét a kényelem elérése érdekében. 9. törvény: kudarcok Néhány dolgot nem lehet egyszerűsíteni. 10. Törvény: Az egyszerűség egyetlen törvénye a nyilvánvaló eltávolítását és az értelmes hozzáadását jelenti. 3.4 Az ios újratervezése A Microsoft a Windows Phone mobil operációs rendszerrel 100% -ban digitalizálódott. És jelenleg úgy tűnik, hogy az Apple ugyanabba az irányba tart. 2012. október 29-én az Apple bejelentette, hogy az Ipari
51 3. Lapos kialakítás (a) 44 (b) (c) 3.16. Ábra: Az ios 6 iphone Calculator alkalmazás (a) [53], mellette az ios 7 (b) [53] új alkalmazása. Összehasonlításképpen: a Windows Phone (c) [26] számológép-alkalmazásának számtani műveleti gombok azonos elrendezésével. (a) (b) (c) 3.17. ábra: A Safari Internet böngésző az iphone-on az ios 6 (a) [53] alatt, mellette az új alkalmazás az ios 7 (b) [53] alatt. Az Internet Explorer böngésző összehasonlítása a Windows Phone rendszeren (c) [26].
53 3. Lapos kialakítás 46 (a) (b) (c) 3.19. Ábra: Az ios 6 kezdőképernyője a szokásos alkalmazásokkal (a) [53], mellette az ios 7 verzió (b) [53]. Az ios 7 fényképezőgépének exponáló gombjának nincs szüksége kamera ikonra (c) [53].
59 4. Skeuominimalism 52 (a) (b) 4.4. Ábra: A pixel-pontos adaptáció a Google rácsához (a) [38] és a részletesség csökkentése az ikon (b) 16 px nézeténél [38]. (a) (b) 4.5. ábra: Az ikonok kicsinyítése, a kék csap enyhe színátmenetet mutat (a) [38]. Kétdimenziós nézetet preferál a Google (b) [38]. az alkalmazást. A tipográfiának pixel tökéletesnek is kell lennie; ehhez a Google az Open Sans betűtípust ajánlja.