Visuelle hierarkiprincipper for designere er et designkoncept, der bruges til at guide, hvordan beskuerens øjne bevæger sig gennem et design og bestemme, hvilke elementer der er vigtigst eller visuelt tiltalende.
Først var der stentavler, papyrusruller og papir. Så kom computerskærme og elektroniske tablets. Efterhånden som sidevisningsteknologien udvikler sig, står designere tilbage med en klar måde at organisere indhold på. Men hvad er bedre? Kort sagt , visuelt hierarki.
Her er definitionen af visuelt hierarki: Visuelt hierarki er arrangementet grafiske elementer i design i rækkefølge efter vigtighed af hvert element. Visuel vægt bestemmer elementets betydning i designets hierarki, fortæller seeren, hvad den skal fokusere på og i hvilken rækkefølge.
Ressourcer til designere. 50 gratis
Dette bliver et stadig vigtigere emne, da responsive rammer tvinger designere til at tænke på mange forskellige sider på én gang. Stillet over for tæt tekst og korte opmærksomhedsspænd udviklede designere 6 principper til at rette læserens øje mod den vigtigste information.
Disse 6 principper for visuelt hierarki hjælper dig med at designe alt fra brochurer til apps, hvilket sikrer, at slutbrugeren får en positiv læseoplevelse for designere.
Alle kulturer læses fra top til bund, og de fleste kulturer læses fra venstre mod højre. Men selvom denne viden er vigtig for sidedesign, designere ved, at opgaven er meget vanskeligere.
Nylige undersøgelser har vist, at folk scanner en side først for at se, om de er interesseret i den, før de læser den. Scanningsmønstre har en tendens til at have en af to former, "F" og "Z", og du kan drage fordel af dette i dit design.
F-mønstre. Principper for visuelt hierarki
F-skabeloner gælder for traditionelle tekstsider såsom artikler eller blogindlæg. Læseren scanner venstre side side leder efter interessante søgeord i venstrestillede overskrifter eller indledende emnesætninger, og stopper derefter og læser (til højre), når han eller hun støder på noget interessant. Resultatet ligner et F (eller et E, eller noget med endnu flere vandrette striber; men udtrykket "F" sidder fast).
Hvordan kan du bruge dette? Juster vigtig information til venstre og brug korte, fede overskrifter, punkttegn og andre lignende opmærksomhedsfangende elementer til at opdele afsnitsblokke.
Z-model. Principper for visuelt hierarki
Z-mønstre gælder for andre typer sider, såsom annoncer eller hjemmesider, hvor information ikke nødvendigvis præsenteres i blokafsnit. Læseren scanner først toppen af siden, hvor vigtig information sandsynligvis vil blive fundet, flytter derefter til det modsatte hjørne diagonalt og gør det samme nederst på siden.
Webdesignere designer typisk deres sider, så de eksplicit matcher denne adfærd, placerer de vigtigste oplysninger i hjørnerne og orienterer andre vigtige oplysninger langs de øverste og nederste bjælker og forbinder diagonalen.
I nedenstående I udformningen af konferencen 2010 er logoet vigtige elementer (øverst til venstre), en "registrer nu"-knap (øverst til højre) og en liste over højttalere (nederst), som er strategisk placeret i flotte Z-mønstrede pletter.
2. Størrelse betyder noget. Principper for visuelt hierarki
_
Det er ganske enkelt: folk læser store ting først. Hvis dine øjne er tiltrukket af "forestillingen", før du "splitter" ind i annoncen nedenfor for Young Vic, bør du kontakte en perceptuel psykolog med det samme: du kunne sikkert tjene gode penge ved at blive testet som en sjælden anomali.
Det interessante er, at denne tendens faktisk er stærk nok til at afvise top-down-reglen. I ovenstående billede tilsidesætter "hack" "tid til at handle", fordi det er større og til venstre (så venstre mod højre-reglen hjælper).
Men på næste side af årsrapporten: Menneskerettighedskampagnen 2012 (udviklet i den femte mediespalte) læser vi i stort skrifttype "Kampen for ligestilling på kampagnesporet" før teksten direkte over "Valget 2012." Principper for visuelt hierarki
"Valg 2012" er den højeste informationsrækkefølge: den fortæller os det generelle tema, som oplysningerne nedenfor vedrører. Men designeren besluttede, at artiklens titel var mere interessant for læserne, og vurderede den derfor, så den ville blive læst først.
3. Rum og tekstur. Principper for visuelt hierarki
En anden måde at få opmærksomhed på er give indhold nok plads til at trække vejret . Hvis der er betydelig negativ plads omkring knappen, eller linjerne i tekstblokken følges bredt, vil disse elementer være lettere synlige for læserne.
Som du kan se på billedet nedenfor (en del af DrawtoClicks side), kan mellemrum være et elegant alternativ eller et supplement til at bruge størrelse. Her er salgsargumentet, "Notre agence vouscompagne...", skrevet med meget småt, men det er omgivet af en overflod af hvidt rum, hvilket indikerer dets betydning. Nedenfor får sætningerne "Le Compendre", "Le Réaliser" og "Le Partager" yderligere vægt, idet de er løsrevet fra det omgivende rum.
Når folk taler om "tekstur" i forhold til visuelt hierarki, mener de ikke de grafiske effekter af tekstur. Denne type "tekstur" refererer snarere til det overordnede arrangement eller struktur af rum, tekst og andre detaljer på en side. Dette eksempel fra Bright Pink illustrerer konceptet godt:
På det første billede er ordet "Sport" højere i hierarkiet end "badminton", fordi det er højere, større og dristigere. På billede 2 er de to ord nogenlunde ækvivalente, takket være det sorte rektangel, der får "badminton" til at skille sig ud og sætter det i sit eget rum.
På det tredje billede afbryder baggrundsskribleringen "Sports"-rummet, men ikke "badminton"-rummet, og resulterer derfor i en vending, hvor "badminton" er det højeste i hierarkiet. Denne udvikling er svær at forudsige, så designere forbinder den ofte med en holistisk følelse af "tekstur".
4. Skrifttypevægt og parring. Principper for visuelt hierarki
Skrifttypevalg er afgørende for at etablere visuelt hierarki. Blandt de vigtigste egenskaber ved en skrifttype er vægt, bredden af streg, der udgør dens bogstaver, og stil, såsom serif og sans serif. Andre modifikationer, såsom kursiv, kan også spille en rolle.
Læg mærke til hvordan headset påvirker rækkefølgen af ordhierarkiet i webdesignet nedenfor for The Tea Factory: "perfekte teer til at hjælpe dig med at varme op" er navnet på spillet, men forskelle i skrifttypevægt og kursiv, udover ordplacering, skaber en mere dynamisk, mindre lineær læseoplevelse. "://azbyka.com.ua/foto/tea-factory.jpg" />
I nogle tilfælde er målet at præsentere en række informationer som lige så presserende. At indstille alle til samme størrelse og vægt vil sikre ækvivalens, men vil også få det til at se monotont ud. Fontdifferentiering er en måde at undgå dette på, som Trendi-magasinets forside nedenfor. Principper for visuelt hierarki
Udarbejdelse af en brochure til trykning.
Her er de fem teasere i periferien af siden ens i hierarkiet, men opnår variation ved at ændre to godt parrede skrifttyper – den ene en mellemvægtig serif og den anden en let, men høj sans-serif.
5. Farve og nuance.
Her er endnu en no-brainer: lyse farver skiller sig ud fra dæmpede farver eller grå nuancer, mens lysere nuancer virker mere "fjerne" og dermed falder lavere i hierarkiet end rigere, mørkere nuancer. Where Are They-webstedet kontrasterer skarpt lys og farvet baggrundsbelysning med en sort-hvid gittereffekt til effekten af lysstyrke:
Guggenheim-webstedet bruger farver til at understrege vigtig information såsom valg af placering, en liste over udstillinger, der ses i øjeblikket, og links til særudstillinger. Principper for visuelt hierarki
Bedste skrifttype til tilpasset emballage
Whitney Museums hjemmeside etablerer på den anden side et hierarki inden for én skrifttype, vægt og tone (sort) ved hjælp af farvetone (hvilket betyder at tilføje hvid til grundtonen, hvilket gør den lettere). "Cory Archangel on Pop Culture" er klart under "New on Whitney Stories" i det visuelle hierarki, ikke kun fordi den er lavere, men også fordi dens nuance er lysere, hvilket gør den mindre iøjnefaldende mod den hvide baggrund. Principper for visuelt hierarki
Farve har en særlig betydning i mobilt design applikationer, hvor lille skærmstørrelse begrænser din mulighed for at bruge andre strategier såsom størrelsesvariation og bred afstand. I Grainger Industrial Supply-appen er knappen "Fortsæt til kassen" farvet rød, så den skiller sig ud på enhver side, hvor den vises. Panelet Snævre søgeresultater er derimod gråt, hvilket gør det nogenlunde ækvivalent i hierarkiet med andre elementer såsom søgelinjen og produktlinks.
Applikationsdesign til Grainger
6. Retning til designere.
Sidelayouts er normalt designet til at følge et gitter af lodrette og vandrette linjer, både efter konvention, og fordi det er det mest læselige format. I et sådant system er der en ny måde at etablere hierarki på: at bryde nettet.
Tekst, der er placeret langs en kurve eller diagonal, skiller sig automatisk ud mod den omgivende gitter-blokerede tekst, og kommer i centrum. Dette har længe været en effektiv strategi i reklamer, såsom Frost Designs busstoppestedsplakat.
Efterlad en kommentar