لاختيار الألوان لمتجر Shopify، ابدأ من ثلاثة أدوار: قاعدة محايدة تجعل القراءة أسهل، ولون رئيسي يعبر عن العلامة التجارية ولون مميز مخصص للإجراءات المهمة. تحتوي اللوحة الفعالة على عدد قليل من الألوان، وتظل متسقة في جميع الصفحات، وتحافظ على تباين كافٍ على كل من سطح المكتب والهاتف المحمول.
إعطاء دور محدد لكل لون
يجب أن يؤدي اللون وظيفة ثابتة في الواجهة. إذا كان نفس اللون الأزرق بمثابة خلفية ورابط وزر ثانوي ورسالة خطأ، فلن يعرف الزائر ما الذي يجب أن ينظر إليه.
ألوان محايدة
اللون الأبيض المصفر، أو الرمادي الفاتح جدًا، أو الأزرق الأسود تقريبًا، أو الرمادي العميق هو هيكل الخلفيات والنصوص. أنها تشغل غالبية الصفحة وتعطي مساحة للمرئيات المنتجة.
اللون الرئيسي
فهو يربط الشعار وبعض العناوين والعناصر الرسومية والمناطق القوية. يجب أن يظل من الممكن التعرف عليه دون غزو المتجر بأكمله.
لون مميز
احجزه للحصول على أزرار مهمة أو شارات مفيدة أو معلومات ذات أولوية. ندرته تمنحه تأثيرًا أكبر من تشبعه.
الألوان الوظيفية
يجب أن يظل النجاح أو الخطأ أو التنبيه أو الكسر أو التحقق من الصحة مفهومًا. أضف دائمًا نصًا أو رمزًا: اللون وحده لا يكفي.
طريقة بسيطة من ست خطوات
لا تقرر من الشعار وحده. يمكن أن يصبح اللون الأنيق الموجود على بطاقة العمل متعبًا عندما يغطي ملء الشاشة. اختبر اللوحة بالعناوين والصور والأسعار والاختلافات والأزرار الحقيقية.
ثلاثة أمثلة على اللوحات المتوازنة
هذه الأمثلة بمثابة نقطة انطلاق. يعتمد المزيج الصحيح على المنتجات والتصوير الفوتوغرافي وتحديد المواقع والألوان المرتبطة بالفعل بالعلامة التجارية.
قسط الرصين
أزرق منتصف الليل وخلفية فاتحة جدًا ولمسة ذهبية غير لامعة. مناسب للعرض التقديمي الراقي إذا ظل الذهب مزخرفًا أو تلقى نصًا داكنًا بدرجة كافية.
طبيعي دافئ
الأخضر الداكن والعاج والطين. تعمل هذه اللوحة بشكل جيد مع المواد الطبيعية، بشرط الحفاظ على سهولة قراءة النصوص الصغيرة.
ديناميكي حديث
الأزرق الداكن والأزرق الساطع والبرتقالي. الأزرق ينظم الواجهة؛ يلفت اللون البرتقالي الانتباه إلى الإجراء المختار، دون الظهور على كل مكون.
افتتاحية حلوة
أنثراسايت أرجواني، أبيض وردي، وتوت مكتوم. تظل اللوحة الناعمة احترافية إذا حافظت النصوص والأزرار على اختلاف واضح في النصوع.
التباين: القاعدة التي تأتي قبل الجماليات
بالنسبة للنص اليومي، اهدف إلى الحصول على نسبة تباين تبلغ 4.5:1 على الأقل. بالنسبة للنص الكبير حقًا، الحد الأدنى هو 3:1. يجب أيضًا أن تظل الرموز والحدود والمعلومات المرئية الضرورية قابلة للتمييز. تأتي هذه العتبات من توصيات WCAG الصادرة عن W3C.
| عنصر | يوصى بالتحكم | خطأ متكرر |
|---|---|---|
| نص مشترك | تباين لا يقل عن 4.5:1 مع القاع | رمادي فاتح جدًا على خلفية بيضاء |
| الزر الرئيسي | نص قابل للقراءة أو مخطط تفصيلي أو شكل يمكن التعرف عليه | نص أبيض على لون ساطع خفيف جدًا |
| الارتباط في فقرة | تباين اللون والتسطير أو أي دليل آخر | الفرق لا يمكن إدراكه إلا حسب اللون |
| رسالة خطأ | اللون والأيقونة والنص الصريح | الحقل مميز فقط بحدود حمراء |
| حالة لوحة المفاتيح | محيط التركيز المرئي على جميع الخلفيات | تمت إزالة التركيز لأسباب جمالية |
كيفية تطبيق لوحة الألوان في Shopify؟
في محرر سمات Shopify، تتضمن أنظمة الألوان الخلفيات والنصوص والروابط والحدود والأزرار. قم بتطبيق بعض المخططات المتسقة على الأقسام المتوافقة بدلاً من إنشاء مجموعة جديدة لكل كتلة.
الرسم البياني الرئيسي الواضح
خلفية بيضاء أو فاتحة جدًا، نص داكن، روابط مرئية. استخدمه لغالبية المجموعات وأوراق المنتجات والمحتوى.
نمط داكن
احتفظ بها في التذييل أو الملحق التحريري أو القسم القوي. فرض نصوص وخلايا واضحة للحفاظ على لونها الخاص.
مخطط اللكنة
استخدمه أحيانًا للإعلان أو الدعوة إلى اتخاذ إجراء. تحقق من جميع الحالات: عادي، تمت زيارته، تحوم فوقه، معطل والتركيز.
الخروج المستمر
استعادة العلامة التجارية دون فرض رسوم زائدة على الدفع. يظل التباين وفهم المجالات والاستمرارية مع المتجر من الأولويات.
لتوسيع هذا العمل، راجع أيضًا دليل زر الإجراء و دليل تجربة الهاتف المحمول.
الأخطاء التي تجعل المتجر غير متسق
ضرب اللهجات
ثلاثة ألوان زاهية تستخدم بنفس الشدة تتنافس مع بعضها البعض. ولم يعد بإمكان الزائر التمييز بين الزر والشارة والمعلومات الثانوية.
تلوين جميع الخلفيات
تفقد الصور المنتجة دقتها وتصبح الصفحة متعبة. توفر القاعدة المحايدة عمومًا إطارًا أكثر استقرارًا.
التغيير حسب الصفحات
يؤدي الزر الأزرق الموجود على الصفحة الرئيسية والأخضر الموجود على البطاقة والبرتقالي الموجود في السلة إلى إضعاف التعلم البصري للدورة.
ننسى الحالات التقنية
يجب اختبار الروابط التي تمت زيارتها والأزرار المعطلة والأخطاء والتركيز والمتغيرات المحددة، خاصة بعد إضافة تطبيق.
ما هي الخدمة التي يجب اختيارها حسب الحاجة؟
قائمة المراجعة قبل التحقق من صحة الألوان
- تتضمن اللوحة قاعدة ولونًا رئيسيًا ولهجة.
- يحتفظ كل لون بنفس الدور في جميع الصفحات.
- يحقق النص الحالي تباينًا كافيًا مع خلفيته.
- تظل الأزرار قابلة للقراءة في جميع حالاتها.
- لا يتم تحديد الروابط فقط من خلال لونها.
- تستخدم رسائل الخطأ أيضًا نصًا أو رمزًا.
- تظل الصور المنتجة مخلصة ومنفصلة جيدًا عن الخلفية.
- لا يفرض المخطط المظلم نصًا أبيض على الخرائط الضوئية.
- يتم التحكم في البليت بعرض 375 بكسل.
- يتم اختبار الترحيب والمجموعات والبطاقات والسلة والخروج.
الأسئلة الشائعة حول ألوان متجر Shopify
كم عدد الألوان التي يجب عليك استخدامها في متجر Shopify؟
غالبًا ما تكون هناك ثلاثة أدوار رئيسية كافية: قاعدة محايدة، ولون العلامة التجارية، واللكنة. يمكن استخدام ظلال إضافية للحدود والخلفيات الثانوية والحالات الوظيفية، دون أن تصبح ألوانًا مهيمنة جديدة.
ما هو اللون الذي يبيع أكثر؟
لا يوجد لون يضمن المزيد من المبيعات. إن وضوح العرض ورؤية الزر والتباين واتساق الرحلة أكثر أهمية من ما يسمى بلون التحويل العالمي.
هل يجب أن يكون زر "إضافة إلى عربة التسوق" باللون الأخضر؟
لا. قبل كل شيء، يجب أن تميز نفسها عن البيئة، وأن تظل متسقة مع العلامة التجارية وتقدم نصًا قابلاً للقراءة. يجب أن يحتفظ نفس لون الإجراء بنفس الدور على الصفحات الرئيسية.
هل يمكننا استخدام خلفية سوداء في المتجر بأكمله؟
نعم، إذا ظلت المنتجات والنصوص والحقول والحالات التفاعلية قابلة للقراءة تمامًا. يتطلب الكون المظلم المزيد من عناصر التحكم وقد يكون أقل ملاءمة لصور أو فئات معينة.
ما هي التناقضات التي ينبغي احترامها للنصوص؟
تهدف إلى ما لا يقل عن 4.5:1 للنص اليومي و3:1 للنص الكبير حقًا. يجب أيضًا أن تظل المعلومات الوظيفية والمؤشرات المرئية المهمة مميزة.
كيفية تغيير الألوان في Shopify؟
افتح محرر السمات، ثم إعدادات السمات وقسم الألوان. اعتمادًا على السمة، يمكنك إدارة أنظمة الألوان وتطبيقها على الأقسام المتوافقة.
هل يجب أن نستخدم ألوان الشعار بالضبط؟
لا. يوفر الشعار أساسًا، لكن الواجهة تحتاج إلى حالات محايدة وتباينية ووظيفية. يمكن الاحتفاظ ببعض ألوان الشعار كلكنات بدلاً من الخلفيات الرئيسية.
كيفية اختبار لوحة جديدة دون تعطيل المتجر؟
اعمل على نسخة من الموضوع، وقم بتطبيق اللوحة على عدد قليل من القوالب التمثيلية، ثم تحقق من الكمبيوتر والهاتف المحمول والتنوعات وعربة التسوق والنماذج والخروج قبل البدء في البث المباشر.
قم ببناء لوحة واضحة قبل تزيين المتجر
يمكن لـ SiteQuiVend تحليل اتساق الألوان وتباين النص والأزرار والتطبيق على نماذج Shopify الرئيسية. الهدف هو اختيار التدخل الضروري حقًا، بدءًا من التصحيح المستهدف وحتى الإصلاح الشامل.
