Fisuele hiërargyprinsipes foar ûntwerpers

Fisuele hiërargyprinsipes foar ûntwerpers binne in ûntwerpkonsept dat wurdt brûkt om te lieden hoe't de eagen fan 'e sjogger troch in ûntwerp bewege en te bepalen hokker eleminten it wichtichste of visueel oansprekkend binne.

Yn it earstoan wiene der stiennen tablets, papyrusrôlen en papier. Doe kamen kompjûterskermen en elektroanyske tablets. As side-displaytechnology evoluearret, hawwe ûntwerpers in dúdlike manier om ynhâld te organisearjen. Mar wat is better? Koartsein , fisuele hierargy.

Hjir is de definysje fan fisuele hiërargy: Visual hiërargy is de regeling grafyske eleminten yn ûntwerp yn folchoarder fan belang fan elk elemint. Visuele gewicht bepaalt elemint belang yn 'e hiërargy fan it ûntwerp, fertelt de sjogger wêr't se moatte rjochtsje op en yn hokker folchoarder.

Boarnen foar ûntwerpers. 50 fergees

Dit wurdt in hieltyd wichtiger probleem, om't responsive kaders ûntwerpers twinge om te tinken oer in protte ferskillende siden tagelyk. Te krijen mei dichte tekst en koarte oandachtsspannen, ûntwikkele ûntwerpers 6 prinsipes om it each fan 'e lêzer te rjochtsjen nei de wichtichste ynformaasje.

Dizze 6 prinsipes fan fisuele hierargy sille jo helpe om alles te ûntwerpen, fan brosjueres oant apps, en soargje derfoar dat de einbrûker in positive lêsûnderfining hat foar ûntwerpers.

Alle kultueren wurde lêzen fan boppen nei ûnderen, en de measte kultueren wurde lêzen fan links nei rjochts. Mar hoewol't dizze kennis is wichtich foar side ûntwerp, ûntwerpers witte dat de taak folle dreger is.

Resinte stúdzjes hawwe oantoand dat minsken in side earst scannen om te sjen oft se deryn ynteressearre binne foardat se it lêze. Scan patroanen tend in nimme ien fan twa foarmen, "F" en "Z", en do kinst nimme foardiel fan dit yn jo ûntwerp.

F-Patroanen. Prinsipes fan Visual Hierarchy

F-sjabloanen tapasse op tradisjonele tekstsiden lykas artikels of blogposts. De lêzer scant de linkerkant de siden op syk nei nijsgjirrige kaaiwurden yn links rjochte kopteksten of earste ûnderwerpsinnen, stopet dan en lêst (rjochts) as hy of sy wat ynteressant tsjinkomt. It resultaat liket op in F (of in E, of wat mei noch mear horizontale strepen; mar de term "F" sit fêst).

Hoe kinne jo dit brûke? Rjochtsje wichtige ynformaasje nei lofts út en brûk koarte, fette kopteksten, kûgels en oare ferlykbere eleminten dy't oandacht krije om alineablokken op te brekken.

Z-model. Prinsipes fan Visual Hierarchy

Z-patroanen jilde foar oare soarten siden, lykas advertinsjes of websiden, dêr't ynformaasje net needsaaklik yn blokparagrafen presintearre wurdt. De lêzer scant earst de boppekant fan 'e side, wêr't wichtige ynformaasje wierskynlik te finen is, ferpleatst dan diagonaal nei de tsjinoerstelde hoeke en docht itselde oan 'e ûnderkant fan 'e side.

Webûntwerpers typysk ûntwerpe har siden om dit gedrach eksplisyt te passen, pleatse de wichtichste ynformaasje yn 'e hoeken en oriïntearje oare wichtige ynformaasje lâns de boppeste en ûnderste balken en ferbine de diagonaal.

Yn de ûndersteande Yn it ûntwerp fan 'e konferinsjegearkomste fan 2010 binne wichtige eleminten it logo (linksboppe), in knop "registrearje no" (rjochtsboppe), en in list mei sprekkers (ûnderoan), dy't strategysk pleatst binne yn moaie Z-patroanplakken.

2. Grutte saken. Prinsipes fan Visual Hierarchy
_

It is frij simpel: minsken lêze earst grutte dingen. As jo ​​​​eagen wurde oanlutsen nei "de prestaasjes" foardat jo "split" yn 'e advertinsje hjirûnder foar de Young Vic, moatte jo direkt kontakt opnimme mei in perceptuele psycholooch: jo kinne wierskynlik goed jild fertsjinje troch te testen as in seldsume anomaly.

Wat nijsgjirrich is is dat dizze oanstriid eins sterk genôch is om de top-down regel te fersmiten. Yn 'e boppesteande ôfbylding oerskriuwt "hack" "tiid om te hanneljen", om't it grutter is en nei lofts (dus de lofts nei rjochts regel helpt).

Mar op de folgjende side fan it jierferslach: Human Rights Campaign 2012 (ûntwikkele yn de fyfde mediakolom) lêze wy yn grutte lettertype "De striid foar gelikensens op it kampanjespoar" foar de tekst direkt boppe it "Election 2012." Prinsipes fan Visual Hierarchy

"Election 2012" is de folchoarder fan ynformaasje op it heechste nivo: it fertelt ús it algemiene tema wêrop de ynformaasje hjirûnder ferwiist. Mar de ûntwerper besleat dat de titel fan it artikel nijsgjirriger wie foar lêzers, en beoardiele it dêrom sa dat it earst lêzen wurde soe.

3. Romte en tekstuer. Prinsipes fan Visual Hierarchy

In oare manier om oandacht te krijen is jou ynhâld genôch romte om te sykheljen . As d'r signifikante negative romte is om 'e knop of de rigels yn it tekstblok wurde breed folge, sille dizze eleminten makliker sichtber wêze foar lêzers.

