نظام تصميم جوف دوت يو كيه: الألوان
صفحة الألوان في نظام التصميم الذي تنشره دائرة الخدمات الرقمية الحكومية في المملكة المتحدة معيارًا عامًا لبناء الخدمات الحكومية على الإنترنت، وهي متاحة بترخيص الحكومة المفتوح.
ما هو
صفحة الألوان في نظام التصميم الذي تنشره دائرة الخدمات الرقمية الحكومية في المملكة المتحدة معيارًا عامًا لبناء الخدمات الحكومية على الإنترنت، وهي متاحة بترخيص الحكومة المفتوح. تبدأ الصفحة بقاعدتين: استعمل لوحة ألوان الموقع الحكومي دائمًا، واجعل تباين النصوص والعناصر التفاعلية يحقق المستوى AA في إرشادات إتاحة محتوى الويب بإصدارها 2.2. ثم تعرض الألوان الوظيفية حسب مهمة كل لون، مع رمزه السداسي وملاحظة عن استعماله: النص #0b0c0c، والرابط #1a65a6، والرابط الذي زاره المستخدم #54319f، والخطأ #ca3535، والنجاح #0f7a52، ولون العلامة #1d70b8، ولون أصفر #ffdd00 مخصص لإظهار العنصر الذي يقف عليه مؤشر لوحة المفاتيح. وتطلب من المطورين استدعاء هذه الألوان عبر دالة برمجية بدل نسخ الرموز، لتصل تحديثات اللوحة إلى كل خدمة تلقائيًا. وتضم لوحة الويب عشر مجموعات لونية إضافة إلى الأبيض، ولمعظمها درجات أفتح وأغمق، وتُستعمل للرسوم والمكونات الخاصة، أما ألوان الوزارات والجهات فمحفوظة في ملف مستقل.
لماذا نقرؤه اليوم
هذه الصفحة نموذج لتحديد الألوان حسب الوظيفة لا حسب المزاج. فلكل لون مهمة واحدة، والصفحة تذكر ما يُستعمل له، وتذكر أحيانًا ما لا يُستعمل له؛ فالأصفر مثلًا لا يظهر إلا لتحديد العنصر النشط بلوحة المفاتيح. وتسمية الألوان بوظائفها وربط الشيفرة بهذه الأسماء يعني أن أي تعديل في اللوحة يصل إلى كل الشاشات دون بحث في الملفات، وهذا هو منطق رموز التصميم التي تعتمدها معظم فرق المنتجات اليوم. وقاعدة التباين تستند إلى معيار خارجي هو إرشادات الإتاحة، لا إلى الذوق، وفائدتها تتجاوز ذوي الإعاقة إلى المبيعات، لأن النص الباهت يصعب على الجميع قراءته على الهاتف في ضوء قوي. وما لا تفعله الصفحة أنها لا تقول شيئًا عن العاطفة أو الإقناع أو التميز عن المنافسين، فهي كتاب قواعد للوضوح، وأي علامة تجارية تحتاج فوقها طبقة أكثر مرونة لحملاتها. والصفحة بلا تاريخ وتتغير مع الوقت، فراجع النسخة الحية قبل نقل أي قيمة. طريقة الاستخدام: أعد كتابة دليل ألوان علامتك في جدول أدوار، مثل النص والرابط والخطأ والنجاح والتركيز ولون العلامة، مع فحص التباين لكل زوج من لون النص ولون الخلفية.
مقاطع تستحق الحفظ
You must make sure that the contrast ratio of text and interactive elements in your service meets Web Content Accessibility Guidelines (WCAG 2.2)التباين بين النص وخلفيته ليس اختيارًا جماليًا، بل شرط يُقاس بمعيار دولي معروف للإتاحة.
These help apply colours across the Design System in a way that makes interactions predictable and consistent to users.حين يكون لكل لون معنى ثابت، يتعلم المستخدم هذا المعنى مرة واحدة ويتوقعه في كل صفحة.
Do not copy the specific hexadecimal (hex) colour values.اربط التصميم باسم وظيفة اللون لا برمزه، حتى يصل أي تحديث في اللوحة إلى كل مكان دفعة واحدة.
Only use this colour to indicate which element is focused on.اللون المخصص لوظيفة واحدة يفقد قيمته إذا استُعمل للزينة، فاحجزه لتلك الوظيفة وحدها.
أفضل ما يعلّمه
اقرأ الأصل design-system.service.gov.uk
إن كانت هذه المكتبة مفيدة، اترك بريدك
نرسل الأنماط والإعلانات والملاحظات الجديدة حين نضيفها. الاسم والهاتف اختياريان.
أنت على القائمة
نكتب إليك حين نضيف مادة جديدة إلى المكتبة.