Design-Periaatteet: Tilaa Ja Luku-Maa-Suhde

Author

Steven Bradley on kirjoittanut Suunnittelun Perusteet: – Elementtejä, Attribuutteja, & Periaatteet ja CSS Animaatioita ja Siirtymiä Moderni Web., Kun ei …Enemmän aboutSteven Bradley↬

• 10 min lue
• Inspiraatio,Suunnittelu,Luovuus,Suunnittelu Periaatteet
• Tallennetaan offline käsittelyssä
• Jaa Twitterissä, LinkedIn

Jos näet graafinen suunnittelu prosessina järjestää muotoja kankaalle, sitten näette vain puolet siitä, mitä olet töissä kanssa. Kankaan negatiivinen tila on yhtä tärkeä kuin positiiviset elementit, jotka asetamme kankaalle.,

Muotoilu on järjestely, sekä muotoja ja tilaa. Työskennellä tehokkaammin tilaa, sinun täytyy ensin tulla tietoiseksi siitä ja oppia näkemään se — oppia näkemään muotoja, jotka tilaa, muotoja ja miten tilaa kommunikoi. Tämä on toinen osa sarjan suunnittelun periaatteita aloittelijoille. Ensimmäinen osa kattaa johdatus gestalt; loput sarjan (kuten tämä viesti) rakentaa ne gestalt periaatteet ja osoittaa, kuinka monet niistä perusperiaatteista, joiden kanssa teemme niin kuin suunnittelijat ovat niiden alkuperä on.,

Kuva-Maasuhde

Gestaltin periaate, joka pätee eniten avaruuteen, on kuva-maa. Kaikki sinun suunnittelemasi nähdään jompikumpi, ja niiden välinen suhde on toisensa poissulkeva. Kumpaakaan ei voi käsittää muuten kuin suhteessa toiseen, ja toisen muuttaminen on mahdotonta muuttamatta myös toista.

myös luku-maasuhde on toisiaan täydentävä. Kuva ja Maa voivat parantaa tai heikentää toisiaan, ja kahden järjestäminen suhteessa toisiinsa on yksi suunnittelun tärkeimmistä näkökohdista., Se asettaa kontekstin sille, miten suunnittelusi viestii ja miten sitä tulkitaan.

”valkoista avaruutta on pidettävä aktiivisena elementtinä, ei passiivisena taustana.”
— Jan Tschichold

kolmannella paneeli, kaksi mustaa riviä on poistettu. Tämä aktivoi tilan, jolloin se näyttää istuvan harmaan kentän päällä., Maasta on tullut hahmo ja lisää syvyyttä suunnitteluun.

On olemassa kolmenlaisia figure-ground relationships:

• Vakaa (yllä vasemmalla)
  Se on selvää, mitä on kuvassa ja mitä on päällä. Jompikumpi hallitsee yleensä sävellystä.
• Reversible (ylhäällä keskellä)
  sekä kuva että maa houkuttelevat katsojan huomion tasaisesti., Tämä luo jännitystä, jolloin jompikumpi voi ohittaa toisen, mikä johtaa dynaamiseen suunnitteluun.
• moniselitteinen (yllä oikealla)
  elementit voivat vaikuttaa sekä kuvioilta että groundilta samanaikaisesti. Ne muodostavat yhtä mielenkiintoisia muotoja, ja katsojalle jää oma sisääntulopiste sävellykseen.

Riippuen siitä, mikä suhde olet määrittänyt ja miten tasapaino sekä kuva ja maahan, suoraan yleisön katsomaan eri osien suunnittelu ja tulkita, mitä he näkevät eri yhteyksissä.,

Figure-ground ei ole ainoa gestalttiperiaate, jossa avaruudella on merkittävä rooli. Kaksi muuta ovat nämä:

• Sijaitsee
  Läheisyys käyttää tilaa yhdistää ja erottaa elementtejä liittämällä joitakin elementtejä tilaa. Yksi esimerkki, jota voisimme pitää itsestäänselvyytenä, ovat sivun tekstikappaleet. Kappaleiden välinen tila on suurempi kuin kappaleen sisällä olevien tekstirivien välinen tila.
