สีในการออกแบบเว็บ: วิธีทำให้ผู้ใช้ต้องการอารมณ์ที่ถูกต้อง

ตลอดประวัติศาสตร์ของมนุษย์ศิลปินต้นแบบได้รับการยอมรับอย่างกว้างขวางในด้านความสามารถในการทำงานร่วมกับสี ในโลกปัจจุบันผู้เชี่ยวชาญที่สามารถรวมสีเพื่อจุดประสงค์เชิงพาณิชย์และธุรกิจในการโฆษณาและออกแบบเว็บได้รับการยอมรับน้อยลง

ความสามารถในการใช้สีสามารถสูบไปจนถึงอนันต์ได้ นี่คือเหวที่แท้จริงของโอกาสที่จะมีอิทธิพลต่อคน

เราจะพูดถึงพื้นฐานของทฤษฎีสีและโทนสีแล้วพูดถึงผลกระทบทางอารมณ์ของสีบางสี

ทฤษฎีสี

เราสามารถอุทิศหนังสือทั้งเล่มให้เป็นชุดรูปแบบสีดังนั้นเราจะไม่ใช้มันทั้งหมด แต่เป็นเพียงข้อมูลที่เป็นประโยชน์ที่สามารถนำมาใช้ในการออกแบบอินเทอร์เฟซได้

คุณสามารถแบ่งทฤษฎีของสีออกเป็นสามส่วน:

ความแตกต่าง

แต่ละสีมีสิ่งที่ตรงกันข้ามเพื่อที่จะพูด “ศัตรูสาบาน” ซึ่งทำให้ความคมชัดมากที่สุดกับสีนี้ หากต้องการหาสีดังกล่าวคุณสามารถใช้ล้อเลื่อนสีได้ เพียงแค่เลือกสีที่ด้านตรงข้ามของวงกลม

ล้อสี
ล้อสี

การเพิ่ม

สีเหล่านี้ไม่ขัดแย้งกันเสมอไป สีเสริมเน้นซึ่งกันและกันตรงกันข้ามกับการตัดกัน ในวงกลมสีสีเหล่านี้จะปรากฏเป็นสีอื่นเช่นเติมสีม่วง – ฟ้าและชมพู

เสียงสะท้อน

สีแต่ละสีทำให้เกิดอารมณ์บางอย่าง สีสดใสที่สดใส (สีแดงสีส้มสีเหลือง) เติมพลังงานให้คนอื่นปลุกเขาและเฉดสีเข้มที่มืด (เขียว, ฟ้า, ม่วง) ตรงกันข้ามผ่อนคลายและปลอบประโลม

ตัวอย่างเช่น BBC News ใช้แถบการนำทางสีแดงเพื่อปลุกผู้อ่านเพื่อเสริมสร้างสถานะที่ตื่นเต้นของเขา ได้รับข้อมูลเฉพาะของเว็บไซต์ – ข่าวโลดโผน, – สีแดงดูเหมือนโซลูชันเชิงตรรกะ

ข่าวบีบีซี
ข่าวบีบีซี

ทฤษฎีสีในการออกแบบเว็บเป็นมากกว่าการตกแต่งเพียงอย่างเดียว สีสามารถเปลี่ยนการรับรู้ไซต์ของคุณและมีบทบาทสำคัญในธุรกิจของคุณ

การรับรู้ทางอารมณ์ของสี

ไม่มีใครจะปฏิเสธปฏิสัมพันธ์ใกล้ชิดของสีและอารมณ์ และแน่นอนนักออกแบบเว็บไซต์ทุกคนต้องการใช้อิทธิพลนี้เพื่อสร้างบรรยากาศที่เหมาะสมสำหรับแต่ละไซต์

จากการศึกษาหลายชิ้น – การวิเคราะห์ที่เผยแพร่บนเว็บไซต์ Vandelay Design และบทความเกี่ยวกับสีใน Smash Magazine – เราจะอธิบายว่าสีมีผลต่ออารมณ์และช่วยในการออกแบบ UX อย่างไร

เป็นสิ่งสำคัญที่ต้องจำไว้ว่าวัฒนธรรมที่แตกต่างกันทั่วโลกเห็นสีแตกต่างกัน เราจะอธิบายความสัมพันธ์ทางอารมณ์ที่มีลักษณะเฉพาะของวัฒนธรรมตะวันตกเท่านั้น

สีแดง

อารมณ์และความสัมพันธ์: อำนาจความสำคัญเยาวชน

