Веб-дизайндағы түс: пайдаланушыда дұрыс эмоцияларды қалай оятуға болады

2024 Автор: Malcolm Clapton | [email protected]. Соңғы өзгертілген: 2023-12-17 04:02

Түс пайдаланушының сайтқа эмоционалдық реакциясын анықтайды, тіпті адам өзі бұл туралы білмесе де. Белгілі бір сезімдерді ояту үшін сайттың фонына және әртүрлі элементтеріне қандай түстерді қолдану керек және веб-дизайндағы түстерді қалай дұрыс біріктіру керек, төменде оқыңыз.

Адамзат тарихында шебер суретшілер түстермен жұмыс істеу қабілетімен жалпыға танылған. Заманауи әлемде коммерциялық және іскерлік мақсатта - жарнама мен веб-дизайнда түстерді біріктіруді білетін мамандар бірдей дәрежеде танылады.

Түстерді пайдалану мүмкіндігі шексіз айдалуы мүмкін. Бұл адамға әсер ету мүмкіндіктерінің нағыз тұңғиығы.

Біз түс теориясы мен түс схемасының негіздерін қарастырамыз, содан кейін белгілі бір түстердің эмоционалдық әсері туралы сөйлесеміз.

Түс теориясы

Бүкіл кітапты түс тақырыбына арнауға болады, сондықтан біз оны толығымен қабылдамаймыз, бірақ интерфейс дизайнын әзірлеу кезінде қолдануға болатын пайдалы ақпаратпен ғана шектелеміз.

Түс теориясын үш бөлікке бөлуге болады:

Контраст

Әрбір реңктің қарама-қарсылығы бар, былайша айтқанда, бұл түске ең үлкен контрастты құрайтын оның «жауы». Мұндай түсті табу үшін түс дөңгелегін пайдалануға болады. Тек шеңбердің қарама-қарсы жағындағы түсті таңдаңыз.

Қосу

Бұл түстер әрқашан бір-біріне қайшы келмейді. Қосымша түстер қарама-қарсы түстерге қарағанда бір-бірін баса көрсетеді. Түс дөңгелегінде бұл түстер бір-бірін қадағалайды, мысалы, сиреньдің қосымша түстері - көк және қызғылт.

Резонанс

Әрбір түс белгілі бір көңіл-күйді тудырады. Ашық жылы түстер (қызыл, қызғылт сары, сары) адамды қуатпен толтырады, оны оятады, ал суық қара реңктер (жасыл, көк, күлгін), керісінше, босаңсытып, тыныштандырады.

Мысалы, олар оқырманды ояту және олардың қозуын арттыру үшін қызыл шарлау жолағын пайдаланады. Сайттың ерекшелігін ескерсек – сенсациялық жаңалық – қызыл қисынды шешім сияқты көрінеді.

Веб-дизайндағы түс теориясы жай ғана безендіру емес. Түс сіздің сайтыңызды қабылдауды өзгерте алады және сіздің бизнесіңізде маңызды рөл атқарады.

Түсті эмоционалды қабылдау

Түс пен эмоцияның өзара тығыз байланысын ешкім жоққа шығармайды. Және, әрине, кез келген веб-дизайнер бұл әсерді әрбір сайт үшін дұрыс вибация жасау үшін пайдаланғысы келеді.

Бірнеше зерттеулер негізінде - веб-сайтта жарияланған талдау және түстер туралы жазба - біз түстердің эмоцияларға қалай әсер ететінін түсіндіреміз және UX дизайнын жасауға көмектесеміз.

Дүние жүзіндегі әртүрлі мәдениеттер түстерді әртүрлі қабылдайтынын есте ұстаған жөн. Біз батыс мәдениетіне ғана тән эмоционалдық ассоциацияларды сипаттайтын боламыз.

Қызыл

Ең ынталандыратын түс, соншалықты қуатты зарядталған, ол тіпті қан қысымын жоғарылатуы мүмкін. Қызыл құмарлық пен күшті білдіреді және ең көп назар аударатын түс болып табылады, сондықтан ол жиі маңызды ескертулер мен хабарландырулар үшін қолданылады.