• sulkeminen
  Tämä hyödyntää avaruutta elementtien välisinä rakoina. Katsojat paikkaavat aukot omilla tiedoillaan täydentääkseen kokonaisuuden osista. Liikaa tilaa eikä sulkemista tapahdu., Liian vähän tilaa eikä sulkemista tarvita. Vain oikea tasapaino tilan ja täytetyn tilan välillä aktivoi tilan ja johtaa sulkemiseen.

Tilaa Kuin Design Elementti,

Mieti, musiikki hetkeksi. Jos jokainen sävel tai sointu soitettaisiin samaan aikaan, ei olisi musiikkia. Saisit ääntä. Musiikki syntyy, kun äänet asetetaan hiljaisuuden vastakohdaksi. Äänen ja hiljaisuuden kuvion vaihtelu luo rytmiä ja melodiaa., Ilman hiljaisuutta ei ole musiikkia.

avaruus suorittaa saman funktion visuaalisesti. Se antaa positiivisille elementeille tilaa hengittää. Se antaa silmälle vapauden liikkua designin läpi ja löytää etsimänsä elementit. Positiivinen näkyy vain vastakohtana negatiiviselle. Ilman tilaa ei ole designia. Sinulla on näköääniä.

ellei melu ole sitä, mitä yrität kommunikoida, nojaa kohti avaruutta. Ihmiset valittavat harvemmin liikaa tilaa kuin liian vähän.,

Tilaa voi tehdä seuraavaa:

• luoda kontrasti, korostus ja hierarkia;
• luoda draamaa ja jännitystä;
• visuaalinen loput ryhmien välillä elementtejä.

Kuten luku-maa-suhde tarkoittaa, sinulla on tilaa vain silloin, kun jotain on läsnä sisällä. Ennen positiivisten elementtien lisäämistä tila on määrittelemätön. Kuva-maa-suhde on luotava ennen kuin avaruus voi olla olemassa ja sen viestintä alkaa.

yksi avaruuden tärkeimmistä toiminnoista on luettavuuden ja luettavuuden parantaminen., Makroavaruus tekee tekstistä kutsuvampaa. Mikroavaruus tekee siitä helpommin luettavan.

• Mikro-tila
  Tämä on tilaa sisällä elementtejä ryhmässä. Se on kirjainten, sanojen ja kappaleiden välinen tila.
• Makroavaruus
  Tämä on avaruus pääelementtien välillä. Se erottaa elementtejä tai elementtiryhmiä ja tarjoaa silmälle väyliä seurata ja paikkoja levätä elementtien välillä.

avaruus korreloi laadun kanssa. Enemmän tilaa sisältää vähemmän elementtejä tai harvinaisuus elementtejä. Vertaa high-end ja alennus vähittäiskaupat., Kummassa on yleensä enemmän tilaa sisällä, ja kumpi pakkaa tuotteita jokaiseen käytettävissä olevaan tilaan? Mitä tila viestii sinulle?

Tilaa voi myös välittää muita ominaisuuksia kuin laatu, kuten:

• hienostuneisuutta,
• yksinkertaisuus,
• luksusta,
• puhtaus,
• yksinäisyys
• avoimuus.

hukkaat tilaa, kun et ota sitä huomioon. Tilaa voi tuhlata ylitäyttämällä. Voit tuhlata tilaa ansoittamalla sen sisällä elementtejä suunnittelu ja ei anna sen yhteyden muuhun tilaan suunnittelussa.,

muotoilu on lopulta muotojen järjestely, johon kuuluvat avaruuden muodostamat muodot. Älä pelkää käyttää tilaa. Pidä sitä tärkeänä suunnitteluelementtinä hallinnassasi.

Muutamia Esimerkkejä Tilaa Sivustot

paremmin käyttää tilaa, sinun on ensin tullut tietoisesti tietoinen siitä. Opi tunnistamaan tilaa eri malleja. Huomaa sen muoto ja mieti, mitä tila viestii. Sitä varten, katsotaanpa suunnittelu joitakin sivustoja, ottaen huomioon, miten tilaa käytetään.,

