Veb-dizayndagi rang: foydalanuvchida to'g'ri his-tuyg'ularni qanday uyg'otish kerak

2024 Muallif: Malcolm Clapton | [email protected]. Oxirgi o'zgartirilgan: 2023-12-17 04:14

Rang foydalanuvchining saytga bo'lgan hissiy munosabatini belgilaydi, hatto odamning o'zi bundan bexabar bo'lsa ham. Muayyan tuyg'ularni uyg'otish uchun saytning fon va turli elementlari uchun qanday ranglardan foydalanish va veb-dizayndagi ranglarni qanday qilib to'g'ri birlashtirish, quyida o'qing.

Insoniyat tarixi davomida usta rassomlar rang bilan ishlash qobiliyati bilan butun dunyoda tan olingan. Zamonaviy dunyoda tijorat va biznes maqsadlarida - reklama va veb-dizaynda ranglarni qanday birlashtirishni biladigan mutaxassislar teng darajada e'tirof etiladi.

Ranglarni ishlatish qobiliyati cheksiz ravishda pompalanishi mumkin. Bu insonga ta'sir qilish imkoniyatlarining haqiqiy tubsizligi.

Biz ranglar nazariyasi va ranglar sxemasi asoslarini yoritamiz, keyin esa ma'lum ranglarning hissiy ta'siri haqida gapiramiz.

Rang nazariyasi

Butun kitobni rang mavzusiga bag'ishlash mumkin, shuning uchun biz uni to'liq qabul qilmaymiz, faqat interfeys dizaynini ishlab chiqishda foydalanish mumkin bo'lgan foydali ma'lumotlar bilan cheklanamiz.

Rang nazariyasini uch qismga bo'lish mumkin:

Kontrast

Har bir soyaning qarama-qarshiligi, ta'bir joiz bo'lsa, "nemesis" bu rangga eng katta qarama-qarshilikni tashkil qiladi. Bunday rangni topish uchun siz rang g'ildiragidan foydalanishingiz mumkin. Faqat doiraning qarama-qarshi tomonida rangni tanlang.

Qo'shish

Bu ranglar har doim ham bir-biriga zid kelmaydi. Qo'shimcha ranglar kontrastli ranglardan farqli o'laroq, bir-birini ta'kidlaydi. Rangli g'ildirakda bu ranglar bir-birini ta'qib qiladi, masalan, lilakning qo'shimcha ranglari - ko'k va pushti.

Rezonans

Har bir rang ma'lum bir kayfiyatni uyg'otadi. Yorqin issiq ranglar (qizil, to'q sariq, sariq) odamni energiya bilan to'ldiradi, uni uyg'otadi va sovuq quyuq soyalar (yashil, ko'k, binafsha), aksincha, dam oladi va tinchlantiradi.

Misol uchun, ular o'quvchini uyg'otish va ularning hayajonini oshirish uchun qizil navigatsiya panelidan foydalanadilar. Saytning o'ziga xosligini hisobga olgan holda - shov-shuvli yangiliklar - qizil mantiqiy qarorga o'xshaydi.

Veb-dizayndagi rang nazariyasi shunchaki bezak emas. Rang saytingiz haqidagi tasavvurni o'zgartirishi va biznesingizda muhim rol o'ynashi mumkin.

Rangni hissiy idrok etish

Rang va hissiyotning yaqin o'zaro ta'sirini hech kim inkor etmaydi. Va, albatta, har qanday veb-dizayner har bir sayt uchun to'g'ri vibe yaratish uchun ushbu ta'sirdan foydalanishni xohlaydi.

Bir nechta tadqiqotlar asosida - veb-saytda joylashtirilgan tahlil va ranglar haqidagi post - biz ranglarning hissiyotlarga qanday ta'sir qilishini tushuntiramiz va UX dizaynini yaratishga yordam beramiz.

Shuni esda tutish kerakki, dunyodagi turli madaniyatlar ranglarni boshqacha qabul qiladi. Biz G'arb madaniyatiga xos bo'lgan hissiy assotsiatsiyalarni tasvirlaymiz.

Qizil

Eng rag'batlantiruvchi rang, shu qadar energiya bilan zaryadlanganki, u hatto qon bosimini ham oshirishi mumkin. Qizil rang ehtiros va kuchni ifodalaydi va eng diqqatni tortadigan rangdir, shuning uchun u ko'pincha muhim ogohlantirishlar va e'lonlar uchun ishlatiladi.

