Design Trender: Flat Design 2.0
Flat design har tatt designverdenen med storm i de få årene den har eksistert, men ingen designbevegelse forblir 100% ren til sine røtter og idealer. Det er akkurat det som skjer med flat design: Det er etter hvert sett subtile men meningsfulle endringer i den opprinnelige iterasjonen.
Disse endringene var nok til å få seere og eksperter dubbe den nye iterasjonen som Flat Design 2.0. 2.0 er veldig interessant fordi det oppdager en fin balanse mellom bare nok forandringer for å endre brukeropplevelsen og holde seg til de opprinnelige prinsippene.
Utviklingen av Flat i 2.0 var uunngåelig, selv om: Som designere ble mer komfortable med Flat, kunne de se at for all sin popularitet, Noen problemer ble ikke adressert riktig . Og nå har vi 2,0 for å løse noen av disse manglene.
Origins of Flat Design
Se på flat design som et slags opprør mot den så populære designstilen til skeuomorphism . Den stod på 3D-effekter for å kopiere eiendomsegenskapene til 3D-objekter som en måte å bruke kjennskap til for å hjelpe brukeropplevelsen. For eksempel, i første iterasjoner av Amazonas Kindle Fire, var det en 3D-bokhylle i bakgrunnen for å styrke formålet med tabletten for å lese.
Da Apple, en stor proponent av skeuomorphic design, bestemte seg for å forlate skeuomorphism i 2012, ble det satt en full sving til flat, som har vært svært populær de siste årene. Dens vekt på minimalisme har også bidratt til å drive den til sin nåværende ubiquity.
Flat er preget av mangel på:
- hevet elementer som betyr at brukerne kan klikke på dem;
- hule eller sunkne elementer som betyr at brukerne kan fylles (tenk søkefelt og andre innfeltfelt).
Overgang til 2,0
Til tross for flatens suksess begynte noen designere å legge merke til legitime feil som ikke ble adressert i designmiljøet. Mens flat fikk mye damp på grunn av sin velkomne minimalisme, gikk det litt for langt i den stramme retningen. Egenskapene til noen 3D-effekter viste seg å være for store og påvirket brukeropplevelsen negativt.
Således var det uunngåelig at en annen endring ville oppstå. Det er her vi er i dag med daggry av flat design 2.0.
Flat Design er brukervennlighetsproblemer
Alle flatens bruksproblemer kan oppsummeres i følgende erklæring: Flat vanligvis handler i brukernes behov for hoftestetikk.
Med andre ord, designere som designer for et grensesnitt å være "flatt", legger større vekt på å holde ting minimal, ikke-3D og levende / dristig i stedet for å sette brukeropplevelsen først. Det er vanligvis der alle dårlige ting i designverdenen starter, og det er derfor flat har utviklet seg til 2,0.
Her er de vanlige bruksproblemer med flat:
- fravær av alle viktige signifikatorer (gradienter, skygger, understreker, etc.);
- Fravær av kjente mønstre (blå, understreket tekst for lenker, etc.);
- fravær av kontekstuelle indikasjoner (CTA plassering, handlingsbar kopi, etc.).
Kanskje det mest beryktede eksempelet i nyere minne om alle flatens bruksproblemer var Microsofts utgivelse av Windows 8, med den såkalte Metro UI. Det designet var epitome av flat fordi alt var flatt til ekstreme.
De Brukeropplevelsen var så dårlig fordi en helt flat design betyr at brukerne ikke blir gitt de nødvendige leddene for å fortelle dem hva som kan klikkes og hva som ikke kan være på et grensesnitt. Som et resultat, er brukerne naturligvis tvunget til å bruke ekstra tid på å finne ut dette ved eksperimentering eller, værre enn, utføre handlinger ut av feil som de ikke vil ha i utgangspunktet!
Som du ser, er Windows 8-skjermen så flat at det er umulig for folk å fortelle hva du skal klikke og hva du ikke skal klikke på. Selv om brukerne allerede er kjent med grunnleggende navigeringsnavigasjon, betyr det ikke at det er en god ide å fjerne alle signifikanter (ledetråder som forteller brukerne at de kan samhandle med sideelementer) og hint på affordances (indikasjoner på hvordan brukerne kan samhandle med sideelementer).
Gode eksempler på Flat Design 2.0
2.0 er en subtil endring eller forbedring over flat, så det kan ta mer konsentrasjon for å se sann 2,0 på nettsteder og grensesnitt. Det er derfor vi skal gå gjennom noen nåværende, store eksempler på 2.0 som allerede er i full drift.
Dropbox Guide
Dropbox's guide kan i første omgang se veldig flatt ut, men hvis du ser nærmere, ser du 3D-forslag som klart kommuniserer til brukerne om at enkelte elementer blir hevet over andre. Dette er først og fremst tydelig på bilder av guttens hode (på venstre side) og skrutrekkere (på høyre side). Begge bildene har sterke, men subtile, svarte grenser, som kommuniserer dybde og inntrykk av at de sitter på toppen av bakgrunnen i stedet for å blande seg inn i den.
Tolia Ice Cream
Tolias nettsted er full av subtile, hevede effekter som gir det tydelige inntrykket av 3D, mens den overordnede designen fortsatt er flat og minimal. Det hevede inntrykket finnes i overskriften, underoverskriften og beskrivelsen (dvs. sideeksemplaret). Den er også tilstede i Call to Action-knappen og CTA-kopien inne i knappen. Du kan takke den subtile bruken av fine skygger rundt kantene på disse elementene for å gi dette hevet inntrykk.
Google Santa Tracker
Ikke overraskende er Google på 2.0-vognen, og dens Santa Tracker Siden viser hvordan man kan integrere 2.0 på en morsom og nyttig måte. Finesser på 2,0 er florerer på siden i alt fra gradienter og skygger på de ulike bygningene og popup-boblene (når brukerne svinger på en bygning) til overskriftens 3D-inntrykk øverst på siden.
Publicis Groupe
Publicis Groupe s 90-årsjubileumssiden har 2,0 innflytelse på en ganske åpenbar måte. Hvis du ser på venstre side av siden, ser du kombinasjonen av skygger og gradienter kommer ned og stråler utover fra den bleke sirkelen og den blå delen under den. Den sterke minimalismen indikerer også at designens æstetikk fortsatt er sterkt forankret i ren flat.
Jumeirah
Denne siden for et luksushotell i De forente arabiske emirater domineres for det meste av gigantisk video i bakgrunnen, men ikke la det distrahere deg fra å ta i finessen av sitt 2,0-bidrag. "Jumeirah Inside" overskriften har oh-så-subtil skyggelegging som med hell gir inntrykk av 3D, mens du fortsatt beholder det overordnede, flate utseendet.
En evolusjon etter etterspørsel
I designverdenen endres det vanligvis fordi det er en etterspørsel etter det. Noen vil legge merke til at noe mangler og finne en måte å forbedre ting på, eller noen andre vil ta et konsept og ta det til et annet nivå som logisk bygger på et bestemt konsept.
Så langt som 2,0 går, er det definitivt en kombinasjon av begge, da flatens bruksvanskeligheter er løst ved å utvide det opprinnelige konseptet på en måte som fortsatt erkjenner prinsippene om minimalisme som flat er definert av.