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

ให้บทบาทเฉพาะกับแต่ละสี
สีจะต้องทําหน้าที่ที่มั่นคงในอินเตอร์เฟซ ถ้าสีฟ้าเดียวกันทําหน้าที่เป็นพื้นหลัง, การเชื่อมโยง, ปุ่มรองและข้อความแสดงข้อผิดพลาดผู้เข้าชมไม่รู้ว่าจะดูอะไร
สีที่เป็นกลาง
ออฟไวท์ เทาอ่อนมาก เกือบดําสีฟ้าหรือสีเทาเข้มโครงสร้างพื้นหลังและข้อความ พวกเขาครอบครองส่วนใหญ่ของหน้าและให้พื้นที่กับภาพที่ผลิต
สีหลัก
มันเชื่อมต่อโลโก้ชื่อเรื่องบางอย่างองค์ประกอบกราฟิกและพื้นที่ที่แข็งแกร่ง มันจะต้องยังคงเป็นที่รู้จักโดยไม่ต้องบุกรุกทั้งร้าน
สีเน้นเสียง
จองไว้สําหรับปุ่มสําคัญป้ายที่มีประโยชน์หรือข้อมูลลําดับความสําคัญ ความหายากของมันให้ผลกระทบมากกว่าความอิ่มตัว
สีที่ใช้งาน
ความสําเร็จข้อผิดพลาดการแจ้งเตือนการหยุดพักหรือการตรวจสอบความถูกต้องจะต้องยังคงเข้าใจได้ เพิ่มข้อความหรือไอคอนเสมอ: สีเพียงอย่างเดียวไม่เพียงพอ
วิธีการหกขั้นตอนง่ายๆ
อย่าตัดสินใจจากโลโก้เพียงอย่างเดียว สีที่มีสไตล์บนนามบัตรอาจกลายเป็นเหนื่อยเมื่อครอบคลุมเต็มหน้าจอ ทดสอบจานสีที่มีชื่อจริงภาพถ่ายราคาการเปลี่ยนแปลงและปุ่ม
สามตัวอย่างของจานสีที่สมดุล
ตัวอย่างเหล่านี้เป็นจุดเริ่มต้น การผสมผสานที่เหมาะสมขึ้นอยู่กับผลิตภัณฑ์ การถ่ายภาพ การวางตําแหน่ง และสีที่เชื่อมโยงกับแบรนด์แล้ว
มีสติระดับพรีเมียม
สีฟ้าเที่ยงคืนพื้นหลังที่เบามากและสําเนียงสีทองด้าน เหมาะสําหรับการนําเสนอระดับสูงหากทองคํายังคงตกแต่งอยู่หรือได้รับข้อความสีเข้มเพียงพอ
อบอุ่นเป็นธรรมชาติ
สีเขียวเข้มงาช้างและดินเผา จานสีนี้ทํางานได้ดีกับวัสดุธรรมชาติให้คุณรักษาความสามารถในการอ่านข้อความขนาดเล็ก
ทันสมัยทันสมัย
สีกรมท่าสีฟ้าสดใสและสีส้ม สีฟ้าจัดระเบียบอินเตอร์เฟซ; สีส้มดึงดูดความสนใจไปยังการกระทําที่เลือกโดยไม่ปรากฏบนแต่ละองค์ประกอบ
บทบรรณาธิการอันแสนหวาน
แอนทราไซต์สีม่วงสีขาวอมชมพูและราสเบอร์รี่อู้อี้ จานสีอ่อนยังคงเป็นมืออาชีพหากข้อความและปุ่มต่างๆรักษาความแตกต่างที่ชัดเจนในความสว่าง
ความเปรียบต่าง: กฎที่มาก่อนสุนทรียศาสตร์
สําหรับข้อความในชีวิตประจําวันให้ตั้งเป้าหมายอย่างน้อยอัตราส่วนความคมชัด 4.5:1 สําหรับข้อความขนาดใหญ่จริงเกณฑ์ขั้นต่ําคือ 3:1 ไอคอนเส้นขอบและข้อมูลภาพที่จําเป็นจะต้องยังคงแยกแยะได้ เกณฑ์เหล่านี้มาจากคําแนะนําของ WCAG ของ W3C
| องค์ประกอบ | แนะนําการควบคุม | ข้อผิดพลาดบ่อยครั้ง |
|---|---|---|
| ข้อความทั่วไป | ความเปรียบต่างอย่างน้อย 4.5:1 กับด้านล่าง | สีเทาอ่อนเกินไปบนพื้นหลังสีขาว |
| ปุ่มหลัก | ข้อความที่อ่านได้ โครงร่าง หรือรูปร่างที่สามารถระบุตัวตนได้ | ข้อความสีขาวบนสีสว่างเกินไปสว่าง |
| เชื่อมโยงในย่อหน้า | สีที่ตัดกันและขีดเส้นใต้หรือเบาะแสอื่น ๆ | ความแตกต่างที่มองเห็นได้ด้วยสีเท่านั้น |
| ข้อความแสดงข้อผิดพลาด | สี ไอคอน และข้อความที่ชัดเจน | สนามที่มีเส้นขอบสีแดงเท่านั้น |
| สถานะคีย์บอร์ด | โครงร่างโฟกัสที่มองเห็นได้บนพื้นหลังทั้งหมด | โฟกัสถูกลบออกด้วยเหตุผลด้านสุนทรียภาพ |
วิธีใช้จานสีใน Shopify?
ในโปรแกรมแก้ไขธีม Shopify รูปแบบสีประกอบด้วยพื้นหลังข้อความลิงก์เส้นขอบและปุ่ม ใช้ไดอะแกรมที่สอดคล้องกันสองสามรายการกับส่วนที่เข้ากันได้แทนที่จะสร้างชุดค่าผสมใหม่สําหรับแต่ละบล็อก
แผนภาพหลักที่ชัดเจน
พื้นหลังสีขาวหรือสว่างมากข้อความสีเข้มลิงก์ที่มองเห็นได้ ใช้สําหรับคอลเลกชันแผ่นผลิตภัณฑ์และเนื้อหาส่วนใหญ่
รูปแบบสีเข้ม
จองที่ส่วนท้ายแทรกบรรณาธิการหรือส่วนที่แข็งแรง บังคับข้อความและเซลล์ที่ชัดเจนเพื่อรักษาสีของตัวเอง
รูปแบบสําเนียง
ใช้เป็นครั้งคราวสําหรับการประกาศหรือคํากระตุ้นการตัดสินใจ ตรวจสอบทุกรัฐ: ปกติ, เยี่ยมชม, โฉบ, ปิดการใช้งานและโฟกัส
การชําระเงินที่สม่ําเสมอ
นําแบรนด์กลับมาโดยไม่คิดค่าใช้จ่ายมากเกินไปในการชําระเงิน ความแตกต่างความเข้าใจในฟิลด์และความต่อเนื่องกับร้านค้ายังคงมีความสําคัญ
เพื่อขยายงานนี้ปรึกษาด้วย คู่มือปุ่มการดําเนินการ และ คู่มือประสบการณ์มือถือ.
ข้อผิดพลาดที่ทําให้ร้านค้าไม่สอดคล้องกัน
สําเนียงทวีคูณ
สามสีสดใสที่ใช้กับความเข้มเท่ากันแข่งขันกันเอง ผู้เข้าชมไม่สามารถแยกแยะปุ่มตราและข้อมูลรองได้อีกต่อไป
สี พื้นหลังทั้งหมด
ภาพถ่ายที่ผลิตสูญเสียความแม่นยําและหน้าจะเหนื่อย โดยทั่วไปฐานที่เป็นกลางจะให้กรอบที่มั่นคงมากขึ้น
เปลี่ยนแปลงขึ้นอยู่กับหน้า
ปุ่มสีน้ําเงินบนหน้าแรก สีเขียวบนการ์ด และสีส้มในตะกร้าทําให้การเรียนรู้ด้วยภาพของหลักสูตรอ่อนแอลง
ลืมสถานะทางเทคนิคไปได้เลย
ลิงก์ที่เข้าชม ปุ่มที่ปิดใช้งาน ข้อผิดพลาด โฟกัส และรูปแบบที่เลือกควรได้รับการทดสอบ โดยเฉพาะอย่างยิ่งหลังจากเพิ่มแอปพลิเคชันแล้ว
เลือกใช้บริการใดตามความต้องการ?
รายการตรวจสอบก่อนตรวจสอบสี
- จานสีประกอบด้วยฐาน สีหลัก และสําเนียง
- แต่ละสียังคงมีบทบาทเหมือนกันในทุกหน้า
- ข้อความปัจจุบันมีความแตกต่างเพียงพอกับพื้นหลัง
- ปุ่มต่างๆ ยังคงสามารถอ่านได้ในทุกรัฐ
- ลิงก์ไม่ได้ระบุด้วยสีเพียงอย่างเดียว
- ข้อความแสดงข้อผิดพลาดยังใช้ข้อความหรือไอคอน
- ภาพถ่ายที่ผลิตยังคงซื่อสัตย์และแยกออกจากพื้นหลังอย่างดี
- สคีมาสีเข้มไม่ได้กําหนดข้อความสีขาวบนแผนที่แสง
- พาเลทควบคุมที่ความกว้าง 375 พิกเซล
- มีการทดสอบการต้อนรับ คอลเลกชัน การ์ด ตะกร้า และการชําระเงิน
คําถามที่พบบ่อยเกี่ยวกับสี Shopify Store
คุณควรใช้กี่สีในร้าน Shopify?
บทบาทหลักสามประการมักจะเพียงพอ: ฐานที่เป็นกลางสีแบรนด์และสําเนียง เฉดสีเพิ่มเติมสามารถใช้สําหรับเส้นขอบพื้นหลังรองและสถานะการทํางานโดยไม่ต้องกลายเป็นสีที่โดดเด่นใหม่
สีไหนขายดีที่สุด?
ไม่มีสีรับประกันยอดขายมากขึ้น ความชัดเจนของข้อเสนอการมองเห็นปุ่มความคมชัดและความสม่ําเสมอของการเดินทางมีความสําคัญมากกว่าสีแปลงสากลที่เรียกว่า
ปุ่ม หยิบลงตะกร้า ต้องเป็นสีเขียวหรือไม่?
ไม่ เหนือสิ่งอื่นใดมันจะต้องแยกแยะตัวเองจากสภาพแวดล้อมยังคงสอดคล้องกับแบรนด์และนําเสนอข้อความที่อ่านได้ สีการกระทําเดียวกันควรคงบทบาทเดียวกันในหน้าหลัก
เราสามารถใช้พื้นหลังสีดําทั้งร้านได้หรือไม่?
ใช่ หากผลิตภัณฑ์ ข้อความ ฟิลด์ และสถานะการโต้ตอบยังคงสามารถอ่านได้อย่างสมบูรณ์ จักรวาลมืดต้องการการควบคุมที่มากขึ้นและอาจไม่เหมาะกับภาพถ่ายหรือหมวดหมู่บางประเภท
ควรเคารพความแตกต่างอะไรบ้างสําหรับข้อความ?
ตั้งเป้าอย่างน้อย 4.5:1 สําหรับข้อความในชีวิตประจําวันและ 3:1 สําหรับข้อความขนาดใหญ่อย่างแท้จริง ข้อมูลการทํางานและตัวชี้วัดภาพที่สําคัญควรยังคงแยกแยะได้
วิธีการเปลี่ยนสีใน Shopify?
เปิดโปรแกรมแก้ไขธีมจากนั้นการตั้งค่าธีมและส่วนสี คุณสามารถจัดการโทนสีและนําไปใช้กับส่วนที่เข้ากันได้ ทั้งนี้ขึ้นอยู่กับธีม
เราควรใช้สีของโลโก้ให้ตรงจุดหรือไม่?
ไม่ โลโก้เป็นพื้นฐาน แต่อินเทอร์เฟซต้องการความเป็นกลางความคมชัดและสถานะการทํางาน สีโลโก้บางสีสามารถคงไว้เป็นสําเนียงมากกว่าพื้นหลังหลัก
จะทดสอบจานสีใหม่โดยไม่รบกวนร้านค้าได้อย่างไร?
ทํางานกับสําเนาของธีม ใช้จานสีกับเทมเพลตตัวแทนบางส่วน จากนั้นตรวจสอบคอมพิวเตอร์ มือถือ รูปแบบต่างๆ ตะกร้าสินค้า แบบฟอร์ม และการชําระเงินก่อนเผยแพร่
สร้างจานสีที่ชัดเจนก่อนตกแต่งร้าน
SiteQuiVend สามารถวิเคราะห์ความสอดคล้องของสี ความคมชัดของข้อความและปุ่ม และการใช้งานในโมเดล Shopify หลักๆ วัตถุประสงค์คือเพื่อเลือกการแทรกแซงที่จําเป็นจริงๆ ตั้งแต่การแก้ไขแบบกําหนดเป้าหมายไปจนถึงการยกเครื่องทั่วโลกมากขึ้น