Lykas jo kinne sjen yn 'e ôfbylding hjirûnder (diel fan DrawtoClick's side), kin ôfstân in elegant alternatyf wêze as oanfolling op it brûken fan grutte. Hjir is it ferkeappunt, "Notre agence vouscompagne ...", skreaun yn heul lytse letters, mar it wurdt omjûn troch in oerfloed fan wite romte, wat it belang oanjout. Hjirûnder krije de útdrukkingen "Le Compendre", "Le Réaliser" en "Le Partager" ekstra klam, los fan 'e omlizzende romte.

As minsken prate oer "tekstuer" yn relaasje ta fisuele hierargy, bedoele se net de grafyske effekten fan tekstuer. Dit soarte fan "tekstuer" ferwiist leaver nei de algemiene arranzjemint of struktuer fan romte, tekst en oare details op in side. Dit foarbyld fan Bright Pink yllustrearret it konsept goed:

Yn it earste byld stiet it wurd "Sport" heger yn 'e hiërargy as "badminton", om't it heger, grutter en dryster is. Yn ôfbylding 2 binne de twa wurden sawat lykweardich, tanksij it swarte rjochthoeke dat "badminton" opfalt en it yn syn eigen romte set.

Yn 'e tredde ôfbylding ûnderbrekt de eftergrûnskribbel de "Sport" romte, mar net de "badminton" romte, en dêrom resultearret yn in omkearing dêr't "badminton" is it heechste yn de hiërargy. Dizze ûntwikkeling is dreech te foarsizzen, sadat ûntwerpers it faaks assosjearje mei in holistysk gefoel fan "tekstuer".

4. Lettertype gewicht en pairing. Prinsipes fan Visual Hierarchy

Lettertype seleksje is kritysk foar it fêststellen fan fisuele hierargy. Under de wichtichste attributen fan in lettertype binne gewicht, de breedte fan de streken dy't de letters foarmje, en styl, lykas serif en sans serif. Oare oanpassings, lykas kursyf, kinne ek in rol spylje.

Merk op hoe headset beynfloedet de folchoarder fan 'e wurdhiërargy yn it ûndersteande webûntwerp foar The Tea Factory: "perfekte teas om jo te helpen op te warmen" is de namme fan it spul, mar ferskillen yn lettertypegewicht en kursyf, neist wurd pleatsing, meitsje in mear dynamysk, minder lineêr, lêsûnderfining. "://azbyka.com.ua/foto/tea-factory.jpg" />

Yn guon gefallen is it doel om in ferskaat oan ynformaasje as like driuwend te presintearjen. It ynstellen fan elkenien op deselde grutte en gewicht sil lykweardigens soargje, mar sil it ek ientoanich meitsje. Lettertypedifferinsjaasje is ien manier om dit te foarkommen, lykas de omslach fan it tydskrift Trendi hjirûnder. Prinsipes fan Visual Hierarchy

It tarieden fan in brosjuere foar printsjen.

Hjir binne de fiif teasers om 'e perifery fan' e side itselde yn hiërargy, mar berikke ferskaat troch twa goed keppele lettertypen te feroarjen - ien in middelgewicht serif en de oare in ljocht, mar heech sans-serif.

5. Kleur en skaad. 

Hjir is in oare no-brainer: heldere kleuren steane út fan gedempte kleuren of skaden fan griis, wylst lichtere skaden mear "fierder" ferskine en sa leger yn 'e hiërargy falle as rikere, donkere skaden. De webside Where Are They kontrasteart fel ljocht en kleurde efterljochting mei in swart-wyt rastereffekt oan it effekt fan ljochtens:

De webside fan Guggenheim brûkt kleur om wichtige ynformaasje te beklamjen, lykas lokaasjeseleksje, in list mei tentoanstellingen dy't op it stuit wurde besjoen, en keppelings nei spesjale tentoanstellingen. Prinsipes fan Visual Hierarchy

Bêste lettertype foar oanpaste ferpakking

De webside fan Whitney Museum, oan 'e oare kant, stelt in hiërargy yn binnen ien lettertype, gewicht en toan (swart) mei tint (wat betsjut dat wyt tafoegje oan' e basistoan, wêrtroch it lichter wurdt). "Cory Archangel on Pop Culture" is dúdlik ûnder "New on Whitney Stories" yn 'e fisuele hiërargy, net allinich om't it leger is, mar ek om't syn skaad lichter is, wêrtroch it minder opfallend is tsjin de wite eftergrûn. Prinsipes fan Visual Hierarchy

Kleur hat in spesjale betsjutting yn mobile ûntwerp applikaasjes wêr't lytse skermgrutte jo fermogen beheint om oare strategyen te brûken lykas grutte fariaasje en brede ôfstân. Yn 'e Grainger Industrial Supply-app is de knop "Gean nei kassa" read kleurd, wêrtroch it op elke side opfalt wêr't it ferskynt. It paniel Narrow Search Results is, yn tsjinstelling, griis, wêrtroch it yn 'e hiërargy sawat lykweardich is oan oare eleminten lykas de sykbalke en produktkeppelings.

6. Rjochting foar ûntwerpers.

Side-yndielingen wurde normaal ûntworpen om in raster fan fertikale en horizontale rigels te folgjen, sawol troch konvinsje as om't it it meast lêsbere formaat is. Yn sa'n systeem is d'r in nije manier om hiërargy te fêstigjen: it raster brekke.

Tekst dy't lâns in kromme of diagonaal is pleatst, stiet automatysk út tsjin de omlizzende grid-blokkeare tekst, en nimt it sintrum. Dit is al lang in effektive strategy yn reklame, lykas de bushalteposter fan Frost Design.