Naudojant kelią Žmonės apdoroja vaizdinę informaciją žiniatinklio dizaine

Tinklalapių ir vartotojo sąsajų projektavimas per pastaruosius kelerius metus tapo lengvesnis. Yra tiek daug įrankių, kuriuos galite naudoti, todėl nereikia pradėti nuo nulio kuriant vartotojo sąsajas (patikrinkite mūsų naują UI rinkinį). Bet aš ne čia noriu ginčytis dėl interneto dizaino mirties.

Vietoj to, aš stengsiuosi paaiškinti pagrindines, psichologines, koncepcijas, susijusias su daugybe vizualinio dizaino įrankių (nuo pačių pagrindinių CSS rinkinių iki pažangiausių priemokų temų). Jūs ne tik ketinate juos naudoti, bet ir suprasti. Esu įsitikinęs, kad tai taip pat leis lengviau modifikuoti jau esamus.

Pažvelkime, kaip žmogaus protas ir kūnas veikia, kai kalbama apie vizualinės informacijos apdorojimą ir kaip šios žinios interpretuojamos kuriant žiniatinklį.

Praktinės organizacijos principai

Pagal Gestalto psichologiją, visa tai skiriasi nuo jos dalių sumos. Šios minties mokyklos sekėjai teigia, kad yra keletas principų, kaip žmogaus protas grupuoja objektus. Tai nėra tik teorijos, protas, bet faktiniai praktiniai faktai apie vizualinių grupių organizavimą.

Žemiau rasite keletą įstatymų ir populiaresnių bei žinomų šių principų naudojimo. Galbūt netgi galėsite rasti naujų idėjų savo kitam dizainui.

Panašumo įstatymas

Pirmasis principas teigia, kad panašūs panašūs objektai yra suvokiami kaip grupė, vietoj kelių to paties mažo objekto atvejų. Panašumas gali būti pagrįstas forma, spalva, atspalviu ar kita kokybe. Šis principas yra pagrindas modelio dizainas taip pat daug geometrinių ir minimalistinių logotipų.

Pavyzdžiui, šis paveikslėlis parodomas kaip apvalus logotipas vietoj atskirų trikampių. Eglės apačioje esanti trikampė forma leidžia manyti, kad forma taip pat yra vaizdo dalis.

Jūs tikriausiai taip pat naudojote šį įstatymą nežinodami, kai kuriate keletą, vienodo dydžio turinio dėžutės jūsų svetainėje. Jei norite parodyti, kad tam tikri turinio elementai yra vienodai svarbūs arba dalijasi panašia informacija, sukurti tam tikrą formą. Tokiu būdu jūsų vartotojas nedelsdamas susieja tą konkrečią formą su konkrečia informacijos sritimi.

Artumo įstatymas

Pagal šį įstatymą arčiau objektų viena kitai laikoma tos pačios grupės. Tie patys kvadratai, kai jie yra artimi arti artimųjų, sukuria grupavimo jausmą.

Šis principas pastaruoju metu buvo naudojamas internete, ypač dirbant turinio kilpos, pvz. tinklaraščiuose ir internetinėse parduotuvėse.

Jūs galite iš karto sugrupuoti pavadinimą, rodomą vaizdą, metaduomenis ir ištrauką net be jokių sienų ar fonų. Jūs galite išvalyti nereikalingas linijas ir spalvas iš savo dizaino, kad jis taptų minimalistiškesnis, tačiau vis dar gerai suprantamas.

Jūsų patogumui cituosiu ir Vikipediją, kurioje nurodoma:

Geros formos įstatymas

Šis įstatymas taip pat žinomas kaip Pragnano ar Gestalto įstatymas, kuriame teigiama, kad mes bendrai grupuojame daiktus, jei jie yra sudaryti paprastą, reguliarų ir tvarkingą modelį. Mūsų protas stengiasi atskirti sudėtingas ir suvokiamas sudėtingas formas į daugelį tiesiog suprantamų formų grupių; tai veda prie glaustumo svarba.

Tai taip pat yra viena iš galimų priežasčių, kodėl buvo sėkminga tinklinis dizainas tai padarė taip populiarus stalo ir rėmo pagrindu (laimei, tamsoje dizaino amžių).

Turėdami omenyje šį principą, tikriausiai negalėsite sukurti svetainės, užpildytos sudėtingomis turinio blokų formomis, kurios būtų prijungtos prie kitų įstatymų. Vis dėlto galite grupuokite savo objektus įdomiu būdu, pvz. deimantų arba aitvarų formos, nes jos vis dar suvokiamos kaip tvarkingos ir glaustos.

Spalvų teorija, suvokimas ir naudojimas

Spalvos matymas ir spalvų suvokimas daugiausia subjektyvus remiantis kaip žiūrovų smegenys reaguoja šviesių bangų, atspindinčių spalvingus objektus ar figūras. Taisyklė yra ta, kad skirtingi žmonės, net ir neturintys regėjimo, mato tą patį objektą skirtingomis spalvomis (galite prisiminti suknelę).