Misol uchun, qizil rang, maqsadi sezilgan tahdidlar haqida ogohlantirish bo'lgan sayt uchun juda mos keladi.

Sahifaning yuqori qismida juda ko'p qizil rangdan foydalanish juda yaxshi, chunki u sizning xabaringizdagi muhim ma'lumotlarga e'tibor qaratadi. Shu bilan birga, odamlar qizil "xavfli zona" ni tezda tark etib, pastga siljiydilar. Va bu, o'z navbatida, foydalanuvchiga ko'proq tarkibni ko'rsatish imkonini beradi.

Ammo bu rang sizga qarshi ham ishlashi mumkin, chunki u tajovuzkorlik yoki ortiqcha stimulyatsiyaga olib kelishi mumkin. Agar siz tinchlantiruvchi muhit yaratmoqchi bo'lsangiz, qizil rangdan me'yorida foydalanishga harakat qiling va qizilning engilroq soyalarini tanlang.

apelsin

Issiq ohanglarning eng tinchi sifatida apelsin turli xil his-tuyg'ularni uyg'otishga qodir. Asosiy rang sifatida u qiziqish uyg'otishi va jonlantirishi mumkin, ikkinchi darajali rang sifatida esa bu xususiyatlarni saqlab qolishi mumkin, lekin ko'proq ko'zga tashlanmaydigan tarzda.

Bundan tashqari, apelsin harakat va energiya hissi yaratishga yordam beradi. Misol uchun, u kompaniyaning multfilm veb-saytida ajoyib ko'rinadi, bu yoshlik va harakatni taklif qiladi. Rang ijodkorlik bilan bog'liq bo'lib, tanish brend hissini saqlab qoladi.

Sariq

Bu eng ko'p qirrali ranglardan biri bo'lib, u uyg'otadigan his-tuyg'ular soyaga ko'proq bog'liq.

Yorqin sariq energiya qo'shadi, lekin qizil rangda mavjud bo'lgan aniqlik va aniqliksiz. Sariqning o'rtacha soyalari hali ham tetiklantiruvchi qulaylik tuyg'usini uyg'otadi. To'q rangli soyalar (shu jumladan oltin) qadimiylik tuyg'usini ta'minlaydi, makonni abadiylik, donolik va qiziqish bilan to'ldiradi.

Misol uchun, veb-dizayn agentligining bosh sahifasida sariqning quyuq ohanglari energiya, qiziqish va hokimiyatni chiqaradi. Bu rang konsaltingdan pul topadigan va o'zlarining professionalligini ta'kidlamoqchi bo'lgan kompaniyalar uchun juda yaxshi.

Yashil rang

Yashil issiq va sovuq soyalar orasidagi ko'prikdir, garchi u sovuqroq bo'lsa ham. Bu shuni anglatadiki, yashil rang ko'kning taskin beruvchi ta'siriga ega, ammo sariqdan bir oz energiya bor.

Natijada, u juda muvozanatli va barqaror atmosferani yaratadi. Yashilning quyuqroq soyalari veb-sayt kabi boylik va mo'l-ko'llik taassurotini beradi.

Moviy rang

Sariq rangda bo'lgani kabi, ko'kning ta'siri rangga juda bog'liq. Ko'kning barcha soyalari dam olish va xavfsizlik nuqtai nazaridan universaldir, ammo yorug'lik ohanglari do'stona, quyuq ohanglar esa qayg'u bilan bog'liq.

Twitter va Facebook kabi ijtimoiy tarmoqlar ochiqroq va o'rta ko'k ranglardan foydalanadi, korporativ saytlar esa kuch va ishonchlilikning quyuqroq soyalarini afzal ko'radi.

Voqealar dizayni agentligi ajoyib misoldir. Fon sifatida ko'k gullardan foydalanib, ular floristika bo'yicha bilim va mahoratiga vizual tarzda ishora qildilar, shuningdek, ishonchlilik va ishonch hissini yaratdilar.

Bu juda katta ahamiyatga ega, chunki ular to'ylar kabi vizual juda muhim bo'lgan voqealar bilan ishlaydi.

Siyohrang

