Visuaalisen hierarkian periaatteet suunnittelijoille

Visuaalisen hierarkian periaatteet suunnittelijoille ovat suunnittelukonsepti, jota käytetään ohjaamaan, miten katsojan silmät liikkuvat suunnittelussa ja määrittävät, mitkä elementit ovat tärkeimpiä tai visuaalisesti houkuttelevimpia.

Aluksi siellä oli kivitauluja, papyruskääröjä ja paperia. Sitten tulivat tietokonenäytöt ja elektroniset tabletit. Sivun näyttötekniikan kehittyessä suunnittelijoille jää selkeä tapa järjestää sisältöä. Mutta kumpi on parempi? Lyhyesti sanottuna , visuaalinen hierarkia.

Tässä on visuaalisen hierarkian määritelmä: Visuaalinen hierarkia on järjestely graafisia elementtejä suunnittelussa kunkin elementin tärkeysjärjestyksessä. Visuaalinen paino määrää elementin tärkeys suunnittelun hierarkiassa kertomalla katsojalle, mihin keskittyä ja missä järjestyksessä.

Resursseja suunnittelijoille. 50 ilmaiseksi

Tästä on tulossa yhä tärkeämpi kysymys, kun responsiiviset puitteet pakottavat suunnittelijat ajattelemaan useita eri sivuja kerralla. Tiheän tekstin ja lyhyiden huomiovälien edessä suunnittelijat kehittivät kuusi periaatetta ohjatakseen lukijan katseen tärkeimpään tietoon.

Nämä kuusi visuaalisen hierarkian periaatetta auttavat sinua suunnittelemaan kaikkea esitteistä sovelluksiin ja varmistamaan, että loppukäyttäjällä on suunnittelijoille positiivinen lukukokemus.

Kaikki kulttuurit luetaan ylhäältä alas, ja useimmat kulttuurit luetaan vasemmalta oikealle. Mutta vaikka tämä tieto on tärkeää sivun suunnittelu, suunnittelijat tietävät, että tehtävä on paljon vaikeampi.

Viimeaikaiset tutkimukset ovat osoittaneet, että ihmiset skannaavat sivun ensin nähdäkseen, ovatko he siitä kiinnostuneita, ennen kuin lukevat sen. Skannauskuvioilla on yleensä toinen muoto, "F" ja "Z", ja voit hyödyntää tätä suunnittelussasi.

F-kuviot. Visuaalisen hierarkian periaatteet

F-mallit Käytä perinteisiä tekstisivuja, kuten artikkeleita tai blogiviestejä. Lukija skannaa vasemman puolen sivu etsii mielenkiintoisia avainsanoja vasemmalle tasatuista otsikoista tai aloitusaiheista, pysähtyy sitten ja lukee (oikealle), kun hän löytää jotain mielenkiintoista. Tulos näyttää F-kirjaimelta (tai E:ltä tai joltakin, jossa on vielä enemmän vaakajuovia; mutta termi "F" jäi kiinni).

Kuinka voit käyttää tätä? Tasaa tärkeät tiedot vasemmalle ja käytä lyhyitä, lihavoituja otsikoita, luettelomerkkejä ja muita vastaavia huomiota herättäviä elementtejä kappalelohkojen hajottamiseen.

Z-malli. Visuaalisen hierarkian periaatteet

Z-kuvioita koskevat muun tyyppisiä sivuja, kuten mainoksia tai verkkosivustoja, joilla tietoja ei välttämättä esitetä kappaleissa. Lukija skannaa ensin sivun yläreunan, josta todennäköisesti löytyy tärkeitä tietoja, sitten siirtyy vastakkaiseen kulmaan vinosti ja tekee saman sivun alareunassa.

Web-suunnittelijat yleensä suunnittelevat sivunsa vastaamaan tätä käyttäytymistä, sijoittamalla tärkeimmät tiedot kulmiin ja suuntaamalla muut tärkeät tiedot ylä- ja alapalkkeja pitkin ja yhdistämällä diagonaalin.

