Силата на цветовете в дизайна на мобилни приложения
Основни правила при използването на цветове в интерфейса на апликациите.
Цветовата палитра често е считана за най-важния аспект от едно мобилно приложение след функционалностите, разбира се. Взаимодействието между хората и компютрите зависи до голяма степен от графичните елементи на потребителския интерфейс и съответно от техните цветове. Те помагат на потребителите да разберат съдържанието, да използват различните компоненти и да извършват действия. Всяко мобилно приложение има цветова схема, която посочва кои цветове да се използват и къде.
Едно от основните решения при изработката на ново мобилно приложение е изборът на цветова схема. Тук ще разгледаме основните видове схеми и персонализирани комбинации, които на са базирани на нито един от тях, както и как се избират цветове и се постига контраст, така че да се подобри ползваемостта на апликацията. Да започваме.
Избор на ефективна цветова схема
Тук трябва да се вземат под внимание редица фактори, включително отличителния цвят на бранда, както и психологическото значение на цветовете. Те трябва да се подберат така, че да създават трайна асоциация с бранда и неговите продукти и да въздействат силно на конкретната целева аудитория.
Колко на брой да са цветовете?
По-простичките цветови комбинации са най-ефективни за подобряването на потребителското преживяване, тъй като не натоварват очите и дават възможност на хората да се концентрират върху съдържанието. Шарените мобилни приложения могат да изглеждат забавни, но определено не са лесни за ползване. Проучванията сочат, че предпочитанията на болшинството от хората клонят към комбинации с два или три цвята.
Видове цветови схеми
Кои да са тези два или три цвята? При избора им се използва така нареченото цветово колело, състоящо се от 12 основни цвята (секции).
Цветово колело
Той се базира и на дефинираните стандарти за цветови схеми, определящи съответните видове:
- Монохроматични - При тях се избира един основен цвят, на който се базират останалите. Те са различни негови тонове и нюанси. Счита се, че тези схеми не товарят очите и дори успокояват потребителите, особено ако основният цвят е син или зелен. По този начин съдържанието излизва на преден план.
- Аналогови - Тези цветови схеми се състоят от свързани цветове, които не се открояват значително един от друг. Това обикновено са три цвята, които са един до друг на колелото, като червен, оранжево-червен и оранжев например. Един от тези цветове се избира за доминиращ, а останалите се използват за дообогатяване на дизайна на приложението. Този вид схеми обикновено се използват за мобилни приложения, при които има степенуване на съдържанието, като списък със задачи по спешност и приоритет например, или които целят да създадат определена емоция с различна наситеност.
- Допълващи се - Цветовете в тези схеми всъщност стоят един срещу друг на цветовото колело. Използват се заедно за създаването на контраст, така че да се привлече потребителското внимание. Обикновено се избира един доминантен цвят, като противостоящият му се използва за акцентите. Ако например основният цвят на мобилното приложение е зеленият, то червеното може да се използва за иконата, която индикира нови известия в рамките на апликацията. Така потребителите гарантирано ще им обърнат внимание.
- Персонализирани - При създаването на тези цветови схеми дизайнерите на мобилни приложения развихрят въображението си. Въпреки това, има някои основни идейни насоки. При една схема с неутрални цветове например може да се добави един ярък, който да служи за акцент. Ефектът е красив и елегантен.
Влиянието на цветовия контраст
Обикновено оцветен елемент или секция от интерфейса на мобилното приложение не се показва самостоятелно, а е до или върху друг оцветен елемент или секция. Така се създава контраст. Нивото на контраст се определя от това колко се различава един цвят от друг. Когато се използва правилно, този ефект намалява натоварването на очите и насочва вниманието на потребителите, като ясно разграничава компонентите, показани на екрана.
Контраст, улесняващ четенето на текст
При по-нисък контраст има плавно преминаване от един елемент в друг и се създава усещане за хармония и красота. Въпреки това, красотата невинаги е най-доброто решение що се отнася до четенето на текст. Когато се използват цветове за фон и шрифт, два цвята с нисък контраст ще направят четенето трудно, особено когато потребителят използва мобилното приложение на смартфона или таблета си навън и светлината е ярка.
Как се постига достатъчно ниво на контраст за удобство на потребителите? Отговорът е: чрез по-голямо контрастно съотношение. Контрастното съотношение показва колко различен е единият цвят от другия, примерно 2:1 или 20:1. Колкото по-голяма е разликата между двете числа, толкова по-голям е относителният интензитет на светлината между двата цвята.
Тук ще посочим основните контрастни съотношения, които се използват най-често при дизайна на мобилни приложения, като направим уточнението, че дизайнерите могат да не се придържат стриктно към тях, ако от това зависи подобряването на потребителското преживяване:
- За малък шрифт се препоръчва контрастно съотношение 4.5:1 към фона.
- За голям шрифт (18 pt стандартен или 14 pt удебелен или по-голям) обикновено се използва съотношение 3:1 към фона.
Придържането към тези правила улеснява всички потребители при четенето на текст, в това число и тези със зрителни проблеми, включително и далтонисти. Обикновено иконите и останалите важни елементи също са в гореспоменатите контрастни съотношения. Така се постига не само по-висока естетика, но и потребителите се чувстват по-комфортно когато използват приложението продължително време, което в крайна сметка е една от главните цели на бизнеса.
Контраст, приковаващ вниманието
Контрастът в дизайна на мобилните приложения служи за привличането на вниманието към определени елементи на екрана. По-високият контраст е най-доброто решение за открояването на важно съдържание или други ключови компоненти. Ако целта е примерно потребителят да докосне бутон, неговият цвят трябва да е в голям контраст с тези на фона и заобикалящите го елементи.
Цветове и още нещо
Няма съмнение, че цветовете играят главна роля при ориентирането на потребителите в рамките на екрана и на мобилната апликация като цяло, но понякога за пълна яснота, те трябва да се използват заедно с други способи, които да правят комуникацията по-ефективна. Те включват индикатори, създаване на усещане за плътност и реализъм на елементите, което е характерно за материалния дизайн, добре познати символи и дори текст, който дава директно описание на дадено действие.
Заключение
Тук разгледахме основата на цветовата теория, която се използва при създаването на потребителския интерфейс на мобилни приложения. Изборът на цветова схема се прави от екипа на разработчика по време на фазата на концептуалния дизайн на проекта, като клиентът има възможност да даде своето мнение и одобрение. Това решение е изключително важно, тъй като цветовата палитра оставя трайно впечатление у потребителите, освен че служи за подобряване на потребителското преживяване.
Едно от основните решения при изработката на ново мобилно приложение е изборът на цветова схема. Тук ще разгледаме основните видове схеми и персонализирани комбинации, които на са базирани на нито един от тях, както и как се избират цветове и се постига контраст, така че да се подобри ползваемостта на апликацията. Да започваме.
Избор на ефективна цветова схема
Тук трябва да се вземат под внимание редица фактори, включително отличителния цвят на бранда, както и психологическото значение на цветовете. Те трябва да се подберат така, че да създават трайна асоциация с бранда и неговите продукти и да въздействат силно на конкретната целева аудитория.
Колко на брой да са цветовете?
По-простичките цветови комбинации са най-ефективни за подобряването на потребителското преживяване, тъй като не натоварват очите и дават възможност на хората да се концентрират върху съдържанието. Шарените мобилни приложения могат да изглеждат забавни, но определено не са лесни за ползване. Проучванията сочат, че предпочитанията на болшинството от хората клонят към комбинации с два или три цвята.
Видове цветови схеми
Кои да са тези два или три цвята? При избора им се използва така нареченото цветово колело, състоящо се от 12 основни цвята (секции).
Цветово колело
Той се базира и на дефинираните стандарти за цветови схеми, определящи съответните видове:
- Монохроматични - При тях се избира един основен цвят, на който се базират останалите. Те са различни негови тонове и нюанси. Счита се, че тези схеми не товарят очите и дори успокояват потребителите, особено ако основният цвят е син или зелен. По този начин съдържанието излизва на преден план.
- Аналогови - Тези цветови схеми се състоят от свързани цветове, които не се открояват значително един от друг. Това обикновено са три цвята, които са един до друг на колелото, като червен, оранжево-червен и оранжев например. Един от тези цветове се избира за доминиращ, а останалите се използват за дообогатяване на дизайна на приложението. Този вид схеми обикновено се използват за мобилни приложения, при които има степенуване на съдържанието, като списък със задачи по спешност и приоритет например, или които целят да създадат определена емоция с различна наситеност.
- Допълващи се - Цветовете в тези схеми всъщност стоят един срещу друг на цветовото колело. Използват се заедно за създаването на контраст, така че да се привлече потребителското внимание. Обикновено се избира един доминантен цвят, като противостоящият му се използва за акцентите. Ако например основният цвят на мобилното приложение е зеленият, то червеното може да се използва за иконата, която индикира нови известия в рамките на апликацията. Така потребителите гарантирано ще им обърнат внимание.
- Персонализирани - При създаването на тези цветови схеми дизайнерите на мобилни приложения развихрят въображението си. Въпреки това, има някои основни идейни насоки. При една схема с неутрални цветове например може да се добави един ярък, който да служи за акцент. Ефектът е красив и елегантен.
Влиянието на цветовия контраст
Обикновено оцветен елемент или секция от интерфейса на мобилното приложение не се показва самостоятелно, а е до или върху друг оцветен елемент или секция. Така се създава контраст. Нивото на контраст се определя от това колко се различава един цвят от друг. Когато се използва правилно, този ефект намалява натоварването на очите и насочва вниманието на потребителите, като ясно разграничава компонентите, показани на екрана.
Контраст, улесняващ четенето на текст
При по-нисък контраст има плавно преминаване от един елемент в друг и се създава усещане за хармония и красота. Въпреки това, красотата невинаги е най-доброто решение що се отнася до четенето на текст. Когато се използват цветове за фон и шрифт, два цвята с нисък контраст ще направят четенето трудно, особено когато потребителят използва мобилното приложение на смартфона или таблета си навън и светлината е ярка.
Как се постига достатъчно ниво на контраст за удобство на потребителите? Отговорът е: чрез по-голямо контрастно съотношение. Контрастното съотношение показва колко различен е единият цвят от другия, примерно 2:1 или 20:1. Колкото по-голяма е разликата между двете числа, толкова по-голям е относителният интензитет на светлината между двата цвята.
Тук ще посочим основните контрастни съотношения, които се използват най-често при дизайна на мобилни приложения, като направим уточнението, че дизайнерите могат да не се придържат стриктно към тях, ако от това зависи подобряването на потребителското преживяване:
- За малък шрифт се препоръчва контрастно съотношение 4.5:1 към фона.
- За голям шрифт (18 pt стандартен или 14 pt удебелен или по-голям) обикновено се използва съотношение 3:1 към фона.
Придържането към тези правила улеснява всички потребители при четенето на текст, в това число и тези със зрителни проблеми, включително и далтонисти. Обикновено иконите и останалите важни елементи също са в гореспоменатите контрастни съотношения. Така се постига не само по-висока естетика, но и потребителите се чувстват по-комфортно когато използват приложението продължително време, което в крайна сметка е една от главните цели на бизнеса.
Контраст, приковаващ вниманието
Контрастът в дизайна на мобилните приложения служи за привличането на вниманието към определени елементи на екрана. По-високият контраст е най-доброто решение за открояването на важно съдържание или други ключови компоненти. Ако целта е примерно потребителят да докосне бутон, неговият цвят трябва да е в голям контраст с тези на фона и заобикалящите го елементи.
Цветове и още нещо
Няма съмнение, че цветовете играят главна роля при ориентирането на потребителите в рамките на екрана и на мобилната апликация като цяло, но понякога за пълна яснота, те трябва да се използват заедно с други способи, които да правят комуникацията по-ефективна. Те включват индикатори, създаване на усещане за плътност и реализъм на елементите, което е характерно за материалния дизайн, добре познати символи и дори текст, който дава директно описание на дадено действие.
Заключение
Тук разгледахме основата на цветовата теория, която се използва при създаването на потребителския интерфейс на мобилни приложения. Изборът на цветова схема се прави от екипа на разработчика по време на фазата на концептуалния дизайн на проекта, като клиентът има възможност да даде своето мнение и одобрение. Това решение е изключително важно, тъй като цветовата палитра оставя трайно впечатление у потребителите, освен че служи за подобряване на потребителското преживяване.
Ако искате мобилно приложение, представящо Вашия бранд в най-добра светлина, изпратете запитване към нашия опитен екип тук.
Споделете в:
Съвместната ни работата с Whiz стартира с проекта за дизайн на мобилното приложение и дизайн на уебсайта на електронното банкиране на Първа инвестиционна банка АД. Проектът се характеризираше с много специфични дейности и предизвикателства.
