Използване на начина, по който хората обработват визуалната информация в уеб дизайна

Проектирането на уеб сайтове и потребителски интерфейси станаха по-лесни през последните няколко години. Има толкова много инструменти, които можете да използвате, което го прави безсмислено да започвате от нулата при разработването на потребителски интерфейси (вижте нашата нова компилация на UI). Но аз не съм тук, за да споря за смъртта на уеб дизайна.

Вместо това ще се опитам да обясня основните концепции, основаващи се на психологията, които стоят зад изобилието от инструменти за визуален дизайн (от най-основните комплекти CSS до най-напредналите премиум теми).. Вие не просто ще ги използвате, но и ще ги разберете. Убеден съм, че това също ще улесни промяната на вече съществуващи такива.

Нека разгледаме как работи човешкият ум и тяло, когато става въпрос за обработка на визуална информация и как това знание се интерпретира в проектирането за мрежата.

Принципите на перцептивната организация

Според гещалтската психология, цялото е различно от сумата от нейните части. Последователите на тази школа на мисълта твърдят, че има няколко принципа за това как човешкият ум групира обектите. Това не са просто теории, имайте предвид, а реални практически факти за организиране на визуални групи.

По-долу ще намерите някои от законите и по-популярните и добре познати употреби на тези принципи. Може дори да намерите някои нови идеи за следващия си дизайн.

Закон за сходството

Първият принцип гласи това малки обекти, които са подобни, се възприемат като група, вместо няколко копия на същия малък обект. Сходството може да се основава на форма, цвят, засенчване или друго качество. Този принцип е в основата на дизайн както и много геометрични и минималистични дизайни на лого.

Например, тази снимка показва като кръгло лого вместо отделни триъгълници. Триъгълната форма на дъното на орела ни кара да мислим, че формата е също част от образа.

Вероятно сте използвали този закон и несъзнателно, когато създавате няколко, еднакви по размери съдържащи кутии за съдържание за вашия уебсайт. Ако желаете да покажете, че някои елементи от съдържанието имат еднакво значение или споделяте подобна информация, създайте специфична форма само за тази цел. По този начин потребителят веднага ще свърже тази конкретна форма с определена област от информация.

Закон за близост

Според този закон обекти, които са по-близо един към друг от една и съща група. Същите квадрати, когато се изобразяват един до друг в близка, редовна близост, създават усещане за групиране.

Този принцип е използван до голяма степен в интернет напоследък, особено при работа с него контури за съдържание, например в блогове и уеб магазини.

Можете веднага да групирате заглавието, изобразеното изображение, метаданните и откъса, дори без граници или фонове. Може да изтриете ненужните линии и цветове от своя дизайн, за да го направите по-минималистичен, но все пак напълно разбираем.

За ваше удобство ще цитирам и Уикипедия, която гласи:

Закон за добра форма

Също известен като Закона на Прагнанц или Добър Гещалт, този закон гласи, че сме склонни да групираме обекти заедно, ако те формирайте модел, който е прост, редовен и подреден. Нашият ум се опитва да раздели сложни и възприемчиво трудни форми в много групи от просто разбираеми форми; това води до значението на сбитостта.

Това е и една от възможните причини за успеха на дизайн, базиран на мрежата и това направи базирани на маси и рамки (щастливи неща на тъмните векове на дизайна) уеб структури толкова популярни.

Ако запазите този принцип в ума, вероятно няма да създадете уебсайт, пълен със сложни форми на блокове със съдържание, които биха могли да се свържат предвид други закони по-горе. Все пак можете групирайте обектите си по интересен начин, например с форма на диамант или хвърчило, тъй като те все още се възприемат като подредени и стегнати форми.

Теория на цветовете, възприятие и използване

Цветното зрение и възприемането на цвета е до голяма степен субективно базиран на как мозъците на зрителите реагират към светлинните вълни, отразени от цветни предмети или форми. Правилото е, че различни хора, дори и без зрителни увреждания, виждат същия обект в различен цвят (може би си спомняте роклята).

