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
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