สีกระตุ้นมากที่สุดเพื่อให้มีพลัง, ที่ยังสามารถเพิ่มความดันโลหิต. สีแดงหมายถึงความรักและความแข็งแกร่งดึงดูดความสนใจมากกว่าสีอื่น ๆ ดังนั้นจึงมักใช้สำหรับคำเตือนและคำประกาศสำคัญ

ตัวอย่างเช่นสีแดงเหมาะสำหรับเว็บไซต์ No Way NSA โดยมีวัตถุประสงค์เพื่อเตือนภัยคุกคามที่ถูกกล่าวหา

Screenshot_2

หากต้องการใช้สีแดงเป็นจำนวนมากที่ด้านบนของหน้าเว็บเป็นวิธีแก้ปัญหาที่ยอดเยี่ยมเนื่องจากดึงความสนใจไปยังข้อมูลสำคัญในข้อความ ในเวลาเดียวกันผู้คนมักจะรีบออกจาก “โซนอันตราย” สีแดงและเลื่อนลง และในทางกลับกันผู้ใช้สามารถแสดงเนื้อหาเพิ่มเติมได้

แต่สีนี้สามารถทำงานกับคุณได้เนื่องจากอาจทำให้เกิดการรุกรานหรือกระตุ้นมากกว่า ถ้าคุณต้องการสร้างบรรยากาศที่ผ่อนคลายมากขึ้นลองใช้สีแดงปานกลางและเลือกเฉดสีแดงที่เบาลง

สีส้ม

อารมณ์และความสัมพันธ์: มิตร, พลังงาน, ความเป็นเอกลักษณ์

สีส้มที่เงียบที่สุดในโทนอุ่น ๆ สามารถทำให้อารมณ์ที่หลากหลายได้ เป็นสีหลักก็สามารถเป็นที่สนใจและทำให้มีชีวิตชีวาและเป็นสีรองจะสามารถรักษาคุณสมบัติเหล่านี้ แต่ในลักษณะที่ไม่สร้างความรำคาญมากขึ้น

เว็บไซต์ Fanta
เว็บไซต์ Fanta

นอกจากนี้ส้มช่วยสร้างความรู้สึกของการเคลื่อนไหวและพลังงาน ตัวอย่างเช่นมันดูดีในเว็บไซต์การ์ตูนของ บริษัท Fanta ซึ่งแสดงให้เห็นถึงความคิดของเยาวชนและการเคลื่อนไหว สีมีส่วนเกี่ยวข้องกับความคิดสร้างสรรค์ในขณะที่รักษาความรู้สึกของแบรนด์ที่คุ้นเคย

สีเหลือง

อารมณ์และความสัมพันธ์: ความสุขความกระตือรือร้น archaism (darker tones)

นี่เป็นสีที่เป็นสากลมากที่สุดและอารมณ์ที่ทำให้เกิดขึ้นนั้นขึ้นอยู่กับเฉดสี

สีเหลืองสดใสเพิ่มพลังงาน แต่ไม่มีความคมชัดและความคมชัดซึ่งมีสีแดง เฉดสีเหลืองปานกลางทำให้รู้สึกถึงความสบายแม้ว่าจะยังคงความชุ่มชื่น เฉดสีเข้ม (รวมถึงสีทอง) ให้ความรู้สึกของสมัยโบราณเติมเต็มพื้นที่ด้วยความเป็นอมตะภูมิปัญญาและความอยากรู้

สื่อ Flash
สื่อ Flash

ตัวอย่างเช่นในหน้าหลักของหน่วยงานออกแบบเว็บของ Flash Media เฉดสีเข้มของสีเหลืองเปล่งพลังงานความอยากรู้และอำนาจ สีนี้เหมาะสำหรับ บริษัท ที่มีรายได้จากการให้คำปรึกษาและต้องการเน้นความเป็นมืออาชีพ

สีเขียว

อารมณ์และความสัมพันธ์: การเติบโตความมั่นคงทางการเงินหัวข้อหัวข้อสิ่งแวดล้อม

สีเขียวเป็นสะพานเชื่อมระหว่างเฉดสีที่อบอุ่นและเย็นแม้ว่าจะมีแนวโน้มที่จะเอียงไปทางเย็น ซึ่งหมายความว่าสีเขียวมีผลกระทบจากสีน้ำเงินที่ผ่อนคลาย แต่ยังมีความแข็งแรงเล็กน้อยจากสีเหลือง

Ameritrade
Ameritrade

ทำให้เกิดบรรยากาศที่สมดุลและมั่นคง เฉดสีเข้มของสีเขียวสร้างความประทับใจของความมั่งคั่งและความอุดมสมบูรณ์เช่นเดียวกับบนเว็บไซต์ Ameritrade