Binafsha rang tarixan qirollik ulug'vorligi bilan bog'liq bo'lib, hashamatga ishora qiladi. Binafsha rang soyalari umumiy saxiylik va boylikni aks ettiradi, bu ularni moda va hashamatli mahsulotlar uchun ajoyib tanlovga aylantiradi (hatto shokolad brendning rang tanlovi kabi).

Lavanda (pushti teginish bilan binafsha rang) kabi engil soyalar romantik fikrlarni uyg'otadi, quyuqroq soyalar esa yanada hashamatli va sirli ko'rinadi.

Qora

Neytral ranglarning eng kuchlisi qora, deyarli har qanday veb-saytda paydo bo'ladi. U hamroh bo'lgan ranglarga qarab turli xil assotsiatsiyalarni keltirib chiqarishi yoki haddan tashqari ishlatilsa, ular ustidan hukmronlik qilishi mumkin.

Qora rangning kuchi va betarafligi uni katta matn bloklari uchun ajoyib tanlovdir, lekin asosiy rang sifatida u asabiylashish tuyg'usini yaratishi yoki hatto yovuzlik bilan bog'liq bo'lishi mumkin.

Aksariyat saytlar uchun qora rang murakkablik tuyg'usini yaratish uchun ishlatiladi. Minimalistik dizayndagi qora va oqning kombinatsiyasi xuddi BOSE veb-saytidagi kabi nafislik va uslub taassurotini beradi.

Oq

G'arb madaniyatida oq rang poklik, mehribonlik va aybsizlik bilan bog'liq. Bu rang ko'pincha minimalistik va oddiy veb-saytlar fonida ishlatiladi.

Bundan tashqari, hech qanday rang sizga oq kabi boshqa ranglarga e'tibor berishga imkon bermaydi. Masalan, Awwwards g‘olibi Kloin Toshev uchun uning barcha asarlari oq fonda chizilgan bo‘lib, bu faqat illyustratsiyalarni alohida ajratib turadi va nafis galereya taassurotini qoldiradi.

Kul rang

Ba'zi hollarda kul rang g'amgin va qayg'uli muhit yaratishi mumkinligiga qaramay, u hali ham professional dizaynerlar tomonidan qo'llaniladi.

Hamma narsa soyalar haqida: ularni almashtirib, siz qora va oq rangdan kelib chiqqan barcha his-tuyg'ularni olishingiz mumkin. Umuman olganda, kulrang - o'ng qo'llarda kuchli vosita.

Va dizayndagi yorqin ranglar bilan birgalikda kulrang fon zamonaviy ko'rinadi va g'amgin emas, masalan.

Bej

Bejning o'zi juda zerikarli va ifodasiz, ammo u bitta ajoyib xususiyatga ega: bej uni o'rab turgan gullarning xarakterini oladi. Shuning uchun, agar u cheklovni ifodalash uchun mo'ljallanmagan bo'lsa, bej fon yoki ikkinchi rang sifatida xizmat qiladi.

Bejning quyuqroq soyalari an'ana va tuproqlilik hissini yaratadi, qog'ozga o'xshash tuyg'u beradi, ochroq soyalar esa yangi va zamonaviyroq ko'rinadi.

Misol uchun, restoran veb-saytida ismning atrofida och sarg'ish rang va quyuqroq qirralar restoran an'anaviy oshxonaga yangicha qarash degan taassurot qoldiradi.

Fil suyagi

Fil suyagi, shuningdek krem, oq kabi deyarli bir xil his-tuyg'ularni uyg'otadi. Biroq, fil suyagi oq rangga qaraganda issiqroq (yoki kamroq steril) bo'lib, minimalizmni saqlab, ko'proq qulaylik hissi yaratadi.

