Вэб дизайн дахь өнгө: хэрэглэгчийн зөв сэтгэл хөдлөлийг хэрхэн өдөөх вэ

2024 Зохиолч: Malcolm Clapton | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2023-12-17 04:05

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

Хүн төрөлхтний түүхийн туршид мастер зураачид өнгөт урлах чадвараараа дэлхий нийтээр хүлээн зөвшөөрөгдсөн байдаг. Орчин үеийн ертөнцөд арилжааны болон бизнесийн зорилгоор өнгийг хэрхэн хослуулахыг мэддэг, зар сурталчилгаа, вэб дизайны чиглэлээр мэргэшсэн мэргэжилтнүүдийг адилхан хүлээн зөвшөөрдөг.

Өнгө ашиглах чадварыг тодорхойгүй хугацаагаар шахаж болно. Энэ бол хүнд нөлөөлөх боломжийн жинхэнэ ангал юм.

Бид өнгөт онол, өнгөний схемийн үндсийг авч үзэх болно, дараа нь бид тодорхой өнгөний сэтгэл хөдлөлийн нөлөөллийн талаар ярих болно.

Өнгөний онол

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

Өнгөний онолыг гурван хэсэгт хувааж болно.

Эсрэг

Сүүдэр бүр нь эсрэгээрээ, өөрөөр хэлбэл түүний "дайсан" байдаг бөгөөд энэ нь энэ өнгөний хамгийн их ялгаатай байдлыг бүрдүүлдэг. Ийм өнгийг олохын тулд та өнгөт дугуйг ашиглаж болно. Зүгээр л тойргийн эсрэг талд өнгө сонгох хэрэгтэй.

Нэмэлт

Эдгээр өнгө нь хоорондоо үргэлж зөрчилддөггүй. Нэмэлт өнгө нь бие биенээ онцлон тэмдэглэдэг бөгөөд эсрэгээрээ ялгаатай байдаг. Өнгөт дугуйнд эдгээр өнгө нь бие биенээ дагадаг, жишээлбэл, голт борын нэмэлт өнгө - хөх, ягаан.

Резонанс

Өнгө бүр нь тодорхой сэтгэл хөдлөлийг төрүүлдэг. Хурц дулаан өнгө (улаан, улбар шар, шар) нь хүнийг эрч хүчээр дүүргэж, түүнийг сэрээж, хүйтэн бараан сүүдэр (ногоон, хөх, нил ягаан) нь эсрэгээрээ тайвшруулж, тайвшруулдаг.

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

Вэб дизайн дахь өнгөний онол нь зөвхөн чимэглэл биш юм. Өнгө нь таны сайтын талаарх ойлголтыг өөрчилж, бизнест чухал үүрэг гүйцэтгэдэг.

Өнгөний талаархи сэтгэл хөдлөлийн ойлголт

Өнгө, сэтгэл хөдлөлийн нягт харилцан үйлчлэлийг хэн ч үгүйсгэхгүй. Мэдээжийн хэрэг, ямар ч вэб дизайнер энэ нөлөөг ашиглан сайт бүрт тохирох уур амьсгалыг бий болгохыг хүсдэг.

Цөөн хэдэн судалгаан дээр үндэслэн - вэб сайтад байрлуулсан дүн шинжилгээ, өнгөний талаархи нийтлэл - бид өнгө нь сэтгэл хөдлөлд хэрхэн нөлөөлж, UX дизайныг бий болгоход туслах болно.

Дэлхий даяар янз бүрийн соёлууд өнгийг өөр өөрөөр хүлээн зөвшөөрдөг гэдгийг санах нь зүйтэй. Бид барууны соёлын өвөрмөц сэтгэл хөдлөлийн холбоог тайлбарлах болно.

Улаан

Хамгийн сэтгэл хөдөлгөм өнгө, эрч хүчтэй тул цусны даралтыг хүртэл нэмэгдүүлэх чадвартай. Улаан өнгө нь хүсэл тэмүүлэл, хүч чадлыг илэрхийлдэг бөгөөд хамгийн их анхаарал татдаг өнгө бөгөөд энэ нь ихэвчлэн чухал анхааруулга, зарлалуудад ашиглагддаг.

Жишээлбэл, улаан өнгө нь аюул заналхийллийн талаар сэрэмжлүүлэх зорилготой сайтад маш тохиромжтой.

