การสร้างและออกแบบร้านค้า Shopify ใหม่

ใบเสนอราคาฟรีไม่มีข้อผูกมัด

การตอบสนองส่วนบุคคลภายใน 24 ชั่วโมงการทํางาน

← Tous les conseils
Guide pratique SiteQuiVend

เลือกสีสําหรับร้าน Shopify ได้อย่างไร?

วิธีการที่ชัดเจนในการเลือกจานสี คอนทราสต์ และสีแอ็กชันของร้านค้า Shopify ที่สม่ําเสมอและอ่านง่าย

Publié le 15.08.20262 min de lectureConseils concrets
เลือกซื้อเอกลักษณ์ทางภาพ

ในการเลือกสีสําหรับร้านค้า Shopify ให้เริ่มจากสามบทบาท: ฐานที่เป็นกลางที่ช่วยให้การอ่านง่ายขึ้นสีหลักที่แสดงแบรนด์และสีเน้นที่สงวนไว้สําหรับการกระทําที่สําคัญ จานสีที่มีประสิทธิภาพมีสีไม่กี่สียังคงสอดคล้องกันในทุกหน้าและรักษาความคมชัดที่เพียงพอทั้งบนเดสก์ท็อปและมือถือ

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

ให้บทบาทเฉพาะกับแต่ละสี

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

ฐาน

สีที่เป็นกลาง

ออฟไวท์ เทาอ่อนมาก เกือบดําสีฟ้าหรือสีเทาเข้มโครงสร้างพื้นหลังและข้อความ พวกเขาครอบครองส่วนใหญ่ของหน้าและให้พื้นที่กับภาพที่ผลิต

แบรนด์

สีหลัก

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

การกระทํา

สีเน้นเสียง

จองไว้สําหรับปุ่มสําคัญป้ายที่มีประโยชน์หรือข้อมูลลําดับความสําคัญ ความหายากของมันให้ผลกระทบมากกว่าความอิ่มตัว

รัฐ

สีที่ใช้งาน

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

วิธีการหกขั้นตอนง่ายๆ

1 สินค้าคงคลังรวบรวมโลโก้ บรรจุภัณฑ์ ภาพถ่าย ตัวพิมพ์ และสื่อที่มีอยู่
2 ลําดับความสําคัญเลือกสีหลักที่เกี่ยวข้องกับแบรนด์จริงๆ
3 เป็นกลางตั้งพื้นหลังสีอ่อนและข้อความสีเข้มก่อนเน้นเสียง
4 สําเนียงเลือกสีแยกต่างหากสําหรับการดําเนินการหลัก
5 ความคมชัดทดสอบการรวมกันของข้อความปุ่มลิงค์และพื้นหลัง
6 เส้นทางควบคุมบ้าน คอลเลกชัน สินค้า ตะกร้าสินค้า และการชําระเงินบนมือถือ

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

สามตัวอย่างของจานสีที่สมดุล

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

มีสติระดับพรีเมียม

สีฟ้าเที่ยงคืนพื้นหลังที่เบามากและสําเนียงสีทองด้าน เหมาะสําหรับการนําเสนอระดับสูงหากทองคํายังคงตกแต่งอยู่หรือได้รับข้อความสีเข้มเพียงพอ

อบอุ่นเป็นธรรมชาติ

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

ทันสมัยทันสมัย

สีกรมท่าสีฟ้าสดใสและสีส้ม สีฟ้าจัดระเบียบอินเตอร์เฟซ; สีส้มดึงดูดความสนใจไปยังการกระทําที่เลือกโดยไม่ปรากฏบนแต่ละองค์ประกอบ

บทบรรณาธิการอันแสนหวาน

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

ความเปรียบต่าง: กฎที่มาก่อนสุนทรียศาสตร์

สําหรับข้อความในชีวิตประจําวันให้ตั้งเป้าหมายอย่างน้อยอัตราส่วนความคมชัด 4.5:1 สําหรับข้อความขนาดใหญ่จริงเกณฑ์ขั้นต่ําคือ 3:1 ไอคอนเส้นขอบและข้อมูลภาพที่จําเป็นจะต้องยังคงแยกแยะได้ เกณฑ์เหล่านี้มาจากคําแนะนําของ WCAG ของ W3C

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

วิธีใช้จานสีใน Shopify?

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

แผนภาพหลักที่ชัดเจน

พื้นหลังสีขาวหรือสว่างมากข้อความสีเข้มลิงก์ที่มองเห็นได้ ใช้สําหรับคอลเลกชันแผ่นผลิตภัณฑ์และเนื้อหาส่วนใหญ่

รูปแบบสีเข้ม

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

รูปแบบสําเนียง

ใช้เป็นครั้งคราวสําหรับการประกาศหรือคํากระตุ้นการตัดสินใจ ตรวจสอบทุกรัฐ: ปกติ, เยี่ยมชม, โฉบ, ปิดการใช้งานและโฟกัส

การชําระเงินที่สม่ําเสมอ

นําแบรนด์กลับมาโดยไม่คิดค่าใช้จ่ายมากเกินไปในการชําระเงิน ความแตกต่างความเข้าใจในฟิลด์และความต่อเนื่องกับร้านค้ายังคงมีความสําคัญ

