Nová jednoduchosť v dizajne rozhrania
1 Nová jednoduchosť v dizajne rozhrania. Skeuomorphism versus Flat Design Isabella Dimpfl M A S T E R A R B E I T predložená na univerzitu aplikovaných vied v septembri 2013 na magisterskom odbore digitálne umenie v Hagenbergu.
3 Vyhlásenie Čestne prehlasujem, že som terajšie dielo napísal samostatne a bez vonkajšej pomoci, že som nepoužil iné než uvedené zdroje a označil som pasáže prevzaté ako také. Diplomová práca nebola predložená inému skúšobnému orgánu v rovnakej alebo podobnej podobe. Hagenberg, 30. septembra 2013 Isabella Dimpfl iii
4 Obsah Vysvetlenie Zhrnutie Abstrakt iii vi vii 1 Úvod Rozhranie Jednoduchosť Skeuomorfizmus Definícia Skeuomorfizmus alebo realizmus? Realizmus v používateľských rozhraniach Výhody realizmu v dizajne používateľského rozhrania Metafory Emócie Technológia Hardvér Problémy realizmu v používateľských rozhraniach Záhadné údolie návrhu rozhrania Obmedzenia skeomomorfných návrhov Sieťovka zobrazuje realistické ikony Plochý dizajn Princípy moderného dizajnu používateľského rozhrania Princíp 1: Hrdý na dobrú prácu Zásada 2: Menej je často viac Princíp 3: Rýchly a dynamický Princíp 4: Autenticky digitálne Princíp 5: Spoločne vyhrajte Moderná navigácia v dizajne používateľského rozhrania iv
5 Obsah v Ikony Typografia Animácia Živé dlaždice Počiatky a vplyvy Švajčiarsky štýl Informačný dizajn John Maeda: Zákony jednoduchosti ios Re-Design Skeuo-minimalizmus Problémy s plochým dizajnom Definícia Dizajn Skeuo-Minimalism na Google Záver: 2D funguje lepšie na dotykových obrazovkách 53 A Obsah CD-ROM/DVD 55 A.1 Hlavný dokument A.2 Obrázky A.3 Súbory PDF A.4 Online zdroje Zoznam zdrojov 56 Literatúra Filmy a audiovizuálne médiá Online zdroje
7 Abstrakt S návrhármi iphonov prelomili dizajnéri nové priečky v oblasti dizajnu mobilných rozhraní. Vytvorením metafor (alebo tzv. Skeuomorfizmov, čo je dizajnový typ, kde sa napodobňujú materiály a veci zo skutočného sveta), sa návrhári pokúsili uľahčiť používateľom prvé kroky k novému multimediálnemu smartfónu. Myšlienka bola, že používatelia by mali byť schopní manipulovať s novým zariadením intuitívne. V dôsledku toho mnohí dizajnéri použili tieto efekty ako očné cukríky pre svoje aplikácie. Použiteľnosť bohužiaľ často upadla do pozadia. Zdá sa, akoby sa jednoduchosť raného digitálneho veku vrátila k návrhu rozhrania. Spoločnosť Microsoft prepukla týmto radikálnym novým smerom dizajnom svojho rozhrania Windows Phone 7. Flat Design (Microsoft ho nazýva Modern UI) nepotrebuje žiadne tiene, prechody ani 3D grafiku. Autenticky digitálny je nový slogan hnutia, ktorý je extrémnym opakom skeuomorfizmu. Medzi týmito dvoma štýlmi sa skrýva skeuominimalizmus, ktorý je prominentne používaný v telefónoch s Androidom a dedí pravidlá oboch typov dizajnu. V tejto diplomovej práci bude preskúmaná nová autenticky digitálna politika návrhu mobilného rozhrania spoločnosti Microsoft a porovnaná s doteraz prevládajúcim dizajnovým štandardom mobilných zariadení Apple. vii
13 2. Skeuomorfizmus 6 (a) (b) Obrázok 2.1: Oba počítače kopírujú rozloženie vecí zo skutočného sveta, takže sú oba skeomomorfné. Kalkulačka (a) tiež prostredníctvom prechodov napodobňuje tlačidlá a textúru skutočnej vreckovej kalkulačky [13], je skeuomorfná a realistická. Vrecková kalkulačka (b) bola vytvorená opticky v štýle takzvaného plochého dizajnu [14], ale jej štruktúra je stále skeuomorfná. skeomorfizmus je spôsob, akým sa veci správajú. Keď niečo otočíte na obrazovke, kĺže sa to s hybnosťou alebo spomalí, alebo sa to správa veľmi počítačovo, neprirodzene? Vzhľadom na to, ako sa veci správajú, si myslím, že skeuomorfizmus je nezastaviteľný trend, ktorý, zdá sa, funguje naozaj pekne na všetkom. Ale pokiaľ ide o vzhľad veci, myslím si, že je to skôr štylistická voľba, ktorá skutočne závisí od softvéru, ktorý vytvárate. 2.3 Realizmus v používateľských rozhraniach V čase pred telefónom iphone sa realizmus v používateľských rozhraniach takmer výlučne používal v počítačových hrách, pravdepodobne na podporu ponorenia (intelektuálneho ponorenia do digitálneho sveta) prehrávača. Napríklad rozhranie počítačovej hry Diablo, ktorú predstavila spoločnosť Blizzard Entertainment v USA v roku 1996, ukázalo dve kamenné postavy medzi
25 2. Skeuomorphism 18 Obrázok 2.8: Aplikácia Apple Mac Soulver [24] využíva výhody počítača. ako Lucida Grande, Verdana atď., stále vyzerajú najlepšie. Tieto písma mali pri tlači vo vysokom rozlíšení pomerne lacný vzhľad. Dizajn nových displejov je už veľmi blízky tlačenému dizajnu. Trend od realistických alebo skeomomorfných špeciálnych efektov je začiatkom éry dizajnu displejov s extrémne vysokým rozlíšením. Rozhranie sa už nemusí prispôsobovať zlému rozlíšeniu. Základné kamene doterajšieho prevládajúceho používateľského rozhrania: lesklé, sklenené tlačidlá, priehľadné fólie, tiene objektov, skosenie a reliéfne efekty, textúry sa už v dobrých tlačových prevedeniach prestali prejavovať, pretože sú kvôli vysokému rozlíšeniu tlače zbytočné. Čím vyššie je rozlíšenie výstupu, tým ťažšie vyzerajú tieto efekty. Pracujú na displejoch sub-sietnice, pretože sú ľudským okom
44 3. Plochý dizajn 37 (a) (b) Obrázok 3.10: Celá ponuka prehliadača vo Windows Phone je skrytá v paneli s adresou (a) [26]. Klepnutím na tri biele bodky sa otvorí (b) [26]. Obrázok 3.11: Ovládacie prvky rôznych generácií ipodov zľava doprava: ipod 1G, ipod 3G a ipod 4G [6]. ukazovateľ priebehu môže čakanie pre používateľa znesiteľnejšie. Má tiež istotu, že sa na počkanie niečo stane. 4. zákon: Učenie vedomostí všetko uľahčuje. Dizajnové psychologické princípy dizajnu sú založené na schopnosti ľudskej mysle robiť pravdepodobné závery a intuitívne tak ovládať rozhranie.
46 3. Plochý dizajn 39 (a) (b) Obrázok 3.12: Obrazovka uzamknutia WP má veľa bieleho priestoru (a) [26], takže pozornosť je zameraná na informácie. Od Windows Phone 8 je možné prispôsobiť displej (b) [26]. nie je však absolútne nevyhnutné, aby používateľ vedel veľa o systéme. Aby dosiahol pohodlie, musí dôverovať zariadeniu a čiastočne sa vzdať svojho súkromia. Zákon 9: Zlyhania Existujú niektoré veci, ktoré sa nedajú zjednodušiť. 10. Zákon: Jeden zákon jednoduchosti znamená odstrániť zjavné a pridať zmysluplné. 3.4 Redizajn ios Spoločnosť Microsoft sa stala stopercentne digitálnou pomocou mobilného operačného systému Windows Phone. A momentálne to vyzerá, že Apple sa uberá rovnakým smerom. 29. októbra 2012 spoločnosť Apple oznámila, že priemyselná
51 3. Plochý dizajn (a) 44 (b) (c) Obrázok 3.16: Aplikácia ios 6 iphone Calculator (a) [53], vedľa nej nová aplikácia v ios 7 (b) [53]. Pre porovnanie, aplikácia kalkulačka v systéme Windows Phone (c) [26] s rovnakým usporiadaním aritmetických tlačidiel. (a) (b) (c) Obrázok 3.17: Internetový prehliadač Safari na iPhone v systéme iOS 6 (a) [53], vedľa neho nová aplikácia v systéme iOS 7 (b) [53]. Porovnanie prehliadača Internet Explorer v systéme Windows Phone (c) [26].
53 3. Plochý dizajn 46 (a) (b) (c) Obrázok 3.19: Domovská obrazovka systému ios 6 so štandardnými aplikáciami (a) [53], vedľa neho verzia ios 7 (b) [53]. Tlačidlo spúšte aplikácie pre fotoaparát na systéme ios 7 nepotrebuje ikonu fotoaparátu (c) [53].
59 4. Skeuominimalizmus 52 (a) (b) Obrázok 4.4: Pixelovo presné prispôsobenie mriežke v službe Google (a) [38] a zníženie úrovne detailov pre 16 pixelov ikonu (b) [38]. (a) (b) Obrázok 4.5: Zmenšenie ikon, modrý špendlík ukazuje mierny sklon (a) [38]. Google (b) [38] uprednostňuje dvojrozmerné zobrazenie. aplikáciu. Typografia musí byť tiež dokonalá v pixeloch; spoločnosť Google k tomu odporúča písmo Open Sans.