علم نفس الألوان لصفحات الهبوط عالية التحويل

اللون هو أول ما يعالجه الزائر - قبل أن يقرأ كلمة واحدة من النص. إنه يوصل الصناعة والمصداقية والنبرة في أجزاء من الثانية. كما أنه يؤثر بشكل مباشر على ما إذا كان النص قابلاً للقراءة، مما يؤثر على ما إذا كان الأشخاص يبقون على الصفحة.

يشرح هذا المنشور كيف يعمل نظام لوحة الألوان الخاص بـ PAGEnza ولماذا تؤدي القيود التي نفرضها على اختيار الألوان إلى نتائج أفضل من منح الذكاء الاصطناعي حرية غير محدودة.

مشكلة مطالبة الذكاء الاصطناعي بـ "اختيار ألوان لطيفة"

إذا طلبت من نموذج لغوي كبير اختيار ألوان لموقع ويب، فستحصل على رموز ست عشرية. أحيانًا تبدو جيدة معًا. وأحيانًا لا. لا يمتلك النموذج طريقة موثوقة لتقييم ما إذا كانت الألوان تعمل بالفعل - ما إذا كان النص قابلاً للقراءة، وما إذا كانت اللوحة تبدو مناسبة للصناعة، وما إذا كان المزيج متماسكًا بصريًا بدلاً من أن يكون متطابقًا عن طريق الخطأ.

رأينا هذه المشكلة بوضوح في الاختبارات المبكرة. أدت توليد الألوان غير المقيد إلى لوحات تتراوح من ممتازة إلى غير قابلة للاستخدام تمامًا. لم يكن هناك اتساق.

كان الحل هو إخراج اختيار الألوان من أيدي النموذج اللغوي الكبير تمامًا وبناء نظام خوارزمي يضمن خصائص محددة.

نظام الألوان الأربعة

يستخدم كل موقع PAGEnza أربعة ألوان مسماة بالضبط:

ink - لون النص الأساسي. داكن دائمًا (تباين إضاءة عالٍ ضد الخلفيات). يستخدم للعناوين والنصوص الأساسية وعناصر واجهة المستخدم التي تحتاج إلى قراءتها.

bg1 - الخلفية الأساسية. عادةً ما يكون اللون الأفتح في اللوحة. يستخدم لخلفية الصفحة الرئيسية والأقسام الفاتحة.

bg2 - الخلفية الثانوية. يخلق تنوعًا بصريًا بين الأقسام. يجب أن يكون له درجة حرارة لون مختلفة عن bg1 - إذا كان bg1 كريميًا دافئًا، فإن bg2 يكون رماديًا باردًا أو أبيض مائلًا للزرقة.

accent - لون العلامة التجارية. يستخدم للأزرار والروابط والإبرازات والعناصر الزخرفية. عادةً ما يكون اللون الأكثر تشبعًا في اللوحة.

هذا القيد - أربعة أدوار مسماة، وليس رموز ست عشرية اعتباطية - هو ما يجعل نظام اللوحة يعمل. لا يقرر الذكاء الاصطناعي أبدًا أي لون يذهب إلى أين؛ إنه يختار فقط اللوحة التي سيتم استخدامها من مجموعة مدققة مسبقًا.

كيفية تنظيم اللوحات

نحتفظ بأكثر من 20 مجموعة لوحات، كل منها مبني حول نموذج أولي:

• جريء: تباين عالٍ، لمسات مشبعة - التكنولوجيا، SaaS، التكنولوجيا المالية
• ناعم: باهت، غير مشبع - العافية، التدريب، الخدمات الإبداعية
• فاخر: خلفيات شبه سوداء مع لمسات معدنية أو مجوهرة - خدمات مميزة، تجارة تجزئة راقية
• ترابي: ألوان محايدة دافئة مع لمسات طينية أو مريمية - الطعام، الاستدامة، الحرف اليدوية
• داكن: لوحات وضع داكن أولاً - المطورون، الوكالات، الألعاب
• محايد: آمن، احترافي - القانون، التمويل، الرعاية الصحية

ضمن كل مجموعة، توجد لوحات متعددة بدرجات حرارة ألوان مختلفة، ومستويات تشبع، وظلال لمسات. يختار النظام مجموعة بناءً على الصناعة والنموذج الأولي، ثم يختار لوحة محددة داخل المجموعة.

تباين WCAG: القيد الذي يحسن التصميم

يتطلب WCAG AA أن يكون للنص العادي نسبة تباين لا تقل عن 4.5:1 مقابل خلفيته. يحتاج النص الكبير إلى 3:1. تحتاج العناصر التفاعلية إلى 3:1 مقابل الألوان المجاورة.