Spalvų savybės

Vis dėlto yra trys objektyvios spalvos savybės; atspalvis, vertė ir intensyvumas.

Atspalvis yra spalvos pavadinimas, pažymėtas ant spalvoto rato arba vaivorykštės. Yra šeši (arba dvylika, priklausomai nuo to, su kuo kalbate) pagrindiniai atspalviai: raudona, oranžinė, geltona, žalia, mėlyna ir violetinė.

Geltonos, mėlynos ir raudonos spalvos pirminė, oranžinė, žalia ir violetinė antrinis atspalviai; taip pat yra tretinis atspalviai, kurie yra tiesioginiai dviejų pirminių ir antrinių atspalvių mišiniai (pvz., geltona žalia arba raudona violetinė spalva).

Vertė yra spalvos šviesumas arba tamsumas, vadinamas Aukšta vertė šviesios spalvos arba mažos vertės tamsioms spalvoms.

Intensyvumas nurodo ryškumas arba tamsumas spalvos; tai reiškia, kad spalva, turinti tą patį atspalvį ir tą pačią vertę, vis dar gali būti apšviesta arba paryškinta, keičiant intensyvumą ir sukuriant skirtingus spalvų išėjimus.

Didžiausias kiekvienos spalvos intensyvumas yra atspalvis, kurį jie rodo ant spalvoto rato (žr. Žemiau), o mažiausia yra pilka spalva.

Spalvų kontrastai

Remiantis minėtais panašumo įstatymais, suvokėjų protai sukuria mažų objektų grupes, kurias jie mato pagal panašias ir skirtingas savybes - dažnai spalvas.

Kai pasirinkote savo svetainės spalvų paletę, ypač jei naudojate minimalistinį požiūrį arba projektuojate teksto sunkią turinio sritį, pvz. tinklaraščius ar skelbimus suvokti skirtingus spalvų kontrastus kuri gali padėti jums rasti tinkamas spalvų vertes, kad gautumėte geriausią rezultatą.

Pagal Johannes Itten yra 7 spalvų kontrastai, nors tik paminėsiu 3.

1. Spalvos kontrastas

Geltonos, raudonos ir mėlynos spalvos yra tiesioginiai ir ryškūs kontrastai. Antriniai atspalviai daro mažiau aštrią skirtumą, tačiau vis dar veikia, kaip ir tretiniai atspalviai, nors jie neišskiria nuostabūs rezultatai, kaip ir pirminiuose atspalviuose.

2. Papildomas kontrastas

Dvi spalvos yra papildomame kontraste, jei kartu sumaišomos neutralios pilkos spalvos. Jie taip pat vadinami keistos poros. Jei jie yra gretimi, jie pagerina ryškumą ir intensyvumą, o kartu sumaišomi vienas kitą. Kiekviena spalva turi vieną ir tik vieną papildomą; ant spalvoto rato, poros yra įstrižai priešingos viena kitai.

3. Šviesiai tamsus kontrastas

Jei norite eksperimentuoti su vienos spalvos svetaine, naudojant skirtingas to paties atspalvio reikšmes gali sukelti nuostabių rezultatų. Dažnai naudojamas minimalistinio web dizaino, taip pat galite sukurti puikių rezultatų, remiantis šviesos-tamsus kontrastas, jei norite pateikti temos spalvų parinktis savo vartotojui. Šis kontrastas taip pat naudojamas pilkos spalvos dizainui.

Jei norite tęsti likusius 4 spalvų kontrastus, juos galite rasti čia.

Paletės kūrimas ir kontrastų tikrinimas

Gerai žinant teoriją, jūsų idėjų aiškinimas yra dar vienas dalykas. Jūs neturėtumėte nerimauti, tačiau žiniatinklis suteikia didelę paramą jūsų spalvų žongliravimo poreikiams. Yra daugybė įrankių, kurie padeda sukurti individualius spalvų modelius, pagrįstus spalvų kontrasto taisyklėmis, pvz. Paletton arba Adobe Kuler.

Naudodamiesi žiniatinklio tikslais, galbūt norėsite patikrinti kontrastus, kuriuos pasirinkote naudoti „webAIM“, „Jonathan Snook“ svetainėje arba atsisiųsti „Paciello Group“ spalvų kontrasto analizatoriaus egzempliorių čia.

Išvada

Kai pradėsite dirbti su nauja tema arba pradėsite keisti esamas, pabandykite pagalvoti apie suvokimo principus, kad organizuotumėte savo turinį, ir nepamirškite apsvarstyti spalvų taisykles, kai pateikiate savo dizaino galutinę formą ir atspalvį.

Redaktoriaus pastaba: Šis svečių įrašas yra parašytas „Hongkiat.com“ Martonas Fekete. Martonas yra vengrų svetainės kūrėjas, neseniai užsikabinęs „WordPress“. Jis yra perprojektuojantis entuziastas ir laisvai samdomas turinio rašytojas, kuris mėgsta žaisti RPG savo laisvalaikiu.