ما المقصود بكل منهما
مجموعة عناصر الواجهة تجمع قطع الواجهة في أداة تصميم: الأزرار، وحقول النماذج، والبطاقات، والأيقونات، والألوان، وأنماط الخطوط. يركّب منها المصممون الشاشات فتأتي متطابقة. وهي تبقى في ملف التصميم ولا تتجاوزه.
أما نظام التصميم فهو هذه المجموعة وكل ما يلزم ليبقى التصميم والمنتج متفقين مع مرور الوقت. فالمكونات نفسها موجودة في الشيفرة، والقيم المشتركة، كالألوان والمسافات، تُعرَّف مرة واحدة ويستخدمها التصميم والتطوير معاً. وهناك إرشادات مكتوبة تبيّن متى تُستخدم كل قطعة، وشخص أو فريق محدد يقرر كيف تتغير.
الخياران في نظرة سريعة
| مجموعة عناصر الواجهة | نظام التصميم | |
|---|---|---|
| ما يتضمنه | مكونات وأنماط في ملف تصميم | مكونات تصميم، ومكونات مبرمجة، وقيم مشتركة، وإرشادات، وآلية للتغيير |
| من يستخدمه | المصممون | المصممون والمطورون وكتّاب المحتوى والمختبِرون |
| ما يحافظ على تناسقه | التصاميم | التصاميم والمنتج الذي يصل إلى المستخدم |
| حين يتغير شيء | يُحدَّث الملف، وتُعدَّل الشيفرة يدوياً، شاشةً بعد شاشة | يُحدَّث المكوّن مرة واحدة، فتتبعه كل شاشة تستخدمه |
| إمكانية الوصول | تتوقف على تنفيذ كل شاشة | مدمجة في المكونات، وتنتقل منها إلى كل مكان |
| المسؤول | من أنشأ الملف | شخص أو فريق محدد، بوقت مخصص لذلك |
| التكلفة | منخفضة: أيام لتجميعها أو تكييفها | كبيرة في البناء، ومستمرة في الصيانة |
| يؤتي ثماره حين | فريق واحد، ومنتج واحد، وتسليم قريب | عدة فرق أو منتجات، أو عمر طويل للمنتج |
متى يناسبك كل خيار
تكفي مجموعة عناصر الواجهة حين
- يصمم فريق صغير واحد منتجاً واحداً ويبنيه
- تعمل على نسخة أولى والسرعة أهم ما يعنيك
- يحمل الأشخاص أنفسهم الأعراف المتفق عليها في أذهانهم
- يكون في الواجهة عدد محدود من أنواع الشاشات
- لا يمكن تفريغ أحد لصيانة نظام
يؤتي نظام التصميم ثماره حين
- تعمل عدة فرق أو وكالات على المنتج نفسه
- تدير أكثر من منتج تحت علامة تجارية واحدة
- لم يعد المنتج المبني يطابق التصاميم
- بُرمج الزر نفسه أو النموذج نفسه عدة مرات، بطرق مختلفة
- يجب تطبيق إمكانية الوصول أو الهوية الجديدة في كل مكان دفعة واحدة
ما يضيفه النظام إلى المجموعة
- القيم المشتركة. الألوان وأحجام الخطوط والمسافات وانحناءات الزوايا تُسمّى مرة واحدة، وتشير إليها ملفات التصميم والشيفرة معاً، فيصبح تغيير الهوية تعديلاً واحداً.
- المكونات المبرمجة. لكل عنصر في المجموعة نظير مُختبَر في الشيفرة، بالأسماء والخيارات نفسها.
- الإرشادات. ملاحظات قصيرة عن متى يُستخدم المكوّن، ومتى لا يُستخدم، وكيف يتصرف على الشاشات الصغيرة ومع التقنيات المساعدة.
- إدارة الإصدارات. تصدر التغييرات في إصدارات مرقّمة، فتعرف الفرق ما تغيّر وتعتمده عن قصد.
- المسؤول. شخص يراجع الطلبات، ويقرر ما يدخل النظام، ويسحب ما لم يعد مستخدماً.
والبند الأخير هو أكثر ما يغيب. فالنظام الذي لا مسؤول عنه يعود مجموعة عناصر خلال عام، لكنها أكبر وأقل موثوقية.
كيف تنمو المجموعة لتصبح نظاماً
قليل من الفرق ينبغي أن يبدأ بنظام كامل. فالطريق العملي أن تتركه ينمو من المنتج.
- 01
ابدأ بمجموعة عناصر
وابنِ منها النسخة الأولى من المنتج.
- 02
سمِّ القيم المشتركة
انقل الألوان والخطوط والمسافات إلى متغيرات يستخدمها التصميم والشيفرة معاً.
- 03
برمج المكونات مرة واحدة
كلما تكررت الشاشات، استخرج الأزرار وحقول الإدخال والتخطيطات إلى مكتبة مشتركة.
- 04
دوّن القرارات
فقرة لكل مكوّن، تضيفها حين يتكرر السؤال نفسه مرتين.
- 05
عيّن مسؤولاً
حين يأتي فريق ثانٍ أو منتج ثانٍ، أسند هذه المهمة إلى شخص.
ويمكن لمكتبات المكونات مفتوحة المصدر أن توفر الأساس البرمجي، بعد تنسيقه على هوية علامتك، فتوفّر عليك بناء كل عنصر من الصفر. وتشرح صفحة تطوير أنظمة التصميم طريقتنا في ذلك.
مثال تطبيقي
شركة ناشئة وشركة تأمين
كلتا الشركتين افتراضية.
- الشركة الناشئةثلاثة أشخاص يبنون النسخة الأولى من منتج لجدولة المواعيد: مصمم واحد، ومطوران، وتطبيق ويب واحد.
- قرارهامجموعة عناصر واجهة، مع تعريف الألوان والمسافات في متغيرات من البداية. فالنظام سيكلف أكثر من الارتباك الذي يمنعه.
- شركة التأمينتدير بوابة للعملاء، وبوابة للوسطاء، وتطبيق جوال، يبنيها فريقان داخليان ووكالة. ولكل منها أزرارها ونماذجها ورسائل الخطأ الخاصة بها.
- قرارهانظام تصميم يتولاه فريق صغير. فقد كان مخططاً لتغيير الهوية ولبرنامج لإمكانية الوصول، وكل منهما كان سيُنفَّذ ثلاث مرات لولا النظام.
تناسق الشركة الناشئة محفوظ في رؤوس ثلاثة أشخاص، أما تناسق شركة التأمين فلا بد أن يُحفظ في شيء يستطيع الجميع استخدامه.
قائمة تحقق تساعدك على القرار
ضع علامة على ما ينطبق. إن اقتصرت العلامات على البنود الثلاثة الأولى، فابقَ مع مجموعة العناصر. وكل علامة في البنود الخمسة الأخيرة تقوّي الحجة للنظام.
مجموعة عناصر أم نظام تصميم
0 من 8 منجزةماذا تفعل الآن
افتح منتجك واحسب عدد الأزرار المختلفة فيه. فإن طابق العدد ما صممته، فالمجموعة تخدمك جيداً. وإن بلغ أضعاف ذلك، فأنت تدفع ثمن غياب النظام في كل إصدار. أخبرنا بما وجدته، وسنقترح عليك أصغر خطوة تعالج الأمر.
أسئلة شائعة
هل يمكننا شراء نظام تصميم بدلاً من بنائه؟
يمكنك أن تبدأ من نظام جاهز. فالأنظمة ومكتبات المكونات مفتوحة المصدر توفر مكونات مبرمجة مُختبَرة جيداً وتراعي إمكانية الوصول، ولكثير منها ملفات تصميم مطابقة. وتكييف إحداها مع علامتك أسرع بكثير من البناء من الصفر. أما ما لا يمكنك شراؤه فهو ما يجعله نظامك: قرارات سلوك منتجك، والمسؤولية التي تبقي النظام محدَّثاً.
هل نظام التصميم للشركات الكبيرة فقط؟
هو للمنتجات التي يعمل عليها أكثر من فريق، أو لها أكثر من واجهة، أو ينتظرها عمر طويل، وهذا يعني الشركات الكبيرة غالباً لا دائماً. فالشركة الصغيرة التي يبني أشخاص مختلفون تطبيق الويب وتطبيق الجوال لديها قد تستفيد مبكراً، والشركة الكبيرة ذات المنتج الواحد البسيط قد لا تحتاج إليه. احسب الفرق والواجهات، لا عدد الموظفين.
من ينبغي أن يكون مسؤولاً عن نظام التصميم؟
شخص له سلطة على التصميم وعلى شيفرة الواجهة الأمامية معاً، وله وقت مخصص لهذه المهمة. وفي المؤسسات الصغيرة قد يتقاسمها مصمم ومطوّر، أما في الكبيرة فهي عمل فريق متفرغ. ولا تنجح مسؤولية لجنة تجتمع بين حين وآخر، لأن الطلبات تنتظر، والفرق تتجاوز النظام.
كيف نعرف أن مجموعة عناصر الواجهة لم تعد تكفينا؟
العلامات عملية: يسأل المطورون أي المكونات المتشابهة هو الصحيح، ويستغرق تغيير لون أياماً لأنه مكتوب مباشرة في أماكن كثيرة، وتختلف الشاشات الجديدة قليلاً عن القديمة، ويتكرر إصلاح إمكانية الوصول شاشةً بعد شاشة. وحين ينطبق اثنان أو ثلاثة من هذه، يتجاوز الوقت الضائع كل شهر ما سيكلفه النظام.