สีฟ้า

อารมณ์และความสัมพันธ์: ความสงบความปลอดภัยการเปิดกว้าง (เฉดสีอ่อน) ความน่าเชื่อถือ (เฉดสีเข้ม)

เช่นในกรณีของสีเหลืองอิทธิพลของสีฟ้าขึ้นอยู่กับสี เฉดสีฟ้าทั้งหมดเป็นสากลในแง่ของการพักผ่อนและความปลอดภัย แต่สีอ่อนมีความเกี่ยวพันกับความเป็นมิตรและคนที่มืดเกี่ยวข้องกับความเศร้า

เครือข่ายโซเชียลเช่น Twitter และ Facebook ใช้สีเฉดสีอ่อนและสีม่วงปานกลางและไซต์ขององค์กรต้องการเฉดสีเข้มขึ้นและมีความน่าเชื่อถือ

ตัวอย่างที่ดีคือการออกแบบงาน Van Vliet กับดัก การใช้ดอกไม้สีฟ้าเป็นพื้นหลังพวกเขามองเห็นนัยที่ความรู้และทักษะของพวกเขาใน floristry และยังสร้างความรู้สึกของความน่าเชื่อถือและความไว้วางใจ

Van Vliet & Trap
Van Vliet กับดัก

นี่เป็นเรื่องสำคัญมากเพราะพวกเขาทำงานร่วมกับเหตุการณ์ที่มีส่วนสำคัญในภาพเช่นงานแต่งงาน

สีม่วง

อารมณ์และความสัมพันธ์: ความหรูหราความโรแมนติก (เฉดสีอ่อน) ความลึกลับและความลึกลับ (เฉดสีเข้ม)

สีม่วงเป็นอดีตที่เกี่ยวข้องกับพระบาทสมเด็จพระเจ้าอยู่หัว, alludes เพื่อความหรูหรา เฉดสีม่วงสะท้อนถึงความเอื้ออาทรและความมั่งคั่งโดยทั่วไปทำให้เป็นทางเลือกที่ดีสำหรับสินค้าแฟชั่นและสินค้าหรูหรา (แม้แต่ช็อกโกแลตเช่น Cadbury ซึ่งเป็นสีของตราสินค้า)

Cadbury

เฉดสีอ่อนเช่นดอกลาเวนเดอร์ (สีม่วงกับการเพิ่มสีชมพู) แนะนำเรื่องความโรแมนติคในขณะที่เฉดสีเข้มดูเก๋และลึกลับมากขึ้น

สีดำ

อารมณ์และความสัมพันธ์: พลังการปรับแต่งความประหม่า

สีที่เป็นกลางที่สุดคือสีดำปรากฏบนแทบทุกไซต์ อาจทำให้เกิดความสัมพันธ์ที่แตกต่างกันขึ้นอยู่กับสีที่มาพร้อมกับผลิตภัณฑ์หรือครอบงำหากคุณใช้มันมากเกินไป

ความแข็งแรงและความเป็นกลางของสีดำทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับข้อความขนาดใหญ่ แต่เป็นสีหลักที่สามารถสร้างความรู้สึกหงุดหงิดหรือแม้กระทั่งเชื่อมโยงกับความชั่วร้าย

สำหรับไซต์ส่วนใหญ่สีดำจะถูกใช้เพื่อสร้างความรู้สึกซับซ้อน การผสมผสานระหว่างสีดำและสีขาวในแบบเรียบง่ายให้ความประทับใจกับความสง่างามและสไตล์เช่นเดียวกับในเว็บไซต์ Dream and Reach of BOSE

ความฝัน + การเข้าถึง
ความฝัน + การเข้าถึง

ขาว

อารมณ์และความสัมพันธ์: ความบริสุทธิ์เรียบง่ายคุณธรรม

ในวัฒนธรรมตะวันตกขาวเกี่ยวข้องกับความบริสุทธิ์ความเมตตาและความไร้เดียงสา สีนี้มักใช้สำหรับพื้นหลังของเว็บไซต์ที่เรียบง่ายและเรียบง่าย

เว็บไซต์ที่มีผลงานของ Kloin Toshev
เว็บไซต์ที่มีผลงานของ Kloin Toshev

นอกจากนี้ไม่มีสีจะช่วยให้คุณสามารถให้ความสำคัญกับส่วนที่เหลือของสีเป็นสีขาว ตัวอย่างเช่นในเว็บไซต์ของผู้ชนะ Awwwards Kloin Toshev ทุกงานของเขาจะวางบนพื้นหลังสีขาวซึ่งเน้นเฉพาะภาพประกอบและให้ความรู้สึกของแกลเลอรี่ที่สง่างาม

