Tervezési Elvek: Helyet, Valamint A Ábra-Föld Kapcsolat

A Szerzőről

Steven Bradley a szerző a Tervezés Alapjai: Elemek, Attribútumok, & Elvek CSS Animációk, Átmenetek a Modern Web., Ha nem …Több aboutSteven Bradley↬

• 10 perc olvassa el a
• az Ihlet,a Design,a Kreativitás,a Tervezési Elvek
• Mentett offline olvasás
• Share on Twitter, A LinkedIn

Ha látod, grafikai tervezés, mint egy folyamat megszervezése alakzatok vászon, akkor csak azt látod fél, hogy mi a munka. A vászon negatív tere ugyanolyan fontos, mint a vászonra helyezett pozitív elemek.,

a tervezés mind a formák, mind a tér elrendezése. Ahhoz, hogy hatékonyabban működjön a térrel, először tisztában kell lennie vele, és meg kell tanulnia látni — meg kell tanulnia látni a tér formáinak formáit és a tér kommunikációjának módját. Ez a második része a kezdőknek szóló tervezési elvekről szóló sorozatnak. Az első rész hatálya alá tartozó bevezetés a gestalt; a többi sorozat (beleértve ezt a hozzászólást) épít, azokat a gestalt alapelvek, mutasd meg, hogy sokan az alapvető elvek dolgozunk, mint a tervezők eredete van.,

az ábra-Föld kapcsolat

a térre leginkább érvényes gestalt elv az ábra-föld. Minden a design a tiéd lesz tekinteni, mint az egyik vagy a másik, és a kapcsolat közöttük kölcsönösen kizárják. Egyik sem érzékelhető, kivéve a másikhoz képest, az egyik megváltoztatása lehetetlen a másik megváltoztatása nélkül is.

az alak-föld kapcsolat is kiegészítő. Az ábra és a talaj fokozhatja vagy csökkentheti egymást, a kettő egymáshoz viszonyított rendezése pedig a tervezés egyik legfontosabb szempontja., Ez meghatározza a kontextust, hogy hogyan kommunikál a design, és hogyan fogják értelmezni.

” A fehér tér aktív elemnek, nem passzív háttérnek tekinthető.”
— Jan Tschichold

a harmadik panelen két fekete vonal eltávolításra került. Ez aktiválja a helyet, így úgy tűnik, hogy a szürke mező tetején ül., A talaj lett a szám, és növeli a mélységet, hogy a design.

háromféle alak-földi kapcsolat létezik:

• stabil (balra fent)
  egyértelmű, hogy mi az ábra és mi a talaj. Az egyik vagy a másik általában uralja a kompozíciót.
• reverzibilis (fent középen)
  mind a szám, mind a talaj egyformán vonzza a néző figyelmét., Ez feszültséget hoz létre, amellyel vagy meghaladhatja a másikat, ami dinamikus kialakításhoz vezet.
• kétértelmű (jobbra fent)
  Az elemek egyszerre mind alaknak, mind talajnak tűnhetnek. Ugyanolyan érdekes alakzatokat alkotnak, a nézőnek pedig meg kell találnia saját belépési pontját a kompozícióba.

attól függően, hogy melyik kapcsolatot állítja be, és hogyan egyensúlyozza mind a figurát, mind a talajt, arra irányítja a közönséget, hogy nézze meg a tervezés különböző részeit, és értelmezze azt, amit különböző kontextusokban látnak.,

A Figure-ground nem az egyetlen gestalt elv, amelyben a tér kiemelkedő szerepet játszik. Két másik ezek:

• Proximity
  Proximity használ tér csatlakozni, illetve külön elemek csatolásával néhány elem a térben. Egy példa, amit magától értetődőnek tekinthetünk, az oldal szövegének bekezdései. A bekezdések közötti tér nagyobb, mint a bekezdésen belüli szövegsorok közötti tér.
• Bezárás
  ez kihasználja a helyet az elemek közötti résként. A nézők kitöltik a hiányosságokat saját információikkal, hogy egy egészet kitöltsenek az alkatrészekből. Túl sok hely, és nincs lezárás., Túl kevés hely és nincs szükség lezárásra. Csak a helyes egyensúly a tér és a kitöltött tér között aktiválja a teret, és bezáráshoz vezet.

tér mint tervezési elem

Gondolj a zenére egy pillanatra. Ha minden hangot vagy akkordot egyszerre játszanának, akkor nem lenne zene. Zajt csapnál. A zene akkor fordul elő, amikor a hangok ellentétesek a csenddel. A hang és a csend mintájának változtatása ritmust és dallamot teremt., A csend nélkül nincs zene.

a tér ugyanazt a funkciót vizuálisan hajtja végre. Ez ad pozitív elemek levegőt. Ez ad a szem mozgás szabadsága révén, a design, hogy felfedezzék az elemeket keres. A pozitív csak a negatívral ellentétben látható. Hely nélkül nincs design. Látászavarod van.

