รูปแบบสีเว็บไซต์ 32 แบบพร้อมโค้ด hex จากดีไซน์เทมเพลต We.Inc บวกวิธีสร้างรูปแบบที่ช่วย Conversion: จานสีพื้นฐานที่สงบพร้อมสีเน้นหนึ่งสีที่สงวนไว้สำหรับการกระทำ ตัวอย่างตามอุตสาหกรรม และการตรวจสอบ accessibility
ไม่มีสีเดียวที่ดีที่สุดทุกที่ สีปุ่มที่ดีที่สุดคือสีที่ตัดกันอย่างมากกับหน้าของคุณ และไม่ได้ใช้เพื่อสิ่งอื่น ดังนั้นสายตาจึงมองตรงไปยังสีนั้น
แนวทางทั่วไปคือการใช้ฐานที่เป็นกลาง (สีขาวหรือสีขาวนวลและสีข้อความสีเข้ม) สีหลักของแบรนด์หนึ่งสี และการเน้นเสียงหนึ่งสีสำหรับคำกระตุ้นการตัดสินใจ บวกด้วยสีความหมายสำหรับข้อความแสดงความสำเร็จและข้อผิดพลาด มากกว่านั้นมักจะทำให้ลำดับชั้นการมองเห็นอ่อนแอลง
การเชื่อมโยงสีมีอยู่ แต่จะแตกต่างกันไปตามวัฒนธรรม อุตสาหกรรม และบริบท และคำกล่าวอ้างที่ได้รับความนิยมหลายข้อก็เกินจริงไป สิ่งที่ส่งผลต่อ Conversion ที่เชื่อถือได้คือความเปรียบต่าง ความสามารถในการอ่าน และการกระทำที่คุณต้องการนั้นชัดเจนหรือไม่
ผู้ซื้อในภาคอุตสาหกรรมให้ความสำคัญกับความชัดเจนและความไว้วางใจ สีเทากรมท่า สีชาร์โคล และสีเหล็กที่มีเน้นสีเดียว มักเป็นสีส้มเซฟตี้ เหลือง หรือน้ำเงินสดใส เหมาะกับหมวดหมู่นี้ ตรวจสอบให้แน่ใจว่าเอกสารข้อมูลจำเพาะ ปุ่มคำพูด และหมายเลขโทรศัพท์ใช้สำเนียงเพื่อให้ค้นหาได้ง่าย
ใช้ตัวตรวจสอบคอนทราสต์ เช่น WebAIM's WCAG 2.2 ระดับ AA จะขอคอนทราสต์ 4.5:1 เป็นอย่างน้อยสำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่และสำหรับองค์ประกอบอินเทอร์เฟซหลัก เช่น เส้นขอบของปุ่มและฟิลด์แบบฟอร์ม
ไม่มีสีใดที่แปลงได้ดีที่สุด สิ่งที่สำคัญคือปุ่มโดดเด่นเหนือหน้าแค่ไหน รูปแบบสีที่ช่วย Conversion คือแบบที่มีฐานสงบสม่ำเสมอ และมีสีเน้นคอนทราสต์สูงหนึ่งสีที่สงวนไว้สำหรับการกระทำที่ต้องการเท่านั้น
ดังนั้น แทนที่จะถามว่า "สีอะไร" ให้ถามว่า "ปุ่มที่สำคัญที่สุดของฉันดูไม่เหมือนอย่างอื่นบนหน้าเลยหรือเปล่า" คู่มือนี้จะแสดงวิธีสร้างแบบแผนตามแนวคิดนั้น
จานสีเหล่านี้นำมาจากต้นแบบดีไซน์เทมเพลตของ We.Inc (สี่สีที่ใช้มากที่สุดในตัวอย่างแต่ละดีไซน์ ไม่รวมสีเทาธรรมดาของเฟรมตัวอย่าง) เป็นดีไซน์เทมเพลต ไม่ใช่เว็บลูกค้า และไม่ได้อ้างว่า Conversion ของแต่ละแบบเป็นอย่างไร คัดลอกโค้ด hex ไปใส่ใน hex color picker เพื่อดูและรับค่า RGB/HSL และตรวจสอบคู่ข้อความบนพื้นหลังใน color contrast checker ก่อนใช้
| ดีไซน์เทมเพลต We.Inc | สไตล์ | สี (hex) | รูปแบบสี |
|---|---|---|---|
| Atlas Builders | งานก่อสร้าง / การค้า | #101d2c #0b1521 #f2a614 #d18f0a | ฐานสีกรมท่าเข้ม สีอำพันสำหรับการกระทำ |
| Summit Trades | การค้า | #0e2436 #e4671e #16222e #f6eeec | กรมท่าพร้อมสีส้มเซฟตี้ |
| Ironpeak Roofing | หลังคา | #e4671e #0e2436 #17415f #16222e | นำด้วยสีส้ม โครงสร้างสีกรมท่า |
| Ridgewater Plumbing | ประปา | #b08544 #d8401f #f2ede3 #c9a063 | สีทองแดงและแดงบนครีมอุ่น |
| Sunward Solar | โซลาร์ | #0b1f3a #f5a524 #d98a0b #fff6e6 | น้ำเงินกลางคืนและทองคำแสงอาทิตย์ |
| Hookline Towing | รถลาก | #0e0e0e #ffc400 #f4f1ea #161616 | ดำและเหลืองความปลอดภัย |
| Redline Auto Group | ดีลเลอร์รถ | #e3262e #0e0f11 #eeeeee #17191c | แดงสปีดบนสีเกือบดำ |
| Maple Street Motors | ซ่อมรถ | #1f4d3a #1b1b1b #f2b134 #e6efe9 | เขียวฟอเรสต์พร้อมสีมัสตาร์ด |
| Freshpile Carpet Cleaning | ทำความสะอาด | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | เหลืองสดบนกรมท่าราชนาวี |
| Tideline Pressure Washing | ทำความสะอาดภายนอก | #0b1b2b #3fd0c9 #f3f6f5 #020617 | กรมท่าเข้มพร้อมสีอควา |
| Mowline Lawn Care | ดูแลสนามหญ้า | #eef3e6 #c6f24e #0f1410 #1a2a17 | ฐานสีเขียวอ่อน เน้นด้วยไลม์ |
| Fairway Lawn Co. | ภูมิทัศน์ | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | ครีม เขียวเข้ม ทองนุ่ม |
| Brightside Dental | ทันตกรรม | #10312e #3f605c #0e5f57 #0a4841 | สีฟ้าอมเขียวสงบ |
| Meadowpaw Veterinary | สัตวแพทย์ | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | ฟ้าอมเขียวมิวต์บนเขียวมิ้นอ่อน |
| Vibrant Wellness | คลินิกสุขภาพ | #25382c #eef2e6 #7c9a7e #3f6b4a | เสจและฟอเรสต์ |
| Kinfolk Home Care | ดูแลผู้สูงอายุที่บ้าน | #0f3d2e #f4c542 #fffdf6 #0a2e22 | เขียวสนพร้อมเหลืองอบอุ่น |
| Lumora | การแพทย์ | #c8a97e #182c41 #0b1220 #0e1a26 | กรมท่ากลางคืนพร้อมทองทราย |
| Sterling & Vance LLP | สำนักงานกฎหมาย | #8a93a2 #b08a4f #0b0e14 #f6eeec | เส้น บรอนซ์ และหมึก |
| Harborview Wealth Partners | ที่ปรึกษาการเงิน | #102a43 #b08d57 #d9bf8f #faf8f4 | กรมท่าและทองบนไอวอรี |
| Harborline Insurance Agency | ประกันภัย | #0f2742 #5fd3c9 #17a398 #0b1e33 | กรมท่าพร้อมฟ้าอมเขียว |
| Larkfield Partners | ที่ปรึกษา | #1f4d3f #f4f1ea #14181c #4a5560 | เขียวขวดบนกระดาษ |
| Keystone Realty | อสังหาริมทรัพย์ | #f6eeec #7a2e2a #59606b #e9f0ef | ฐานบลัชออนพร้อมออกซ์บลัด |
| Lucia Trattoria | ร้านอาหาร | #e9c9a8 #f7f1e6 #efe6d4 #23301f | ทรายอุ่นพร้อมมะกอกดำ |
| Ember & Roast | คาเฟ่ / ร้านอาหาร | #ede6dc #c9642f #14100d #f6eeec | โอ๊ต ส้มเบิร์น เอสเปรสโซ |
| Kilnhouse Coffee | ร้านกาแฟ | #2b1d16 #c65d3b #f3ebe0 #fff8ef | น้ำตาลคั่วและเทอร์ราคอตต้า |
| Parcel No. 9 Wines | ไวนารี | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | แดงเข้มพร้อมกุหลาบ |
| Petalry Florist | ร้านดอกไม้ | #3e1f2b #b4546c #fbf5f2 #f3e3dd | พลัมและชมพูดัสตี้ |
| Hollow Oak Farm Shop | ฟาร์มช็อป | #24301f #f6f1e4 #5e7f3a #e3a33b | มอส ครีม และน้ำผึ้ง |
| Suds & Scruff | ร้านอาบน้ำสัตว์เลี้ยง | #3b1740 #ffd84d #ff8fab #fff8e7 | มะเขือม่วง เหลือง และชมพู |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | ม่วงพร้อมปะการัง |
| Mast Security | ความปลอดภัย | #1e2628 #34e0a1 #e7ede9 #8d9a97 | กราไฟต์พร้อมมิ้นต์ |
| Afterglow Sound | อีเวนต์ / ดนตรี | #efeaff #f472b6 #ec4899 #8b5cf6 | ลาเวนเดอร์ ชมพู และม่วง |
รูปแบบที่เห็นซ้ำ ๆ: ส่วนใหญ่จับคู่ฐานสีเข้มหรืออ่อนกับสีเน้นอิ่มตัวหนึ่งสี (อำพัน ส้ม เหลือง ไลม์ หรือปะการัง) นั่นคือโครงสร้าง "ฐานเงียบ สีกระทำหนึ่งสี" เดียวกับที่อธิบายด้านล่าง
บทความจิตวิทยาเรื่องสีมักอ้างว่าสีน้ำเงินหมายถึงความไว้วางใจ สีแดงหมายถึงความเร่งด่วน และสีเขียวหมายถึงการเติบโต มีความจริงบางประการในสมาคมทั่วไป แต่ขึ้นอยู่กับวัฒนธรรม อุตสาหกรรม และบริบทเป็นอย่างมาก สีแดงเป็นการเตือนในสถานการณ์หนึ่งและเป็นการเฉลิมฉลองในอีกสถานที่หนึ่ง สีเขียวอาจหมายถึง "ไป" "อีโค" หรือ "เงิน"
สิ่งที่ได้รับการสนับสนุนอย่างดีคือ เอฟเฟกต์การแยกตัว หรือที่เรียกว่าเอฟเฟกต์ Von Restorff: สิ่งของที่แตกต่างไปจากสภาพแวดล้อมมีแนวโน้มที่จะสังเกตเห็นและจดจำได้มากกว่า ปุ่มสีส้มเดียวบนหน้าสีน้ำเงินและสีขาวจะสังเกตเห็น สีส้มเดียวกันบนหน้าที่เต็มไปด้วยสีส้มไม่ได้
นั่นทำให้คุณมีกฎสองข้อที่ยึดถือในอุตสาหกรรมต่างๆ:
นักออกแบบตกแต่งภายในใช้การแบ่ง 60-30-10 และแปลเป็นภาษาเว็บไซต์ได้ดี:
| แบ่งปัน | บทบาท | ตัวเลือกทั่วไป |
|---|---|---|
| ~60% | พื้นหลังและฐาน | สีขาว สีขาวนวล สีเทาอ่อนมาก หรือสีเข้มเข้มสำหรับธีมสีเข้ม |
| ~30% | แบรนด์และโครงสร้าง | สีหลักของแบรนด์สำหรับส่วนหัว การนำทาง พื้นหลังส่วน |
| ~10% | สำเนียง / การกระทำ | ปุ่ม คีย์ลิงค์ สิ่งเดียวที่คุณต้องการคลิก |
เพิ่มสีข้อความสีเข้ม (โดยทั่วไปคือสีดำเกือบหรือสีเทาเข้มแทนที่จะเป็นสีดำล้วน) และสีความหมาย: สีเขียวสำหรับความสำเร็จ สีแดงสำหรับข้อผิดพลาด สีเหลืองอำพันสำหรับคำเตือน เก็บสีความหมายเหล่านั้นให้ห่างจากปุ่มหลักของคุณ เพื่อไม่ให้สับสนระหว่างปุ่ม "ซื้อเลย" กับข้อผิดพลาด
หากคุณมีโลโก้ ให้ใช้สีหลักเป็นสีหลัก ถ้าไม่ ให้เลือกอันที่เหมาะกับหมวดหมู่ของคุณ (ดูตารางด้านล่าง) และที่คุณชอบพอที่จะอยู่ด้วย
ดูที่วงล้อสี สีคู่ตรงข้าม (ตรงข้ามกัน) ทำให้เกิดสีที่โดดเด่นที่สุด ได้แก่ สีฟ้าและสีส้ม สีม่วงและสีเหลือง สีน้ำเงินอมเขียวและสีปะการัง หากแบรนด์ของคุณเป็นสีน้ำเงิน การเน้นสีส้มหรือสีเหลืองอบอุ่นจะโดดเด่นมากกว่าสีน้ำเงินเฉดที่สอง
เลือกพื้นหลัง สีพื้นผิวสำหรับการ์ด ขอบสีเทา และสีข้อความ สิ่งเหล่านี้จะทำงานส่วนใหญ่และควรจะเงียบ
เรียกใช้ทุกข้อความและปุ่มรวมกันผ่านตัวตรวจสอบความคมชัด (WebAIM ใช้งานได้ฟรี) WCAG 2.2 ระดับ AA ต้องใช้:
ข้อความสีเทาคอนทราสต์ต่ำบนพื้นสีขาวเป็นปัญหาด้านการอ่านง่ายที่พบบ่อยที่สุดปัญหาหนึ่งบนเว็บ หากผู้คนประสบปัญหาในการอ่านข้อเสนอของคุณ สีของปุ่มก็แทบจะไม่มีความสำคัญ
ตรวจสอบจานสีของคุณบนโทรศัพท์กลางแจ้ง บนหน้าจอแล็ปท็อปราคาถูก และในโหมดมืดหากเว็บไซต์ของคุณรองรับ สีที่ดูประณีตบนหน้าจอของนักออกแบบสามารถถูกมองข้ามไปจากที่อื่นได้
สิ่งเหล่านี้เป็นจุดเริ่มต้นที่สมเหตุสมผล ไม่ใช่กฎเกณฑ์ แต่ละห้องใช้ฐานที่เงียบสงบและมีสำเนียงที่ตัดกันเพียงเสียงเดียว
| อุตสาหกรรม | ฐานและหลัก | สำเนียงสำหรับการกระทำ | ทำไมมันถึงใช้งานได้ |
|---|---|---|---|
| การผลิต/อุตสาหกรรม | สีกรมท่า ถ่าน สีเทาเหล็ก | เซฟตี้สีส้มหรือเหลือง | จริงจังและเชื่อถือได้ โดยมีข้อความ "ขอใบเสนอราคา" ปรากฏให้เห็น |
| การดูแลสุขภาพ/ทันตกรรม | สีขาว ฟ้าอ่อน หรือฟ้าอมเขียว | ปะการังอุ่นหรือเขียว | สะอาดและสงบ ปุ่มจองโดดเด่น |
| กฎหมาย / การเงิน | สีกรมท่าเข้มหรือเขียวฟอเรสต์ สีครีม | สีทองหรือสีฟ้าสดใส | ความไว้วางใจแบบดั้งเดิมบ่งบอกถึงการดำเนินการติดต่อที่ชัดเจน |
| ร้านอาหาร/อาหาร | สีกลางโทนอุ่น สีแดงเข้ม หรือสีมะกอก | สีเหลืองสดใสหรือสีส้ม | น่ารับประทานโดยมีคำว่า "Order" หรือ "Book" ชัดเจน |
| SaaS / เทค | ขาวหรือใกล้ดำ ครามหรือน้ำเงิน | สีเขียวสดใส สีส้ม หรือสีชมพู | คมชัดด้วยคอนทราสต์สูง "เริ่มฟรี" |
| ความงาม / สุขภาพ | บลัชออน เสจ ครีม | พลัมลึกหรือสีดำ | แบรนด์นุ่ม ปุ่มจองมั่นใจ |
| บริการเกี่ยวกับบ้าน (ประปา, HVAC, หลังคา) | ขาว น้ำเงินเข้ม | แดงหรือส้ม | ปุ่มโทรแจ้งเหตุฉุกเฉิน |
| อีคอมเมิร์ซ / แฟชั่น | ส่วนใหญ่เป็นสีขาวและสีดำ | สำเนียงแบรนด์เดียว | ให้รูปถ่ายสินค้ามีสี |
สำหรับผู้ผลิตโดยเฉพาะ: ผู้ซื้อมักจะไปที่หน้าผลิตภัณฑ์หรือความสามารถ และต้องการเอกสารข้อมูลจำเพาะหรือใบเสนอราคา ทำให้ "ขอใบเสนอราคา" "ดาวน์โหลดเอกสารข้อมูลจำเพาะ" และหมายเลขโทรศัพท์เป็นเพียงองค์ประกอบที่มีสีเน้นเฉพาะบนหน้าเหล่านั้น
ลองนึกภาพไซต์บริษัทจัดสวนที่มีโลโก้สีเขียว หัวข้อสีเขียว ไอคอนสีเขียว พื้นหลังสีเขียวฮีโร่ และปุ่ม "รับการประเมินราคาฟรี" สีเขียว ทุกอย่างเป็นไปตามแบรนด์และปุ่มก็หายไป
การแก้ไข:
ไม่มีอะไรเกี่ยวกับแบรนด์ที่เปลี่ยนแปลง แต่การกระทำกลายเป็นสิ่งที่มองเห็นได้ชัดเจนที่สุดบนหน้าจอ
หากคุณมีปริมาณการเข้าชมเพียงพอ ให้ทำการทดสอบ A/B กับปุ่มหรือสีเฉพาะจุด แต่เปลี่ยนทีละอย่างและปล่อยให้มันทำงานนานพอที่จะมีความหมาย ไซต์ที่มีการเข้าชมต่ำมักไม่สามารถเข้าถึงผลลัพธ์ที่เชื่อถือได้ สำหรับพวกเขา การตรวจสอบที่ง่ายกว่านั้นได้ผล:
สีเป็นส่วนหนึ่งของสิ่งที่ทำให้เพจเกิดการเปลี่ยนแปลง รายละเอียด ตัวอย่างหน้า Landing Page ที่ทำให้เกิด Conversion ครอบคลุมส่วนที่เหลือ ด้วย We.Inc คุณสามารถอธิบายรูปลักษณ์ที่คุณต้องการในแชท เช่น "สีกรมท่าและสีเทาพร้อมปุ่มเครื่องหมายคำพูดสีส้ม" เรียกดู เทมเพลต จากนั้นปรับแต่งสีด้วยภาพหรือในโค้ด
เริ่มต้นฟรี · ไม่ต้องใช้บัตรเครดิต