Цветови свойства

Все още има три обективни свойства на цвета; оттенък, стойност и интензивност.

оттенък е името на цвета, обозначен върху цветно колело или в дъга. Има шест (или дванадесет, в зависимост от кого говорите) основни нюанси: червено, оранжево, жълто, зелено, синьо и виолетово.

Жълти, сини и червени са първичен, оранжево, зелено и виолетово втори нюанси; също така има третичен нюанси, които са директни смеси от два първични и вторични нюанса (например жълтозелено или червено виолетово).

стойност е лекотата или тъмнината на цвета, наричана висока стойност за светли цветове или ниска стойност за тъмни цветове.

интензивност се отнася до яркост или затъмняване цвят; това означава, че цвят със същия цвят и една и съща стойност все още може да бъде затъмнен или по-светъл чрез промяна на интензитета и създаване на различни цветови изходи.

Най-високият интензитет на всеки цвят е оттенъкът, който те показват на цветното колело (виж по-долу), а най-ниското е цветното сиво.

Цветови контрасти

Позовавайки се на споменатите по-горе закони за сходство, умовете на възприемащите създават групи от малки обекти, които виждат въз основа на подобни и различни свойства - често цветове.

Когато избирате цветовата палитра за уебсайта си, особено ако използвате минималистичен подход или проектирате текстово съдържание, напр. блогове или реклами, трябва имайте предвид различните цветови контрасти това може да ви помогне да намерите правилните цветови стойности за най-добър резултат.

Има 7 цветни контраста според Йоханес Итен, въпреки че ще спомена само 3.

1. Контраст на нюанса

Жълто, червено и синьо при пълен интензитет са преки и ярки контрасти. Вторичните нюанси правят по-малко остри различия, но все още работят, точно както третичните цветове правят, въпреки че нито произвеждат така страхотни резултати, както при първичните нюанси.

2. Допълнителен контраст

Два цвята са в допълнителен контраст, ако смесени заедно създават неутрално сиво. Те също се наричат странни двойки. Ако те са в непосредствена близост, те повишават яркостта и интензивността, докато се смесват заедно и взаимно се изключват. Всеки цвят има един и само един допълващ се; върху цветното колело двойките са диагонално противоположни една на друга.

3. Светло-тъмен контраст

Ако искате да експериментирате с едноцветен уебсайт, използване на различни стойности на един и същ оттенък може да доведе до страхотни резултати. Често използван в минималистичния уеб дизайн, можете да създавате отлични резултати, базирани на контраст на светло-тъмни цветове, ако искате да предоставите опции за цвят на темата на вашия потребител. Този контраст се използва и за дизайн в сиво.

Ако искате да преследвате останалите 4 цветни контраста, можете да ги намерите тук.

Създаване на палитри и проверка на контрастите

Знаейки, че теорията е голяма, тълкуването на вашите идеи е съвсем друго нещо. Не бива да се тревожите, но уеб предоставя голяма подкрепа за вашите нужди за жонглиране. Съществуват множество инструменти, които ви помагат да създавате персонализирани цветови модели въз основа на правила за цветен контраст, напр. Палетън или Adobe Кулер.

За уеб цели, може да искате да проверите контрастите, които сте избрали да използвате в webAIM, на сайта на Jonathan Snook или да изтеглите копие на Color Contrast Analyzer от The Paciello Group тук.

заключение

Когато започнете да работите с нова тема или започнете да модифицирате съществуващите, опитайте се да мислите за принципите на възприятието, за да организирате съдържанието си и не забравяйте да се съобразявате с цветните правила, когато давате на дизайна си окончателната си форма и нюанс.

Бележка на редактора: Този гост-пост е написан за Hongkiat.com от Мартон Фекете. Мартон е унгарски разработчик на сайтове, който наскоро се включи в WordPress. Той е редизайн ентусиаст и писател на свободна практика, който обича да играе ролеви игри в свободното си време.