Веб-дизайндагы түс: колдонуучуда туура эмоцияларды кантип жаратса болот

2024 Автор: Malcolm Clapton | [email protected]. Акыркы өзгөртүү: 2023-12-17 04:03

Колдонуучунун сайтка болгон эмоционалдык реакциясын адамдын өзү билбесе да түс аныктайт. Белгилүү сезимдерди пайда кылуу үчүн сайттын фонуна жана ар кандай элементтерине кандай түстөрдү колдонуу керек жана веб-дизайндагы түстөрдү кантип туура айкалыштыруу керек, төмөндө оку.

Адамзат тарыхында чебер сүрөтчүлөр түс менен иштөө жөндөмдүүлүгү менен жалпыга таанылган. Заманбап дүйнөдө коммерциялык жана бизнес максаттары үчүн түстөрдү айкалыштыра билген адистер - жарнак жана веб-дизайн - бирдей таанылат.

түстөрдү колдонуу мүмкүнчүлүгү чексиз сордурулган болот. Бул адамга таасир этүү үчүн чыныгы туңгуюк.

Биз түс теориясынын негиздерин жана түс схемасын карап чыгабыз, андан кийин айрым түстөрдүн эмоционалдык таасири жөнүндө сүйлөшөбүз.

Түс теориясы

Бүтүндөй бир китепти түс темасына арнаса болот, ошондуктан биз аны толугу менен кабыл албайбыз, бирок интерфейс дизайнын иштеп чыгууда колдонула турган пайдалуу маалымат менен гана чектелебиз.

Түс теориясы үч бөлүккө бөлүнөт:

Контраст

Ар бир көлөкөнүн карама-каршылыгы бар, мындайча айтканда, бул түскө эң чоң карама-каршылыкты түзөт. Мындай түстү табуу үчүн, түс дөңгөлөктү колдоно аласыз. Жөн гана тегеректин карама-каршы жагындагы түстү тандаңыз.

Кошумча

Бул түстөр дайыма эле бири-бирине карама-каршы келе бербейт. Толуктоочу түстөр карама-каршы түстөрдөн айырмаланып, бири-бирине басым жасайт. Түс дөңгөлөкүндө бул түстөр бири-бирин ээрчишет, мисалы, сиреньдин кошумча түстөрү - көк жана кызгылт.

Резонанс

Ар бир түс белгилүү бир маанайды жаратат. Ачык жылуу түстөр (кызыл, кызгылт сары, сары) адамды энергияга толтуруп, ойготот, ал эми муздак кара түстөр (жашыл, көк, кызгылт көк), тескерисинче, эс алып, тынчтандырат.

Мисалы, алар окурманды ойготуп, алардын дүүлүгүүсүн күчөтүү үчүн кызыл навигация тилкесин колдонушат. Сайттын өзгөчөлүгүн эске алганда - сенсациялуу жаңылыктар - кызыл логикалык чечимге окшош.

Веб-дизайндагы түс теориясы жөн гана жасалгалоо эмес. Түс сайтыңыздын кабылдоосун өзгөртүп, бизнесиңизде маанилүү ролду ойной алат.

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

Түс менен эмоциянын тыгыз өз ара аракеттенүүсүн эч ким танбайт. Жана, албетте, ар бир веб-дизайнер бул таасирди ар бир сайт үчүн туура визуалды түзүү үчүн колдонгусу келет.

Бир нече изилдөөлөрдүн негизинде - веб-сайтта жайгаштырылган талдоо жана түстөр жөнүндө пост - биз түстөрдүн эмоцияларга кандай таасир тийгизерин түшүндүрүп, UX дизайнын түзүүгө жардам беребиз.

Дүйнө жүзүндөгү ар түрдүү маданияттар түстөрдү башкача кабыл алышарын эстен чыгарбоо керек. Биз Батыш маданиятына гана таандык болгон эмоционалдык ассоциацияларды сүрөттөп беребиз.

Кызыл

Эң стимулдаштыруучу түс, ушунчалык энергиялуу, ал тургай кан басымын жогорулата алат. Кызыл - кумарланууну жана күчтү билдирет жана эң көп көңүл бурган түс, ошондуктан ал көп учурда маанилүү эскертүүлөр жана кулактандыруулар үчүн колдонулат.

Мисалы, кызыл түс, анын максаты кабыл коркунучтарды эскертүү болуп саналат сайт үчүн абдан ылайыктуу болуп саналат.

Барактын жогору жагында кызыл түстү көп колдонуу абдан жакшы, анткени ал билдирүүңүздөгү маанилүү маалыматка көңүл бурат. Ошол эле учурда адамдар кызыл "коркунучтуу зонаны" тез таштап, ылдый сыдырууга умтулушат. Ал эми бул, өз кезегинде, колдонуучуга көбүрөөк мазмунду көрсөтүүгө мүмкүндүк берет.

