Ceļš, izmantojot cilvēkus, apstrādā vizuālo informāciju tīmekļa dizainā

Tīmekļa vietņu un lietotāja interfeisu projektēšana pēdējos gados ir kļuvusi vieglāka. Tur ir tik daudz rīku, ko varat izmantot, kas padara to bezjēdzīgi sākt no nulles, izstrādājot UI (pārbaudiet mūsu svaigo lietotāja interfeisa apkopojumu). Bet es neesmu šeit, lai apstrīdētu web dizaina nāvi.

Tā vietā es centīšos izskaidrot pamatjēdzienus, kas balstīti uz psiholoģiju, balstoties uz visdažādākajiem vizuālā dizaina rīkiem (no visvienkāršākajiem CSS komplektiem līdz vismodernākajām piemaksu tēmām). Jūs ne tikai izmantojat tos, bet arī sapratīsiet tos. Esmu pārliecināts, ka tas arī atvieglos jau esošo esošo modifikāciju ar panākumiem.

Apskatīsim, kā cilvēka prāts un ķermenis darbojas, kad runa ir par vizuālās informācijas apstrādi un to, kā šīs zināšanas tiek interpretētas, veidojot tīmekli.

Perceptuālās organizācijas principi

Saskaņā ar Gestalta psiholoģiju, viss ir atšķirīgs no tā daļu summas. Šīs domas skolas sekotāji apgalvo, ka ir daži principi par to, kā cilvēka prāts grupē objektus. Tās nav tikai teorijas, prāts, bet faktiski praktiski fakti par vizuālo grupu organizēšanu.

Tālāk jūs atradīsiet dažus likumus un populārākos un pazīstamākos šo principu izmantošanas veidus. Jūs pat varētu atrast jaunas idejas nākamajam dizainam.

Līdzības likums

Pirmais princips to nosaka mazie objekti, kas ir līdzīgi, tiek uztverti kā grupa, nevis vairāki šī paša mazā objekta gadījumi. Līdzība var būt balstīta uz formu, krāsu, ēnojumu vai kādu citu kvalitāti. Šis princips ir pamats zīmējuma dizains kā arī daudzi ģeometriskie un minimālisma logotipi.

Piemēram, šis attēls parāda kā apļveida logotipu, nevis atsevišķus trīsstūri. Trīsstūra forma ērgļa apakšā liek domāt, ka forma ir arī daļa no attēla.

Jūs, iespējams, arī šo likumu neapzināti izmantojāt, veidojot dažus, vienāda izmēra satura lodziņos jūsu vietnei. Ja vēlaties parādīt, ka dažiem satura elementiem ir vienāda nozīme vai līdzīga informācija, izveidot konkrētu formu tieši šim nolūkam. Tādā veidā jūsu lietotājs tūlīt saistīs šo konkrēto formu ar konkrētu informācijas jomu.

Tuvuma likums

Saskaņā ar šo likumu objekti, kas ir tuvāki viens otram ir uzskata par tādu pašu grupu. Tādi paši kvadrāti, kad tie tiek cieši cieši un regulāri tuvināti viens otram, rada grupēšanas sajūtu.

Pēdējā laikā šis princips ir izmantots lielā mērā tīmeklī, īpaši strādājot ar satura cilpas, piem. blogos un tīmekļa veikalos.

Jūs varat nekavējoties grupēt nosaukumu, Featured attēlu, metadatus un fragmentu pat bez robežām vai foniem. Jūs, iespējams, varēsiet iztīrīt nevajadzīgās līnijas un krāsas no dizaina, lai padarītu to minimālāku, tomēr vēl pilnībā saprotamu.

Jūsu ērtībai es citēšu arī Wikipedia, kurā norādīts:

Labas formas likums

Šis likums arī pazīstams kā Pragnana jeb Labā Gestalta likums, kurā teikts, ka mēs kopā grupējam objektus, ja tie ir veido vienkāršu, regulāru un kārtīgu modeli. Mūsu prāts mēģina atšķirt sarežģītas un uztveres sarežģītas formas daudzās vienkārši saprotamu formu grupās; tas noved pie svarīgums.

Tas ir arī viens no iespējamiem iemesliem režģa dizains un tas padarīja tik populārus galda un rāmja balstītus (par laimi dizaina tumšajā laikmetā) tīmekļa struktūras.

Paturot prātā šo principu, jūs, iespējams, nebūsiet izveidojis tīmekļa vietni, kas būtu piepildīta ar sarežģītu satura bloku formām, kas būtu jāaplūko, izmantojot citus iepriekš minētos likumus. Tomēr jūs varat grupējiet savus objektus kopā interesantā veidā, piem. dimanta vai klija formā, jo tās joprojām tiek uztvertas kā kārtīgas un kodolīgas.

Krāsu teorija, uztvere un izmantošana

Krāsu redze un krāsu uztvere lielā mērā subjektīvs balstoties uz kā skatītāju smadzenes reaģē uz gaismas viļņiem, ko atspoguļo krāsaini objekti vai formas. Noteikums ir tāds, ka dažādi cilvēki, pat bez redzes traucējumiem, redz to pašu objektu dažādā krāsā (jūs varētu atcerēties šo kleitu).

