بنية رمز التصميم الدلالي: الرموز العالمية والدلالية والمكونة
كيفية هيكلة رموز التصميم في ثلاثة مستويات، ودعم السمات والعلامات التجارية المتعددة، وشحنها إلى الويب، وiOS وAndroid باستخدام تنسيق W3C DTCG.
الوجبات الجاهزة الأساسية
تستخدم معظم أنظمة التصميم الناضجة ثلاثة مستويات من الرموز المميزة: العالمية (القيم الأولية مثل blue-600)، والدلالية (الغرض، مثل color.action.primary)، والمكون (استخدامات محددة، مثل Button.background). تشير المكونات إلى الرموز المميزة الدلالية، وتشير الرموز المميزة الدلالية إلى الرموز العالمية، وتتبادل السمات أو العلامات التجارية الطبقة الدلالية فقط. قم بتخزينها بتنسيق W3C DTCG وقم بإنشاء رمز النظام الأساسي باستخدام أداة البناء.
الطبقات الثلاثة
يصف Material Design ثلاث فئات من الرموز المميزة: المرجع والنظام والمكون. تسميها العديد من الفرق عالمية ودلالية ومكونة. تختلف الأسماء، ولكن الفكرة واحدة: فصل القيم الأولية عن القرارات المتعلقة بكيفية استخدامها.
- عالمي (مرجع): كل قيمة أولية في النظام، مثل blue-600 وspace-4 وfont-size-16 وspring-gentle.
- الدلالي (النظام): الغرض من القيمة، مثل color.text.primary، color.action.primary،motion.enter.
- المكون: كيفية استخدام أحد المكونات للنظام، مثل Button.background أو Diagram.motion.open.
لماذا الرموز الدلالية مهمة
إذا كان الزر يستخدم اللون الأزرق 600 مباشرة، فإن كل تغيير في السمة يعني تحرير كل مكون. إذا كان يستخدم color.action.primary أو الوضع المظلم أو التباين العالي أو علامة تجارية جديدة، فقم فقط بتغيير اللون الذي يشير إليه color.action.primary. تشير المواد إلى أن الرموز المميزة تجعل من الممكن تطبيق لوحة عالية التباين أو تغيير مقياس الكتابة على مستوى النظام بهذه الطريقة تمامًا.
المواضيع والعلامات التجارية المتعددة
بالنسبة للمنتجات ذات العلامات التجارية المتعددة أو المنتجات ذات العلامات البيضاء، احتفظ بمجموعة واحدة من الرموز الدلالية والمكونة ولوحة عامة واحدة لكل علامة تجارية. كل موضوع عبارة عن تعيين من الرموز الدلالية إلى القيم العالمية. أضاف الإصدار الثابت الأول من مواصفات W3C Design Tokens (2025.10)، الذي تم إصداره في أكتوبر 2025، السمات ودعم العلامات التجارية المتعددة، ومساحات الألوان الحديثة مثل Display P3 وOKLCH، والأسماء المستعارة والمراجع على مستوى المكونات.
تنتمي رموز الحركة هنا أيضًا
تتبع الفترات والمنحنيات الميسرة والينابيع نفس المستويات. قد يكون الرمز العالمي لطيفًا مع صلابته وتخميده؛ تشير الحركة الرمزية الدلالية إلى ذلك؛ تشير ورقة الرمز المميز للمكون.motion.open إلىmotion.enter. أضف سمة الحركة المنخفضة التي تعيد تعيين الرموز المميزة للحركة إلى التلاشي القصير.
رموز الشحن إلى كل منصة
احتفظ بالرموز المميزة في مستودع باسم DTCG JSON، المصدر الوحيد للحقيقة. تقوم أداة البناء مثل Style Dictionary بتحويلها إلى متغيرات CSS أو Swift أو Kotlin أو Flutter أو تنسيقات أخرى. يمكن لأدوات التصميم التي تقرأ نفس التنسيق أن تظل متزامنة، ويمكن لأدوات ترميز الذكاء الاصطناعي قراءة JSON مباشرة.
- مصدر الحقيقة: DTCG JSON في Git، تمت مراجعته مثل الكود
- البناء: التحول إلى كل منصة عند كل تغيير
- مزامنة أداة التصميم: استيراد أو مكون إضافي، ولا يتم نسخ القيم يدويًا أبدًا
- الفحص: منع القيم الخام في المكونات
مفتاح Principle للتذكر
- ثلاثة مستويات: العالمية (القيم)، الدلالية (الغرض)، المكون (الاستخدام)
- تشير المكونات إلى الرموز الدلالية، وليس القيم الأولية أبدًا
- تعيد السمات والعلامات التجارية رسم خريطة للطبقة الدلالية
- وصل تنسيق W3C DTCG إلى أول إصدار ثابت له (2025.10) في أكتوبر 2025
- قم بتضمين رموز الحركة وموضوع الحركة المنخفضة
الأسئلة المتداولة
المصادر
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — مجموعة مجتمع W3C Design Tokens
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com