Javítja A Tervez Az Elvek Bezárása, Valamint Ábra-Föld (2. Rész)

A Szerzőről

Jon egy vizuális tervező, sok évvel azelőtt, hogy a leap interakció tervezés., Van egy diplomás Ember-Számítógép Interakció a DePaul …Több aboutJon↬

Gondolkozott már azon, hogy az elemek hogyan jönnek össze a sikeres tervek létrehozásához? Nem véletlen, hogy a lenyűgöző design csak úgy tűnik, hogy működik., Ezeknek a terveknek a többsége közös, hogy a gestalt csoportosítási elveket olyan információk szervezésére használják, amelyek segítenek megérteni az elemek közötti kapcsolatokat és különbségeket. Tervezőként felhasználhatjuk ezeket az elveket, hogy megteremtsük saját vonzó és sikeres munkánkat.

kezdjük a lezárás Gestalt elvével.

Bezárás

a tervezés egyetemes elvei szerint ez az elv azt állítja, hogy hajlamosak vagyunk az egyes elemek halmazát egyetlen, felismerhető mintaként érzékelni, nem pedig több, egyedi részként., A Bezárás hatékonyan csökkenti a komplexitást azáltal, hogy az elemeket a lehető legkevesebb részre csökkenti az objektum befejezéséhez. Elegendő információval ellátva kitöltjük a hiányzó részeket, hogy egy egészet hozzunk létre. Ez pozitív és negatív tér alkalmazásával érhető el.

az alábbi példában elménk kitölti a sorokat, hogy kör alakuljon ki, annak ellenére, hogy az alak nem létezik. A pozitív és a negatív tér együtt alkotja a kör felfogását.,

a zárás arra használható, hogy tárgyakat vagy mintákat érzékeljünk a legkisebb mennyiségű információ felhasználásával. Elménk annyira szívesen tölti ki a hiányzó információkat, hogy nagyon kevés elemmel lehet megtenni. Ha azonban nem adunk elegendő információt a minta befejezéséhez,akkor nem érzékeljük a tárgyat, a Bezárás sikertelen, így a kör sokkal nehezebbé válik a fejünkben. Nézd meg, hogy tudod-e befejezni a fejedben. Sokkal nehezebb, nem?, Nem igazán tudjuk összerakni most a ritka mennyiségű információt adott.

tényleges Bezárás létrehozása

a fenti példák nagyon alapvető illusztrációk arra, hogy hogyan érzékeljük a mintákat a lezárás kialakításához. A valóságban sok olyan vizuális elem létezik, amelyekkel segíthetünk a hatékony lezárás kialakításában:

• pozitív és negatív tér. Mint korábban említettük, a pozitív és a negatív tér a lezárás során egy egészet alkot., Ez úgy érhető el, hogy a rejtett formákat a design negatív terében vagy a típuson belül keresi. Ezenkívül az elemek eltávolítása az előtérből érdekes negatív alakzatokat hozhat létre, ezzel egyszerűsítve a tervezést.
• kontraszt. A lezárás kialakításának kulcsa, hogy erős kontrasztot teremtsünk az előtér elemei és a háttér között. Mint mindig, a fekete-fehér hozza létre a legjobb kontrasztot, de kísérletezhet kiegészítő színekkel is az erős kontraszt érdekében.
• Szín., A szín nem csak életet ad a designnak, hanem felhasználható a kapcsolatok megerősítésére is, különösen akkor, ha absztrakt formákat használ az űrlapok ábrázolására.

minden Bezárás sok, ha nem az összes fenti vizuális elemet használja. Ezekkel kísérletezik csökkentése a tervek segít felfedezni az új formákat. Most vessünk egy pillantást a bezárás a valós világban, és meglátjuk, hogyan jön össze az egész.

Bezárás a gyakorlatban

bezárással csökkenthetjük a vizuális információ továbbadásához szükséges elemeket, csökkenthetjük a komplexitást és vonzóbbá tehetjük a terveket., A Bezárás egyik leggyakoribb felhasználása a vállalati logók tervezése, éppen azért, mert a Bezárás egyszerűsítheti a tervezést, hogy gyorsan továbbadja a márka identitását.

