3 Cs на потребителски интерфейси: цвят, контраст и съдържание

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

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

Разгледайте дизайнерските ресурси

цвят

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

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

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

Цветни въздействия:

• Използваемост и четимост
• Разпознаване и осъзнаване на марката
• Там, където потребителите гледат и си взаимодействат
• Организация и потребителски поток
• Общ успех на дизайна

Използвайте цвят, за да създадете:

• Навигация, която е ясна и разбираема
• Интуитивни взаимодействия
• Настроение за проекта
• Създавайте силни призиви за действие или използваеми елементи
• Създайте усещане за какво става въпрос за дизайна, като реалност срещу фантазия

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

И така, откъде да започнете? Може би най-важните променливи, когато става въпрос за цвят, е създаването на палитра, която е ангажираща потребителите и говори за това, за какво става дума (като брандиране и настроение). Например, уебсайт за Coca-Cola, който използва синьо като доминиращ цвят, а не червен, ще се притеснява от потребителите.

Солидната цветова палитра се корени в принципите на теорията на цветовете.

Солидната цветова палитра се корени в принципите на теорията на цветовете. Не са ви необходими повече от няколко цвята, за да работи. Два-три цвята и добра библиотека от по-светли и по-тъмни вариации са достатъчни. Mockplus препоръчва правилото 6: 3: 1: изберете три цвята за палитра, включително доминиращ цвят, който се използва 60 процента от времето, вторичен цвят, който се използва 30 процента от времето, и цвят на акцент, който може да бъде в останалите 10 процента от дизайна. Правилото се корени в златното съотношение, основа на теорията на дизайна и може да бъде чудесна отправна точка.

Ето още едно правило за създаване на цветни палитри в потребителски интерфейси: започнете с черно и бяло. Ако дизайнът е използваем без цвят, вероятно ще работи, след като цветът е добавен. Черно-белите контури също ви дават добра идея как да изберете цветове с достатъчно контраст (вторият C), за да подобрите използваемостта.

Контраст

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

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

Можете да установите контраст с:

• цвят
• размер
• Посока
• пространство
• форма

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

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

Накратко, идеята зад контраста е, че противоположностите привличат.

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

Разликата между плътно и отворено пространство създава много контраст. Ако искате да гарантирате, че текстът ви е лесен за гледане и четене, дайте му малко повече място, за да привлечете вниманието към него.

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

За да знаете дали контрастът работи по начина, по който възнамерявате, помислете за няколко фактора, когато гледате елементите на екрана:

• Четене: Лесно ли се виждат и четат всички думи и изображения?
• Яснота: Лесно ли е да различим един елемент от друг?
• Достъпност: Работи ли за възможно най-много хора?
• Околна среда: Могат ли потребителите да видят и разбират дизайна на местата, където ще се използва?

съдържание

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

Само да имаш съдържание не е достатъчно. Трябва да имате звездно съдържание.

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

И само да имаш съдържание не е достатъчно. Трябва да имате звездно съдържание. Съдържание с висока резолюция. Съдържание с висока стойност. Съдържанието ви трябва да бъде по-добро / по-голямо / по-специално от подобно съдържание, конкуриращо вниманието на потребителите.

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

заключение

Сега, когато сте въоръжени със старите три Cs на бизнеса - компания, клиенти и конкуренти - и три Cs на дизайн на потребителски интерфейс - цвят, контраст и съдържание - имате инструментите и знанията, за да създадете дизайнерски проект, който е извън този свят добре. (Или поне много използваем.)

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

Забележка: Всички примери в тази статия са от галерията Design Shack Gallery. Не забравяйте да се огледате; пълен е с много работа и вдъхновение.