Хуудасны дээд хэсэгт улаан өнгийг их хэмжээгээр ашиглах нь таны мессеж дэх чухал мэдээлэлд анхаарлаа хандуулдаг тул гайхалтай юм. Үүний зэрэгцээ хүмүүс улаан "аюултай бүс" -ийг хурдан орхиж, доошоо гүйлгэх хандлагатай байдаг. Энэ нь эргээд хэрэглэгчдэд илүү их агуулгыг харуулах боломжийг олгодог.

Гэхдээ энэ өнгө нь түрэмгийлэл эсвэл хэт их цочрол үүсгэж болзошгүй тул таны эсрэг ажиллах болно. Хэрэв та илүү тайван уур амьсгалыг бий болгохыг хүсч байвал улаан өнгийг бага зэрэг хэрэглэж, улаан өнгийн цайвар өнгийг сонгоорой.

жүрж

Хамгийн тайван дулаан өнгөний хувьд улбар шар нь янз бүрийн сэтгэл хөдлөлийг өдөөх чадвартай. Анхдагч өнгөний хувьд энэ нь сонирхлыг төрүүлж, эрч хүч өгөх чадвартай бөгөөд хоёрдогч өнгө нь эдгээр шинж чанаруудыг хадгалж чаддаг, гэхдээ илүү анхаарал татахуйц бус байдлаар.

Үүнээс гадна жүрж нь хөдөлгөөн, эрч хүчийг бий болгоход тусалдаг. Жишээлбэл, энэ нь залуу нас, хөдөлгөөнийг илтгэсэн компаний хүүхэлдэйн киноны вэбсайт дээр гайхалтай харагдаж байна. Өнгө нь танил брэндийн мэдрэмжийг хадгалахын зэрэгцээ бүтээлч сэтгэлгээтэй холбоотой байдаг.

Шар

Энэ бол хамгийн уян хатан өнгөний нэг бөгөөд түүний төрүүлдэг сэтгэл хөдлөл нь сүүдэрээс илүү хамааралтай байдаг.

Хурц шар нь эрч хүчийг нэмдэг боловч улаан өнгөтэй байдаг хурц тод байдал, хурц тод байдал байхгүй. Дунд зэргийн шаргал өнгө нь эрч хүчтэй хэвээр байхад тайтгарлын мэдрэмжийг төрүүлдэг. Харанхуй сүүдэр (алт орно) нь эртний мэдрэмжийг өгч, орон зайг цаг хугацаагүй, мэргэн ухаан, сониуч зангаар дүүргэдэг.

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

Ногоон өнгө

Ногоон өнгө нь илүү хүйтэн байх хандлагатай ч дулаан, хүйтэн сүүдэрүүдийн хоорондох гүүр юм. Энэ нь ногоон өнгө нь хөхийг тайвшруулах үйлчилгээтэй боловч шараас бага зэрэг энергитэй байдаг гэсэн үг юм.

Үүний үр дүнд энэ нь маш тэнцвэртэй, тогтвортой уур амьсгалыг бий болгодог. Харанхуй ногоон өнгийн сүүдэр нь вэбсайт шиг баялаг, элбэг дэлбэг сэтгэгдэл төрүүлдэг.

Цэнхэр өнгө

Шар өнгөний нэгэн адил цэнхэр өнгөний нөлөө нь өнгөнөөс ихээхэн хамаардаг. Цэнхэр өнгийн бүх сүүдэр нь тайван байдал, аюулгүй байдлын хувьд бүх нийтийн шинж чанартай байдаг боловч цайвар өнгө нь найрсаг байдал, бараан өнгө нь уйтгар гунигтай холбоотой байдаг.

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

Үйл явдлын дизайны агентлаг бол гайхалтай жишээ юм. Цэнхэр цэцэгсийг дэвсгэр болгон ашигласнаар тэд цэцэглэлтийн талаархи мэдлэг, ур чадвараа харуулсан бөгөөд найдвартай байдал, итгэлцлийн мэдрэмжийг бий болгосон.

Хурим гэх мэт дүрслэл нь маш чухал үйл явдлуудтай хамтран ажилладаг тул энэ нь маш чухал юм.

Нил ягаан

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

Лаванда цэцгийн (ягаан өнгө бүхий нил ягаан) гэх мэт цайвар өнгийн сүүдэр нь романтик бодлуудыг төрүүлдэг бол бараан өнгийн сүүдэр нь илүү гоёмсог, нууцлаг мэт санагддаг.

Хар

Төвийг сахисан өнгөний хамгийн хүчтэй нь хар нь бараг бүх вэбсайт дээр гарч ирдэг. Энэ нь дагалдах өнгөнөөс хамааран өөр өөр холбоог өдөөж эсвэл хэтрүүлэн хэрэглэвэл давамгайлж болно.

