Visuell Hierarchie Prinzipien fir Designer

Visuell Hierarchieprinzipien fir Designer sinn en Designkonzept dat benotzt gëtt fir ze guidéieren wéi d'Ae vum Betrachter duerch en Design bewegen a bestëmmen wéi eng Elementer am wichtegsten oder visuell attraktiv sinn.

Am Ufank waren et Steenpëllen, Papyrusrullen a Pabeier. Duerno koumen Computerbildschirmer an elektronesch Pëllen. Wéi d'Säit Display Technologie evoluéiert, sinn Designer e klore Wee fir Inhalt ze organiséieren. Awer wat ass besser? Kuerz gesot , visuell Hierarchie.

Hei ass d'Definitioun vu visueller Hierarchie: Visuell Hierarchie ass d'Arrangement grafesch Elementer am Design an der Reiefolleg vun der Wichtegkeet vun all Element. Visuell Gewiicht bestëmmt Element Wichtegkeet an der Hierarchie vum Design, sot de Betrachter op wat ze fokusséieren an a wéi enger Reiefolleg.

Ressourcen fir Designer. 50 fräi

Dëst gëtt en ëmmer méi wichteg Thema well reaktiounsfäeger Kaderen Designer zwéngen iwwer vill verschidde Säiten gläichzäiteg ze denken. Konfrontéiert mat dichten Text a kuerzen Opmierksamkeetsspann hunn Designer 6 Prinzipien entwéckelt fir de Lieser op déi wichtegst Informatioun ze riichten.

Dës 6 Prinzipien vun der visueller Hierarchie hëllefen Iech alles vu Broschüren bis Apps ze designen, fir datt den Endbenotzer eng positiv Lieserfarung fir Designer huet.

All Kulture gi vun uewe bis ënnen gelies, an déi meescht Kulture gi vu lénks op riets gelies. Mä obwuel dëst Wëssen wichteg ass fir Säit Design, Designer wëssen datt d'Aufgab vill méi schwéier ass.

Rezent Studien hu gewisen datt d'Leit eng Säit als éischt scannen fir ze kucken ob se drun interesséiert sinn ier se se liesen. Scan Musteren éischter eng vun zwou Formen ze huelen, "F" an "Z", an Dir kënnt Virdeel vun dëser an Ärem Design huelen.

F-Muster. Prinzipien vun der visueller Hierarchie

F-Schablounen gëllen op traditionell Textsäiten wéi Artikelen oder Blogposten. De Lieser scannt déi lénks Säit Säiten sicht interessant Schlësselwierder a lénks ausgeriichtte Rubriken oder initial Themen Sätz, stoppt dann a liest (no riets) wann hien oder hatt eppes Interessantes begéint. D'Resultat gesäit aus wéi e F (oder en E, oder eppes mat nach méi horizontalen Streifen; awer de Begrëff "F" huet festgehalen).

Wéi kënnt Dir dëst benotzen? Alignéiert wichteg Informatioun no lénks a benotzt kuerz, fett Rubriken, Kugelen an aner ähnlech opmierksam Elementer fir Paragrapheblocken opzebriechen.

Z-Modell. Prinzipien vun der visueller Hierarchie

Z-Muster gëlle fir aner Aarte vu Säiten, wéi Annoncë oder Websäiten, wou Informatioun net onbedéngt a Blockabschnitte presentéiert gëtt. De Lieser scannt als éischt d'Spëtzt vun der Säit, wou wichteg Informatioune méiglecherweis fonnt ginn, bewegt sech dann diagonal an de entgéintgesaten Eck a mécht datselwecht um Enn vun der Säit.

Webdesigner designen normalerweis hir Säiten fir explizit mat dësem Verhalen ze passen, déi wichtegst Informatioun an den Ecker ze setzen an aner wichteg Informatioun laanscht déi iewescht an ënnen Baren ze orientéieren an d'Diagonal ze verbannen.

An der ënnen Am Design vun der Konferenzversammlung 2010 sinn wichteg Elementer de Logo (uewen lénks), e "Registréiert elo" Knäppchen (uewen riets), an eng Lëscht vun de Spriecher (ënnen), déi strategesch a flotten Z-Muster Flecken plazéiert sinn.