Мысалы, қызыл түс мақсаты қабылданатын қауіптер туралы ескерту болып табылатын сайт үшін өте қолайлы.

Беттің жоғарғы жағында қызыл түсті көп пайдалану өте жақсы, себебі ол хабарламадағы маңызды ақпаратқа назар аударады. Бұл ретте адамдар қызыл «қауіпті аймақтан» тез шығып, төмен қарай жылжуға бейім. Және бұл, өз кезегінде, пайдаланушыға көбірек мазмұнды көрсетуге мүмкіндік береді.

Бірақ бұл түс сізге қарсы жұмыс істей алады, өйткені ол агрессияны немесе шамадан тыс ынталандыруды тудыруы мүмкін. Егер сіз босаңсытатын атмосфераны жасағыңыз келсе, қызылды қалыпты мөлшерде қолдануға тырысыңыз және қызылдың ашық реңктерін таңдаңыз.

апельсин

Жылы реңктердің ең тынышы ретінде апельсин әртүрлі эмоцияларды тудыруы мүмкін. Негізгі түс ретінде ол қызығушылықты оятып, жандандыра алады, ал қосымша түс ретінде ол осы қасиеттерді сақтай алады, бірақ одан да көп әсер етпейтін түрде.

Сонымен қатар, апельсин қозғалыс пен энергия сезімін жасауға көмектеседі. Мысалы, бұл компанияның мультфильм веб-сайтында керемет көрінеді, ол жастар мен қозғалысты ұсынады. Түс танымал бренд сезімін сақтай отырып, шығармашылықпен байланысты.

Сары

Бұл ең жан-жақты түстердің бірі және ол тудыратын эмоциялар көлеңкеге көбірек тәуелді.

Ашық сары энергияны қосады, бірақ қызыл түсте болатын айқындық пен айқындықсыз. Сары түстің орташа реңктері әлі де қуаттандыратын жайлылық сезімін тудырады. Қараңғы реңктер (соның ішінде алтын) көнелік сезімін береді, кеңістікті уақытсыздықпен, даналықпен және қызығушылықпен толтырады.

Мысалы, веб-дизайн агенттігінің басты бетінде сарының күңгірт реңктері энергияны, қызығушылықты және беделді шығарады. Бұл түс консалтингтен ақша табатын және олардың кәсібилігін ерекше атап өткісі келетін компаниялар үшін тамаша.

Жасыл түс

Жасыл - бұл жылы және суық реңктер арасындағы көпір, бірақ ол көбірек суық болады. Бұл жасыл түстің көк түстің босаңсытатын әсері бар, сонымен қатар сарыдан аздап қуат бар дегенді білдіреді.

Нәтижесінде өте теңдестірілген және тұрақты атмосфераны жасайды. Жасыл түстің қою реңктері веб-сайт сияқты байлық пен молшылықтың әсерін береді.

Көк түс

Сары сияқты, көктің әсері реңкке өте тәуелді. Көк түстің барлық реңктері релаксация және қауіпсіздік тұрғысынан әмбебап болып табылады, бірақ ашық тондар достықпен, ал қараңғы тондар қайғымен байланысты.

Twitter және Facebook сияқты әлеуметтік желілер көктің ашық және орташа реңктерін пайдаланады, ал корпоративтік сайттар күш пен сенімділіктің күңгірт реңктерін қалайды.

Іс-шараны жобалау агенттігі тамаша үлгі болып табылады. Көгілдір гүлдерді фон ретінде пайдалана отырып, олар флористикадағы білімдері мен дағдыларын көрнекі түрде көрсетті, сонымен қатар сенімділік пен сенімділік сезімін тудырды.

Бұл өте маңызды, өйткені олар үйлену тойлары сияқты көрнекілігі өте маңызды оқиғалармен жұмыс істейді.

Күлгін

