الانتقال إلى المحتوى

التصميم والمنتج

أنظمة التصميم

الرموز التصميمية والمكونات ومكتبات الأنماط

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

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

ما يشمله العمل

ما نسلّمه

  • رموز التصميم

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

  • مكتبة مكوّنات

    مكوّنات حقيقية عاملة وسهلة الوصول في إطار عملك الأمامي، بكل حالاتها المعرَّفة: الافتراضية والتحويم والتركيز والنشطة والمعطّلة والتحميل والخطأ والفارغة.

  • مكتبات مطابقة في أداة التصميم

    بحيث يكون ما يجمّعه المصمم متاحاً عند المطور أصلاً، ولا يستطيع تصميم مبدئي أن يخترع مكوّناً غير موجود.

  • توثيق الأنماط

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

  • إرشادات المحتوى والنبرة

    كيف تُسمَّى الأزرار، وكيف تُصاغ الأخطاء، وكيف تُنسَّق التواريخ والأرقام. فالصياغة غير المتسقة تجعل المنتج يبدو غير مكتمل بقدر ما تفعل المسافات غير المتسقة.

  • وصولية مدمجة في كل مكوّن

    سلوك لوحة المفاتيح وإدارة التركيز ودلالات ARIA والتباين، تُفحَص مرة واحدة داخل المكوّن بدل أن تكون مسؤولية كل شخص إلى الأبد.

  • دعم الاتجاهين

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

  • السمات

    الفاتحة والداكنة، أو علامات متعددة، حيث تحتاجها.

  • قواعد المشاركة والحَوكمة

    من يستطيع إضافة مكوّن، وكيف تُراجَع التغييرات، وكيف يُصدَر إصدار جديد، لأن نظاماً بلا مالك يتحلل إلى مجلد ملفات قديمة.

كيف نبني نظاماً

  1. التدقيق. جرد لما هو قائم في منتجاتك: كل لون مستخدم فعلاً، وكل صيغة زر، وكل حقل نموذج. وهذه عادةً اللحظة التي تصبح فيها المشكلة غير قابلة للنكران.
  2. الأساسات. الرموز والخطوط يُتفق عليها أولاً، لأن كل ما عداها يتفرع منها.
  3. المكوّنات الجوهرية. العشرون تقريباً التي تشكّل أغلب أي واجهة، تُبنى وتُوثَّق قبل أي شيء استثنائي.
  4. التبنّي على شاشة حقيقية. يُثبت النظام نفسه بإعادة بناء جزء حقيقي من منتجك، وهذا ما يُظهر الفراغات التي لا تظهرها أي مواصفة.
  5. الانتشار. ترحيل مخطَّط صفحة بصفحة لا إعادة كتابة شاملة، مع تعايش القديم والجديد أثناء الانتقال.
  6. التسليم. توثيق وإرشادات مشاركة وتدريب للمصممين والمطورين الذين سيملكونه.

الملاحظة الصادقة

نظام التصميم منتج لا وثيقة. يحتاج مالكاً وعملية مراجعة وقدراً بسيطاً من الاهتمام المستمر، وإن لم تستطع مؤسستك توفير ذلك فمقاربة أخف ستخدمك أفضل من نظام مُفصَّل يتجمد بعد ستة أشهر. ولمنتج واحد صغير، تكون مجموعة رموز موثقة جيداً واثنا عشر مكوّناً هي الحجم الصحيح غالباً — وسنقول ذلك بدل أن نبيعك برنامجاً لا تستطيع إدامته.

عن العمل مع Codigoo

رفضوا الإطلاق المفاجئ دفعة واحدة، وقد أزعجني ذلك في حينه. لكننا واصلنا البيع خلال فترة الترحيل كاملة دون ساعة توقّف واحدة، فكانوا على حق.
Faisal Al Mazrouei, مدير العمليات · Nakheel Home

أسئلة تتكرر علينا

كيف يختلف هذا عن دليل الهوية؟

دليل الهوية يصف كيف ينبغي أن تبدو العلامة؛ أما نظام التصميم فيحتوي الكود العامل ومكوّنات أداة التصميم التي تحقق ذلك. الأول ملف يُستشهد به في الاجتماعات، والثاني هو ما يُنشر فعلاً. وهما متكاملان، ونبني الثاني ليعبّر عن الأول.

هل يعمل عبر موقعنا وتطبيقنا وأدواتنا الداخلية؟

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

بأي إطار عمل تبنونه؟

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

هل سيبطّئ هذا فرقنا؟

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

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

حدّثنا عن أنظمة التصميم

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