يتم التحقق من صحة كل لوحة في نظامنا مقابل هذه النسب قبل تضمينها. على وجه التحديد:

• يجب أن يحقق ink تباينًا ≥4.5:1 مقابل bg1 و bg2 وأي لون سطح يظهر عليه النص
• يجب أن يحقق accent تباينًا ≥3.0:1 مقابل bg1 و bg2 (للاستخدام كخلفيات للأزرار)
• يستخدم التحقق الرياضيات الفعلية للإضاءة - L = 0.2126R + 0.7152G + 0.0722B بعد تصحيح جاما - وليس تقريبًا

التأثير هو أن كل موقع تم إنشاؤه قابل للقراءة افتراضيًا. ولكن هناك فائدة ثانوية: التصميمات عالية التباين تحقق تحويلات أفضل. الزر المرئي بوضوح يحصل على نقرات أكثر من الزر الذي يندمج في الخلفية. يتضح أن متطلب إمكانية الوصول هو متطلب تحويل.

تباين درجة حرارة اللون بين الأقسام

تفصيل واحد يسهل إغفاله: يجب أن يكون لـ bg1 و bg2 درجات حرارة لون متباينة. إذا كانت كلتا الخلفيتين دافئتين، فإن الأقسام المتناوبة تبدو مملة - يبدو الموقع ككتلة مستمرة واحدة بدلاً من مناطق محتوى مميزة.

القاعدة في نظامنا: إذا كان bg1 له درجة حرارة لون دافئة (اتجاه برتقالي/أصفر، أو محايد دافئ مثل الكريم)، فيجب أن يكون bg2 باردًا (اتجاه أزرق/رمادي). إذا كان bg1 أبيض باردًا، فقد يكون bg2 أبيض مائلًا للدفء.

هذا هو السبب في أن أقسامنا تبدو مميزة حتى بدون فواصل ثقيلة أو ظلال منسدلة - تحول درجة حرارة الخلفية وحده يخلق فاصلًا بصريًا واضحًا.

منطق الألوان الخاص بالصناعة

بعض اختيارات الألوان مشفرة بقوة حسب الصناعة. لدى الزوار توقعات مبنية على سنوات من التعرض لمواقع الويب في فئة معينة.

الرعاية الصحية والعافية: الأزرق والأخضر يشيران إلى الثقة والهدوء. الألوان الحمراء والبرتقالية المشبعة تبدو مقلقة في هذا السياق.

القانون والتمويل: ألوان كحلية داكنة، فحم، رمادي محافظ. اللمسات الزاهية مقبولة ولكن يجب أن تكون مقيدة. اللوحات المرحة تقوض المصداقية.

الطعام والضيافة: الألوان الدافئة - الطينية، الكهرمانية، الكريمية - تنشط ارتباطات الشهية. اللوحات السريرية الباردة تبدو خاطئة.

التكنولوجيا و SaaS: لا يزال الأزرق هو السائد، ولكن هناك نطاق أوسع. الأزرق الكهربائي، النيلي، وحتى البنفسجي تبدو متقدمة تقنيًا. الخلفيات السوداء النقية مناسبة لأدوات المطورين.

الرفاهية والتميز: المفتاح هو الاعتدال. نطاق ألوان محدود، خلفيات شبه سوداء أو كحلية داكنة كألوان أساسية، لمسات ذهبية أو بلاتينية. تباين عالٍ، لا تشبع أبدًا.

اختيار النموذج الأولي في "تفويض التصميم" يربط الصناعة + نوع العمل بمجموعة اللوحات المناسبة، لذلك لا ينتهي مدرب العافية بنفس اللوحة التي تستخدمها شركة محاماة، حتى لو تم وصف كليهما بأنهما "احترافيان".

ما يمكن للعملاء تغييره

بعد الإنشاء، يمكن للعملاء تعديل موقعهم في Gutenberg. يعرض منتقي الألوان في المحرر الألوان الأربعة للعلامة التجارية فقط - لا شيء آخر. هذا يعني:

• يمكنهم تغيير خلفيات الأقسام بين bg1 و bg2 والأسطح
• يمكنهم تغيير ألوان الأزرار والروابط بين accent و ink
• لا يمكنهم إدخال لون خامس اعتباطي يكسر اللوحة.

القيود متعمدة. الطريقة الأكثر شيوعًا التي يكسر بها العملاء موقعًا مصممًا بشكل احترافي هي اختيار الألوان من عجلة الألوان الكاملة. جعل اللوحة مقصورة على أربعة ألوان مسماة يجعل ذلك مستحيلاً دون الدخول إلى الكود.