สีเทา

อารมณ์และความสัมพันธ์: ความเป็นกลางความเป็นระเบียบความเศร้าโศก

แม้จะมีข้อเท็จจริงที่ว่าในบางสถานการณ์สีเทาสามารถสร้างบรรยากาศที่มืดมนและน่าเศร้า แต่ก็มักใช้โดยนักออกแบบมืออาชีพ

ทั้งหมดเกี่ยวกับเฉดสี: สลับกันคุณจะได้รับอารมณ์ทั้งหมดที่เกิดจากทั้งสีดำและสีขาว โดยทั่วไปแล้วสีเทาเป็นเครื่องมือที่มีประสิทธิภาพในมือที่เก่ง

Awwwards
Awwwards

และร่วมกับสีที่สดใสมากขึ้นในการออกแบบพื้นหลังสีเทาดูเหมือนทันสมัยไม่มืดมนเช่น Allwards

ผ้าขนสัตว์สีธรรมชาติ

อารมณ์และความสัมพันธ์: บ่งบอกถึงลักษณะของสีที่เหลืออยู่

สีเบจเป็นตัวที่น่าเบื่อและดูไม่สวย แต่ก็มีคุณสมบัติโดดเด่นอย่างหนึ่งคือสีเบจใช้ลักษณะของดอกไม้ที่ล้อมรอบ ดังนั้นหากไม่ได้มีจุดมุ่งหมายเพื่อแสดงความยับยั้งชั่งใจสีเบจจะทำหน้าที่เป็นพื้นหลังหรือสีที่สอง

เฉดสีเข้มของสีเบจสร้างความรู้สึกของประเพณีและ earthiness ให้ความรู้สึกของพื้นผิวกระดาษและสีอ่อนดูเหมือนสดและทันสมัย

Dishoom
Dishoom

ตัวอย่างเช่นในไซต์ของร้านอาหาร Dishoom สีเบจอ่อนรอบ ๆ ชื่อและขอบสีเข้มให้ความรู้สึกว่าร้านอาหารแห่งนี้เป็นอาหารที่สดใหม่ในอาหารแบบดั้งเดิม

สีงาช้าง

อารมณ์และความสัมพันธ์: ความสะดวกสบายสง่างามเรียบง่าย

สีของงาช้างและครีมทำให้เกือบทุกอารมณ์เช่นเดียวกับสีขาว อย่างไรก็ตามสีของงาช้างจะอุ่นกว่า (หรือปราศจากเชื้อ) น้อยกว่าสีขาวซึ่งจะสร้างความรู้สึกสบายขึ้นขณะที่รักษาความเรียบง่าย

คุณสามารถใช้งาช้างแทนสีขาวเพื่อทำให้ความคมชัดระหว่างสีเข้มขึ้นได้ ตัวอย่างเช่นในเว็บไซต์ Art My Coffee องค์ประกอบสีน้ำตาลส้มจะถูกวางไว้บนพื้นหลังของงา (ซึ่งดูเทา) ซึ่งยังคงความรู้สึกอบอุ่น

ศิลปะในกาแฟของฉัน
ศิลปะในกาแฟของฉัน

คลื่นสี

แต่ละไซต์มีโทนสีที่ใช้สีหลักเพื่อเติมพื้นที่ขนาดใหญ่ ดังที่เราได้กล่าวมาก่อนการใช้สีเหล่านี้ส่งผลต่อจิตใจและอารมณ์ของคนโดยไม่ได้ตั้งใจโดยทั่วไป ดังนั้นเลือกอย่างระมัดระวัง

แม้จะมีหลายวิธีในการรวมสีไว้ก็ตามเราจะมุ่งเน้นไปที่สามข้อที่ประสบความสำเร็จและใช้บ่อยที่สุด

Triad (ความสามัคคีสามเหลี่ยมรูปสามเหลี่ยม)

พวกสาม
พวกสาม

ทั้งสามเป็นระบบพื้นฐานและมีความสมดุลสูงสุดสามสี ใช้เรโซแนนซ์และการเติมสี แต่ไม่มีความคมชัดที่ซับซ้อนซึ่งเป็นเหตุให้ทั้งสามเป็นรังสีแกมมาที่เชื่อถือได้มากที่สุด

บนล้อเลื่อนสี 12 สีให้เลือกสามแท่งที่อยู่ห่างกัน 120 องศา: หนึ่งสำหรับพื้นหลังหลักและสองสำหรับเนื้อหาและแถบนำทาง

