دليل المطور لتصميم النظم
للكاتب دومنيك نجوين /المصدر انفجن
ملاحظة من المؤلف: يسرني أن أعرض Design Systems for Developers ، وهو دليل مجاني من تسعة فصول حول بناء وصيانة أنظمة التصميم مع Storybook. تعلم التقنيات والأدوات الجاهزة للإنتاج أثناء إنشاء نظام تصميم من البداية. اتبع جنبا إلى جنب مع ارتكاب الكود الحقيقي.
من المحتمل أنك سمعت عن أنظمة التصميم. كيف لا تستطيع؟ من شركات البرمجيات الكبيرة إلى الشركات الناشئة المتواضعة ، تدرك الفرق عبر طيف نضج التصميم فائدة أنماط واجهة المستخدم القابلة لإعادة الاستخدام.
ومع ذلك ، في كل مكان أصبحت أنظمة التصميم ، عندما تبحث عن أدلة تكتيكية لبناء عليها ، شعرت بخيبة أمل لعدم وجود خيارات. Tom (مؤلف مشارك) Design Systems for Developers) وقمت مؤخرًا ببناء نظام تصميم خاص بنا لما يزيد عن 750 من المساهمين العالميين في المصادر المفتوحة – وعند التخطيط للهندسة الفنية ، كنا في حيرة للحصول على معلومات حول كيفية تحقيق ذلك.
Design Systems for Developers هو دليل Tom وتمنيت لو كتبنا للمطورين المحترفين حول كيفية هندسة نظام تصميم من البداية وبناءً على البحث في فرق الواجهة الأمامية. يعد هذا الكتاب نتيجة طبيعية لشغفنا بأنظمة التصميم ، والتي قمنا أيضًا بتوجيهها إلى عملنا على Storybook ، وهي أداة مفتوحة المصدر لتطوير أنظمة التصميم المستخدمة في Twitter و Slack و Salesforce.
دعنا ندخل بعض النقاط البارزة في الكتاب ، بما في ذلك قيمة نظام التصميم وما إذا كان الاستثمار منطقيًا بالنسبة لفريقك.
لماذا بناء نظام التصميم الآن؟
أنظمة التصميم ليست للجميع ولكل فريق. أنها تساعد الفرق على توسيع نطاق أنماط واجهة المستخدم بكفاءة ، ولكنها تتطلب استثمارات مستمرة لتحقيق أي قيمة. بالنسبة للفرق الصغيرة التي تصنع منتجات ذات نطاق ضيق ، يمكن أن تتطلب طاقة أكثر مما تستحق.
تكون أنظمة التصميم أكثر إنتاجية عند استخدامها في العديد من المشاريع ومع فريق صيانة متخصص. يتيح لك التركيز على التبني على نطاق واسع والاستثمار في البنية التحتية جني ثمار تكلفة الإعداد الأولي.
توزيع مكونات واجهة المستخدم في نظام التصميم
أنظمة التصميم لديها بنية تحتية مماثلة
ألق نظرة على أنظمة التصميم الأكثر شهرة من Shopify و Airbnb و Microsoft و IBM و GitHub. ستجد في كل واحدة قيودًا وتكتيكات وأهدافًا متفاوتة ، مما يجعل من الصعب على المطور العادي تمييز أفضل الممارسات.
تعرف على كيفية قيام Apartments.com بتصميم نظام التصميم الخاص بهم باستخدام مدير نظام تصميم InVision.
لقد لاحظنا أنا و توم سير العمل في الواجهة الأمامية من مجتمع Storybook الهائل الذي يضم أكثر من 20.000 مشروع جيثب. نظرًا لأن أنظمة التصميم متنوعة للغاية ، فقد اعتقدت أنه سيكون هناك الكثير من الممارسات المتعارضة – لكنني فوجئت بسرور بإيجاد معظم أنظمة التصميم التي تعتمد على مجموعة مماثلة من أدوات الواجهة الأمامية مثل خدمة تكامل مستمرة ومدير حزمة ومستكشف مكون .
أهمية البنية التحتية الأمامية
تتضمن المهمة اليومية لمطور نظام التصميم بناء مكونات واجهة المستخدم وكتابة وثائق الاستخدام والعمل مع أصحاب المصلحة المنتشرين عبر المؤسسة.
العمل لا ينتهي هناك. تتضمن المهام الإضافية الحفاظ على بيئة تطوير محلية ، وإنشاء موقع ثابت ، ونشر هذا الموقع ، والاختبار ، وإدارة الإصدار … والقائمة تطول.
تبسيط صيانة نظام التصميم الخاص بك مع مدير نظام تصميم InVision.
يمكن للفرق أن تتعثر بمهام الصيانة الذهنية بحيث لا يمكنها التركيز على تطوير مكونات واجهة المستخدم والمشاركة مع أصحاب المصلحة. لقد وجدنا أن أنظمة التصميم الناجحة مبنية على بنية تحتية أمامية موثوقة تعطي الأولوية للاتصالات ، والأتمتة ، وسير عمل الفوج.
تقليل حمل الاتصالات
تحتوي أنظمة التصميم على العديد من أصحاب المصلحة: المصممون والمطورون وتطبيقات العملاء والمستخدمون النهائيون. من الصعب الاحتفاظ بمجموعة من هذا الحجم منشغلة بأنماط واجهة المستخدم – لا تمانع في التوفيق. هذا هو السبب في أن التقنيات التي تساعد الناس على التوصل إلى توافق في الآراء بسرعة مهمة.
تجنب الغموض
المكونات هي لبنات بناء أنظمة التصميم. قم بفهرسة كل مكون بحيث يمكن اكتشافه باستخدام Storybook ، ثم قم بتوضيح حالات واجهة المستخدم المدعومة لكل مكون (على سبيل المثال ، الابتدائي والثانوي والثالث) لمنع الغموض حول كيفية استخدام مكون.
على سبيل المثال ، يوجد هنا مكون “Histogram” ، وهو شيء قد تجده في Google Analytics أو Mixpanel أو Chartbeat. هناك ثلاث حالات معتمدة: افتراضي ، فارغ ، وتطبيع. يمكنك تجنب الغموض عن طريق تسجيل كل ولاية كـ “قصة” في Storybook.
عندما يزور زملائك Storybook ، يمكنهم على الفور معرفة كيفية استخدام المكون.
التعاون في كثير من الأحيان
تبسيط جمع التعليقات عن طريق النشر المتكرر للأعمال الجارية إلى السحابة. يمكن لفريقك مراجعة تنفيذ واجهة المستخدم الحقيقية دون لمس الكود أو بيئة التطوير.
غالبًا ما تواجه فرق تصميم النظام تحديات تطوير واجهة مستخدم غير متوقعة تتراوح من المراوغات في التصميم إلى الخصائص المميزة لتخطيط الويب. زيادة الاتصالات يجعل من الأسهل بالطبع تصحيح ومنع إعادة صياغة باهظة الثمن.
أتمتة العمل اليدوي
فرق أتمتة التكرار اليدوي مهام تافهة لبناء المزيد مع أقل وإنقاذ أنفسهم من العمل الذهول.
اختبار الأشياء الصحيحة
نظرًا لأن أنظمة التصميم تعتمد على العديد من التطبيقات ، فإن أخطاء واجهة المستخدم البسيطة يمكن أن تتساقط في كوارث على مستوى المنظمة. تساعدك الاختبارات المرئية على اكتشاف أخطاء واجهة مستخدم غير مقصودة عن طريق مقارنة لقطات من المكونات بالإصدارات السابقة (مثل Chromatic). تقوم اختبارات الوحدة بالتحقق من صحة السلوك الدقيق لضمان وظيفة واجهة المستخدم (على سبيل المثال ، Jest).
توليد الوثائق
يوافق الجميع على أن الوثائق مهمة ، ولكنها غالبًا ما تكون الأولوية الأخيرة عند إنشاء نظام تصميم. لحسن الحظ ، فإن الأدوات مثل Storybook Docs تقوم تلقائيًا بإنشاء الوثائق بناءً على كود المكون. تبدو العملية كما يلي:
توفر هذه الوثائق السهلة للمطورين البراغماتيين “مستندات دنيا قابلة للحياة” مجانًا ، بالإضافة إلى حرية التخصيص.
دمج سير العمل
تؤثر طريقة عمل الأدوات معًا بشكل كبير على تجربة المستخدم لأصحاب المصلحة. عند القيام بعمل جيد ، تكون الفرق حرة في أن تكون منتجة دون التعثر في التنقل بين الأدوات.
التكامل المستمر
تتيح لك أدوات التكامل المستمر كتابة مهام مثل الاختبار والتحليل والنشر كلما دفعت رمزًا (مثل CircleCI). استخدم هذه التقنية لتنسيق صيانة نظام التصميم المستمر. فرق توفير الوقت وتجنب ضمان الجودة اليدوي الشاق.
توزيع بسلاسة
يتم شحن أنظمة التصميم عبر مدير الحزم مثل NPM. يمكنك تمكين فريقك من شحن تحديثات منتظمة من خلال الدمج مع أدوات إدارة الإصدار المفتوح المصدر مثل Auto. يتيح ذلك للناس نشر تحديثات نظام التصميم دون لمس سطر الأوامر (أي في GitHub).
على مدار عمر نظام التصميم الخاص بك ، ستشحن إصدارات حزم لا تعد ولا تحصى. تجربة تطوير صغيرة تقوم بتعديل مجمع سير العمل المشترك بمرور الوقت لتحقيق وفورات كبيرة في الوقت.
اقرأ الدليل
بحثنا في أنظمة تصميم رائدة للكشف عن كيفية بنائها. يمكن للمطورين الفرديين إعداد الأدوات نفسها بأنفسهم اليوم. تعرّف على كيفية قراءة دليلنا المكون من تسعة فصول والذي يسير عبر إنشاء البنية التحتية للإنتاج باستخدام نماذج الكود.
قراءة أنظمة التصميم للمطورين.
نلقي نظرة خاطفة على جدول المحتويات:
- مقدمة: دليل لأحدث أدوات الإنتاج الجاهزة لأنظمة التصميم
- العمارة: كيفية استخراج نظام التصميم من مكتبات المكونات
- Build: قم بإعداد Storybook لإنشاء مكونات نظام تصميم الكتالوج وفهرستها
- مراجعة: التعاون على أنظمة التصميم مع التكامل المستمر والمراجعة البصرية
- الاختبار: كيفية اختبار مظهر نظام التصميم والوظائف وإمكانية الوصول
- المستند: اعتماد نظام تصميم القيادة مع الوثائق
- التوزيع: تعرف على حزم واستيراد نظام التصميم الخاص بك إلى تطبيقات أخرى
- سير العمل: نظرة عامة على سير عمل نظام التصميم للمطورين الأمامي
- الخلاصة: توفر أنظمة التصميم المزدهرة الوقت وتزيد الإنتاجية
للكاتب دومنيك نجوين /المصدر انفجن