U va quyuq ranglar o'rtasidagi kontrastni yumshatish uchun oq o'rniga fil suyagidan foydalanishingiz mumkin. Misol uchun, saytda jigarrang-to'q sariq elementlar harorat tuyg'usini saqlab qolish uchun fil suyagi fonida (kulrang ko'rinadi) joylashtiriladi.

Rang spektri

Har bir saytda ko'proq joyni to'ldirish uchun asosiy ranglardan foydalanadigan ranglar sxemasi mavjud. Yuqorida aytib o'tganimizdek, bu ranglardan foydalanish insonning ongiga va kayfiyatiga asosan ongsiz ravishda ta'sir qiladi. Shuning uchun ularni diqqat bilan tanlang.

Ranglarni birlashtirishning ko'plab usullari mavjud bo'lsa-da, biz eng muvaffaqiyatli va tez-tez ishlatiladigan uchtasiga e'tibor qaratamiz.

Triada (uchlik uyg'unlik, uchburchak)

Triada uchta rangning asosiy va eng muvozanatli tizimidir. U rezonans va rang to'ldiruvchisidan foydalanadi, ammo murakkab kontrastga ega emas, bu triadani eng ishonchli gamutga aylantiradi.

12 rangli g'ildirakda bir-biridan 120 gradus bo'lgan istalgan uchtasini tanlang: biri oldingi plan uchun, ikkitasi kontent va navigatsiya paneli uchun.

Ikki tomonlama qo'shimcha tizim

Ushbu diapazonni amalga oshirish qiyinroq, ammo bu foydali yechim bo'lishi mumkin. To'rt rang ishlatiladi: ikkita kontrast va ikkita qo'shimcha.

Ushbu tartib asosida ajoyib Florida Flourish sahifasi qanday ko'rinishini tekshiring. Qizil va yashil ranglar o'simliklar va matn bloklarida kontrast, ko'k fon va to'q sariq cho'l esa rasmni samarali ravishda to'ldiradi.

Analoglar (seriyali tizim)

Shu kabi ranglar diapazoni asosan qo'shimcha soyalardan foydalanadi. Bu sizga ba'zi fazilatlarni ayniqsa aniq ta'kidlash va muayyan his-tuyg'ularni uyg'otish imkonini beradi.

Misol uchun, qizil, to'q sariq va sariq ranglarning kombinatsiyasi energiya va hayotiylikni ta'kidlaydi. Bunday tarozilardan foydalanish juda oddiy, ammo kombinatsiyaga qaysi ranglar kiritilishini tanlash qiyin. Ularning ta'siri abartılı bo'ladi, shuning uchun siz xato qilolmaysiz.

Misol uchun, veb-sayt dizaynida ko'k, firuza va yashil ranglardan foydalanish xotirjamlik va osoyishtalik muhitini yaratdi. Muhim fikrlarni ta'kidlash uchun sariq qanday ishlatilganiga e'tibor bering.

Bular rang nazariyasining asoslari bo'lib, sizga ta'sirchan maxsus dizaynlarni yaratishga yordam beradi va saytingizdagi rang jihatidan qanchalik uzoqqa borishingizga hech qanday cheklov yo'q.

Rang tanlash yordamchisi vositalari

Yaxshiyamki, ranglar nazariyasini amalda qo'llashga yordam beradigan bir nechta vositalar mavjud. O'zingiznikini yaratish uchun noldan boshlash shart emasligi uchun ushbu palitralarni sinab ko'ring:

1. ilgari Adobe Kuler nomi bilan tanilgan. Bu rang tanlashning eng ishonchli vositalaridan biridir.
2. … Agar siz rangni iloji boricha tezroq tanlash uchun oddiy vositani istasangiz, Paletton juda yaxshi.
3. … Foydalanuvchi interfeysi rangini tanlash uchun ajoyib vosita.

Va agar bu vositalar sizga mos kelmasa, bu erda turli xil rang tanlash vositalari mavjud.

Rang va hissiyot o'rtasidagi to'g'ridan-to'g'ri bog'liqlik

Esda tuting: foydalanuvchilar fon rangini, navigatsiya panelini, individual tafsilotlarni kamdan-kam sezadilar va qadrlashadi, ammo bu rang ularga ta'sir qilmaydi degani emas. Bu shunchaki ongsiz ravishda sodir bo'ladi.

Foydalanuvchida qandaydir hissiyotlar bor, sayt yoki brendga munosabat rivojlanadi, u muayyan harakatlarni amalga oshiradi: pastga aylantiradi, harakatga olib keladigan tugmachalarni bosadi yoki aksincha, ularni sezmaydi. Va bularning barchasida rang katta rol o'ynaydi.

Agar veb-dizaynda rangdan foydalanish bo'yicha maslahatlaringiz bo'lsa, sharhlarda baham ko'ring.