لغة واجهة واحدة ينطق بها منتجك كله

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

الرموز هي الجزء الذي تتخطاه أغلب الفرق ثم تندم. حين يكون لون العلامة رمزاً مسمى لا رقماً ملصوقاً في أربعين موضعاً، يصبح تغيير الهوية أو إضافة سمة داكنة مجرد تعديل في الإعدادات. نعرّف الرموز في متغيرات Figma ونصدّر القيم نفسها إلى الكود، فيقرأ التصميم والتطوير من مصدر واحد. ثم تُبنى المكونات في تقنية الواجهة لديك، سواء React أو Vue أو Flutter، وتُوثَّق في كتالوج يمكن تصفحه.

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

الأرقام قرار منتج. يفضل كثير من المستخدمين السعوديين للأرقام الغربية في المال والتجارة، بينما تفضل بعض السياقات الحكومية والصحية الأرقام الهندية العربية. نجعل هذا إعداداً في النظام لا اختياراً منفرداً لكل شاشة. وإرشادات W3C للتدويل حول اتجاه النص وقواعد خاصية dir هي مرجعنا لسلوك النص ثنائي الاتجاه في المتصفح.

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

التسليم مكتبة برمجية وليس ملف PDF. يثبّت المطورون الحزمة ويستوردون المكونات ويرون أمثلة الاستخدام بجانب التصميم. وأول مكتبة تغطي نحو ثلاثين مكوناً أساسياً تستغرق عادة أربعة إلى ثمانية أسابيع بحسب عدد واجهات المنتج وهل توجد هوية جاهزة. وإن كانت هويتك ما زالت قيد التحديد فنبدأ بالرموز وننمّي النظام مع نمو المنتج، بدل تصميم كل مكون مسبقاً.