Krāsu īpašības

Tomēr ir trīs krāsu objekta īpašības; nokrāsu, vērtību un intensitāte.

Hue ir krāsas krāsa, kas marķēta uz krāsaina riteņa vai varavīksnes. Ir sešas (vai divpadsmit, atkarībā no tā, ar ko jūs runājat) pamata nokrāsas: sarkana, oranža, dzeltena, zaļa, zila un violeta.

Dzeltenā, zilā un sarkanā krāsā primārs, oranža, zaļa un violeta sekundāra nokrāsas; arī ir terciārā nokrāsas, kas ir divu primāro un sekundāro nokrāsu tiešie maisījumi (piemēram, dzeltens zaļš vai sarkans violets).

Vērtība ir krāsas gaišums vai tumšums, ko dēvē par augsta vērtība gaišas krāsas vai zema vērtība tumšām krāsām.

Intensitāte attiecas uz spilgtums vai blīvums krāsas; tas nozīmē, ka krāsa ar tādu pašu nokrāsu un to pašu vērtību joprojām var būt spilgta vai spilgta, mainot intensitāti un radot dažādas krāsu izejas.

Visu krāsu visaugstākā intensitāte ir nokrāsas, ko tās uzrāda krāsu ritenī (skat. Zemāk), bet zemākā ir pelēkā krāsa.

Krāsu kontrasti

Atsaucoties uz iepriekšminētajiem līdzības likumiem, uztvērēju prāti rada mazu objektu grupas, kuras tās uzskata par līdzīgām un atšķirīgām īpašībām - bieži vien krāsas.

Kad jūsu vietnei izvēlējāties savu krāsu paleti, it īpaši, ja jūs izmantojat minimālisma pieeju vai izveidojat teksta satura smagu saturu, piem. jums vajadzētu apzināties dažādus krāsu kontrastus kas var palīdzēt atrast pareizās krāsas vērtības, lai iegūtu vislabāko rezultātu.

Pēc Johannes Itten ir 7 krāsu kontrasti, lai gan es tikai pieminēšu 3.

1. Krāsas kontrasts

Dzeltena, sarkana un zila ar pilnu intensitāti ir tiešs un spilgts kontrasts. Sekundārās nokrāsas padara mazāk izteiktas atšķirības, bet joprojām darbojas, tāpat kā trīskāršās nokrāsas, kaut arī tās nerada satriecoši rezultāti, tāpat kā primārās nokrāsas.

2. Papildu kontrasts

Divas krāsas ir savstarpēji papildinošā kontrastā, ja tās kopā sajaucas ar neitrālu pelēku. Tos sauc arī dīvaini pāri. Ja tie atrodas blakus, tie uzlabo spilgtumu un intensitāti, bet kopā sajauc viens otru. Katrai krāsai ir viens un tikai viens papildinājums; krāsu ritenī pāri ir diagonāli pretēji viens otram.

3. Gaiši tumšs kontrasts

Ja vēlaties eksperimentēt ar vienas krāsas vietni, izmantojot dažādas tāda paša nokrāsas vērtības var radīt lieliskus rezultātus. Bieži vien izmantojat minimālisma web dizainā, jūs varat arī radīt lieliskus rezultātus, pamatojoties uz gaišā un tumšā kontrastu, ja vēlaties lietotājam piešķirt krāsu krāsu opcijas. Šo kontrastu izmanto arī pelēktoņu dizainam.

Ja vēlaties turpināt atlikušos 4 krāsu kontrastus, varat tos atrast šeit.

Palešu izveidošana un kontrastu pārbaude

Zinot teoriju ir lieliska, jūsu ideju interpretācija ir vēl viena lieta. Tomēr jums nevajadzētu uztraukties, jo tīmeklis nodrošina lielisku atbalstu jūsu krāsu žonglēšanai. Ir vairāki rīki, kas palīdz izveidot pielāgotus krāsu modeļus, pamatojoties uz krāsu kontrastu noteikumiem, piem. Paletton vai Adobe Kuler.

Web nolūkos, iespējams, vēlēsities pārbaudīt kontrastus, kurus izvēlējāties izmantot webAIM, pie Jonathan Snook vietnes vai lejupielādējiet Paciello grupas krāsu kontrastu analizatora gadījumu šeit.

Secinājums

Kad sākat strādāt ar jaunu tēmu vai sāciet modificēt esošos, mēģiniet domāt par uztveres principiem, lai organizētu savu saturu un atcerieties apsvērt krāsu noteikumus, piešķirot savu galīgo formu un nokrāsu.

Redaktora piezīme: Šis viesu ziņojums ir rakstīts uz Hongkiat.com Martons Melns. Martons ir Ungārijas vietnes attīstītājs, kas nesen ir piesaistījis WordPress. Viņš ir pārveidotais entuziasts un ārštata satura rakstnieks, kam patīk brīvā laikā spēlēt RPG.