Az alábbiakban látható a híres logó, amelyet az NBC peacock-nak ismerünk. Ha összehasonlítjuk a jelenlegi logót (a jobb oldalon) a régi logóval, láthatjuk, hogy nem vadul különböznek egymástól. De azáltal, hogy csökkenti az elemeket, valamint dolgozik a negatív tér, a jelenlegi logó lesz sokkal egyszerűbb, elegáns., A zárást sikeresen érik el szorosan csoportosított, pozitív formák tollként, a páva testének érzékelésével, a középső negatív fehér tér felhasználásával.

egy másik jól ismert logó, amely sikeresen alkalmazza a lezárást, a FedEx-től származik., Ebben a logóban a lezárás negatív fehér térrel érhető el, a nagybetűs e és a kisbetűs x részeinek felhasználásával, hogy az ismerős előre mozgó nyíl alakuljon ki. A tervező kísérletezett sok tervez, végül húzza meg a betűk közelebb, még közelebb, amíg meg nem látta a nyíl alkotó között az e x-et. Ez azt mutatja, hogy kísérletezik csökkenése a terveit, de keresi a terek között, hozam fantasztikus eredményeket. A logó létrehozásának története, nézd meg Matthew May nagyszerű cikkét a Fast Company-nál. Látod a nyilat a logóban?, Mostantól soha nem fogod kihagyni!

a fenti példák jól ismert logók, amelyek a bezárást kissé nyilvánvaló módon használják. Vannak azonban kevésbé híres logók, amelyek finoman használják a bezárást. Például, Houzz foglalkoztat bezárása Több fogalmilag. Első pillantásra, a zöld, fekete-fehér formák hasonlítanak egy polc, része egy épület, vagy fal minta, ami arra utal, hogy mi a honlapon szól., De egy közelebbi pillantást kiderül valami mást is. Az elménk azon vágya, hogy kitöltsük a tereket és a teljes mintákat, lehetővé teszi számunkra, hogy a különálló alakzatokat egy egészbe egyesítsük, nagybetűs H-t képezve háromdimenziós térben.

míg a Bezárás nagyszerű érdekes logók létrehozásához, más módon is működhet., A weboldalak interfészeik kialakításában pozitív és negatív teret is használhatnak a hatékony lezárás érdekében. Az alábbiakban az Uncrate logó pozitív helyet használ fekete, negatív háttérrel szemben, hogy logójának betűit formálja, majd létrehozza a webhely márkáját. Ez is egy jó példa a szám-föld, amely fogunk bejutni hamarosan.

Bezárás használata ikonok létrehozásakor

ikonok hasznosak, ha üzenetet kell továbbítanunk, vagy meg kell erősítenünk egy koncepciót egy kis térben. Egyszerűnek kell lenniük, és le kell vetkőzniük az alapvető elemeikre, hogy segítsék az embereket abban, hogy gyorsan megértsék a jelentésüket. A Bezárás jól működik ikonok létrehozásában, pozitív és negatív tér felhasználásával a komplexitás csökkentése érdekében, miközben továbbra is olyan alakzatokat vagy objektumokat javasol, amelyeket teljes egészében érzékelünk, mint ezekben a példákban a főnév projekt honlapján.,

absztrakt lezárás

a lezárás meglehetősen absztrakt lehet, és még mindig lehetővé teszi számunkra, hogy felismerhető mintákat képezzünk. A Bezárás egyik kedvenc felhasználási módja a Google doodle., A Google gyakran alkalmazza a bezárást a doodles-ban, támaszkodva arra, hogy a hiányzó információkat ki kell töltenie egy egész objektum létrehozásához. A Google doodles attól függ, hogy ismerjük-e a Google logót, amely lehetővé teszi az alábbi kép olvasását annak ellenére, hogy nagyon absztrakt formákat tartalmaz. Itt a szín segít megerősíteni a Google logójának minden betűje közötti kapcsolatot is.,

mint látható, a pozitív és negatív tér kreatívan, és csökkenti az elemeket a tervek, tudunk létrehozni néhány igazán érdekes tervek bezárása. Kihasználhatjuk annak szükségességét, hogy kitöltsük a hiányzó részeket, hogy csökkentsük a komplexitást és egyszerűsítsük a terveinket., Ezután megnézzük, hogyan használhatunk pozitív és negatív teret a jó alak-földi kapcsolatok kialakításához.

ábra-Föld