hacsak a zaj nem az, amit kommunikálni próbál, hajoljon a tér felé. Az emberek kevésbé valószínű, hogy panaszkodnak a túl sok hely, mint a túl kevés.,

a tér a következőket teheti:

• kontrasztot, hangsúlyt és hierarchiát hoz létre;
• drámát és feszültséget generál;
• vizuális pihenést biztosít az elemek csoportjai között.

ahogy az ábra-föld kapcsolat azt sugallja,csak akkor van hely, ha valami benne van. A pozitív elemek hozzáadása előtt a tér nem definiált. Az alak-föld kapcsolatot még a tér létezése és a kommunikáció megkezdése előtt meg kell teremteni.

a tér egyik fontosabb funkciója az olvashatóság és olvashatóság javítása., Makró-tér teszi a szöveget több hívogató. Mikrotér teszi olvashatóbb.

• Micro-space
  Ez egy csoport elemein belüli tér. A betűk,szavak és bekezdések közötti tér.
• Macro-space
  Ez a fő elemek közötti tér. Elkülöníti az elemeket vagy az elemcsoportokat, és utat biztosít a szemnek, hogy kövesse, és hogy hol pihenhessen az elemek között.

a tér korrelál a minőséggel. Több hely kevesebb elemet vagy elemek ritkaságát vonja maga után. Hasonlítsa össze a high-end és a kedvezményes kiskereskedelmi üzletek., Melyikben általában több hely van, és melyik csomagolja be a termékeket a rendelkezésre álló hely minden részébe? Mit jelent a tér kommunikálni veled?

a tér a minőségen kívül más attribútumokat is közvetít, mint például:

• kifinomultság,
• egyszerűség,
• luxus,
• tisztaság,
• magány,
• nyitottság.

akkor pazarolja a helyet, ha nem veszi figyelembe. A helyet túltöltéssel pazarolhatja. A helyet úgy pazarolhatja el, hogy csapdába ejti a formatervezés belső elemeit, és nem teszi lehetővé, hogy csatlakozzon a tervezés más helyéhez.,

A tervezés végső soron az alakzatok elrendezése, amely magában foglalja a tér által alkotott alakzatokat. Ne félj használni a helyet. Tekintse meg, mint egy fontos tervezési elem az Ön irányítása alatt.

néhány példa a hely a weboldalakon

a hely jobb használatához először tudatosan tisztában kell lennie vele. Tanulja meg felismerni a helyet különböző mintákban. Figyeld meg a formáit, és gondold át, hogy mit kommunikál a tér. Ebből a célból nézzük meg egyes webhelyek kialakítását, figyelembe véve a hely használatát.,

Old Guard

Tom Johnson régi gárdájának kialakítása rengeteg fehér teret használ, szövegeket és egyéb elemeket ad a lélegzéshez. Nem tévesztendő össze, hogy mi az ábra és mi a föld.

az információkat Hely tartalmazza és elválasztja (emlékezzünk a közelség elvére), megkülönböztetve az elemek csoportjait., Könnyen meg tudja mondani, hol ér véget az egyik üzenet, a következő pedig kezdődik, kizárólag a köztük lévő tér.

a fő tartalom kissé off közepén az oldalon, Nagyvonalú helyet mindkét oldalon. Ezt a helyet időnként megszakítják az elemek, aktiválva mind a teret, mind a megszakító elemeket. Ez segít felhívni a figyelmet a területre, különösen a belső elemekre.

Heroku Staus Page

az alábbi kép a Heroku állapotoldalának egy részét mutatja, mint többnyire helyet., Történetesen elkaptam a weboldalt egy különösen jó napon, mert a további pozitív elemek több jelentett eseményt jelentenek a platformon. Itt több fehér hely jelenti a jobb szolgáltatást.

figyeljük meg, hogy a fehér térnek nem kell fehérnek lennie. Bár az oldal túlságosan nagylelkű a térrel, nem valószínű, hogy panaszkodna, hogy túl sok van belőle., Csak Fontos információk — ebben az esetben az állapotfrissítések és az eseményekről szóló jelentések — szakítják meg a teret.

A regény bemutatása

a regény bevezetésének tetején lévő tér aszimmetrikus és aktív. Figyelje meg, hogy a bal oldali nagy térblokk közvetlenül a tartalomhoz vezet. Ha rákattint a weboldalra, majd lefelé görget a tetejéről, látni fogja, hogy a szóköz is használható az információblokkok elválasztására és csoportosítására.

vékony fénysorokat is használnak a blokkok csoportosítására és elválasztására. A weboldal megtekintésekor vegye figyelembe, hogy a vonalak nem mindig érintkeznek, lehetővé téve a tér áramlását körülöttük, majd csatlakozhat más térhez. Ez megakadályozza, hogy a tér csapdába kerüljön.

Elliot Jay Stocks

az Elliot Jay Stocks weboldalának mindenki számára ismerősnek kell lennie, mivel ő áll a terv mögött. Az aszimmetrikus tér Elliot honlapján ismét aktív térhez vezet.,