Alla Vuoden 2010 kokoonpanokonferenssin suunnittelussa tärkeitä elementtejä ovat logo (ylhäällä vasemmalla), "rekisteröidy nyt" -painike (ylhäällä oikealla) ja luettelo kaiuttimista (alareuna), jotka on sijoitettu strategisesti mukaviin Z-kuvioihin.

2. Koolla on väliä. Visuaalisen hierarkian periaatteet
_

Se on melko yksinkertaista: ihmiset lukevat ensin suuret asiat. Jos silmäsi kiinnittyvät "esitykseen", ennen kuin "jakaudut" alla olevaan Young Vicin mainokseen, ota välittömästi yhteyttä havainnointipsykologiin: saatat todennäköisesti ansaita paljon rahaa testaamalla harvinaisena poikkeamana.

Mielenkiintoista on, että tämä taipumus on itse asiassa tarpeeksi vahva hylkäämään ylhäältä alas -säännön. Yllä olevassa kuvassa "hakkerointi" ohittaa "ajan toimia", koska se on suurempi ja vasemmalla (joten vasemmalta oikealle -sääntö auttaa).

Mutta vuosiraportin: Human Rights Campaign 2012 (kehitetty viidennessä tiedotusvälineissä) seuraavalla sivulla luemme laajasti fontti "Taistelu tasa-arvon puolesta kampanjapolulla" ennen tekstiä suoraan sen yläpuolella "Vaalit 2012". Visuaalisen hierarkian periaatteet

"Vaali 2012" on tiedon korkein järjestys: se kertoo meille yleisen teeman, johon alla olevat tiedot liittyvät. Mutta suunnittelija päätti, että artikkelin otsikko oli kiinnostavampi lukijoille, ja siksi arvioi sen niin, että se luettaisiin ensin.

3. Tila ja rakenne. Visuaalisen hierarkian periaatteet

Toinen tapa saada huomiota on anna sisällölle tarpeeksi tilaa hengittää . Jos painikkeen ympärillä on merkittävää negatiivista tilaa tai tekstilohkon rivejä seurataan laajalti, nämä elementit näkyvät lukijoille paremmin.

Kuten alla olevasta kuvasta (osa DrawtoClickin sivustoa) näkyy, välit voivat olla tyylikäs vaihtoehto tai täydentää koon käyttöä. Täällä myyntivaltti "Notre agence vouscompagne..." on kirjoitettu hyvin pienellä kirjaimilla, mutta sitä ympäröi runsaasti tyhjää tilaa, mikä osoittaa sen tärkeyden. Alla lauseet "Le Compendre", "Le Réaliser" ja "Le Partager" saavat lisäkorostusta, koska ne ovat irrallaan ympäröivästä tilasta.

Kun ihmiset puhuvat "tekstuurista" suhteessa visuaaliseen hierarkiaan, he eivät tarkoita tekstuurin graafisia vaikutuksia. Pikemminkin tämäntyyppinen "tekstuuri" viittaa tilan, tekstin ja muiden sivun yksityiskohtien yleiseen järjestelyyn tai rakenteeseen. Tämä Bright Pinkin esimerkki kuvaa konseptia hyvin:

Ensimmäisessä kuvassa sana "Sport" on hierarkiassa korkeammalla kuin "sulkapallo", koska se on korkeampi, isompi ja rohkeampi. Kuvassa 2 nämä kaksi sanaa ovat suunnilleen samanarvoisia mustan suorakulmion ansiosta, joka erottuu sulkapallosta ja asettaa sen omaan tilaan.

Kolmannessa kuvassa taustakirjoitus katkaisee "Sports"-tilan, mutta ei "sulkapallo"-avaruutta ja johtaa siten käänteiseen, jossa "sulkapallo" on hierarkian korkein. Tätä kehitystä on vaikea ennustaa, joten suunnittelijat yhdistävät sen usein kokonaisvaltaiseen "tekstuurin" tunteeseen.

4. Fontin paino ja pariliitos. Visuaalisen hierarkian periaatteet