mi az ábra-föld elve? A tervezés univerzális elvei szerint az ábra-föld az az állapot, amelyben az elemeket vagy a fókusz tárgyaként vagy a háttérként érzékeljük. A bezáráshoz hasonlóan az ábra-föld is pozitív és negatív tér felhasználásával működik. A Figure-ground gyakorlatilag mindenben létezik, amit vizuálisan érzékelünk, legyen szó jelenetről, kompozícióról, weboldalról, logóról vagy ikonról.,

ábra-a talaj stabil, ha az objektumok megkülönböztethetők a háttértől, és a háttér nem tartalmaz érdeklődést. A Stable figure-ground egy olyan beállítást biztosít a tárgyak számára, amely lehetővé teszi számunkra, hogy oda összpontosítsuk a figyelmet, ahol akarjuk. Például az alábbi képet egy háttér köreként érzékeljük. A kör a hangsúly, és tartja a figyelmünket, míg a háttér kevéssé érdekes. Ez a példa erős alak-talaj stabilitást mutat, mivel az alak alakja van, és úgy tűnik, hogy elöl van, míg a háttér formátlan, az ábra mögött egy további mélységben folytatódik.,

Ha az ábra-talaj nem stabil, mint az alábbi példában, az észlelési kétértelműség kerül bevezetésre, és az elemek közötti kapcsolatok tisztázatlanná válnak. Ebben a szándékosan leegyszerűsített példában az ábra és a talaj megfordítható, így válthatunk az egyik elem látása, majd a másik, mint az alak, majd a talaj között.

a kétértelműség azonban nem feltétlenül rossz dolog., Ez a stabilitás hiánya felhasználható előnyünkre a tervezés során. Céltudatosan destabilizálja a szám-föld kapcsolat vezethet viszály vagy feszültség, hozzátéve, izgalom és érdeklődés a tervek. A feszültség egyik kedvenc felhasználási területe a Simon C. Page bűnügyi alvilági plakátsorozata. Itt, az Oldal szándékosan destabilizálja ábrán föld besüppedt az elv maga ellen ábra földi csata, hogy ki a figyelmet, ugyanúgy, mint a hős, vagy gazember, a poszter harc egymás ellen.,

jó alak-földi kapcsolatok létrehozása

számos vizuális elem létezik, amelyeket felhasználhatunk a minták alak-földi kapcsolatának megerősítésére. Ezeknek az elemeknek a használata segíthet abban, hogy a figyelmet arra összpontosítsuk, ahol akarjuk, segítve egy weboldal vagy más formatervezés emlékezetében:

• kontraszt., Fehér vagy fekete, párosítva színes, mint látható a bűnügyi alvilág plakátok, létrehoz egy nagyon erős kontrasztot. Hasonlóképpen, a kiegészítő színek kiválóan alkalmasak a kontraszt létrehozására. Ha a tiszta színek túl intenzívek, módosítsa az értéket (milyen sötét vagy világos a szín), hogy hatékonyabb kontrasztot hozzon létre.
• Szín. A meleg színek, mint például a sárgák, a Narancsok és a vörösek, közelednek, és az alak erősítésére használhatók. A hűvös színeket, például a lilákat, a bluesokat és a zöldeket visszahúzódónak tekintik, és a talaj erősítésére is felhasználhatók.
• méret., Amikor egy nagy elem kitölti a talaj nagy részét, akkor azt az alaknak fogják tekinteni. Ezzel szemben egy kis elem egy nagy talajon belül az ábrának tekinthető.
• pozíció. Az alsó területeken elhelyezett elemeket figurának fogják tekinteni, míg a felső területeken elhelyezett elemeket földnek fogják tekinteni. Ez a távolságérzékelésünkkel játszik szerepet, mivel az alsó területeken elhelyezett tárgyakat érzékeljük, hogy közelebb legyenek hozzánk, a felső területeken elhelyezett tárgyakat pedig távolabb.
• fókusz., A fókuszban lévő elemeket figurának fogják tekinteni, míg a fókuszon kívüli, elmosódott, elhalványult vagy színezett elemeket földnek fogják tekinteni.

a legtöbb jó alak-földi kapcsolat sok ilyen vizuális elem kombinációjával jön létre. Ezután vessünk egy pillantást néhány valós példára, és nézzük meg, hogy ezek az elemek hogyan működnek együtt a sikeres figura-föld létrehozása érdekében.,