Күлгін түс тарихи түрде патша ұлылығымен байланысты, сән-салтанатты меңзейді. Күлгін реңктері жалпы жомарттық пен байлықты бейнелейді, бұл оларды сән және сәнді тауарлар үшін тамаша таңдау жасайды (тіпті брендтің түс таңдауы сияқты шоколад).

Лаванда (қызғылт жанасуы бар күлгін) сияқты ашық түсті реңктер романтика туралы ойларды тудырады, ал қою реңктер сәнді және жұмбақ болып көрінеді.

Қара

Бейтарап түстердің ең күштісі қара, кез келген дерлік веб-сайтта пайда болады. Ол онымен бірге жүретін түстерге байланысты әртүрлі ассоциацияларды тудыруы мүмкін немесе шамадан тыс қолданылған жағдайда оларға үстемдік етуі мүмкін.

Қара түстің күші мен бейтараптығы оны мәтіннің үлкен блоктары үшін тамаша таңдау жасайды, бірақ негізгі түс ретінде ол жүйке сезімін тудыруы немесе тіпті зұлымдықпен байланысты болуы мүмкін.

Көптеген сайттар үшін қара түс талғампаздық сезімін жасау үшін қолданылады. Минималистік дизайндағы ақ пен қараның үйлесімі BOSE веб-сайтындағыдай талғампаздық пен стильдің әсерін береді.

Ақ

Батыс мәдениетінде ақ түс тазалық, мейірімділік және кінәсіздікпен байланысты. Бұл түс жиі минималистік және қарапайым веб-сайттардың фонында қолданылады.

Сонымен қатар, бірде-бір түс ақ сияқты басқа түстерге көп көңіл бөлуге мүмкіндік бермейді. Мысалы, Awwwards жеңімпазы Клоин Тошев үшін оның барлық жұмыстары ақ фонда орналастырылған, бұл тек иллюстрацияларды ерекше етіп көрсетеді және талғампаз галерея сияқты әсер қалдырады.

Сұр түс

Кейбір жағдайларда сұр мұңды және қайғылы атмосфераны тудыруы мүмкін болғанына қарамастан, оны әлі де кәсіби дизайнерлер жиі пайдаланады.

Мұның бәрі реңктер туралы: оларды ауыстыра отырып, сіз ақ пен қарадан туындаған барлық эмоцияларды ала аласыз. Тұтастай алғанда, сұр - дұрыс қолдардағы күшті құрал.

Дизайндағы ашық түстермен үйлескенде, сұр фон мұңсыз емес, заманауи болып көрінеді, мысалы.

Бежевый

Бежевый түстің өзі бұлыңғыр және түсініксіз, бірақ оның бір керемет қасиеті бар: бежевый оны қоршап тұрған гүлдердің сипатын алады. Сондықтан, егер ол ұстамдылықты білдіруге арналмаған болса, бежевый фон немесе екінші түс ретінде қызмет етеді.

Күңгірт бежевый реңктері дәстүр мен жерлік сезімін тудырады, қағаз тәрізді әсер береді, ал ашық реңктер жаңарақ және заманауи көрінеді.

Мысалы, мейрамхананың веб-сайтында атауының айналасындағы ашық-бежевый түсті және күңгірт жиектері мейрамхананың дәстүрлі тағамдарды жаңаша қабылдауы сияқты әсер қалдырады.

Пил сүйегі

Пил сүйегі, сондай-ақ крем ақ сияқты дерлік эмоцияларды тудырады. Дегенмен, піл сүйегі ақ түске қарағанда жылырақ (немесе аз стерильді), бұл минимализмді сақтай отырып, жайлылық сезімін тудырады.

Ақ түстің орнына піл сүйегі мен қою түстер арасындағы контрастты жұмсартуға болады. Мысалы, сайтта қоңыр-қызғылт сары элементтер жылу сезімін сақтау үшін піл сүйегі фонында (сұрғылт болып көрінеді) орналастырылған.

Түс спектрі

Әрбір сайтта көбірек кеңістікті толтыру үшін негізгі түстерді пайдаланатын түс схемасы бар. Жоғарыда айтқанымыздай, бұл түстерді пайдалану адамның санасы мен көңіл-күйіне негізінен санадан тыс әсер етеді. Сондықтан оларды мұқият таңдаңыз.