2. Gréisst wichteg. Prinzipien vun der visueller Hierarchie
_

Et ass ganz einfach: d'Leit liesen als éischt grouss Saachen. Wann Är Ae op "d'Performance" gezunn sinn ier Dir an d'Annonce hei ënnen fir de Young Vic "opdeelt", sollt Dir direkt e Perceptuelle Psycholog kontaktéieren: Dir kënnt wahrscheinlech gutt Sue verdéngen andeems Dir als selten Anomalie getest gëtt.

Wat interessant ass, ass datt dës Tendenz tatsächlech staark genuch ass fir d'Top-down Regel ze refuséieren. Am uewe genannte Bild iwwerschreift "Hack" "Zäit fir ze handelen", well et méi grouss ass a lénks ass (also hëlleft d'lénks op riets Regel).

Awer op der nächster Säit vum Annual Report: Human Rights Campaign 2012 (entwéckelt an der fënnefter Medienkolonn) liese mir am grousse Schrëft "De Kampf fir Gläichheet um Campagne Trail" virum Text direkt uewen "Walen 2012." Prinzipien vun der visueller Hierarchie

"Wahlen 2012" ass den héchsten Niveau vun Informatioun: et erzielt eis dat allgemengt Thema op deem d'Informatioun hei drënner bezunn ass. Awer den Designer huet decidéiert datt den Titel vum Artikel méi interessant ass fir d'Lieser, an huet et dofir bewäert, datt et als éischt gelies gëtt.

3. Raum an Textur. Prinzipien vun der visueller Hierarchie

Eng aner Manéier fir Opmierksamkeet ze kréien ass ginn Inhalt genuch Plaz ze otmen . Wann et bedeitend negativ Plaz ronderëm de Knäppche gëtt oder d'Linnen am Textblock wäit verfollegt ginn, wäerten dës Elementer méi liicht fir d'Lieser sichtbar sinn.

Wéi Dir am Bild hei ënnen gesitt (Deel vum DrawtoClick Site), Abstand kann eng elegant Alternativ sinn oder Ergänzung fir d'Gréisst ze benotzen. Hei ass de Verkafspunkt, "Notre agence vouscompagne...", ganz kleng geschriwwen, awer et ass vun engem Iwwerfloss vu Wäissraum ëmgi, wat seng Wichtegkeet ugeet. Ënnendrënner kréien d'Ausdréck "Le Compendre", "Le Réaliser" an "Le Partager" zousätzlech Akzent, déi vun der Ëmgéigend ofgeschnidden sinn.

Wann d'Leit iwwer "Textur" a Relatioun mat der visueller Hierarchie schwätzen, mengen se net déi grafesch Effekter vun der Textur. Éischter bezitt dës Zort "Textur" op d'Gesamtarrangement oder Struktur vum Raum, Text an aner Detailer op enger Säit. Dëst Beispill vu Bright Pink illustréiert d'Konzept gutt:

Am éischte Bild ass d'Wuert "Sport" méi héich an der Hierarchie wéi "Badminton", well et méi grouss, méi grouss a méi fett ass. Am Bild 2 sinn déi zwee Wierder ongeféier gläichwäerteg, dank dem schwaarze Rechteck, deen "Badminton" erausstécht an et an säin eegene Raum setzt.

Am drëtte Bild ënnerbrach d'Hannergrond-Kräbbelen den "Sports"-Raum awer net de "Badminton"-Raum, a resultéiert dofir zu engem Réckgang wou "Badminton" am héchsten an der Hierarchie ass. Dës Entwécklung ass schwéier virauszesoen, sou datt Designer et dacks mat engem holistesche Sënn vun "Textur" associéieren.

4. Schrëft Gewiicht a Pairen. Prinzipien vun der visueller Hierarchie

Schrëftauswiel ass kritesch fir visuell Hierarchie opzebauen. Zu de wichtegsten Attributer vun enger Schrëft sinn d'Gewiicht, d'Breet vun de Strichen, déi seng Buschtawen ausmaachen, a Stil, wéi Serif a Sans Serif. Aner Ännerungen, wéi Kursiv, kënnen och eng Roll spillen.