Бирок бул түс сизге каршы да иштеши мүмкүн, анткени ал агрессияга же ашыкча стимулга алып келиши мүмкүн. Эгерде сиз эс алуу атмосферасын түзүүнү кааласаңыз, анда кызылды ченеми менен колдонуп көрүңүз жана кызылдын ачык түсүн тандаңыз.

ачык күрөң

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

Мындан тышкары, апельсин кыймыл жана энергия сезимин түзүүгө жардам берет. Мисалы, бул компаниянын мультфильм сайтында сонун көрүнөт, ал жаштарды жана кыймылды сунуштайт. Түсү тааныш бренд сезимин сактап, чыгармачылык менен байланышкан.

Сары

Бул эң ар тараптуу түстөрдүн бири жана ал пайда кылган эмоциялар көлөкөдөн көбүрөөк көз каранды.

Ачык сары энергияны кошот, бирок кызыл түстө болгон курчтук жана курчтук жок. Орточо сары түстөр дагы эле дем берип, сооронуч сезимин жаратат. Кара түстөр (анын ичинде алтын) мейкиндикти убакытсыздык, акылмандык жана кызыгуу менен толтуруп, байыркылык сезимин берет.

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

Жашыл түс

Жашыл түс - жылуу жана муздак көлөкөлөрдүн ортосундагы көпүрө, бирок ал көбүрөөк суук болот. Бул жашыл көктүн эс алдыруучу таасири бар, бирок сарыдан бир аз энергия бар экенин билдирет.

Натыйжада, ал абдан салмактуу жана туруктуу атмосфераны түзөт. Кочкул жашыл түстөр веб-сайттагыдай эле байлыктын жана молчулуктун элесин берет.

Көк түс

Сары түстөгүдөй эле, көктүн таасири өңгө абдан көз каранды. Көктүн бардык түстөрү эс алуу жана коопсуздук жагынан универсалдуу, бирок ачык түстөр достук менен, ал эми кара түстөр кайгы менен байланышкан.

Twitter жана Facebook сыяктуу социалдык тармактар көктүн ачыктан ортоңку өңдөрүн колдонушат, ал эми корпоративдик сайттар күчтүн жана ишенимдүүлүктүн күңүрт түсүн артык көрүшөт.

Иш-чара дизайн агенттиги сонун үлгү болуп саналат. Фон катары көк гүлдөрдү колдонуп, алар флористикадагы билимин жана чеберчилигин визуалдык түрдө кыйытып, ишенимдүүлүк жана ишеним сезимин жаратышты.

Бул абдан маанилүү, анткени алар үйлөнүү үлпөттөрү сыяктуу визуалдык көрүнүш абдан маанилүү болгон окуялар менен иштешет.

Кызгылт көк

Кызгылт көк түс тарыхта падышанын улуулугу менен байланышкан, люкс дегенди билдирет. Кызгылт көк түстөр жалпысынан айкөлдүктү жана байлыкты чагылдырып, аларды мода жана люкс товарлары үчүн эң сонун тандоого айлантат (ал тургай шоколад бренддин түс тандоосу сыяктуу).

Лаванда сыяктуу ачык түстөр (кызгылт көк түстөгү) романтиканы ойго салат, ал эми кара түстөр саркеч жана сырдуу көрүнөт.

Кара

Нейтралдуу түстөрдүн эң күчтүүсү кара, дээрлик бардык веб-сайттарда пайда болот. Аны коштогон түстөрүнө жараша ар кандай ассоциацияларды жаратышы же ашыкча колдонулса, аларга үстөмдүк кылышы мүмкүн.

Кара түстүн күчү жана бейтараптыгы аны тексттин чоң блоктору үчүн эң сонун тандоо кылат, бирок негизги түс катары ал толкундануу сезимин жаратышы мүмкүн, атүгүл жамандык менен байланыштырышы мүмкүн.

Көпчүлүк сайттар үчүн кара түс татаалдык сезимин түзүү үчүн колдонулат. Минималистикалык дизайндагы ак менен каранын айкалышы BOSE веб-сайтындагыдай элеганттуулук жана стилдин элесин берет.

Ак

Батыш маданиятында ак түс тазалык, боорукердик жана күнөөсүздүк менен байланышкан. Бул түс көбүнчө минималисттик жана жөнөкөй веб-сайттардын фонунда колдонулат.

Мындан тышкары, эч бир түс башка түскө ак сыяктуу көп көңүл бурууга мүмкүндүк бербейт. Маселен, Awwwards сыйлыгынын лауреаты Клоин Тошев үчүн анын бардык эмгектери ак фонго түшүрүлгөн, бул иллюстрацияларды өзгөчө кылып, жарашыктуу галереянын элесин берет.

Боз түс

Кээ бир жагдайларда боз түс капалуу жана кайгылуу маанайды жаратышы мүмкүн экендигине карабастан, ал дагы эле кесипкөй дизайнерлер тарабынан колдонулат.

Кептин баары көлөкөлөр жөнүндө: аларды алмаштырып, сиз ак менен карадан келип чыккан бардык эмоцияларды ала аласыз. Жалпысынан алганда, боз - оң колдогу күчтүү курал.

