{"id":"l-ds-1-3","courseId":"design-systems","lang":"ar","kind":"lesson","summary":"اكتب مبادئ تصميم تحسم مفاضلات حقيقية، واختر بين النماذج المنفرد والمركزي والفيدرالي والهجين لإدارة فريق نظام التصميم.","html":"<p>كل فريق نظام تصميم يواجه في النهاية النقاش نفسه في جلسة مراجعة. مصمّم منتج يريد زرًا رماديًا فاتحًا «هادئًا» لواجهة الموقع التسويقي الرئيسية، والزر يفشل في اختبار التباين. يقول أحدهم: «لكنه أجمل». ويقول آخر: «لكن إمكانية الوصول». وبعد أربعين دقيقة لم يغيّر أحد رأيه. المبادئ موجودة لتُنهي هذا الاجتماع في دقيقتين، ونماذج الفرق موجودة ليكون هناك مَن يملك صلاحية تطبيقها.</p>\n<h2 id=\"sec-1\" tabindex=\"-1\">مبادئ تحسم القرارات</h2>\n<p>أغلب مبادئ التصميم المنشورة شعارات: <em>بسيط</em>، <em>متّسق</em>، <em>إنساني</em>، <em>مُبهج</em>. جرّب هذا الاختبار على أي مبدأ: هل يمكن لفريق عاقل أن يختار العكس؟ لا أحد يدافع عن برمجيات معقّدة أو غير إنسانية، لذا هذه الكلمات لا تحسم شيئًا أبدًا.</p>\n<p>المبدأ المفيد يسمّي مفاضلة وينحاز إلى طرف. هذه المبادئ الأربعة التي يعتمدها Northwind UI:</p>\n<ol>\n<li><strong>إمكانية الوصول قبل الجمال.</strong> لا يُطلَق أي مكوّن دون مستوى WCAG 2.2 AA. وإن لم يستطع variant أن يحقّقه، نحذف الـ variant.</li>\n<li><strong>هادئ في التطبيق، معبّر في الموقع.</strong> تطبيق الـ dispatch يفضّل الكثافة وقابلية التوقّع؛ أما الموقع التسويقي فيمكنه استخدام خطوط أجرأ وحركة أكثر، عبر الـ tokens لا عبر CSS مكتوب لمرة واحدة.</li>\n<li><strong>افتراضات حاسمة، ومخارج موثّقة.</strong> المكوّنات تفعل الصواب دون أي props. وحين يحتاج فريق إلى الخروج عن المألوف، هناك طريقة مدعومة ومكتوبة.</li>\n<li><strong>مكوّنات أقل، لكن أفضل.</strong> نفضّل توسيع مكوّن موجود على إضافة نسخة شبه مكرّرة منه.</li>\n</ol>\n<p>كل واحد من هذه المبادئ سيخسر أمام نقيضه في شركة أخرى. فاستوديو ألعاب قد يتبنّى، عن حقّ، مبدأ «معبّر في كل مكان». وهكذا تعرف أن المبدأ يحمل معلومة فعلية.</p>\n<aside class=\"callout callout-tip\" role=\"note\"><p class=\"callout-title\"><svg class=\"icon \" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"/><path d=\"M9 18h6\"/><path d=\"M10 22h4\"/></svg><span><span class=\"callout-kind\">نصيحة</span><span class=\"callout-sep\" aria-hidden=\"true\"> · </span>اختبر المبدأ على خلاف سابق</span></p>\n<p>خذ ثلاثة خلافات حقيقية من الربع الماضي، واسأل هل كان كل مبدأ سيحسمها. إن لم يحسم المبدأ أيًّا منها، فأعد كتابته أو احذفه. أربعة مبادئ تعمل أفضل من عشرة تزيّن شريحة عرض.</p>\n</aside>\n<p>يجب أيضًا أن تعيش المبادئ حيث تُتّخذ القرارات: في قالب اقتراح المكوّنات، وفي قائمة فحص المراجعة، وفي أعلى موقع التوثيق. أما المبدأ الذي لا يظهر إلا في عرض الإطلاق فيختفي خلال شهر.</p>\n<h2 id=\"sec-2\" tabindex=\"-1\">مَن يدير النظام: أربعة نماذج للفرق</h2>\n<p>تحتاج المبادئ إلى أشخاص لديهم الوقت والصلاحية لتطبيقها. وصف ناثان كيرتس (Nathan Curtis) الأشكال الثلاثة الكلاسيكية عام 2015، وما زالت تصف أغلب المؤسسات:</p>\n<figure class=\"diagram\"><svg class=\"diagram-svg\" focusable=\"false\" viewBox=\"0 0 680 250\" role=\"img\" aria-labelledby=\"l-ds-1-3-t1\"><defs><marker id=\"arrow-l-ds-1-3-1\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"7\" markerHeight=\"7\" orient=\"auto-start-reverse\"><path d=\"M0 0 L10 5 L0 10 z\" class=\"d-arrowhead\"/></marker></defs>\n  <title id=\"l-ds-1-3-t1\">ثلاثة رسوم. المنفرد: فريق منتج واحد يملك النظام والبقية ينسخونه. المركزي: فريق نظام متفرّغ يخدم عدّة فرق منتجات. الفيدرالي: عدّة فرق منتجات تساهم كلٌّ منها في نظام مشترك.</title>\n  <text class=\"d-label-strong\" x=\"110\" y=\"28\" text-anchor=\"middle\">منفرد</text>\n  <rect class=\"d-box-primary\" x=\"50\" y=\"50\" width=\"120\" height=\"44\" rx=\"10\"/>\n  <text class=\"d-label\" x=\"110\" y=\"77\" text-anchor=\"middle\">الفريق A + النظام</text>\n  <rect class=\"d-box\" x=\"20\" y=\"170\" width=\"80\" height=\"40\" rx=\"10\"/>\n  <text class=\"d-label-muted\" x=\"60\" y=\"195\" text-anchor=\"middle\">الفريق B</text>\n  <rect class=\"d-box\" x=\"120\" y=\"170\" width=\"80\" height=\"40\" rx=\"10\"/>\n  <text class=\"d-label-muted\" x=\"160\" y=\"195\" text-anchor=\"middle\">الفريق C</text>\n  <path class=\"d-dashed\" d=\"M90 94 L60 170\"/>\n  <path class=\"d-dashed\" d=\"M130 94 L160 170\"/>\n  <text class=\"d-label-strong\" x=\"340\" y=\"28\" text-anchor=\"middle\">مركزي</text>\n  <rect class=\"d-box-primary\" x=\"280\" y=\"50\" width=\"120\" height=\"44\" rx=\"10\"/>\n  <text class=\"d-label\" x=\"340\" y=\"77\" text-anchor=\"middle\">فريق النظام</text>\n  <rect class=\"d-box\" x=\"240\" y=\"170\" width=\"60\" height=\"40\" rx=\"10\"/>\n  <text class=\"d-label\" x=\"270\" y=\"195\" text-anchor=\"middle\">A</text>\n  <rect class=\"d-box\" x=\"310\" y=\"170\" width=\"60\" height=\"40\" rx=\"10\"/>\n  <text class=\"d-label\" x=\"340\" y=\"195\" text-anchor=\"middle\">B</text>\n  <rect class=\"d-box\" x=\"380\" y=\"170\" width=\"60\" height=\"40\" rx=\"10\"/>\n  <text class=\"d-label\" x=\"410\" y=\"195\" text-anchor=\"middle\">C</text>\n  <path class=\"d-arrow\" d=\"M320 94 L275 166\" marker-end=\"url(#arrow-l-ds-1-3-1)\"/>\n  <path class=\"d-arrow\" d=\"M340 94 L340 166\" marker-end=\"url(#arrow-l-ds-1-3-1)\"/>\n  <path class=\"d-arrow\" d=\"M360 94 L405 166\" marker-end=\"url(#arrow-l-ds-1-3-1)\"/>\n  <text class=\"d-label-strong\" x=\"570\" y=\"28\" text-anchor=\"middle\">فيدرالي</text>\n  <rect class=\"d-box-accent\" x=\"510\" y=\"110\" width=\"120\" height=\"44\" rx=\"10\"/>\n  <text class=\"d-label\" x=\"570\" y=\"137\" text-anchor=\"middle\">نظام مشترك</text>\n  <rect class=\"d-box\" x=\"480\" y=\"40\" width=\"60\" height=\"40\" rx=\"10\"/>\n  <text class=\"d-label\" x=\"510\" y=\"65\" text-anchor=\"middle\">A</text>\n  <rect class=\"d-box\" x=\"600\" y=\"40\" width=\"60\" height=\"40\" rx=\"10\"/>\n  <text class=\"d-label\" x=\"630\" y=\"65\" text-anchor=\"middle\">B</text>\n  <rect class=\"d-box\" x=\"540\" y=\"190\" width=\"60\" height=\"40\" rx=\"10\"/>\n  <text class=\"d-label\" x=\"570\" y=\"215\" text-anchor=\"middle\">C</text>\n  <path class=\"d-arrow\" d=\"M520 80 L545 106\" marker-end=\"url(#arrow-l-ds-1-3-1)\"/>\n  <path class=\"d-arrow\" d=\"M620 80 L595 106\" marker-end=\"url(#arrow-l-ds-1-3-1)\"/>\n  <path class=\"d-arrow\" d=\"M570 190 L570 158\" marker-end=\"url(#arrow-l-ds-1-3-1)\"/>\n</svg><figcaption>فرق أنظمة التصميم بنماذجها المنفرد والمركزي والفيدرالي</figcaption></figure>\n<ul>\n<li><strong>المنفرد (solitary).</strong> فريق منتج واحد يبني نظامًا لنفسه، والفرق الأخرى تنسخه. رخيص وسريع، ويعكس احتياجات فريق واحد. ينجح ما دام هناك فريق واحد فقط يهمّ.</li>\n<li><strong>المركزي (centralized).</strong> فريق متفرّغ يبني النظام ويصونه للجميع. القرارات سريعة والجودة عالية. والخطر هو البُعد: الفريق المركزي الذي لا يطلق منتجًا قد يبني مكوّنات لم يطلبها أحد، ويصبح الـ backlog الخاص به عنق الزجاجة للجميع.</li>\n<li><strong>الفيدرالي (federated).</strong> مصمّمون ومهندسون من فرق المنتجات يساهمون في نظام مشترك بجزء من وقتهم. يبقى النظام على صلة وثيقة بالاحتياجات الحقيقية. والخطر أن عمل النظام يخسر دائمًا أمام مواعيد تسليم المنتجات.</li>\n<li><strong>الهجين (hybrid).</strong> نواة صغيرة متفرّغة تملك الجودة والإصدارات والـ tokens والاتجاه؛ وفرق المنتجات تساهم بمكوّنات وإصلاحات عبر عملية محدّدة. وإلى هنا تنتهي أغلب الأنظمة التي تعيش طويلًا.</li>\n</ul>\n<aside class=\"callout callout-mistake\" role=\"note\"><p class=\"callout-title\"><svg class=\"icon \" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></svg><span><span class=\"callout-kind\">خطأ شائع</span><span class=\"callout-sep\" aria-hidden=\"true\"> · </span>«الجميع يملكه»</span></p>\n<p>انتهى نظام Northwind لعام 2021 بنموذج فيدرالي بلا نواة: قناة على Slack ونوايا طيبة. كانت الـ pull requests تنتظر المراجعة أسابيع، لأن المراجعة لم تكن وظيفة أحد. إن اخترت النموذج الفيدرالي فموّل النواة أولًا. شخصان متفرّغان يملكان المراجعات والإصدارات هما الحدّ الأدنى.</p>\n</aside>\n<h2 id=\"sec-3\" tabindex=\"-1\">ماذا اختارت Northwind</h2>\n<p>في المحاولة الثانية بدأنا بالنموذج المركزي: مصمّمان وثلاثة مهندسين، ومعهم مدير منتج مشترك مع فريق آخر. كان المركزي هو الخيار الصحيح أثناء بناء الأساسات، لأن الـ tokens والمكوّنات الأساسية تحتاج إلى قلّة من الناس يتّخذون قرارات كثيرة متّسقة بسرعة.</p>\n<p>وحين استقرّت Button وحقول الإدخال وDialog وخط إنتاج الـ tokens، فتحنا باب المساهمات وانتقلنا إلى النموذج الهجين. اليوم تبني فرق المنتجات نحو ثلث المكوّنات الجديدة، والنواة تراجعها وتوثّقها وتطلقها. يشرح القسم 5 كيف تعمل عملية المساهمة هذه في الواقع.</p>\n<p>لاحظ أن نموذج الفريق يتغيّر مع عمر النظام. اسأل «ماذا يحتاج النظام هذا العام؟» بدل «أيّ نموذج هو الأفضل؟». ومع وجود المبادئ وفريق يملك النظام، أصبحت مستعدًا لأول قطعة معمارية حقيقية: الـ design tokens.</p>\n","toc":[{"id":"sec-1","text":"مبادئ تحسم القرارات","level":2},{"id":"sec-2","text":"مَن يدير النظام: أربعة نماذج للفرق","level":2},{"id":"sec-3","text":"ماذا اختارت Northwind","level":2}],"takeaways":["المبدأ المفيد ينحاز إلى طرف في مفاضلة حقيقية؛ فإن لم يكن أيّ فريق عاقل ليختار العكس، فهو شعار لا مبدأ.","تستحق المبادئ مكانها في جلسات المراجعة، حين تحسم الخلاف دون الحاجة إلى اجتماع.","الفريق المركزي يمنح جودة وسرعة في اتخاذ القرار، لكنه قد يتحوّل إلى عنق زجاجة بعيد عن واقع المنتجات.","النموذج الفيدرالي يوزّع الملكية على فرق المنتجات، لكنه يحتاج إلى نواة صغيرة تحفظ تماسكه.","أغلب الأنظمة التي تعيش طويلًا تنتهي هجينة؛ نواة صغيرة متفرّغة ومعها مساهمون من فرق المنتجات."],"further":[{"title":"Design principles (U.S. Web Design System)","url":"https://designsystem.digital.gov/design-principles/"},{"title":"Design Systems 101 (Nielsen Norman Group)","url":"https://www.nngroup.com/articles/design-systems-101/"}],"quiz":[{"q":"<p>أيّ مما يلي أقوى مبدأ تصميم لـ Northwind UI؟</p>","options":[{"text":"مكوّناتنا بسيطة وسهلة الفهم.","why":"لن يدافع أي فريق عن مكوّنات معقّدة ومربكة، لذا لن يحسم هذا المبدأ أي قرار."},{"text":"الاتّساق في كل المنتجات.","why":"يوافق عليه الجميع نظريًا، لكنه لا يرشدك حين يتعارض الاتّساق مع حاجة حقيقية لمنتج ما."},{"text":"إمكانية الوصول قبل الجمال؛ نحذف الـ variant بدل أن نطلقه دون مستوى WCAG 2.2 AA.","why":"صحيح. يسمّي مفاضلة، وينحاز إلى طرف، ويخبرك بما تفعل حين يتصادم الهدفان."},{"text":"نصمّم بتعاطف مع مستخدمينا.","why":"قيمة تستحق التمسّك بها، لكنها لا تساعدك على الاختيار بين خيارين ملموسين في جلسة مراجعة."}],"answer":2},{"q":"<p>شركة من 12 شخصًا فيها فريق منتج واحد وتريد نظام تصميم. أيّ نموذج فريق يناسبها الآن؟</p>","options":[{"text":"المنفرد، حيث يبني فريق المنتج النظام ضمن عمله.","why":"صحيح. مع فريق واحد لا يوجد بعدُ مَن تنسّق معه؛ وفريق نظام منفصل لن يجد عملاء آخرين."},{"text":"المركزي، بفريق نظام متفرّغ من ثلاثة أشخاص.","why":"فريق متفرّغ يخدم فريق منتج واحدًا عبء إضافي في الغالب بهذا الحجم."},{"text":"الفيدرالي، بمساهمين من فرق كثيرة.","why":"النموذج الفيدرالي يحتاج إلى عدّة فرق منتجات تتشارك؛ ومع فريق واحد يصبح هو نفسه النموذج المنفرد."}],"answer":0},{"q":"<p>جرّبت Northwind نموذجًا فيدراليًا كاملًا بلا أي شخص متفرّغ. ما الفشل الأرجح؟</p>","options":[{"text":"تصبح المكوّنات متّسقة أكثر من اللازم وتفقد الفرق مرونتها.","why":"المشكلة المعتادة هي العكس؛ فبلا نواة تتباعد المكوّنات."},{"text":"يصبح إيقاع الإصدارات أسرع من قدرة الفرق على استيعابه.","why":"بلا ملّاك متفرّغين تميل الإصدارات إلى التوقّف لا إلى التسارع."},{"text":"تتعثّر المساهمات أو تتعارض، لأن أحدًا لا يملك المراجعات والإصدارات والاتجاه العام.","why":"صحيح. حين يملك الجميعُ النظامَ بدوام جزئي، تخسر صيانته أمام كل موعد تسليم للمنتجات."},{"text":"يتوقّف المصمّمون عن استخدام مكتبات Figma.","why":"استخدام الأدوات لا يحرّكه نموذج الفريق؛ بل تحرّكه الملكية والجودة."}],"answer":2}],"exercise":{"kind":"choice","multiple":false,"options":["grow-core","hybrid","dissolve","freeze"],"correct":["hybrid"],"title":"اختر نموذج الفريق التالي","prompt":"<p>السنة الثانية في Northwind. الـ tokens و14 مكوّنًا أساسيًا مستقرّة. لدى فريق النواة المكوّن من خمسة أشخاص backlog من طلبات المكوّنات يمتدّ تسعة أسابيع، وقد بنت ثلاث فرق منتجات منتقي تاريخ متينًا كلٌّ بمفردها. تسألك الإدارة ما الذي يجب أن يتغيّر. اختر أفضل خطوة.</p>\n","hints":["فريق النواة صار الآن عنق الزجاجة، وفرق المنتجات أثبتت أنها تستطيع بناء مكوّنات جيدة.","ابحث عن الخيار الذي يُبقي شخصًا مسؤولًا عن الجودة ويضيف قدرة في الوقت نفسه."],"explanation":"<p>هذه هي اللحظة الكلاسيكية للانتقال من النموذج المركزي إلى الهجين. تحتفظ النواة بملكية الـ tokens والمراجعات والتوثيق والإصدارات، وهذا يحمي الجودة والتماسك. وتضيف فرق المنتجات قدرة بالمساهمة عبر عملية محدّدة، فيصبح أفضل منتقيات التاريخ الثلاثة نسخة النظام الرسمية بدل أن يُبنى منتقٍ رابع.</p>\n","checkLabels":{},"optionText":{"grow-core":{"text":"ضاعف فريق النواة ليبني كل مكوّن مطلوب بنفسه.","why":"زيادة الأشخاص تقصّر الطابور لفترة قصيرة، لكن الفريق المركزي يظلّ عاجزًا عن مجاراة سياق 40 فريق منتج، ونادرًا ما يتضاعف عدد الموظفين بمجرّد الطلب."},"hybrid":{"text":"أبقِ النواة مسؤولة عن الـ tokens والمراجعات والإصدارات، وافتح عملية مساهمة لتتمكّن فرق المنتجات من رفع مكوّنات مثل منتقي التاريخ إلى النظام.","why":"صحيح. يضيف قدرة حيث توجد المعرفة أصلًا، بينما تحفظ النواة تماسك النظام."},"dissolve":{"text":"انقل مهندسي النواة إلى فرق المنتجات، ودع الجميع يساهم في النظام بدوام جزئي.","why":"هذا يكرّر فشل 2021: بلا ملّاك متفرّغين تخسر المراجعات والإصدارات أمام مواعيد تسليم المنتجات."},"freeze":{"text":"جمّد طلبات المكوّنات الجديدة لمدة عام حتى تصقل النواة ما هو موجود.","why":"ستواصل الفرق بناء ما تحتاجه على أي حال، فينتج التجميد مزيدًا من المكوّنات المنفردة وتبنّيًا أقل."}}},"words":617,"readMinutes":4}