Notéiert wéi Headset beaflosst d'Uerdnung vun der Wuerthierarchie am Webdesign hei ënnen fir The Tea Factory: "perfekt Téi fir Iech ze waarm ze hëllefen" ass den Numm vum Spill, awer Differenzen am Schrëftgewiicht an Kursiv, zousätzlech zu Wuertplazéierung, kreéieren e méi dynamesch, manner linear, liesen Erfahrung. "://azbyka.com.ua/foto/tea-factory.jpg" />

A verschiddene Fäll ass d'Zil eng Vielfalt vun Informatioun als gläich dréngend ze presentéieren. Jiddereen op déiselwecht Gréisst a Gewiicht ze setzen wäert d'Equivalenz garantéieren, awer och monoton maachen. Schrëftdifferenzéierung ass ee Wee fir dëst ze vermeiden, sou wéi den Trendi Magazin Cover hei drënner. Prinzipien vun der visueller Hierarchie

Preparéieren eng Broschür fir Dréckerei.

Hei sinn déi fënnef Teaser ronderëm d'Peripherie vun der Säit d'selwecht an der Hierarchie, awer erreechen Varietéit andeems Dir zwee gutt gepaart Schrëften ännert - eent e mëttlere Gewiicht Serif an deen aneren e liicht awer grouss sans-serif.

5. Faarf a Schatt. 

Hei ass eng aner No-Brainer: hell Faarwen ënnerscheeden sech aus gedämpfte Faarwen oder Schatten vu gro, während méi hell Nuancen méi "fernt" schéngen an domat méi niddereg an der Hierarchie falen wéi méi räich, däischter Nuancen. D'Where Are They Websäit kontrastéiert hell Liicht a faarweg Beleuchtung mat engem schwaarz-wäiss Gittereffekt zum Effekt vun der Liichtkraaft:

D'Guggenheim Websäit benotzt Faarf fir wichteg Informatioun ze ënnersträichen wéi Plazauswiel, eng Lëscht vun Ausstellungen déi aktuell gekuckt ginn, a Linken op speziell Ausstellungen. Prinzipien vun der visueller Hierarchie

Bescht Schrëft fir Benotzerdefinéiert Verpackung

D'Websäit vum Whitney Museum, op der anerer Säit, etabléiert eng Hierarchie bannent enger Schrëft, Gewiicht an Ton (schwaarz) mat Tint (wat heescht datt d'Wäiss zum Basistoun bäigefüügt gëtt, et méi hell mécht). "Cory Archangel on Pop Culture" ass kloer ënner "New on Whitney Stories" an der visueller Hierarchie, net nëmme well se méi niddereg ass, awer och well säi Schiet méi hell ass, wat et manner opfälleg géint de wäissen Hannergrond mécht. Prinzipien vun der visueller Hierarchie

Faarf huet eng speziell Bedeitung an mobilen Design Uwendungen wou kleng Écran Gréisst limitéiert Är Fähegkeet aner Strategien ze benotzen wéi Gréisst Variatioun a breet Abstand. An der Grainger Industrial Supply App ass de "Proceed to Checkout" Knäppchen rout faarweg, sou datt et op all Säit erausstécht wou et erschéngt. D'Narrow Search Results Panel, am Géigesaz, ass gro, sou datt et an der Hierarchie ongeféier gläichwäerteg ass mat aneren Elementer wéi d'Sichbar a Produktlinks.

6. Richtung fir Designer.

Säit Layouten sinn normalerweis entwéckelt fir e Gitter vu vertikalen an horizontalen Linnen ze verfollegen, souwuel duerch Konventioun a well et dat liesbarst Format ass. An esou engem System gëtt et en neie Wee fir d'Hierarchie opzebauen: d'Gitter briechen.

Text, deen laanscht eng Kéirung oder Diagonal positionéiert ass, steet automatesch géint den Ëmgéigend Gitter-blockéierten Text eraus, an hëlt d'Mëtt. Dëst ass scho laang eng efficace Strategie an der Reklamm, sou wéi dem Frost Design säi Busarrêt Affiche.