Ал эми дизайндагы ачык түстөр менен айкалыштырып, боз фон заманбап көрүнөт, бирок, мисалы, караңгы эмес.

Беж

Беждун өзү өтө кызыксыз жана түшүнүксүз, бирок анын бир өзгөчө касиети бар: беж аны курчап турган гүлдөрдүн мүнөзүн алат. Ошондуктан, ал токтоо билдирүү үчүн арналган эмес болсо, беж фон же экинчи түс катары кызмат кылат.

Беждин кочкул түсү салт жана жердик сезимди жаратат, кагаздай сезимди берет, ал эми ачык түстөр жаңыраак жана заманбап көрүнөт.

Мисалы, ресторандын веб-сайтында аталыштын тегерегиндеги ачык беж түсү жана кара жээктери ресторан салттуу ашканага жаңыча көз карашта дегендей таасир калтырат.

Пил сөөгү

Пилдин сөөгү, ошондой эле крем ак менен дээрлик бирдей эмоцияларды жаратат. Бирок, пилдин сөөгү ак караганда жылуураак (же азыраак стерилдүү), бул минимализмди сактап, комфорттун көбүрөөк сезимин жаратат.

Сиз ак түстүн ордуна пилдин сөөгүн колдонсоңуз болот. Мисалы, сайтта күрөң-кызгылт сары элементтер жылуулукту сактоо үчүн пилдин фонунда (боз болуп көрүнөт) жайгаштырылат.

Түс спектри

Ар бир сайтта көбүрөөк орун толтуруу үчүн негизги түстөрдү колдонгон түс схемасы бар. Жогоруда айтылгандай, бул түстөрдү колдонуу адамдын акылына жана маанайына негизинен подсознание таасир этет. Андыктан аларды кылдаттык менен тандаңыз.

Түстөрдү айкалыштыруунун көптөгөн жолдору бар, бирок биз эң ийгиликтүү жана көп колдонулган үчөөнө токтолобуз.

Триада (үчтүк гармония, үч бурчтук)

Триада үч түстүн негизги жана эң тең салмактуу системасы. Ал резонансты жана түстүү толуктоону колдонот, бирок татаал контрастка ээ эмес, бул триаданы эң ишенимдүү гамма кылат.

12 түстүү дөңгөлөктөн 120 градус аралыкта каалаган үчөөнү тандаңыз: бирин алдыңкы план үчүн, экөөнү мазмун жана навигация тилкеси үчүн.

Эки кошумча система

Бул диапазонду ишке ашыруу кыйыныраак, бирок ал пайдалуу чечим болушу мүмкүн. Төрт түс колдонулат: эки карама-каршы жана эки кошумча.

Бул макеттин негизинде Флорида гүлдөшүнүн сонун баракчасы кандай экенин текшериңиз. Кызыл жана жашыл түстөр өсүмдүктөрдө жана тексттик блоктордо карама-каршы келет, ал эми көк фон жана кызгылт сары чөл сүрөттү эффективдүү толуктап турат.

Аналогдор (сериялык система)

Окшош түстөрдүн диапазону негизинен кошумча түстөрдү колдонот. Бул кээ бир сапаттарды өзгөчө так баса белгилеп, кандайдыр бир сезимдерди козгоого мүмкүндүк берет.

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

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

Бул жөн гана түс теориясынын негиздери, алар сизге таасирдүү ыңгайлаштырылган дизайнды түзүүгө жардам берет жана сайтыңыздагы түс жагынан канчалык алыс кете аларыңыздын чеги жок.

Түс тандоочу жардамчы куралдары

Бактыга жараша, түс теориясын практикада колдонууга жардам бере турган бир нече куралдар бар. Өзүңүздүн палитраңызды түзүү үчүн нөлдөн баштабаңыз үчүн бул палитраларды колдонуп көрүңүз:

мурда Adobe Kuler катары белгилүү. Бул түс тандоо эң ишенимдүү куралдардын бири.
… Түстү мүмкүн болушунча тез тандоо үчүн жөнөкөй куралды кааласаңыз, Палеттон сонун.
… Колдонуучу интерфейсинин түсүн тандоо үчүн эң сонун курал.

Жана бул куралдар сиз үчүн иштебесе, бул жерде ар кандай түс тандоо куралдары бар.

Түс менен сезимдин ортосундагы түз байланыш

Эсиңизде болсун: колдонуучулар фондун түсүн, навигация тилкесин, жеке деталдарды чанда байкашат жана баалашат, бирок бул түс аларга таасир этпейт дегенди билдирбейт. Бул жөн гана аң-сезимсиз түрдө болот.

Колдонуучуда кандайдыр бир эмоциялар пайда болот, сайтка же брендге карата мамиле түзүлөт, ал белгилүү иш-аракеттерди жасайт: ылдый жылдыруу, иш-аракетти жаратуучу баскычтарды чыкылдатуу, же тескерисинче, аларды байкабайт. Жана мунун баарында түс чоң роль ойнойт.

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