Vanhan Kaartin

suunnittelu Tom Johnsonin Vanhan Kaartin käyttää paljon valkoista tilaa, jolloin teksti ja muut elementit tilaa hengittää. Ei ole epäilystäkään siitä, mikä on luku ja mikä on maa.

Tiedot sisältyvät, ja erotettu tila (muistaa, läheisyysperiaate), joka erottaa ryhmät elementtejä., Voit helposti kertoa, jos yksi viesti päättyy ja seuraava alkaa, ainoastaan tilaa niiden välillä.

pääsisältö on sivulla hieman off center, jonka molemmin puolin on runsaasti tilaa. Tämä tila keskeytyy ajoittain elementeillä aktivoiden sekä tilaa että keskeytyviä elementtejä. Tämä auttaa kiinnittämään huomiota alueeseen ja erityisesti sen sisältämiin elementteihin.

Heroku on Staus Sivu

alla Oleva kuva näyttää osan tila-sivun Heroku on enimmäkseen tilaa., Satuin nappaamaan sivuston erityisen hyvänä päivänä, koska ylimääräiset myönteiset elementit tarkoittaisivat enemmän raportoituja tapauksia alustalla. Täällä enemmän valkoista tilaa merkitsee parempaa palvelua.

Huomaa, miten valkoinen tila ei tarvitse olla valkoinen. Vaikka sivu on liian antelias tilaa, et todennäköisesti valita, että sitä on liikaa., Vain tärkeät tiedot — tässä tapauksessa tilannepäivitykset ja ilmoitukset vaaratilanteista — keskeyttävät tilan.

romaanin

esittelyn huipulla oleva tila on epäsymmetrinen ja aktiivinen. Huomaa, miten suuri välilohko vasemmalla johtaa silmäsi suoraan sisältöön. Jos valitset kautta verkkosivuilla ja selaa alaspäin, näet, että tilaa käytetään myös erottamaan ja ryhmän korttelin tietoja.

Ohut valo linjat käytetään myös ryhmään ja erottaa näiden lohkojen. Kun katselet verkkosivuilla, huomaa miten linjat eivät aina kosketa, jolloin tilaa virrata ympärillä ja muodostaa yhteyden muihin tilaa. Tämä estää tilan juuttumisen.

Elliot Jay Varastot

verkkosivuilla Elliot Jay Varastot pitäisi olla tuttu kaikille, koska hän on takana suunnittelussa tämä yksi. Epäsymmetrinen tila Elliotin sivuilla johtaa jälleen aktiivitilaan.,

suuren kuvan yläreunassa tämän sivun voisi mahdollisesti asettua tilapäisesti estää pääsy sisältöä alla; kuitenkin, runsas määrä tilaa kuvan vieressä tarjoaa runsaasti ja kutsuva tilaa silmän liikkua sen ympärille., Jos vasemmanpuoleisessa sivupalkissa olisi sama taustaväri kuin pääsisällössä, silmän olisi todennäköisesti helpompi liikkua kuvan ympärillä, mutta värin muutos tuskin vaikeuttaa sitä.

Kuten sivustoja yllä, tilaa käytetään sekä liittää ja erottaa ryhmät toisistaan erillistä tietoa, jolloin jokainen ryhmä erottua ja mahdollistaa silmä-löytää, mitä se haluaa ja levätä välillä.

Phil Coffman

Phil Coffmanin verkkosivujen sisältö muodostaa yhden muodon, joka istuu enimmäkseen tyhjässä tilassa., Monien myönteisten tekijöiden puuttuminen lisää läsnä olevien merkitystä.

Jopa värillinen suorakulmainen taustat, tekstiä on tarpeeksi tilaa ympärillä, se voidaan helposti lukea ja ei pidä sekoittaa toiseen luokkaan tekstiä sivulla.,

positiivinen muoto (ja muoto tila) säätää reagoiviksi eri selaimen leveyttä, mutta malli yhden suuren muoto ympäröi tilaa jää.

