Noua simplitate în proiectarea interfeței
1 Noua simplitate în proiectarea interfeței. Skeuomorphism versus Flat Design Isabella Dimpfl M A S T E R A R B E I T înscris la Universitatea de Științe Aplicate Master în Arte Digitale din Hagenberg în septembrie 2013
3 Declarație Declar cu jurământ că am scris prezenta lucrare independent și fără ajutor din exterior, că nu am folosit alte surse decât cele date și că am marcat pasajele preluate din surse ca atare. Până în prezent, teza nu a fost trimisă niciunei alte autorități de examinare în aceeași formă sau într-o formă similară. Hagenberg, la 30 septembrie 2013 Isabella Dimpfl iii
4 Cuprins Explicație Rezumat executiv Rezumat iii vi vii 1 Introducere Interfața Simplitatea Skeuomorfism Definiție Skeuomorfism sau realism? Realismul în interfețele utilizatorilor Avantajele realismului în interfața de proiectare Metafore Emoții Tehnologie Hardware Problemele realismului în interfețele interioare Valea neobișnuită a designului de interfețe Limitările proiectelor Skeuomorfe Retina Afișează icoane realiste Designul plat Principiile moderne de proiectare a interfeței UI Principiul 1: Mândru de bun lucru Principiul 2: Mai puțin este adesea mai mult.
5 Cuprins v Icoane Tipografie Animație Plăci vii Origini și influențe Stilul elvețian Informații de design John Maeda: Legile simplității ios Re-proiectare Skeuo-minimalism Probleme de design plat Definiție Design Skeuo-minimalism la Google Concluzie: 2D funcționează mai bine pe ecranele tactile 53 A Conținutul CD-ROM-ului/DVD 55 A.1 Document principal A.2 Figuri A.3 Fișiere PDF A.4 Surse online Lista surselor 56 Literatură Filme și suporturi audiovizuale Surse online
7 Rezumat Odată cu proiectanții de iphone, au început un nou drum în domeniul proiectării interfeței mobile. Prin crearea de metafore (sau așa-numitele skeuomorfisme, un tip de proiectare în care materialele și lucrurile din lumea reală sunt imitate), designerii au încercat să facă primii pași în noul smartphone media mai ușor pentru utilizatori. Ideea a fost ca utilizatorii să poată gestiona noul dispozitiv intuitiv. În consecință, mulți designeri au folosit aceste efecte ca bomboane pentru ochi pentru aplicațiile lor. Din păcate, utilizabilitatea a dispărut adesea în fundal. Se pare că simplitatea erei digitale timpurii a revenit la designul interfeței. Microsoft a izbucnit în această nouă direcție radicală prin designul interfeței sale Windows Phone 7. Flat Design (Microsoft îl numește Modern UI) nu are nevoie de umbre, degradeuri sau grafică 3D. Autentic digital este noul slogan al mișcării, care este extrem de opus skeuomorfismului. Între aceste două stiluri se află skeuominimalismul, care este utilizat în mod vizibil pe telefoanele Android și moștenește regulile ambelor tipuri de design. În această teză, noua politică digitală autentică a designului interfeței mobile Microsoft va fi examinată și comparată cu standardul de proiectare încă prevalent al dispozitivelor mobile Apple. vii
13 2. Skeuomorfism 6 (a) (b) Figura 2.1: Ambele computere copiază aspectul lucrurilor din lumea reală, deci ambele sunt skeuomorfe. Calculatorul (a) imită, de asemenea, butoanele și textura unui calculator de buzunar real [13] prin intermediul gradienților; este skeuomorf și realist. Calculatorul de buzunar (b) a fost creat optic în așa-numitul stil de design plat [14], dar structura sa este încă skeuomorfă. skeuomorfismul este modul în care se comportă lucrurile. Când întoarceți ceva pe ecran, alunecă cu elan sau se încetinește sau se comportă într-un mod foarte nefiresc asemănător unui computer? Cu modul în care se comportă lucrurile, cred că skeuomorfismul este o tendință de neoprit care pare să funcționeze foarte frumos la toate. Dar când vine vorba de aspectul lucrurilor, cred că este mai mult o alegere stilistică care depinde într-adevăr de software-ul pe care îl creați. 2.3 Realismul în interfețele utilizatorului În vremea de dinainte de iphone, realismul în interfețele utilizatorului era folosit aproape exclusiv în jocurile pe computer, probabil pentru a promova imersiunea (imersiunea mentală în lumea digitală) a playerului. De exemplu, interfața jocului pentru PC Diablo, introdusă de Blizzard Entertainment în SUA în 1996, arăta două figuri de piatră între
25 2. Skeuomorfism 18 Figura 2.8: Aplicația Apple Mac Soulver [24] folosește avantajele computerului. precum Lucida Grande, Verdana etc. arată în continuare cel mai bine. Aceste fonturi aveau un aspect destul de ieftin când erau tipărite la rezoluție înaltă. Designul noilor afișaje este deja foarte aproape de designul tipărit. Tendința de a se îndepărta de efectele speciale realiste sau skeuomorfe este începutul erei designului pentru afișaje cu rezoluție extrem de înaltă. Interfața nu mai trebuie să se adapteze la rezoluția slabă. Piatra de temelie a interfeței de utilizare predominante este concepută până acum - strălucitoare, butoane de sticlă, folii transparente, umbre de obiecte, teșituri și efecte de relief, texturile nu au mai fost văzute în modele de imprimare bune de mult timp, deoarece sunt inutile datorită rezoluției mari de imprimare. Cu cât rezoluția ieșirii este mai mare, cu atât aceste efecte apar mai stângace. Ei lucrează pe afișaje sub-retinei, deoarece sunt ochiul uman
44 3. Design plat 37 (a) (b) Figura 3.10: Întregul meniu al browserului de pe Windows Phone este ascuns în bara de adrese (a) [26]. Când atingeți cele trei puncte albe, acesta se deschide (b) [26]. Figura 3.11: Elementele de funcționare ale diferitelor generații de ipod de la stânga la dreapta: ipod 1G, ipod 3G și ipod 4G [6]. o bară de progres poate face așteptarea mai suportabilă pentru utilizator. De asemenea, are certitudinea că se va întâmpla ceva în timp ce așteaptă. Legea a 4-a: Învățarea cunoștințelor ușurează totul. Principiile psihologice ale proiectării se bazează pe capacitatea minții umane de a face concluzii plauzibile și, astfel, de a opera interfața intuitiv
46 3. Design plat 39 (a) (b) Figura 3.12: Ecranul de blocare WP are mult spațiu alb (a) [26], astfel încât atenția să se concentreze asupra informațiilor. Începând cu Windows Phone 8, afișajul poate fi personalizat (b) [26]. cu toate acestea, nu este absolut necesar ca utilizatorul să cunoască multe despre sistem. El trebuie să pună încredere în dispozitiv și să renunțe parțial la intimitatea sa pentru a obține confort. Legea 9: Eșecuri Există unele lucruri care nu pot fi simplificate. 10. Legea: singura lege a simplității înseamnă eliminarea evidentului și adăugarea sensului. 3.4 Proiectarea ios Microsoft a devenit 100% digitală cu sistemul de operare mobil Windows Phone. Și în prezent se pare că Apple se îndreaptă în aceeași direcție. Pe 29 octombrie 2012, Apple a anunțat că Industrial
51 3. Design plat (a) 44 (b) (c) Figura 3.16: Aplicația ios 6 iphone Calculator (a) [53], lângă aceasta noua aplicație din ios 7 (b) [53]. Pentru comparație, aplicația calculator de pe Windows Phone (c) [26] cu aceeași dispunere a butoanelor de funcționare aritmetică. (a) (b) (c) Figura 3.17: Browserul de internet Safari de pe iPhone sub ios 6 (a) [53], lângă acesta noua aplicație din ios 7 (b) [53]. Pentru a compara browserul Internet Explorer pe Windows Phone (c) [26].
53 3. Design plat 46 (a) (b) (c) Figura 3.19: Ecranul de start al ios 6 cu aplicațiile standard (a) [53], alături de versiunea ios 7 (b) [53]. Butonul declanșator al aplicației camerei de pe ios 7 nu are nevoie de pictograma camerei (c) [53].
59 4. Skeuominimalism 52 (a) (b) Figura 4.4: Adaptarea precisă a pixelilor la grila de pe Google (a) [38] și reducerea nivelului de detaliu pentru vizualizarea de 16 px a pictogramei (b) [38]. (a) (b) Figura 4.5: Reducerea pictogramelor, pinul albastru prezintă un ușor gradient (a) [38]. Google (b) [38] preferă o vizualizare bidimensională. aplicația. De asemenea, tipografia trebuie să fie perfectă pentru pixel; Google recomandă fontul Open Sans pentru aceasta.