az oldal tetején lévő nagy kép potenciálisan ideiglenes blokkként állhat az alábbi tartalom eléréséhez; azonban a kép melletti nagy mennyiségű hely bőséges és meghívó helyet biztosít a szem számára, hogy mozogjon körülötte., Ha a bal oldali oldalsáv ugyanolyan háttérszínnel rendelkezik, mint a fő tartalom, akkor valószínűleg könnyebb lenne a szem számára a kép körül mozogni, de a színváltozás aligha megnehezíti.

mint a fenti webhelyeknél, a teret arra használják, hogy elkülönítsék a különálló információk csoportjait, lehetővé téve minden csoport számára, hogy kiemelkedjen, és lehetővé tegye a szem számára, hogy megtalálja, amit akar, és pihenjen a kettő között.

Phil Coffman

A Phil Coffman weboldalán található tartalom egyetlen alakot alkot, amely többnyire üres térben helyezkedik el., Sok pozitív elem hiánya növeli a jelenlévők fontosságát.

még a színes téglalap alakú háttéren belül is elegendő hely van a szöveg körül, hogy könnyen olvasható legyen, és ne tévesszen meg az oldal másik szövegkategóriájával.,

a pozitív alak (és a tér alakja) különböző böngészőszélességekhez alkalmazkodik, de a tér által körülvett egyetlen nagy alak mintája megmarad.

új kalandok a Webdizájnban

mint sok weboldal itt, a 2013-as Webdizájn konferencia új kalandjai Nagyvonalú teret hagynak az elemek körül. Az információk különálló csoportjait a tér tartalmazza, a tér pedig a tervezés során aktív.

valami érdekes megjegyezni a szürke kör alakú nyilak között a kép a bal felső és a fő tartalom jobbra.

ezek a nyilak blokkolják a tér áramlását? Mivel nem nyúlnak hozzá, és mivel mindegyik szaggatott, ahol megszakítja a teret, a tér átfolyhat, bár ebben az áramlásban egyértelműen korlátozottabb.

a világosabb-szürke szín segít. Megakadályozza, hogy a nyilak uralkodjanak, és nem nehéz elképzelni, hogy a tér átfolyik a vonalakon.,

a méltányosság, ha a böngészőm szélesebb volt, amikor megragadtam a képernyőképet, a nyilak nem fedik át a fő tartalmat. Azonban körülbelül 1280 pixel le, ahol a design lesz egy oszlop, ők. Összességében működik, bár kíváncsi vagyok, hogy a tér jobban áramlik-e a nyilak nélkül.

néhány példa a logókra

néhány logót hagyok neked, amelyekben a tér a tervezés szerves részeként van beépítve. Ahelyett, hogy rámutatna a tér használatára mindegyikben, néhány általános megjegyzést teszek, majd hagyom, hogy felfedezze a tereket magának.,

figyeljük meg, hogy az alábbi logók hogyan használják az ábra-föld kapcsolatot. Néhány, amíg nem látja mind a figurát, mind a talajt, nem látja a teljes logót. Mindkettő szükséges közreműködője annak, amit közölnek.

Ezen logók közül több a Bezárás elvére támaszkodik. Amit látni akarsz, az nem igazán létezik, de mégis látod. Néhány ilyen logók is játszani körül alak és a föld. Mi az ábra, amikor az egész logót a háttérben veszi, egy kisebb figura számára lesz., Ez a visszafordítható alak-földi kapcsolat központi szerepet játszik a kommunikációban.

• Cloud Bed
• Black Cat Lounge
• Shift
• Dolphin & Seal Logo Designer
• fogászati implantátumok Guide
• Wineforest

összefoglaló

remélem, hogy két fő dolgot vesz el ebből a posztból., Először is, a kapcsolat a tér használata a tervezés, valamint a gestalt elve ábra-föld. Gestalt elvek alatt sok, amit csinálunk, mint a tervezők.

másodszor, és talán még ennél is fontosabb, hogy időt tölteni megfigyelése, hogyan tér használják a tervezés. Ne hagyja, hogy a tér a pozitív elemek mellékterméke legyen. Tanuld meg, hogy tervezzen helyet, mint, ha nem több, mint, pozitív elemeket. Bármely oldal elrendezése végső soron a térszervezés.

tudatosan elemezzük ezt a helyet, és szándékosan használjuk arra, hogy jobb dizájnt hozzunk létre. Ne hagyd, hogy az legyen, ami megmaradt., Tekintse meg alapvető tervezési elemként, majd tekintse meg a tér és a pozitív elemek közötti kapcsolatot, mint az Ön által formált tervezési elemet.

legközelebb még több gestalt elvet adunk a keverékhez, és megvizsgáljuk, hogy a fókuszpontok, a folytatás és a közös sors hogyan vezet minket olyan ötletekbe, mint a vizuális súly és a kompozíciós egyensúly.

• Bánja, A Hu Pedig Em Vonalak: Tipográfiai Etikett
• Tervezési Elvek: a Vizuális Tömeg Irányba
• Hogyan Geometria Befolyásolja Logo Design
• a Művészetről

(al, ml, il)