Fontin valinta on ratkaisevan tärkeää visuaalisen hierarkian luomisessa. Fontin tärkeimpiä määritteitä ovat paino, sen kirjainten muodostavien viivojen leveys ja tyyli, kuten serif ja sans serif. Myös muilla muokkauksilla, kuten kursiivilla, voi olla merkitystä.

Huomaa kuinka kuulokkeet vaikuttaa sanahierarkian järjestykseen The Tea Factoryn alla olevassa web-suunnittelussa: "täydelliset teet lämmittelemään" on pelin nimi, mutta erot kirjasinten painossa ja kursivoitussa sanojen sijoittelun lisäksi luovat enemmän dynaaminen, vähemmän lineaarinen lukukokemus. "://azbyka.com.ua/foto/tea-factory.jpg" />

Joissakin tapauksissa tavoitteena on esittää erilaisia ​​tietoja yhtä kiireellisinä. Kaikkien asettaminen samaan kokoon ja painoon varmistaa vastaavuuden, mutta tekee siitä myös yksitoikkoisen näköisen. Fonttierottelu on yksi tapa välttää tämä, kuten Trendi-lehden kansi alla. Visuaalisen hierarkian periaatteet

Esitteen valmistelu tulostusta varten.

Tässä sivun reunassa olevat viisi teaseria ovat hierarkiassa samat, mutta vaihtelevat vaihtamalla kaksi hyvin yhdistettyä fonttia - toinen keskipainoinen serif ja toinen kevyt mutta korkea sans-serif.

5. Väri ja sävy. 

Tässä on toinen huoleton asia: kirkkaat värit erottuvat vaimeista väreistä tai harmaan sävyistä, kun taas vaaleammat sävyt näyttävät "etaisemmilta" ja putoavat siten hierarkiassa alemmas kuin rikkaammat, tummemmat sävyt. Where Are They -sivusto kontrasti kirkkaan valon ja värillisen taustavalon mustavalkoisen ruudukkoefektin kanssa valoisuuden vaikutukseksi:

Guggenheim-verkkosivustolla korostetaan värejä tärkeitä tietoja, kuten sijainnin valintaa, parhaillaan katsottavien näyttelyiden luetteloa ja linkkejä erikoisnäyttelyihin. Visuaalisen hierarkian periaatteet

Paras fontti mukautettuun pakkaukseen

Whitney Museum -verkkosivusto puolestaan ​​​​määrittää hierarkian yhden fontin, painon ja sävyn (musta) sisällä käyttämällä sävyä (mikä tarkoittaa valkoisen lisäämistä perussävyyn, mikä tekee siitä vaaleamman). "Cory Archangel on Pop Culture" on visuaalisessa hierarkiassa selvästi "New on Whitney Stories" -kohdan alapuolella, ei vain siksi, että se on matalampi, vaan myös siksi, että sen sävy on vaaleampi, mikä tekee siitä vähemmän näkyvän valkoista taustaa vasten. Visuaalisen hierarkian periaatteet

Värillä on erityinen merkitys mobiili suunnittelu sovelluksia, joissa pieni näytön koko rajoittaa kykyäsi käyttää muita strategioita, kuten koon vaihtelua ja laajaa väliä. Grainger Industrial Supply -sovelluksessa "Jatka kassalle" -painike on väritetty punaiseksi, jolloin se erottuu kaikilla sivuilla, joilla se näkyy. Kapeat hakutulokset -paneeli sen sijaan on harmaa, joten se vastaa suunnilleen hierarkiassa muita elementtejä, kuten hakupalkkia ja tuotelinkkejä.

6. Suunta suunnittelijoille.

Sivun asettelut on yleensä suunniteltu seuraamaan pysty- ja vaakaviivojen ruudukkoa, sekä tavanomaisesti että koska se on luettavin muoto. Tällaisessa järjestelmässä on uusi tapa luoda hierarkia: ruudukon rikkominen.

Käyrän tai diagonaalin suuntaisesti sijoitettu teksti erottuu automaattisesti ympäröivästä ruudukolla suljetusta tekstistä ja on keskeisessä asemassa. Tämä on pitkään ollut tehokas strategia mainonnassa, kuten Frost Designin bussipysäkkijuliste.