ระบบคู่ฟรี

ระบบคู่ฟรี
ระบบคู่ฟรี

ระดับนี้ยากกว่าที่จะใช้ แต่สามารถพิสูจน์ได้ว่าเป็นโซลูชันที่ให้ผลกำไร ใช้สี่สี: สองสีตัดกันและสีเสริม

ดูวิธีการที่ยอดเยี่ยมฟลอริด้า Flourish หน้าดูบนพื้นฐานของโครงการนี้ ความคมชัดของสีแดงและสีเขียวในพืชและบล็อคที่มีข้อความพื้นหลังสีน้ำเงินและทะเลทรายสีส้มช่วยเติมเต็มภาพได้อย่างมีประสิทธิภาพ

อวด
อวด

ตัวแปลงสัญญาณ (ระบบลำดับ)

analogs
analogs

ช่วงของสีที่คล้ายกันใช้เฉดสีเสริมส่วนใหญ่ สิ่งนี้ช่วยให้คุณสามารถเน้นคุณลักษณะบางอย่างที่มีสีสันสดใสและทำให้เกิดอารมณ์บางอย่างได้

ตัวอย่างเช่นการรวมกันของสีแดงสีส้มและสีเหลืองเน้นความมีชีวิตชีวาและความมีชีวิตชีวา ใช้เครื่องชั่งดังกล่าวเป็นเรื่องง่ายมาก แต่ก็ยากที่จะเลือกสีที่จะรวมอยู่ในชุดค่าผสม ผลของพวกเขาจะถูกโอ้อวดดังนั้นคุณจึงไม่สามารถทำผิดพลาดได้

ตัวอย่างเช่นการใช้ดอกไม้สีฟ้าสีเขียวขุ่นและสีเขียวในการออกแบบเว็บไซต์ Blinksale สร้างบรรยากาศแห่งความสงบและความเงียบสงบ สังเกตว่าสีเหลืองถูกใช้เพื่อเน้นจุดสำคัญอย่างไร

Blinksale
Blinksale

นี่เป็นเพียงพื้นฐานของทฤษฎีสีซึ่งสามารถช่วยในการสร้างการออกแบบที่น่าประทับใจและไม่ จำกัด ว่าคุณจะไปได้ไกลแค่ไหนในแง่ของสีบนไซต์ของคุณ

เครื่องมือช่วยสำหรับการเลือกสี

โชคดีที่มีเครื่องมือหลายอย่างที่ช่วยในการแปลทฤษฎีสีให้เป็นจริง ลองใช้จานสีเหล่านี้เพื่อให้คุณไม่ต้องเริ่มต้นจากขั้นตอนการสร้างของคุณเอง:

  1. Adobe Color CC เดิมชื่อ Adobe Kuler นี่เป็นเครื่องมือที่น่าเชื่อถือที่สุดในการเลือกสี
  2. Paletton หากคุณต้องการเครื่องมือง่ายๆสำหรับการเลือกสีที่เร็วที่สุด Paletton ก็สมบูรณ์แบบ
  3. ตัวเลือกสีแบบ UI แบบขนาน เครื่องมือที่ยอดเยี่ยมสำหรับการเลือกสีของส่วนติดต่อผู้ใช้

และหากเครื่องมือเหล่านี้ไม่เหมาะกับคุณต่อไปนี้เป็นอีก 28 ไซต์ที่มีจานสีและเครื่องมือที่แตกต่างกันสำหรับการเลือกสี

ความสัมพันธ์โดยตรงระหว่างสีและอารมณ์

โปรดจำไว้ว่า: ผู้ใช้ไม่ค่อยสังเกตเห็นและชื่นชมสีพื้นหลังแถบนำทางแต่ละส่วน แต่ไม่ได้หมายความว่าสีจะไม่ส่งผลกระทบต่อ มันเกิดขึ้นโดยไม่รู้ตัว

ผู้ใช้มีอารมณ์บางอย่างทัศนคติต่อเว็บไซต์หรือแบรนด์กำลังพัฒนาอยู่เขาดำเนินการบางอย่าง: เลื่อนลงกดปุ่มที่จูงใจให้ดำเนินการหรือตรงกันข้ามไม่ได้สังเกตเห็น และสีมีบทบาทอย่างมากในทุกเรื่อง

หากคุณมีคำแนะนำเกี่ยวกับการใช้สีในการออกแบบเว็บโปรดแชร์ความคิดเห็น

Add a Comment

Your email address will not be published. Required fields are marked *

41 − = 34