Түстерді біріктірудің көптеген жолдары бар болса да, біз ең сәтті және жиі қолданылатын үшеуіне тоқталамыз.

Триада (үштік үйлесімділік, үшбұрыш)

Триада - үш түстің негізгі және ең теңдестірілген жүйесі. Ол резонанстық және түсті толықтыруды пайдаланады, бірақ күрделі контраст жоқ, бұл триаданы ең сенімді гамма етеді.

12 түсті дөңгелекте бір-бірінен 120 градус қашықтықта кез келген үшеуін таңдаңыз: біреуі алдыңғы план үшін және екеуі мазмұн мен шарлау жолағы үшін.

Қос комплементарлы жүйе

Бұл ауқымды іске асыру қиынырақ, бірақ ол тиімді шешім болуы мүмкін. Төрт түс қолданылады: екі қарама-қарсы және екі қосымша.

Осы орналасуға негізделген керемет Флорида гүлдену беті қандай болатынын тексеріңіз. Өсімдіктер мен мәтін блоктарында қызыл және жасыл түстер контраст, ал көк фон мен қызғылт сары шөл суретті тиімді толықтырады.

Аналогтар (сериялық жүйе)

Ұқсас түстердің ауқымы негізінен қосымша реңктерді пайдаланады. Бұл кейбір қасиеттерді ерекше атап өтуге және белгілі бір эмоцияларды оятуға мүмкіндік береді.

Мысалы, қызыл, қызғылт сары және сары түстердің үйлесімі энергия мен өміршеңдікке баса назар аударады. Мұндай таразыларды пайдалану өте қарапайым, бірақ комбинацияға қандай түстер қосылатынын таңдау қиын. Олардың әсері шамадан тыс болады, сондықтан қателесуге болмайды.

Мысалы, веб-сайт дизайнында көк, көгілдір және жасыл түстерді пайдалану тыныштық пен тыныштық атмосферасын жасады. Маңызды нүктелерді бөлектеу үшін сары түстің қалай қолданылғанына назар аударыңыз.

Бұл әсерлі таңдамалы дизайнды жасауға көмектесетін түс теориясының негіздері ғана және сіздің сайтыңыздағы түс тұрғысынан қаншалықты алыс жүруге болатынына ешқандай шектеулер жоқ.

Түс таңдау құралының көмекшісі

Бақытымызға орай, түс теориясын тәжірибеде қолдануға көмектесетін бірнеше құралдар бар. Өзіңіздің палитраңызды жасауды нөлден бастаудың қажеті жоқ үшін мына бояғыштарды қолданып көріңіз:

1. бұрын Adobe Kuler ретінде белгілі. Бұл түс таңдаудың ең сенімді құралдарының бірі.
2. … Түсті мүмкіндігінше тез таңдау үшін қарапайым құрал қажет болса, Палеттон тамаша.
3. … Пайдаланушы интерфейсінің түсін таңдауға арналған тамаша құрал.

Ал егер бұл құралдар сіз үшін жұмыс істемесе, мұнда түрлі түсті таңдау құралдары бар.

Түс пен эмоцияның тікелей байланысы

Есіңізде болсын: пайдаланушылар фон түсін, шарлау жолағын, жеке мәліметтерді сирек байқайды және бағалайды, бірақ бұл түс оларға әсер етпейді дегенді білдірмейді. Бұл жай ғана бейсаналық түрде болады.

Қолданушыда кейбір эмоциялар бар, сайтқа немесе брендке деген көзқарас қалыптасады, ол белгілі бір әрекеттерді орындайды: төмен қарай жылжиды, әрекетті тудыратын түймелерді басады немесе, керісінше, оларды байқамайды. Мұның бәрінде түс үлкен рөл атқарады.

Веб-дизайндағы түстерді пайдалану бойынша кеңестеріңіз болса, түсініктемелерде бөлісіңіз.