Використання способу Людей обробляти візуальну інформацію в веб-дизайні
Проектування веб-сайтів і інтерфейсів користувачів стало набагато простішим протягом останніх кількох років. Є так багато інструментів, які ви можете використовувати, що робить його безглуздим починати з нуля при розробці інтерфейсів користувача (ознайомтеся з нашою новою компіляцією інтерфейсу користувача). Але я не тут, щоб сперечатися про смерть веб-дизайну.
Натомість, я спробую пояснити основні концепції психології на основі численних інструментів візуального дизайну (від найпростіших наборів CSS до найдосконаліших преміум-тем).. Ви не просто збираєтеся їх використовувати, а й розумієте їх. Я впевнений, що це також полегшить зміну існуючих з успіхом.
Давайте подивимося, як працює людський розум і тіло, коли йдеться про обробку візуальної інформації, і про те, як це знання інтерпретується в проектуванні для Інтернету.
Принципи організації сприйняття
Згідно гештальт-психології, ціле відрізняється від суми його частин. Послідовники цієї школи думки стверджують, що існує кілька принципів про те, як людський розум об'єднує об'єкти. Це не просто теорії, ви, а фактичні практичні факти про організацію візуальних груп.
Нижче ви знайдете деякі закони та більш популярні та відомі способи використання цих принципів. Ви навіть можете знайти нові ідеї для вашого наступного дизайну.
Закон подібності
Перший принцип стверджує, що малі об'єкти, подібні, сприймаються як група, замість декількох екземплярів того самого малого об'єкта. Подібність може бути заснована на формі, кольорі, затіненні або іншій якості. Цей принцип лежить в основі шаблон дизайну а також багато геометричних і мінімалістичних дизайнів логотипів.
Наприклад, ця картинка відображається як круговий логотип замість окремих трикутників. Трикутна форма на дні орла змушує нас думати, що форма також є частиною зображення.
Ви, напевно, також використовували цей закон, не знаючи при створенні декількох, Однорідні розміщені вікна вмісту для вашого веб-сайту. Якщо ви хочете показати, що певні елементи вмісту мають однакове значення або поділяєте подібну інформацію, створити певну форму тільки для цієї мети. Таким чином, ваш користувач негайно пов'язує цю особливу форму з певною інформацією.
Закон близькості
Відповідно до цього закону об'єкти, які ближче один одному вважаються однією і тією ж групою. Ті самі квадрати, коли вони розташовані поруч один з одним у тісній, регулярній близькості, створюють відчуття групування.
Цей принцип значною мірою використовувався в Інтернеті останнім часом, особливо при роботі з ним контури вмісту, напр. в блогах і веб-магазинах.
Ви можете негайно згрупувати заголовок, образоване зображення, метадані та витяг разом без будь-яких меж або фонів. Ви можете очистити непотрібні лінії та кольори від дизайну, щоб зробити його більш мінімалістичним, але все ще повністю зрозумілим.
Для вашої зручності я також наведу посилання на Вікіпедію:
Закон доброї форми
Цей закон також відомий як Закон Прагнанца або Доброго Гештальту, цей закон говорить, що ми схильні групувати об'єкти разом, якщо вони сформуйте зразок, який є простим, регулярним і впорядкованим. Наш розум намагається розділити складні і сприйнятливо складні форми на багато груп просто зрозумілих форм; це призведе до важливість лаконічності.
Це також одна з можливих причин успіху дизайн на основі сітки і це зробило настільну та рамну основу (на щастя, речі темного віку дизайну) веб-структурами настільки популярними.
Якщо ви дотримуєтеся цього принципу, ви, мабуть, не створите веб-сайт, наповнений складними формами блоків вмісту, які будуть пов'язані з урахуванням інших законів вище. Тим не менш, ви можете об'єднуйте об'єкти разом цікаво, напр. у формі алмазу або кайта, оскільки вони все ще сприймаються як впорядковані і лаконічні форми.
Теорія кольору, сприйняття та використання
Кольорове бачення і сприйняття кольору в основному суб'єктивно на основі як реагують мозок глядачів до світлових хвиль, відображених барвистими об'єктами або фігурами. Правило полягає в тому, що різні люди, навіть без будь-яких порушень зору, бачать один і той же об'єкт в іншому кольорі (ви можете згадати плаття).
Властивості кольору
Ще є три об'єктивні властивості кольору; відтінок, значення і інтенсивність.
Hue це назва кольору, позначеного на кольоровому колі або у веселці. Основні відтінки: шість (або дванадцять залежно від того, з ким ви розмовляєте): червоний, оранжевий, жовтий, зелений, синій і фіолетовий.
Жовтий, синій і червоний первинний, помаранчеві, зелені та фіолетові вторинний відтінки; також є третинний відтінки, які є прямими сумішами двох первинних і вторинних відтінків (наприклад, жовто-зеленого або червоного фіолетового).
Значення є легкість або темність кольору, що називається як високої вартості для світлих кольорів або низької вартості для темних кольорів.
Інтенсивність відноситься до яскравість або затемнення кольору; це означає, що колір з однаковим відтінком і тим же значенням може бути затемнений або освітлений, змінюючи інтенсивність і створюючи різні кольорові виходи.
Найбільша інтенсивність кожного кольору - це відтінок, який вони показують на колірному колесі (див. Нижче), а найнижчий - сірий колір.
Колірні контрасти
Посилаючись на вищезазначені закони подібності, уми споглядачів створюють групи малих об'єктів, які вони розглядають на основі подібних і різних властивостей - часто кольори.
Коли ви обираєте колірну палітру для свого веб-сайту, особливо якщо ви звертаєтесь до мінімалістичного підходу або створюєте текстові області вмісту, наприклад, блоги чи оголошення знати різні контрасти кольору це може допомогти знайти правильні значення кольору для найкращого результату.
Є 7 кольорових контрастів за Йоханнесом Іттеном, хоча я згадаю лише 3.
1. Контраст відтінку
Жовтий, червоний і синій на повну інтенсивність є прямими і яскравими контрастами. Вторинні відтінки роблять для менш різкого розрізнення, але все ще працюють, так само, як третинний відтінок роблять, хоча ні виробляють як дивовижні результати, як з первинними відтінками.
2. Додатковий контраст
Два кольори мають додатковий контраст, якщо при змішуванні вони створюють нейтральний сірий. Вони також називаються дивні пари. Якщо вони розташовані поруч, вони підвищують яскравість і інтенсивність, а разом змішуються. Кожен колір має один і тільки один додатковий; на кольоровому колесі пари паралельно розташовані по діагоналі.
3. Контраст світло-темний
Якщо ви хочете експериментувати з одноколірним веб-сайтом, з використанням різних значень одного і того ж відтінку може призвести до приголомшливих результатів. Часто використовується в мінімалістичному веб-дизайні, ви також можете створювати чудові результати на основі контрастності світла-темряви, якщо ви хочете надавати користувачеві параметри кольору теми. Цей контраст також використовується для оформлення у градаціях сірого.
Якщо ви хочете переслідувати інші 4 кольорові контрасти, їх можна знайти тут.
Створення палітр і перевірка контрастності
Знаючи, що теорія велика, інтерпретація ваших ідей - це зовсім інша річ. Ви не повинні хвилюватися, хоча веб надає велику підтримку для ваших потреб кольору жонглювання. Існує безліч інструментів, які допомагають створювати власні шаблони кольорів на основі правил кольорового контрасту, наприклад, Палеттон або Adobe Kuler.
Для веб-цілей, ви можете перевірити контрасти, які ви вирішили використовувати в webAIM, на сайті Jonathan Snook або завантажити екземпляр Color Contrast Analyzer від The Paciello Group.
Висновок
Коли ви починаєте працювати з новою темою або починаєте змінювати існуючі, спробуйте подумати про принципи сприйняття, щоб упорядкувати свій вміст, і не забувайте враховувати правила кольору, надаючи дизайну свою кінцеву форму та відтінок..
Примітка редактора: Цей гостьовий пост написано для Hongkiat.com Мартон Фекете. Мартон - угорський розробник сайтів, який нещодавно підключився до WordPress. Він є ентузіастом-редактором і незалежним письменником, який любить грати в РПГ у вільний час.
