În rubrica "Interfețe" - traducerea articolului de Pascal D'Sylva, co-fondator și director creativ al aplicației muzicale Keezy. În blogul său despre Mediu, el a explicat cum să folosească trăsăturile gândirii umane pentru a crea interfețe intuitive și a dat exemple de succes și fără succes.
Desigur, da! Pentru a înțelege întreaga lume complexă din jurul nostru, în imaginația noastră reprezentăm modele multidimensionale de obiecte. În plus, putem folosi acest mod de gândire, chiar și pentru a procesa concepte abstracte.
Cred că cel mai bun software este o continuare a creierului uman. Ar trebui să ne permită să gândim într-un mod natural, să ne adaptăm gândirii noastre, și nu invers. Interpretarea informațiilor ar trebui să fie doar lucrarea calculatorului, nu a noastră. Noi creăm sclavi digitali în acest scop.
Spațiul de modelare
Pentru a dezvolta o interfață spațială, trebuie să gândiți atât în cadrul ecranului cât și în afara acestuia. Trebuie să vă amintiți proprietățile fizice ale elementelor din interfața dvs. De unde a venit obiectul? Unde va merge? Cum se va comporta sub efecte cinetice? Obține unele obiecte proprietățile fizice ale celorlalți? Unde ești relativ la orice altceva?
Aceste întrebări sunt greu de răspuns cu cuvinte. Și, permiteți-le să fie evident, dar încă mai cred că este mai eficient să rezolvăm problemele vizuale folosind imagini.
Desenarea unei hărți
Când dezvoltați spațiu, este foarte util să-i prezentați modelului fizic pe care îl puteți manipula, prin care puteți merge. În loc să plasați planurile individuale alăturate într-o singură dimensiune, încercați să vă gândiți la un nivel superior - spațial.
Mai jos este o analiză a paradigmei de creștere contextuală, care a devenit cheia în crearea lui Keezy Drummer.
O hartă simplă care descrie relația dintre spațiile din interfețele din Keezy Drummer. Nu reflectă limitele ecranului. Săgețile reprezintă o măsură temporară
Puteți vizualiza relația dintre dimensiuni ca adăugând măsurători la un nivel inferior. Fiecare dimensiune nouă creează un model mult mai complex de vizualizare.
După cum puteți vedea, reprezentarea a patru dimensiuni într-o formă bidimensională este destul de rapidă complicată. "W" din această figură reprezintă timpul
Interfață tranzitorie care demonstrează o creștere contextuală a butonului Keezy. Putem dezvolta interfața în timp, luând în considerare cinetica și interfețele tranzitorii. Ambii indicatori temporali și spațiali au caracteristici ale obiectelor fizice.
Mișcarea înseamnă spațiu. Propunerea îmbunătățește caracteristicile fizice ale spațiului de pe și de pe ecran. Obiectele care sunt limitate de legile fizice rezonabile ajută la crearea unui model clar.
Am văzut cu toții acest model clasic de eliminare a rândurilor din listă. Glisați în mișcare celula - și în spatele ei apare un buton. Atingeți pictograma - și întreaga celulă va dispărea.
Și ce se întâmplă dacă schimbați modul în care celula părăsește ecranul?
Dacă ameliorează sau facilitează mișcarea celulei care iese din ecran, putem presupune unde ar trebui să se oprească. În cazul nostru, celula se oprește aproape de partea exterioară a ecranului. Acest lucru se poate face dacă înțelegem că există o anumită zonă de stocare temporară din care celulele la distanță pot fi returnate pe listă. De exemplu, am putea oferi utilizatorului posibilitatea de a deschide o fereastră grafică în partea dreaptă a ecranului, care să reflecte elementele șterse anterior din listă.
Instrucțiunile de pe Material Design de la Google par să sugereze că trebuie doar să măriți viteza obiectelor care părăsesc ecranul. Să nu fiu de acord
Dacă crește viteza obiectului, unde ar trebui să ajungă la final? Dincolo de accesul nostru? Trimitem acest obiect în vidul spațiului cosmic?
Dacă celula din listă se rotește liber și se deplasează de-a lungul axelor x și y, celula se oprește în afara sistemului? Poate că există gravitate. Poate cade într-o grămadă de aceleași celule la distanță.
Deplasarea de-a lungul axei Z înseamnă adâncimea. O celulă din listă poate eșua. Se poate înclina spre interior, ca un acordeon acordeon. Poate chiar scârțâie. Culoarea de fundal ar putea chiar să iasă din celulă ca un lichid. Pot continua pe termen nelimitat cu exemple vizuale, dar cred că ați înțeles deja despre ce este vorba; Multe valori pot fi codate cu mișcare și spațiu.
Interfețe cu designul spațial potrivit
Scorekeeper este destul de conceptual, dar are o treabă excelentă de focalizare. Se separă modurile și nu oferă utilizatorului un set de opțiuni umflat, prin care va trebui să treacă. Complexitatea se ascunde în spatele subinterferelor secundare și de ordinul al treilea. Fiecare subinterfață este la fel de simplă ca și părintele.
Tinder este cunoscut pentru utilizarea paradigmei cardului în interfața sa. Utilizatorul este prezentat cu un pachet infinit de carduri, care utilizează adâncimea de-a lungul axei z. Aruncați cartela de pe punte spre dreapta, dacă sunteți interesată de fată și ați plecat, dacă nu. În plus, dacă apăsați butonul "inimă" sau "x", cardul se învârte automat în partea corespunzătoare a ecranului, mărind astfel funcția de spațiu.
Și acesta este un model fizic, cinetic, foarte asemănător celui descris mai sus.
Ecranele secundare sunt de obicei plasate pe segmentul orizontal, ceea ce se reflectă în mișcarea de navigare: cascada descendentă la conținutul de mai jos. Un exemplu foarte bun al mișcării a reprezentat spațiul implicit.
Nu sunt sigur dacă acest lucru a fost intenționată, dar interfata corespondenta cu cei care vă place, este pe partea dreapta, cu aceeași oriunde ai aruncat cartela cu ți-a plăcut oamenii.
Modelul Tumblr este foarte simplu. Există mai multe spații conectate printr-o bară de file. Este ușor de vizualizat dacă vă imaginați interfața din punctul de vedere al camerei. Bara de instrumente permanentă ne urmează, ca și cum ar fi legată de camera prin care căutăm. Și, deși nu vedeți o mișcare detaliată de-a lungul axei x ca schimbări de spațiu (ca în Tinder), înseamnă un sentiment de spațiu pe ambele părți ale coloanelor.
Vederea de deasupra ne deschide o interfață în care este greu să ne pierdem. Câteva coloane înalte cu posibilitatea derulării și mai multe elemente spațiale suprapuse. Acest mecanism este bara de tab-ul poate fi găsit peste tot, inclusiv servicii, cum ar fi Instagram, Twitter, Foursquare, etc. Dar nici una dintre aceste interfețe nu este cu totul nou. Este interesant să folosiți un model compozit, care este lansat atingând pictograma cu un creion albastru. Nu contează unde o atingi, nu ești redirecționat către o nouă parte a interfeței, mai degrabă ni se pare o ofertă temporară într-o formă concentrată.
Modelul Facebook "Swapni pentru a închide"
Efectul clasic este "cutia luminoasă", dar nu numai. Faceți clic pe fotografie și va ieși în prim plan. Știrile împotriva fundalului se retrag și se întunecă. Glisați fotografia înapoi și ea va reveni la poziția inițială, iar vizualizarea originală a linkerului va fi din nou în focalizare. Este stabilă.
Interfețe cu design spațiale neglijent
Dacă dezasamblați aceste Frankensteins scumpe, puteți învăța multe.
Spotify, ce faci?
Aceasta este una dintre cele mai complicate în sensul spațial, cu toate acestea, software-ul este destul de popular printre utilizatori. Descrieți modul în care Spotify utilizează spațiu în interfața sa - este ca și cum ați descrie o bucată de fire. Te provoc: te poți schița în mod efectiv o schiță a acestei bucăți pe hârtie?
Nu am abordat chiar de la distanță pentru a se asigura că trece partea de interfață, în general, și induce în eroare utilizatorii Spotify se confruntă cu interfețe obscure carusel ascunse în interiorul moduri care umplu o listă, care, la rândul său, este condus în secțiunea care conține listele derulante , care se ascund în spatele gesturilor. Fiecare element din meniu „hamburger“ forțează utilizatorul să meargă pentru șapte verste slurp jeleu numai pentru a efectua acțiuni simple. Există un sentiment că, pentru a face ceva, trebuie să jucați "Alegeți o aventură".
Deși confuz, ca echipa generală de ingineri talentați și designeri ar putea crea o astfel de clădire monstruoasă, dacă te uiți la sistemele de valori Spotify în dezvoltarea de software, este puțin probabil să devină ceva pentru a fi surprins. O abordare holistică a creării de software a fost pur și simplu aruncată în afara ferestrei de dragul memelor nefondate care se află în cadrul companiei.
Din motive de justiție, trebuie spus că alte companii din sfera muzicii fac același lucru. Interfețele Apple Music și Rdio sunt la fel de insuportabile. Spațiul de aici nu are prea multă atenție sau chiar nu este plătit deloc.
Hârtie din aplicația Facebook
Această aplicație este prezentată pentru folosirea proprietăților fizice de primăvară și a animației extravagante, dar totul este minunat doar la prima vedere. Echipa de hârtie a creat câteva tehnologii reci și chiar a deschis codul sursă al aplicației. Este distractiv să rulezi de câteva ori și asta-i tot. Hârtia este o jucărie interactivă pentru copii pentru iPad, care a fost ulterior ușor modificată și introdusă într-un iPhone foarte mic. Ei bine, acesta este Push Pop Press, care a fost îngrămădit în Facebook.
Deplasarea poate dura mai mult de o zi. Primăvara după primăvară, după primăvară. Carduri care se desfășoară ca ziare noi. Meniul cel mai confuz este "hamburgerul" din întreaga lume. Totul aici este simulat și se mișcă de dragul stilului. Dar aceasta este o muncă absolut inutilă de muncă cinetică. Este foarte obositor să treacă prin cantitatea de spațiu fizic, care este descrisă în interfața, să nu mai vorbim de faptul că trebuie să avem în vedere modelul de interfață să vă amintiți unde vă aflați.
Acesta este un bun exemplu al faptului că programul a trecut prea departe.
Divertisment la bordul companiei Turkish Airlines
Cum pot evita o încurcătură de fire? Trebuie să ne îndepărtăm, să privim mai mult, literalmente. Așa cum am spus înainte, gândirea schematică ajută foarte mult în acest caz. Pur și simplu indicarea direcțiilor pe hartă duce la o călătorie mai puțin haotică prin spațiu.
Câteva sfaturi:- Fiți atent, combinând în caruselul dvs. de proiect, zona de defilare, creșterea și meniul "hamburger". Fiecare dintre aceste tehnici este o complexitate spațială.
Aici se înțelege un spațiu orizontal, dar este necesar ca ambele interfețe să călătorească o distanță imensă