Uusia Seikkailuja Web Design

Kuten monet sivustot täällä, verkkosivuilla 2013 Uusia Seikkailuja Web Design konferenssi lehdet antelias tilaa noin elementtejä. Erilliset tietoryhmät sisältyvät avaruuteen, ja tila on aktiivinen koko suunnittelun ajan.

Jotain mielenkiintoista huomata harmaa pyöreä nuolet välillä kuvan ylä-vasen ja pääasiallinen sisältö oikealle.

estävätkö nämä nuolet avaruuden virtausta? Koska ne eivät koske, ja koska jokainen on katkoviiva, jos se keskeyttää tilaa, tilaa voi virrata, vaikka se on selvästi enemmän rajoitettu, että virtaus.

vaaleanharmaa väri auttaa. Se estää nuolia dominoimasta, eikä ole vaikea kuvitella viivojen yli virtaavaa tilaa.,

reiluuden nimissä, jos selaimeni olisi laajempi, kun nappasin kuvakaappauksen, nuolet eivät menisi päällekkäin pääsisällön kanssa. Kuitenkin noin 1280 pikseliä alas, jos suunnittelu tulee yksi sarake, he tekevät. Kaiken kaikkiaan se toimii, vaikka mietin, että sujuisiko tila paremmin ilman nuolia läsnä.

Muutamia Esimerkkejä Logot

jätän sinut joitakin logot jossa tilaa on sisällytetty olennaisena osana suunnittelu. Sen sijaan, että huomauttaisin tilan käytöstä jokaisessa, esitän muutaman yleisen kommentin ja annan sinun sitten tutkia tiloja itse.,

huomaa, miten alla olevat logot hyödyntävät Kuva-maa-suhdetta. Joidenkin kanssa, kunnes näet sekä kuvan että maan, et näe koko logoa. Molemmat ovat välttämättömiä tiedonvälityksen kannalta.

useat näistä logoista nojaavat sulkemisen periaatteeseen. Se, mitä sinun on tarkoitus nähdä, ei ole oikeasti olemassa, mutta näet sen kuitenkin. Muutamat näistä logoista myös leikkivät kuviolla ja kentällä. Mikä on luku, kun ottaa koko logon taustasta tulee maahan pienempi luku sisällä., Tämä palautuva luku-maa-suhde on keskeinen viestinnälle.

• Pilvi Sänky
• Musta Kissa Lounge
• Muutos
• Dolphin & Tiiviste Logon Suunnittelija
• hammasimplantit Opas
• Wineforest

Yhteenveto

toivottavasti otat pois kaksi asiaa tämän artikkelin., Ensimmäinen on yhteys tilan käytön suunnittelussa ja Gestalt periaate kuva-maahan. Gestalt periaatteet underly paljon siitä, mitä teemme suunnittelijoina.

Toiseksi, ja ehkä vielä tärkeämpää, tehdä työtä viettää aikaa tarkkailemalla, miten tilaa käytetään suunnittelussa. Älä anna avaruuden olla positiivisten elementtiesi sivutuote. Opi suunnittelemaan tilaa yhtä paljon kuin, jos ei enemmän kuin, positiivisia elementtejä. Minkä tahansa sivun asettelu on lopulta tilan organisaatio.

analysoi tätä tilaa tietoisesti ja käyttää sitä tietoisesti paremman muotoilun luomiseen. Älä anna sen olla sitä, mitä on jäljellä., Mielestämme on olennainen elementti, ja sitten tarkastella suhdetta, tilaa ja positiivisia elementtejä kuin design elementti, joka muoto.

Seuraavan kerran, me lisäämme enemmän gestalt periaatteet sekoita ja tutkia, miten yhteyspisteet, jatkaminen ja yhteinen kohtalo johtaa meidät ideoita, kuten visuaalista painoa ja koostumusta tasapainoa.

• muista Fi Ja Em Viivoja: Typografinen Etiketti
• Design-Periaatteet: Visuaalinen Paino Ja Suunta
• Miten Geometria Vaikuttaa Logon Suunnittelu
• Taidetta

(al, ml, il)