ábra-a gyakorlatban

a fenti alvilági posztersorozatban szereplő ábra-talaj példa instabil állapotban mutatja az elvet, ahol a figura és a talaj egymással harcolnak a figyelemért. Az instabil alakzat-talaj jól működik, ha kevés elem van, a kialakítás Egyszerű. Ez azonban nem feltétlenül jelenti az elv kívánt használatát a weboldalak tervezésekor, bár ez a weboldal tartalmától és kontextusától függ. A weboldalaknak összetett információkat kell közvetíteniük, és még mindig világosak és használhatóak., A stabil figura-föld, tudjuk irányítani a figyelmet, ahol akarjuk, hogy elkerüljék a kétértelműség az üzenet próbálunk kommunikálni.

vessen egy pillantást az alábbi példára az Apple Music webhelyéről. Valószínűleg a szemed az okostelefon képére húzódik, amely a bal oldali másolattal együtt az ábra elemei. Míg a háttér elkezd harcolni a figyelmünkért, az ábra elemei több vizuális elem használatával javulnak. Először is, ábra erősíti a nagy példányt, valamint a nagy méretű az okostelefon., Az okostelefon elhelyezése a képernyő alján szintén elősegíti a szám előrehaladását. Az ábrát tovább fokozza a háttérben lévő video animáció színezése, ami a talaj visszahúzódását okozza. Végül a világos képernyő és a sötét háttér közötti kontraszt biztosítja az alak és a föld közötti jó elválasztást.

a következő példában, Naya webhelyéről, az ábra mérete a legerősebb vizuális elem, amelyet jó alak-talaj létrehozására használnak. Itt érzékeljük a nőt (és a nagyon nagy kalapját!) mint alak, ahogy kitölti a föld nagy részét. Ezenkívül a hűvös szín használata a háttérben, valamint az átfedő elemek okos használata segíti a háttér visszahúzódását. Végül, mint az Apple Music példa, jó kontraszt választja el az előtéret a háttértől.,

végül az ábra és a talaj közötti kiváló kontraszt az R/m Design Iskola weboldalának erőssége. Itt a menü mutat erős kontraszt, a világos színű, fekete, hogy külön szám a földről. Ezenkívül a meleg színt használják a felénk érkező alak észlelésének megerősítésére. Ne csak azt akarom, hogy elérje, és megragad a piros csempe!,

következtetés

megértése, hogyan kell használni Bezárás és ábra-ground segít építeni erős kapcsolatok és különbségek elemek között a tervek.,

• nézze meg a negatív teret ugyanúgy, mint a pozitív teret érdekes formák felfedezéséhez;
• játsszon körül az előtérben lévő elemek eltávolításával, és használja a negatív teret alakzatok kialakításához;
• végül keverje össze a vizuális elemeket, például kontrasztot, színt, méretet, pozíciót és fókuszt, hogy mind stabil, mind instabil alak-földi kapcsolatokat hozzon létre.

most, hogy tudod, hogyan kell használni ezt a két elvet a munka, menj oda, és hozzon létre saját vonzó, sikeres tervez!,

a sorozat harmadik és utolsó részében a folytatás és a közös sors elveire összpontosítunk,amelyek magukban foglalják a mozgást, mind a hallgatólagos, mind az animált kapcsolatokat.

forrás és jó olvasmány

• ” Gestalt Principles ” on Scholarpedia.
• Univerzális Elvek Design átdolgozva, frissítve: 125 módja, hogy fokozza a használhatóság, befolyása felfogás, növeli a fellebbezés, hogy jobb tervezési döntéseket, tanítani keresztül design by William Lidwell, Kritina Holden pedig Jill Komornyik. – Rockport Pub, 2010.,
• Információvizualizáció: észlelés a tervezés Colin Ware. – Elsevier, 2012.

• Tervezési Elvek: a Vizuális Észlelés, Az Elvek, A Gestalt
• Csatlakoztatás Elválasztó Elemek Keresztül Kontraszt, a Hasonlóság
• Kompozíciós Egyensúly, Szimmetria, Aszimmetria, Illetve
• Hogyan lehetne Javítani Az e-Mail Munkafolyamatot A Moduláris Kialakítás

(ml-es, da, og, jb, il)