Хар өнгөний хүч чадал, төвийг сахисан байдал нь үүнийг том текстийн блокуудад маш сайн сонголт болгодог боловч үндсэн өнгө нь сандарч, муу муухайтай холбоотой мэдрэмжийг төрүүлдэг.

Ихэнх сайтуудын хувьд хар өнгө нь нарийн мэдрэмжийг бий болгоход ашиглагддаг. Минималист загварт хар цагаан өнгөний хослол нь BOSE вэбсайт дээрх шиг дэгжин, хэв маягийн сэтгэгдэл төрүүлдэг.

Цагаан

Барууны соёлд цагаан өнгө нь цэвэр ариун байдал, эелдэг байдал, гэм зэмгүй байдалтай холбоотой байдаг. Энэ өнгийг ихэвчлэн минималист, энгийн вэбсайтуудын дэвсгэр дээр ашигладаг.

Үүнээс гадна нэг ч өнгө нь цагаан шиг бусад өнгөт анхаарлаа хандуулахыг зөвшөөрөхгүй. Жишээлбэл, Awwwards-ын ялагч Клойн Тошевын хувьд түүний бүх бүтээлийг цагаан дэвсгэр дээр байрлуулсан нь зөвхөн чимэглэлийг онцгой болгож, гоёмсог галерей мэт сэтгэгдэл төрүүлдэг.

Саарал өнгө

Зарим тохиолдолд саарал өнгө нь гунигтай, гунигтай уур амьсгалыг бий болгож чаддаг ч мэргэжлийн дизайнерууд үүнийг ихэвчлэн ашигладаг.

Энэ бүхэн сүүдэртэй холбоотой: тэдгээрийг ээлжлэн сольсноор та хар, цагаан аль алиных нь улмаас үүссэн бүх сэтгэл хөдлөлийг авч болно. Ерөнхийдөө саарал бол зөв гарт байгаа хүчирхэг хэрэгсэл юм.

Дизайн дахь илүү тод өнгөнүүдтэй хослуулан саарал дэвсгэр нь орчин үеийн мэт санагддаг, жишээлбэл, дээр нь гунигтай биш юм.

Шаргал

Шаргал нь өөрөө уйтгартай, илэрхийлэлгүй боловч нэг гайхалтай шинж чанартай байдаг: шаргал нь түүнийг хүрээлж буй цэцэгсийн шинж чанарыг олж авдаг. Тиймээс, хэрэв энэ нь хязгаарлалтыг илэрхийлэх зорилгогүй бол шаргал нь дэвсгэр эсвэл хоёр дахь өнгөний үүрэг гүйцэтгэдэг.

Харанхуй шаргал өнгө нь уламжлал, газар шорооны мэдрэмжийг бий болгож, цаасан мэт мэдрэмжийг төрүүлдэг бол цайвар өнгө нь илүү шинэлэг, орчин үеийн харагддаг.

Жишээлбэл, рестораны вэбсайт дээр нэрний эргэн тойронд цайвар шаргал өнгөтэй, бараан ирмэг нь уламжлалт хоолыг шинэлэг байдлаар авч үзсэн мэт сэтгэгдэл төрүүлдэг.

Зааны ясан

Зааны ясан, цөцгий нь цагаан өнгөтэй бараг ижил сэтгэл хөдлөлийг төрүүлдэг. Гэсэн хэдий ч зааны яс нь цагаанаас илүү дулаахан (эсвэл бага ариутгагддаг) бөгөөд энэ нь минимализмыг хадгалахын зэрэгцээ тайтгарлын мэдрэмжийг бий болгодог.

Та цагаан өнгийн оронд зааны ясыг ашиглаж, бараан өнгөний хоорондох ялгааг зөөлрүүлж болно. Жишээлбэл, сайт дээр дулаан мэдрэмжийг хадгалахын тулд хүрэн улбар шар өнгийн элементүүдийг зааны ясан дэвсгэр дээр (саарал харагддаг) байрлуулсан байдаг.

Өнгөний спектр

Сайт бүр илүү орон зайг дүүргэхийн тулд үндсэн өнгийг ашигладаг өнгөний схемтэй байдаг. Өмнө дурьдсанчлан, эдгээр өнгийг ашиглах нь хүний оюун ухаан, сэтгэл санаанд голчлон далд ухамсарт нөлөөлдөг. Тиймээс тэдгээрийг анхааралтай сонгох хэрэгтэй.