เพื่อขยายงานนี้ปรึกษาด้วย คู่มือปุ่มการดําเนินการ และ คู่มือประสบการณ์มือถือ.

ข้อผิดพลาดที่ทําให้ร้านค้าไม่สอดคล้องกัน

สําเนียงทวีคูณ

สามสีสดใสที่ใช้กับความเข้มเท่ากันแข่งขันกันเอง ผู้เข้าชมไม่สามารถแยกแยะปุ่มตราและข้อมูลรองได้อีกต่อไป

สี พื้นหลังทั้งหมด

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

เปลี่ยนแปลงขึ้นอยู่กับหน้า

ปุ่มสีน้ําเงินบนหน้าแรก สีเขียวบนการ์ด และสีส้มในตะกร้าทําให้การเรียนรู้ด้วยภาพของหลักสูตรอ่อนแอลง

ลืมสถานะทางเทคนิคไปได้เลย

ลิงก์ที่เข้าชม ปุ่มที่ปิดใช้งาน ข้อผิดพลาด โฟกัส และรูปแบบที่เลือกควรได้รับการทดสอบ โดยเฉพาะอย่างยิ่งหลังจากเพิ่มแอปพลิเคชันแล้ว

เลือกใช้บริการใดตามความต้องการ?

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

รายการตรวจสอบก่อนตรวจสอบสี

  • จานสีประกอบด้วยฐาน สีหลัก และสําเนียง
  • แต่ละสียังคงมีบทบาทเหมือนกันในทุกหน้า
  • ข้อความปัจจุบันมีความแตกต่างเพียงพอกับพื้นหลัง
  • ปุ่มต่างๆ ยังคงสามารถอ่านได้ในทุกรัฐ
  • ลิงก์ไม่ได้ระบุด้วยสีเพียงอย่างเดียว
  • ข้อความแสดงข้อผิดพลาดยังใช้ข้อความหรือไอคอน
  • ภาพถ่ายที่ผลิตยังคงซื่อสัตย์และแยกออกจากพื้นหลังอย่างดี
  • สคีมาสีเข้มไม่ได้กําหนดข้อความสีขาวบนแผนที่แสง
  • พาเลทควบคุมที่ความกว้าง 375 พิกเซล
  • มีการทดสอบการต้อนรับ คอลเลกชัน การ์ด ตะกร้า และการชําระเงิน

คําถามที่พบบ่อยเกี่ยวกับสี Shopify Store

คุณควรใช้กี่สีในร้าน Shopify?

บทบาทหลักสามประการมักจะเพียงพอ: ฐานที่เป็นกลางสีแบรนด์และสําเนียง เฉดสีเพิ่มเติมสามารถใช้สําหรับเส้นขอบพื้นหลังรองและสถานะการทํางานโดยไม่ต้องกลายเป็นสีที่โดดเด่นใหม่

สีไหนขายดีที่สุด?

ไม่มีสีรับประกันยอดขายมากขึ้น ความชัดเจนของข้อเสนอการมองเห็นปุ่มความคมชัดและความสม่ําเสมอของการเดินทางมีความสําคัญมากกว่าสีแปลงสากลที่เรียกว่า

ปุ่ม หยิบลงตะกร้า ต้องเป็นสีเขียวหรือไม่?

ไม่ เหนือสิ่งอื่นใดมันจะต้องแยกแยะตัวเองจากสภาพแวดล้อมยังคงสอดคล้องกับแบรนด์และนําเสนอข้อความที่อ่านได้ สีการกระทําเดียวกันควรคงบทบาทเดียวกันในหน้าหลัก

เราสามารถใช้พื้นหลังสีดําทั้งร้านได้หรือไม่?

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

ควรเคารพความแตกต่างอะไรบ้างสําหรับข้อความ?

ตั้งเป้าอย่างน้อย 4.5:1 สําหรับข้อความในชีวิตประจําวันและ 3:1 สําหรับข้อความขนาดใหญ่อย่างแท้จริง ข้อมูลการทํางานและตัวชี้วัดภาพที่สําคัญควรยังคงแยกแยะได้

วิธีการเปลี่ยนสีใน Shopify?

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

เราควรใช้สีของโลโก้ให้ตรงจุดหรือไม่?

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

จะทดสอบจานสีใหม่โดยไม่รบกวนร้านค้าได้อย่างไร?

ทํางานกับสําเนาของธีม ใช้จานสีกับเทมเพลตตัวแทนบางส่วน จากนั้นตรวจสอบคอมพิวเตอร์ มือถือ รูปแบบต่างๆ ตะกร้าสินค้า แบบฟอร์ม และการชําระเงินก่อนเผยแพร่

คู่มือที่เขียนโดย SiteQuiVend ผู้เชี่ยวชาญด้านการสร้างและออกแบบเว็บไซต์และร้านค้า Shopify ใหม่ ข้อมูลอัปเดตในเดือนสิงหาคม 2569

สร้างจานสีที่ชัดเจนก่อนตกแต่งร้าน

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

Transformons vos idées en pages qui donnent confiance

Création ou refonte de boutique Shopify : obtenez une recommandation et un devis adaptés à votre situation.

Parler de mon projet →