Хэдийгээр өнгийг хослуулах олон арга байдаг ч бид хамгийн амжилттай, түгээмэл хэрэглэгддэг гурван зүйлд анхаарлаа хандуулах болно.

Гурвал (гурвалжин, гурвалжин)

Гурвал нь гурван өнгөний үндсэн бөгөөд хамгийн тэнцвэртэй систем юм. Энэ нь резонансын болон өнгөт нэмэлтийг ашигладаг боловч нарийн төвөгтэй ялгаатай байдаггүй бөгөөд энэ нь гурвалжинг хамгийн найдвартай gamut болгодог.

12 өнгийн дугуй дээр 120 градусын зайтай гурвыг сонгоно уу: нэгийг нь урд талд, хоёрыг контент болон навигацийн талбарын хувьд.

Давхар нэмэлт систем

Энэ хүрээг хэрэгжүүлэхэд илүү төвөгтэй боловч ашигтай шийдэл байж болох юм. Дөрвөн өнгийг ашигладаг: хоёр ялгаатай, хоёр нэмэлт.

Энэхүү зохион байгуулалтад тулгуурлан Флоридагийн цэцэглэлтийн хуудас ямархуу байгааг хараарай. Улаан, ногоон өнгө нь ургамал, текстийн блокуудад ялгаатай бол цэнхэр дэвсгэр, улбар шар өнгийн цөл нь зургийг үр дүнтэй нөхөж өгдөг.

Аналогууд (цуваа систем)

Ижил төрлийн өнгө нь үндсэндээ нэмэлт сүүдэр ашигладаг. Энэ нь зарим чанарыг онцгойлон анхаарч, тодорхой сэтгэл хөдлөлийг өдөөх боломжийг олгодог.

Жишээлбэл, улаан, улбар шар, шар өнгийн хослол нь эрч хүч, эрч хүчийг онцолж өгдөг. Ийм масштабыг ашиглах нь маш энгийн боловч хослолд ямар өнгө оруулахыг сонгоход хэцүү байдаг. Тэдний үр нөлөө нь хэтрүүлсэн байх тул та андуурч болохгүй.

Тухайлбал, цахим хуудасны дизайнд цэнхэр, оюу, ногоон өнгийг ашигласан нь тайван амгалан тайван уур амьсгалыг бүрдүүлсэн. Чухал цэгүүдийг тодруулахын тулд шарыг хэрхэн ашигласан болохыг анхаарна уу.

Эдгээр нь зөвхөн өнгөт онолын үндсэн ойлголтууд бөгөөд танд гайхалтай захиалгат загварыг бий болгоход тусалж болох бөгөөд таны сайт дээрх өнгөний хувьд хэр хол явахад хязгаар байхгүй.

Өнгө сонгогчийн туслах хэрэгсэл

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

1. өмнө нь Adobe Kuler гэж нэрлэгддэг байсан. Энэ бол өнгө сонгох хамгийн найдвартай хэрэгслүүдийн нэг юм.
2. … Хэрэв та өнгийг аль болох хурдан сонгох энгийн хэрэгсэл хүсч байвал Палеттон маш сайн.
3. … Хэрэглэгчийн интерфейсийн өнгийг сонгох гайхалтай хэрэгсэл.

Хэрэв эдгээр хэрэгслүүд танд тохирохгүй бол энд өөр өөр өнгө сонгох хэрэгслүүд байна.

Өнгө ба сэтгэл хөдлөлийн шууд хамаарал

Санаж байна уу: хэрэглэгчид дэвсгэрийн өнгө, навигацийн талбар, бие даасан дэлгэрэнгүй мэдээллийг ховор анзаарч, үнэлдэг боловч энэ нь өнгө нь тэдэнд нөлөөлөхгүй гэсэн үг биш юм. Энэ нь зүгээр л далд ухамсарт тохиолддог.

Хэрэглэгч ямар нэгэн сэтгэл хөдлөлтэй байдаг, сайт эсвэл брэндэд хандах хандлагыг бий болгодог, тэр тодорхой үйлдлүүд хийдэг: доош гүйлгэж, үйлдлийг өдөөдөг товчлуурууд дээр дардаг, эсвэл эсрэгээр нь анзаардаггүй. Мөн энэ бүхэнд өнгө асар их үүрэг гүйцэтгэдэг.

Хэрэв танд вэб дизайнд өнгө ашиглах зөвлөмж байгаа бол сэтгэгдэл дээр хуваалцаарай.